/**
 * Motta Multi-Function Product Cart — frontend styles.
 *
 * Everything themable is a custom property so Elementor style controls (and
 * the Motta theme) can override without fighting specificity.
 */

.mmc-wrap {
	--mmc-cols: 4;
	--mmc-gap: 24px;
	--mmc-radius: 4px;
	--mmc-card-bg: transparent;
	--mmc-accent: #ec2f4b;
	--mmc-muted: #767676;
	--mmc-line: #e5e5e5;
	--mmc-btn-color: #222;
	--mmc-btn-bg: transparent;
	--mmc-btn-border: #d8d8d8;
	--mmc-nav-color: #222;
	--mmc-nav-bg: #fff;
	--mmc-nav-size: 44px;
	--mmc-dot-active: #222;

	position: relative;
	box-sizing: border-box;
}

.mmc-wrap *,
.mmc-wrap *::before,
.mmc-wrap *::after {
	box-sizing: border-box;
}

/* Themes routinely style bare buttons and number inputs site-wide - full
   width, borders, uppercase, fixed heights. Neutralise that inside the widget
   so the controls below can size themselves predictably. Every component rule
   that follows is more specific than this reset, so it still wins. */
.mmc-wrap button {
	width: auto;
	min-width: 0;
	max-width: none;
	height: auto;
	min-height: 0;
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.mmc-wrap input[type="number"] {
	min-width: 0;
	min-height: 0;
	margin: 0;
	box-shadow: none;
}

/* ---------------------------------------------------------------- Layouts */

.mmc-track {
	display: grid;
	gap: var(--mmc-gap);
}

.mmc-layout-grid .mmc-track {
	grid-template-columns: repeat(var(--mmc-cols), minmax(0, 1fr));
}

.mmc-layout-list .mmc-track {
	grid-template-columns: minmax(0, 1fr);
}

.mmc-layout-list .mmc-card {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: center;
	gap: 20px;
}

.mmc-layout-list .mmc-body {
	text-align: left;
}

.mmc-layout-carousel .mmc-track {
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mmc-cols) - 1) * var(--mmc-gap)) / var(--mmc-cols));
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.mmc-layout-carousel .mmc-track::-webkit-scrollbar {
	display: none;
}

.mmc-layout-carousel .mmc-item {
	scroll-snap-align: start;
}

/* Cards stretch to the tallest in the row, so prices and buttons line up
   across the row no matter how many lines each title takes. */
.mmc-item {
	display: flex;
}

.mmc-item > .mmc-card {
	width: 100%;
}

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

.mmc-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--mmc-card-bg);
	border-radius: var(--mmc-radius);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.mmc-media {
	--mmc-ratio: 1;
	--mmc-fit: cover;
	--mmc-zoom: 1;

	position: relative;
	overflow: hidden;
	border-radius: var(--mmc-radius);
	background: #f6f6f6;
}

.mmc-media-link {
	display: block;
	position: relative;
	aspect-ratio: var(--mmc-ratio);
	width: 100%;
}

/* Aspect ratio presets. --mmc-ratio also accepts a plain number, which is what
   the Custom slider writes. */
.mmc-ratio-1-1 {
	--mmc-ratio: 1 / 1;
}

.mmc-ratio-4-3 {
	--mmc-ratio: 4 / 3;
}

.mmc-ratio-3-4 {
	--mmc-ratio: 3 / 4;
}

.mmc-ratio-3-2 {
	--mmc-ratio: 3 / 2;
}

.mmc-ratio-2-3 {
	--mmc-ratio: 2 / 3;
}

.mmc-ratio-16-9 {
	--mmc-ratio: 16 / 9;
}

.mmc-ratio-9-16 {
	--mmc-ratio: 9 / 16;
}

/* Original: the image keeps its own proportions and sets the height, so it
   flows instead of being pinned inside a fixed box. Specificity has to clear
   the `.mmc-media img.mmc-img` rule below. */
.mmc-media.mmc-ratio-original .mmc-media-link {
	aspect-ratio: auto;
}

.mmc-media.mmc-ratio-original img.mmc-img-primary {
	position: relative;
	height: auto;
	object-fit: fill;
}

.mmc-media.mmc-ratio-original img.mmc-img-secondary {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
}

.mmc-media img.mmc-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: var(--mmc-fit);
	margin: 0;
	transition: opacity 0.35s ease, transform 0.5s ease;
}

.mmc-img-secondary {
	opacity: 0;
}

.mmc-card:hover .mmc-img-primary {
	transform: scale(var(--mmc-zoom));
}

.mmc-card:hover .mmc-img-secondary {
	opacity: 1;
	transform: scale(var(--mmc-zoom));
}

/* ----------------------------------------------------------------- Badges */

.mmc-badges {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
	pointer-events: none;
}

.mmc-badge {
	display: inline-block;
	padding: 4px 10px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--mmc-accent);
	border-radius: 2px;
}

.mmc-badge-stock {
	background: #6b6b6b;
}

.mmc-badge-featured {
	background: #111;
}

/* ---------------------------------------------------------- Icon actions */

.mmc-actions-icons {
	--mmc-icon-color: #222;
	--mmc-icon-bg: #fff;
	--mmc-icon-size: 36px;

	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	z-index: 3;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mmc-card:hover .mmc-actions-icons,
.mmc-actions-icons:focus-within {
	opacity: 1;
	transform: none;
}

.mmc-wrap .mmc-icon-btn,
.mmc-wrap .mmc-icon-slot > a,
.mmc-wrap .mmc-icon-slot .yith-wcwl-add-button > a,
.mmc-wrap .mmc-icon-slot .compare {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--mmc-icon-size, 36px) !important;
	height: var(--mmc-icon-size, 36px) !important;
	min-height: 0 !important;
	aspect-ratio: 1;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: var(--mmc-icon-bg);
	color: var(--mmc-icon-color);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	font-size: 0;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

.mmc-wrap .mmc-icon-btn:hover,
.mmc-wrap .mmc-icon-slot > a:hover {
	background: var(--mmc-accent);
	color: #fff;
}

.mmc-icon-slot {
	flex: 0 0 auto;
	line-height: 0;
}

/* Icons drawn in CSS so the plugin ships no font or SVG sprite. */
.mmc-ico {
	display: block;
	flex: 0 0 auto;
	width: 55%;
	height: 55%;
	max-width: 20px;
	max-height: 20px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mmc-ico-eye {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M1.5 12S5 5.5 12 5.5 22.5 12 22.5 12 19 18.5 12 18.5 1.5 12 1.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E");
}

.mmc-ico-heart {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20.8 5.9a5 5 0 00-7.1 0L12 7.6l-1.7-1.7a5 5 0 10-7.1 7.1L12 21.8l8.8-8.8a5 5 0 000-7.1z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M20.8 5.9a5 5 0 00-7.1 0L12 7.6l-1.7-1.7a5 5 0 10-7.1 7.1L12 21.8l8.8-8.8a5 5 0 000-7.1z'/%3E%3C/svg%3E");
}

.mmc-ico-compare {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 7h11l-3-3m3 3l-3 3M20 17H9l3-3m-3 3l3 3'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M4 7h11l-3-3m3 3l-3 3M20 17H9l3-3m-3 3l3 3'/%3E%3C/svg%3E");
}

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

.mmc-body {
	/* The Elementor alignment control sets both of these together, so flex
	   rows (rating, swatches, buttons) follow the text alignment. */
	--mmc-justify: center;

	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding-top: 14px;
	text-align: center;
}

.mmc-actions-body {
	margin-top: auto;
}

.mmc-layout-list .mmc-body {
	--mmc-justify: flex-start;
}

.mmc-cats {
	font-size: 12px;
	color: var(--mmc-muted);
}

.mmc-cats a {
	color: inherit;
	text-decoration: none;
}

.mmc-title {
	--mmc-title-lines: 2;

	margin: 0;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: var(--mmc-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mmc-title.is-clamped {
	min-height: calc(var(--mmc-title-lines, 2) * 1.5em);
}

@supports (height: 1lh) {
	.mmc-title.is-clamped {
		min-height: calc(var(--mmc-title-lines, 2) * 1lh);
	}
}

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

.mmc-rating {
	display: flex;
	align-items: center;
	justify-content: var(--mmc-justify, center);
	gap: 6px;
	font-size: 12px;
	color: var(--mmc-muted);
}

.mmc-body .star-rating {
	margin: 0;
	float: none;
}

.mmc-price {
	font-size: 16px;
	font-weight: 600;
	color: #222;
}

.mmc-price del {
	margin-inline-start: 6px;
	font-weight: 400;
	opacity: 0.6;
}

.mmc-price ins {
	text-decoration: none;
	color: var(--mmc-accent);
}

/* Price arrangements -------------------------------------------------- */

.mmc-price.is-sale-first,
.mmc-price.is-original-first,
.mmc-price.is-stacked {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: var(--mmc-justify, center);
	gap: 8px;
}

.mmc-price.is-sale-first del,
.mmc-price.is-original-first del,
.mmc-price.is-stacked del {
	margin-inline-start: 0;
}

.mmc-price.is-sale-first ins {
	order: 1;
}

.mmc-price.is-sale-first del {
	order: 2;
}

.mmc-price.is-original-first del {
	order: 1;
}

.mmc-price.is-original-first ins {
	order: 2;
}

.mmc-price.is-stacked {
	flex-direction: column;
	gap: 2px;
}

.mmc-price.is-stacked del {
	order: 1;
	font-size: 0.85em;
}

.mmc-price.is-stacked ins {
	order: 2;
}

/* Highlight behind the sale price. Off by default, and switching it off also
   clears a highlight painted by the theme. */
.mmc-wrap .mmc-card .mmc-price ins,
.mmc-wrap .mmc-card .mmc-price ins .woocommerce-Price-amount,
.mmc-wrap .mmc-card .mmc-price > .woocommerce-Price-amount {
	background: none;
}

.mmc-wrap .mmc-card .mmc-price.is-highlight ins,
.mmc-wrap .mmc-card .mmc-price.is-highlight > .woocommerce-Price-amount {
	padding: 1px 6px;
	border-radius: 2px;
	background: var(--mmc-price-highlight, #fff29a);
}

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

/* -------------------------------------------------------------- Swatches */

.mmc-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: var(--mmc-justify, center);
}

.mmc-swatch {
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid var(--mmc-line);
	border-radius: 3px;
	background: #fff;
	color: #333;
	font-size: 11px;
	line-height: 1;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.mmc-swatch:hover,
.mmc-swatch.is-active {
	border-color: #222;
}

.mmc-swatch-inner {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 16px;
	border-radius: 2px;
}

.mmc-swatch-oos {
	opacity: 0.4;
	cursor: not-allowed;
}

.mmc-swatch-more {
	align-self: center;
	font-size: 11px;
	color: var(--mmc-muted);
}

/* ------------------------------------------------------- Variation bar */

/* One bar per attribute when several are shown (size, then weight). */
.mmc-varbars {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.mmc-varbars .mmc-varbar-over + .mmc-varbar-over {
	border-top: 1px solid var(--mmc-varbar-divider);
}

.mmc-varbars .mmc-varbar-below + .mmc-varbar-below {
	margin-top: 6px;
}

.mmc-varbar {
	--mmc-varbar-color: #ffffff;
	--mmc-varbar-bg: rgba(0, 0, 0, 0.55);
	--mmc-varbar-active-color: #ffffff;
	--mmc-varbar-active-bg: rgba(0, 0, 0, 0.85);
	--mmc-varbar-divider: rgba(255, 255, 255, 0.25);

	display: flex;
	align-items: stretch;
	width: 100%;
	background: var(--mmc-varbar-bg);
	color: var(--mmc-varbar-color);
	overflow: hidden;
}

.mmc-varbar-below {
	border-radius: 3px;
}

.mmc-varbar-item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 9px 6px;
	border: 0;
	border-inline-start: 1px solid var(--mmc-varbar-divider);
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.3;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mmc-varbar-item:first-child {
	border-inline-start: 0;
}

button.mmc-varbar-item {
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

button.mmc-varbar-item:hover,
.mmc-varbar-item.is-active {
	background: var(--mmc-varbar-active-bg);
	color: var(--mmc-varbar-active-color);
}

.mmc-varbar-oos {
	opacity: 0.45;
	cursor: not-allowed;
}

.mmc-varbar-more {
	flex: 0 0 auto;
	padding-inline: 10px;
	opacity: 0.8;
}

/* ------------------------------------------------------------ Stock & time */

.mmc-stock-bar {
	height: 6px;
	border-radius: 3px;
	background: #eee;
	overflow: hidden;
}

.mmc-stock-bar span {
	display: block;
	height: 100%;
	background: var(--mmc-accent);
}

.mmc-stock-meta {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-size: 11px;
	color: var(--mmc-muted);
}

/* Everything that sits at the foot of the image stacks in one column, so the
   countdown, the slide-up actions and the variation bar never overlap. */
.mmc-media-foot {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-bottom: 10px;
}

.mmc-media-foot.is-flush {
	padding-bottom: 0;
}

.mmc-media-foot > .mmc-countdown,
.mmc-media-foot > .mmc-actions-media {
	margin-inline: 10px;
}

.mmc-countdown:empty,
.mmc-actions:empty,
.mmc-media-foot:empty {
	display: none !important;
}

.mmc-countdown {
	display: flex;
	justify-content: center;
	gap: 6px;
	padding: 6px 4px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.92);
	font-size: 12px;
}

.mmc-countdown span {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 32px;
	line-height: 1.2;
}

.mmc-countdown b {
	font-size: 14px;
}

.mmc-countdown i {
	font-style: normal;
	font-size: 10px;
	color: var(--mmc-muted);
}

/* --------------------------------------------------------------- Actions */

.mmc-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 4px;
}

.mmc-actions-body {
	justify-content: var(--mmc-justify, center);
	flex-wrap: wrap;
}

.mmc-wrap .mmc-card .mmc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 9px 20px;
	border: 1px solid var(--mmc-btn-border);
	border-radius: 3px;
	background: var(--mmc-btn-bg);
	color: var(--mmc-btn-color);
	font-size: 13px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mmc-wrap .mmc-card .mmc-btn:hover {
	border-color: #222;
}

.mmc-wrap .mmc-card .mmc-btn-buynow {
	--mmc-btn-bg: #222;
	--mmc-btn-color: #fff;
	--mmc-btn-border: #222;
}

/* Applied by the "Full width buttons" style control. */
.mmc-actions.is-block {
	flex-direction: column;
	align-items: stretch;
}

.mmc-actions.is-block .mmc-btn,
.mmc-actions.is-block .mmc-qty {
	width: 100% !important;
}

.mmc-actions.is-block .mmc-qty {
	justify-content: space-between;
}

.mmc-btn-disabled,
.mmc-btn[disabled] {
	opacity: 0.55;
	pointer-events: none;
}

.mmc-spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mmc-spin 0.7s linear infinite;
}

.mmc-btn.is-loading .mmc-spinner {
	display: block;
}

.mmc-btn.is-loading {
	pointer-events: none;
	opacity: 0.75;
}

@keyframes mmc-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Quantity stepper */

.mmc-wrap .mmc-qty {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: stretch;
	height: 40px;
	border: 1px solid var(--mmc-btn-border);
	border-radius: 3px;
	background: transparent;
	overflow: hidden;
}

.mmc-wrap .mmc-qty-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: auto;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}

.mmc-wrap .mmc-qty-btn:hover {
	background: rgba(0, 0, 0, 0.05);
}

.mmc-wrap .mmc-qty-input {
	flex: 1 1 auto;
	width: 44px !important;
	min-width: 34px;
	height: auto !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-size: 13px;
	line-height: 1;
	color: inherit;
	-moz-appearance: textfield;
	appearance: textfield;
}

.mmc-wrap .mmc-qty-input:focus {
	outline: 0;
}

.mmc-qty-input::-webkit-outer-spin-button,
.mmc-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Slide-up actions over the image */

.mmc-actions-media {
	--mmc-slideup-bg: transparent;

	/* Redefined for this scope only: a control floating over a photograph
	   needs a solid surface. The button style controls set the property on the
	   button itself, so they still override this. */
	--mmc-btn-bg: #ffffff;
	--mmc-btn-border: #ffffff;

	margin-top: 0;
	padding: var(--mmc-slideup-padding, 0);
	border-radius: 3px;
	background: var(--mmc-slideup-bg);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mmc-wrap .mmc-actions-media .mmc-btn {
	flex: 1 1 auto;
}

.mmc-wrap .mmc-actions-media .mmc-qty {
	background-color: var(--mmc-btn-bg);
}

/* Revealed on hover, below the price, with its space reserved so the card
   height never changes. */
.mmc-actions-reveal {
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mmc-card:hover .mmc-actions-reveal,
.mmc-actions-reveal:focus-within {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

@media (hover: none) {
	.mmc-actions-reveal {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

.mmc-actions-media .mmc-btn {
	flex: 1 1 auto;
	background: var(--mmc-btn-bg, #fff);
}

.mmc-card:hover .mmc-actions-media,
.mmc-actions-media:focus-within {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.mmc-actions-icons,
	.mmc-actions-media {
		opacity: 1;
		transform: none;
	}
}

/* Inline feedback */

.mmc-feedback {
	font-size: 12px;
	line-height: 1.5;
	color: #2f7a3f;
}

.mmc-feedback:empty {
	display: none;
}

.mmc-feedback.is-error {
	color: var(--mmc-accent);
}

.mmc-feedback a {
	color: inherit;
	text-decoration: underline;
}

/* ------------------------------------------------------ Carousel controls */

.mmc-wrap .mmc-nav {
	position: absolute;
	top: 40%;
	z-index: 5;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mmc-nav-size) !important;
	height: var(--mmc-nav-size) !important;
	min-height: 0 !important;
	aspect-ratio: 1;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: var(--mmc-nav-bg);
	color: var(--mmc-nav-color);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.mmc-nav-prev {
	inset-inline-start: calc(var(--mmc-nav-size) / -2);
}

.mmc-nav-next {
	inset-inline-end: calc(var(--mmc-nav-size) / -2);
}

/* A masked chevron rather than rotated borders: it cannot be distorted by a
   theme that resizes the button. */
.mmc-wrap .mmc-nav::before {
	content: "";
	flex: 0 0 auto;
	width: 38%;
	height: 38%;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4l8 8-8 8'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4l8 8-8 8'/%3E%3C/svg%3E");
}

.mmc-wrap .mmc-nav-prev::before {
	transform: scaleX(-1);
}

.mmc-nav[disabled] {
	opacity: 0.35;
	cursor: default;
}

.mmc-dots {
	--mmc-dot-size: 8px;

	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 18px;
}

.mmc-wrap .mmc-dots button {
	flex: 0 0 auto;
	width: var(--mmc-dot-size, 8px) !important;
	height: var(--mmc-dot-size, 8px) !important;
	min-height: 0 !important;
	aspect-ratio: 1;
	padding: 0 !important;
	border: 0;
	border-radius: 50%;
	background: #cfcfcf;
	cursor: pointer;
}

.mmc-wrap .mmc-dots button.is-active {
	background: var(--mmc-dot-active);
	transform: scale(1.25);
}

/* ------------------------------------------------------------- Quick view */

.mmc-modal {
	/* The modal is appended to <body>, outside every widget wrapper, so
	   Elementor selectors cannot reach it. Each value is a custom property
	   with a default here; the widget that opens the modal writes its own
	   values onto this element (applyModalStyle in motta-mfc.js). */
	--mmc-qv-overlay: rgba(0, 0, 0, 0.55);
	--mmc-qv-gutter: 20px;
	--mmc-qv-bg: #ffffff;
	--mmc-qv-width: 920px;
	--mmc-qv-max-height: 90vh;
	--mmc-qv-padding: 28px;
	--mmc-qv-radius: 4px;
	--mmc-qv-close-size: 36px;
	--mmc-qv-close-offset: 12px;
	--mmc-qv-close-icon: 14px;
	--mmc-qv-close-bg: #f2f2f2;
	--mmc-qv-close-color: #222222;
	--mmc-qv-close-clearance: 8px;
	--mmc-qv-summary-align: center;
	--mmc-qv-thumb-size: 64px;
	--mmc-qv-thumb-ratio: 1;
	--mmc-qv-thumb-gap: 8px;
	--mmc-qv-thumb-active: #222222;
	--mmc-qv-desc-lines: 2;
	--mmc-qv-desc-color: #767676;
	--mmc-qv-btn-max: 320px;
	--mmc-qv-btn-gap: 10px;

	/* Derived: rendered thumbnail height at the chosen ratio. */
	--mmc-qv-thumb-h: calc(var(--mmc-qv-thumb-size) / var(--mmc-qv-thumb-ratio));

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--mmc-qv-gutter);
	background: var(--mmc-qv-overlay);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.mmc-modal.is-open {
	opacity: 1;
}

.mmc-modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(var(--mmc-qv-width), 100%);
	max-height: var(--mmc-qv-max-height);
	/* The dialog never scrolls - its body does - so the close button stays
	   pinned to this corner and the height follows the content. */
	overflow: hidden;
	border-radius: var(--mmc-qv-radius);
	background: var(--mmc-qv-bg);
}

.mmc-modal-body {
	min-height: 0;
	padding: var(--mmc-qv-padding);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.mmc-modal .mmc-modal-close {
	position: absolute;
	top: var(--mmc-qv-close-offset);
	inset-inline-end: var(--mmc-qv-close-offset);
	z-index: 5;
	display: block;
	flex: none;
	box-sizing: border-box;
	/* Every sizing property is pinned. min-width was the one left open, and a
	   theme `button { min-width }` beats `width` - that made the pill. */
	width: var(--mmc-qv-close-size) !important;
	min-width: var(--mmc-qv-close-size) !important;
	max-width: var(--mmc-qv-close-size) !important;
	height: var(--mmc-qv-close-size) !important;
	min-height: var(--mmc-qv-close-size) !important;
	max-height: var(--mmc-qv-close-size) !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--mmc-qv-close-bg) !important;
	box-shadow: none !important;
	color: var(--mmc-qv-close-color) !important;
	font-size: 0;
	line-height: 0;
	cursor: pointer;
}

/* The cross is drawn, not typed: a glyph sits wherever the font's metrics
   put it, two bars sit on the exact centre. */
.mmc-modal .mmc-modal-close::before,
.mmc-modal .mmc-modal-close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--mmc-qv-close-icon);
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

.mmc-modal .mmc-modal-close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.mmc-modal .mmc-modal-close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.mmc-modal-loading {
	padding: 40px;
	text-align: center;
	color: var(--mmc-muted);
}

.mmc-qv {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
}

.mmc-qv-media {
	display: flex;
	flex-direction: column;
	gap: var(--mmc-qv-thumb-gap);
	min-width: 0;
}

.mmc-qv-main {
	--mmc-qv-thumbs-space: 0px;

	line-height: 0;
	text-align: center;
}

.mmc-qv-media.has-thumbs .mmc-qv-main {
	--mmc-qv-thumbs-space: calc(var(--mmc-qv-thumb-h) + var(--mmc-qv-thumb-gap));
}

/* Image and strip must both fit without scrolling: the image may use the
   dialog height, minus its padding, minus the strip below it. */
.mmc-qv-main img {
	display: inline-block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(var(--mmc-qv-max-height) - var(--mmc-qv-padding) * 2 - var(--mmc-qv-thumbs-space));
	border-radius: 3px;
	object-fit: contain;
}

/* Clear the close button, which sits over this corner on desktop. */
.mmc-qv-summary {
	align-self: var(--mmc-qv-summary-align);
	min-width: 0;
	padding-inline-end: max(0px, calc(var(--mmc-qv-close-offset) + var(--mmc-qv-close-size) - var(--mmc-qv-padding) + var(--mmc-qv-close-clearance)));
}

.mmc-qv-form form.cart,
.mmc-qv-form .cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mmc-qv-btn-gap);
	margin: 0;
}

.mmc-qv-form .quantity,
.mmc-qv-form .button,
.mmc-qv-form button {
	margin: 0;
	float: none;
}

.mmc-qv-form .variations {
	width: 100%;
}

.mmc-qv-form .variations td,
.mmc-qv-form .variations th {
	padding: 4px 0;
}

.mmc-qv-thumbs {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--mmc-qv-thumb-gap);
	margin: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

/* Thumbnails are buttons too, so the same theme min-width stretched them.
   Pinned the same way as the close button. */
.mmc-modal .mmc-qv-thumb {
	position: relative;
	flex: 0 0 var(--mmc-qv-thumb-size);
	box-sizing: border-box;
	width: var(--mmc-qv-thumb-size) !important;
	min-width: var(--mmc-qv-thumb-size) !important;
	max-width: var(--mmc-qv-thumb-size) !important;
	height: var(--mmc-qv-thumb-h) !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid transparent !important;
	border-radius: 3px;
	background: none !important;
	box-shadow: none !important;
	overflow: hidden;
	line-height: 0;
	opacity: 0.6;
	cursor: pointer;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.mmc-modal .mmc-qv-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mmc-modal .mmc-qv-thumb:hover,
.mmc-modal .mmc-qv-thumb:focus-visible,
.mmc-modal .mmc-qv-thumb.is-active {
	opacity: 1;
}

.mmc-modal .mmc-qv-thumb.is-active {
	border-color: var(--mmc-qv-thumb-active) !important;
}

.mmc-qv-title {
	margin: 0 0 10px;
	font-size: 22px;
	line-height: 1.3;
}

.mmc-qv-price {
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 600;
}

/* The clamp does the visible truncation at every breakpoint. The server
   word cap only limits the payload. Line-clamp needs a single block, which
   is why the template now outputs one <p> of plain text. */
.mmc-qv-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mmc-qv-desc-lines);
	line-clamp: var(--mmc-qv-desc-lines);
	overflow: hidden;
	margin: 0 0 16px;
	color: var(--mmc-qv-desc-color);
	line-height: 1.7;
}

.mmc-qv-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
	font-size: 13px;
	color: var(--mmc-muted);
}

.mmc-qv-more {
	display: inline-block;
	margin-top: 14px;
	font-size: 13px;
	text-decoration: underline;
}

/* -------------------------------------------------------------- Utilities */

.mmc-empty {
	padding: 24px;
	border: 1px dashed var(--mmc-line);
	border-radius: 4px;
	text-align: center;
	color: var(--mmc-muted);
}

.mmc-toast {
	--mmc-toast-bg: #222222;
	--mmc-toast-color: #ffffff;

	position: fixed;
	z-index: 100000;
	max-width: 340px;
	padding: 12px 16px;
	border-radius: 4px;
	background: var(--mmc-toast-bg);
	color: var(--mmc-toast-color);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
	font-size: 13px;
	line-height: 1.5;
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.mmc-toast-bottom-right,
.mmc-toast-bottom-left,
.mmc-toast-bottom-center {
	bottom: 20px;
	transform: translateY(10px);
}

.mmc-toast-top-right,
.mmc-toast-top-center {
	top: 20px;
	transform: translateY(-10px);
}

.mmc-toast-bottom-right,
.mmc-toast-top-right {
	inset-inline-end: 20px;
}

.mmc-toast-bottom-left {
	inset-inline-start: 20px;
}

.mmc-toast-bottom-center,
.mmc-toast-top-center {
	inset-inline-start: 50%;
	margin-inline-start: -170px;
}

.mmc-toast.is-visible {
	opacity: 1;
	transform: none;
}

.mmc-toast.is-error {
	--mmc-toast-bg: var(--mmc-accent, #ec2f4b);
}

.mmc-toast a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 480px) {
	.mmc-toast {
		max-width: none;
		inset-inline: 12px;
		margin-inline-start: 0;
	}
}

@media (max-width: 767px) {
	.mmc-qv {
		grid-template-columns: minmax(0, 1fr);
	}

	/* One column: the close button now sits over the image, not the text. */
	.mmc-qv-summary {
		padding-inline-end: 0;
	}

	/* Buttons centred, equal width, capped. Desktop keeps its row. */
	.mmc-qv-form form.cart,
	.mmc-qv-form .cart,
	.mmc-qv-form .woocommerce-variation-add-to-cart {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		width: 100%;
		max-width: var(--mmc-qv-btn-max);
		margin-inline: auto;
		gap: var(--mmc-qv-btn-gap);
	}

	.mmc-qv-form .cart > .button,
	.mmc-qv-form .cart > button,
	.mmc-qv-form .cart > a,
	.mmc-qv-form .cart > .quantity,
	.mmc-qv-form .woocommerce-variation-add-to-cart > .button,
	.mmc-qv-form .woocommerce-variation-add-to-cart > button,
	.mmc-qv-form .woocommerce-variation-add-to-cart > .quantity {
		box-sizing: border-box;
		width: 100% !important;
		min-width: 0 !important;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	.mmc-qv-form .quantity .qty {
		width: 100%;
	}

	.mmc-layout-list .mmc-card {
		grid-template-columns: 110px minmax(0, 1fr);
		gap: 14px;
	}

	.mmc-nav-prev {
		inset-inline-start: 0;
	}

	.mmc-nav-next {
		inset-inline-end: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mmc-wrap *,
	.mmc-modal,
	.mmc-toast {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.mmc-layout-carousel .mmc-track {
		scroll-behavior: auto;
	}
}