/**
 * My Custom Woo Features - storefront styles.
 *
 * Colours, radius, columns and gap come from the Design settings and are
 * printed as CSS variables on :root (see MCWF_Assets::get_css_variables()).
 *
 * Contents
 *  1. Tokens and base
 *  2. Buttons
 *  3. Product grid
 *  4. Product card
 *  5. Quantity stepper
 *  6. Cart drawer, floating cart button, cart icon
 *  7. Popup and variation picker
 *  8. Toasts
 *  9. Shop: toolbar, filters, pagination
 * 10. Wishlist
 * 11. Single product page
 * 12. Reduced motion
 * 13. Elementor widgets
 * 14. Product search
 * 15. WhatsApp and Messenger buttons
 * 16. Category slider
 * 17. Call now
 * 18. Page spacing
 */

/* -------------------------------------------------------------------------
 * 1. Tokens and base
 * ---------------------------------------------------------------------- */

:root {
	--mcwf-primary: #83b735;
	--mcwf-primary-text: #fff;
	--mcwf-buy: #333;
	--mcwf-buy-text: #fff;
	--mcwf-sale: #83b735;
	--mcwf-star: #eabe12;
	--mcwf-btn-radius: 5px;
	--mcwf-card-radius: 8px;
	--mcwf-gap: 20px;
	--mcwf-cols-d: 4;
	--mcwf-cols-t: 3;
	--mcwf-cols-m: 2;
	--mcwf-title-lines: 2;

	--mcwf-input-radius: 5px;
	--mcwf-panel-radius: 8px;
	--mcwf-badge-radius: 35px;
	--mcwf-badge-text: #fff;
	--mcwf-title: #242424;
	--mcwf-text: #777;
	--mcwf-muted: #a5a5a5;
	--mcwf-border: #e7e7e7;
	--mcwf-light: #f7f7f7;
	--mcwf-surface: #fff;
	--mcwf-danger: #e22d2d;
	--mcwf-whatsapp: #25d366;
	--mcwf-messenger: #0084ff;
	--mcwf-chat-text: #fff;
	--mcwf-fs: 14px;
	--mcwf-title-fs: 14px;
	--mcwf-heading-fw: 600;
	--mcwf-btn-fs: 13px;
	--mcwf-btn-fw: 600;
	--mcwf-btn-tt: uppercase;

	/*
	 * Optional, printed only when set in the Design tab:
	 * --mcwf-price (falls back to --mcwf-primary),
	 * --mcwf-font (falls back to the theme font),
	 * --mcwf-font-heading (falls back to --mcwf-font).
	 */
	--mcwf-overlay: rgba(0, 0, 0, 0.7);
	--mcwf-ease: cubic-bezier(0.19, 1, 0.22, 1);
	--mcwf-layer: 99990;
}

[class*="mcwf-"],
[class*="mcwf-"]::before,
[class*="mcwf-"]::after {
	box-sizing: border-box;
}

[class*="mcwf-"][hidden] {
	display: none !important;
}

/*
 * The blocks the plugin prints. A one-column grid does two things for them:
 * - each block is a formatting context of its own, so floats or margins from
 *   the theme cannot make it collapse and let the next section slide over it;
 * - the block takes the width it is offered, also where the parent asks for
 *   its "natural" width (a flex row, an inline-block, a float). These blocks
 *   have no natural width: their layout follows the column they sit in.
 */
.mcwf-grid,
.mcwf-shop,
.mcwf-wishlist,
.mcwf-single-wrap {
	display: grid;
	grid-template-columns: minmax(0, 100vw);
	min-width: 0;
	max-width: 100%;
	clear: both;
}

/*
 * Layout wrappers of the product, cart and checkout pages. Their own
 * stylesheets turn them into grids; this keeps them from collapsing around
 * WooCommerce's floats if one of those stylesheets is ever missing (removed
 * or delayed by an optimisation plugin).
 */
.mcwf-single__top,
.mcwf-cart,
.mcwf-checkout__main,
.mcwf-checkout__order {
	display: flow-root;
}

/* Cart and checkout as a whole, notices and empty states included. */
.mcwf-area {
	display: flow-root;
	min-width: 0;
	max-width: 100%;
}

.mcwf-sr-only,
.mcwf-card .screen-reader-text,
.mcwf-drawer .screen-reader-text,
.mcwf-popup .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mcwf-icon {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
}

html.mcwf-no-scroll {
	overflow: hidden;
}

html.mcwf-no-scroll body {
	padding-inline-end: var(--mcwf-scrollbar, 0);
}

.mcwf-spinner {
	display: inline-block;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(0, 0, 0, 0.1);
	border-top-color: var(--mcwf-primary);
	border-radius: 50%;
	animation: mcwf-spin 0.7s linear infinite;
}

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

.mcwf-empty {
	margin: 0;
	padding: 40px 0;
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: calc(var(--mcwf-fs) + 1px);
	text-align: center;
}

/* -------------------------------------------------------------------------
 * 2. Buttons
 *
 * Themes and Elementor's global styles colour every <button> and link, hover
 * states included. Rather than fight each rule, one high-specificity rule
 * reads private variables (--_bg, --_c, ...) and the component classes below
 * only set those variables.
 * ---------------------------------------------------------------------- */

button[class*="mcwf-"][class*="mcwf-"]:not(.button),
button[class*="mcwf-"][class*="mcwf-"]:not(.button):hover,
button[class*="mcwf-"][class*="mcwf-"]:not(.button):focus,
button[class*="mcwf-"][class*="mcwf-"]:not(.button):active,
a.mcwf-btn.mcwf-btn,
a.mcwf-btn.mcwf-btn:hover,
a.mcwf-btn.mcwf-btn:focus,
a.mcwf-btn.mcwf-btn:active,
a.mcwf-btn.mcwf-btn:visited {
	padding: var(--_p, 0);
	color: var(--_c, inherit);
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: var(--_fs, inherit);
	font-weight: var(--_fw, inherit);
	line-height: var(--_lh, 1.2);
	letter-spacing: var(--_ls, normal);
	text-decoration: none;
	text-transform: var(--_tt, none);
	white-space: var(--_ws, normal);
	background-color: var(--_bg, transparent);
	background-image: none;
	border: var(--_bw, 0px) solid var(--_bc, transparent);
	border-radius: var(--_r, 0);
	box-shadow: var(--_shadow, none);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.3s;
}

[class*="mcwf-"]:focus-visible {
	outline: 2px solid var(--mcwf-primary);
	outline-offset: 2px;
}

.mcwf-btn {
	--_bg: var(--mcwf-light);
	--_c: var(--mcwf-title);
	--_p: 5px 20px;
	--_r: var(--mcwf-btn-radius);
	--_fs: var(--mcwf-btn-fs);
	--_fw: var(--mcwf-btn-fw);
	--_lh: 18px;
	--_ls: 0.3px;
	--_tt: var(--mcwf-btn-tt);

	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 42px;
	max-width: 100%;
	overflow: hidden;
	text-align: center;
	vertical-align: middle;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.mcwf-btn:hover,
.mcwf-btn:focus-visible {
	--_shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.1);
}

.mcwf-btn--primary,
.mcwf-btn--cart {
	--_bg: var(--mcwf-primary);
	--_c: var(--mcwf-primary-text);
}

.mcwf-btn--buy {
	--_bg: var(--mcwf-buy);
	--_c: var(--mcwf-buy-text);
}

.mcwf-btn--outline {
	--_bg: transparent;
	--_c: var(--mcwf-title);
	--_bw: 2px;
	--_bc: var(--mcwf-border);
	--_p: 8px 30px;
}

.mcwf-btn--outline:hover,
.mcwf-btn--outline:focus-visible {
	--_bc: var(--mcwf-title);
	--_shadow: none;
}

.mcwf-btn__text {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: transform 0.25s, opacity 0.25s;
}

.mcwf-btn__icon {
	display: none;
	align-items: center;
	justify-content: center;
}

.mcwf-btn.is-disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Loading: hide the label, show a spinner in its place. */
.mcwf-btn.is-loading {
	pointer-events: none;
}

.mcwf-btn.is-loading > * {
	visibility: hidden;
}

.mcwf-btn.is-loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: 0.85;
	animation: mcwf-spin 0.6s linear infinite;
}

/* Just added: a check mark confirms the click. */
.mcwf-btn.is-added .mcwf-btn__text::before {
	content: "\2713\00a0";
}

/* WooCommerce appends a "View cart" link after AJAX buttons; the toast and drawer replace it. */
.mcwf-card .added_to_cart,
.mcwf-popup .added_to_cart {
	display: none !important;
}

/* -------------------------------------------------------------------------
 * 3. Product grid
 * ---------------------------------------------------------------------- */

ul.mcwf-products.mcwf-products {
	--mcwf-cols: var(--mcwf-cols-d);

	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
}

/* Elementor Pro's Products widget (.elementor-grid) brings its own responsive columns: leave those alone. */
ul.mcwf-products.mcwf-products:not(.elementor-grid) {
	--mcwf-col-gap: var(--mcwf-gap);

	grid-template-columns: repeat(var(--mcwf-cols), minmax(0, 1fr));
	gap: calc(var(--mcwf-gap) + 10px) var(--mcwf-col-gap);
}

/* WooCommerce's clearfix pseudo-elements would become empty grid cells. */
ul.mcwf-products.mcwf-products::before,
ul.mcwf-products.mcwf-products::after {
	content: none !important;
	display: none !important;
}

/* WooCommerce loops carry their column count in the class name. */
ul.mcwf-products.columns-1 { --mcwf-cols-d: 1; }
ul.mcwf-products.columns-2 { --mcwf-cols-d: 2; }
ul.mcwf-products.columns-3 { --mcwf-cols-d: 3; }
ul.mcwf-products.columns-4 { --mcwf-cols-d: 4; }
ul.mcwf-products.columns-5 { --mcwf-cols-d: 5; }
ul.mcwf-products.columns-6 { --mcwf-cols-d: 6; }

@media (max-width: 1024px) {
	ul.mcwf-products.mcwf-products {
		--mcwf-cols: var(--mcwf-cols-t);
	}

	ul.mcwf-products.columns-1 { --mcwf-cols: 1; }
	ul.mcwf-products.columns-2 { --mcwf-cols: 2; }
}

@media (max-width: 767px) {
	ul.mcwf-products.mcwf-products {
		--mcwf-cols: var(--mcwf-cols-m);
	}

	ul.mcwf-products.mcwf-products:not(.elementor-grid) {
		--mcwf-col-gap: min(12px, var(--mcwf-gap));

		row-gap: 24px;
	}

	ul.mcwf-products.columns-1 { --mcwf-cols: 1; }
}

/* Carousel: one scrollable row, as many cards in view as there are columns. */
.mcwf-carousel {
	position: relative;
}

ul.mcwf-products.mcwf-products--carousel:not(.elementor-grid) {
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--mcwf-cols) - 1) * var(--mcwf-col-gap)) / var(--mcwf-cols));
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

ul.mcwf-products.mcwf-products--carousel::-webkit-scrollbar {
	display: none;
}

ul.mcwf-products--carousel > li.mcwf-card,
ul.mcwf-products--carousel > li.product {
	scroll-snap-align: start;
}

.mcwf-carousel__arrow {
	--_c: var(--mcwf-title);
	--_bg: var(--mcwf-surface);
	--_r: 50%;
	--_shadow: 0 0 6px rgba(0, 0, 0, 0.18);

	position: absolute;
	top: 32%;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
}

.mcwf-carousel__arrow--prev {
	inset-inline-start: -14px;
}

.mcwf-carousel__arrow--prev .mcwf-icon {
	transform: scaleX(-1);
}

.mcwf-carousel__arrow--next {
	inset-inline-end: -14px;
}

[dir="rtl"] .mcwf-carousel__arrow--prev .mcwf-icon {
	transform: none;
}

[dir="rtl"] .mcwf-carousel__arrow--next .mcwf-icon {
	transform: scaleX(-1);
}

.mcwf-carousel__arrow:hover {
	--_c: var(--mcwf-primary-text);
	--_bg: var(--mcwf-primary);
}

.mcwf-carousel__arrow[disabled],
.mcwf-carousel.is-static .mcwf-carousel__arrow {
	opacity: 0;
	pointer-events: none;
}

/*
 * On tablets and phones the page usually has little or no side padding, so
 * arrows that stick out of the carousel would add a sideways scroll to the
 * whole page. They sit just inside its edges instead.
 */
@media (max-width: 1024px) {
	.mcwf-carousel__arrow--prev {
		inset-inline-start: 4px;
	}

	.mcwf-carousel__arrow--next {
		inset-inline-end: 4px;
	}
}

@media (max-width: 767px) {
	.mcwf-carousel__arrow {
		width: 34px;
		height: 34px;
	}
}

/* Dots: one per step, the current one wider. */
.mcwf-carousel__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	margin-top: 18px;
}

.mcwf-carousel.is-static .mcwf-carousel__dots {
	display: none;
}

button.mcwf-carousel__dot[class*="mcwf-"] {
	--_p: 0;

	position: relative;
	display: block;
	width: 22px;
	height: 22px;
	min-height: 0;
}

/* The visible dot is small; the button around it is big enough to tap. */
.mcwf-carousel__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	background: var(--mcwf-border);
	border-radius: 4px;
	transform: translate(-50%, -50%);
	transition: width 0.25s, background-color 0.25s;
}

.mcwf-carousel__dot:hover::before {
	background: var(--mcwf-muted);
}

.mcwf-carousel__dot.is-active::before {
	width: 18px;
	background: var(--mcwf-primary);
}

.mcwf-grid {
	position: relative;
}

.mcwf-grid.is-loading ul.mcwf-products {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s;
}

.mcwf-grid__footer,
.mcwf-shop__footer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.mcwf-grid__footer:empty,
.mcwf-shop__footer:empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * 4. Product card
 * ---------------------------------------------------------------------- */

ul.mcwf-products > li.mcwf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	min-width: 0;
	margin: 0 !important;
	padding: 0;
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.5;
	text-align: center;
	list-style: none;

	/*
	 * A size container (for the narrow-card rules further down) has no width
	 * of its own. Without a stand-in width, a grid of cards would report
	 * "almost zero" as its natural width, and a parent that asks for it (a
	 * column of an Elementor container on phones, any flex row) would measure
	 * the grid at that width and get the wrong height: the next section then
	 * slides over the products. The stand-in says "as wide as the screen", so
	 * such a parent hands the grid all the room it has; the min-width above
	 * keeps the card free to shrink to its column.
	 */
	container-type: inline-size;
	contain-intrinsic-inline-size: 100vw;
}

/* Browsers without the stand-in width (Safari 16): no size container, so the natural width comes from the card itself. */
@supports not (contain-intrinsic-inline-size: 1px) {
	ul.mcwf-products > li.mcwf-card,
	ul.mcwf-products > li.product {
		container-type: normal;
	}
}

ul.mcwf-products > li.mcwf-card::before {
	display: none;
}

ul.mcwf-products > li.mcwf-card.mcwf-card--align-left {
	text-align: start;
}

.mcwf-card__inner {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

/* Image area */

.mcwf-card__media {
	position: relative;
	overflow: hidden;
	background: var(--mcwf-light);
	border-radius: var(--mcwf-card-radius);
}

.mcwf-card .mcwf-card__image-link {
	position: relative;
	display: block;
}

.mcwf-card.mcwf-card .mcwf-card__media .mcwf-card__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 !important;
	border-radius: 0;
	box-shadow: none;
	transition: opacity 0.5s ease, transform 0.9s var(--mcwf-ease);
}

.mcwf-card.mcwf-card .mcwf-card__media .mcwf-card__img--hover {
	position: absolute;
	inset: 0;
	height: 100%;
	object-fit: cover;
	opacity: 0;
}

@media (hover: hover) {
	.mcwf-card--has-hover-image:hover .mcwf-card__media .mcwf-card__img--hover {
		opacity: 1;
		transform: scale(1.06);
	}
}

/* Badges */

.mcwf-card__badges {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	max-width: 50%;
	pointer-events: none;
}

.mcwf-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	min-height: 50px;
	padding: 5px 7px;
	color: var(--mcwf-badge-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	word-break: break-word;
	background: var(--mcwf-sale);
	border-radius: var(--mcwf-badge-radius);
}

.mcwf-badge--hot {
	background: var(--mcwf-danger);
}

.mcwf-badge--out {
	color: var(--mcwf-title);
	background: var(--mcwf-surface);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
}

.mcwf-card--badge-rect .mcwf-badge {
	min-width: 0;
	min-height: 0;
	padding: 4px 10px;
	font-size: 12px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	border-radius: var(--mcwf-btn-radius);
}

/* Tools (wishlist) */

.mcwf-card__tools {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	background: var(--mcwf-surface);
	border-radius: var(--mcwf-badge-radius);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
	transition: opacity 0.3s, transform 0.3s;
}

.mcwf-card__tool {
	--_c: var(--mcwf-title);
	--_r: 50%;

	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
}

.mcwf-card__tool:hover {
	--_c: var(--mcwf-text);
}

.mcwf-wishlist-btn.is-active {
	--_c: var(--mcwf-primary);
}

.mcwf-wishlist-btn.is-active .mcwf-icon path {
	fill: currentColor;
}

.mcwf-tooltip {
	position: absolute;
	top: 50%;
	inset-inline-end: calc(100% + 8px);
	padding: 4px 9px;
	color: var(--mcwf-surface);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	background: var(--mcwf-title);
	border-radius: min(3px, var(--mcwf-input-radius));
	opacity: 0;
	visibility: hidden;
	transform: translateY(-50%);
	transition: opacity 0.2s, visibility 0.2s;
	pointer-events: none;
}

.mcwf-tooltip::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-start: 100%;
	margin-top: -4px;
	border: 4px solid transparent;
	border-inline-start-color: var(--mcwf-title);
}

/* Add to Cart bar over the image (hover style) */

.mcwf-card__hover-cart {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: none;
	transform: translateY(101%);
	transition: transform 0.3s ease;
}

.mcwf-card__hover-cart .mcwf-btn {
	--_r: 0;

	display: flex;
	width: 100%;
}

.mcwf-card__hover-cart .mcwf-btn__icon {
	position: absolute;
	inset: 0;
	display: flex;
	transform: translateY(100%);
	transition: transform 0.25s;
}

.mcwf-card__hover-cart .mcwf-btn:hover .mcwf-btn__text,
.mcwf-card__hover-cart .mcwf-btn:focus-visible .mcwf-btn__text {
	opacity: 0;
	transform: translateY(-140%);
}

.mcwf-card__hover-cart .mcwf-btn:hover .mcwf-btn__icon,
.mcwf-card__hover-cart .mcwf-btn:focus-visible .mcwf-btn__icon {
	transform: none;
}

/* Text area */

.mcwf-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 5px;
	padding-top: 12px;
}

.mcwf-card.mcwf-card .mcwf-card__body .mcwf-card__title {
	display: -webkit-box;
	margin: 0;
	padding: 0;
	overflow: hidden;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: var(--mcwf-title-fs);
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--mcwf-title-lines);
	line-clamp: var(--mcwf-title-lines);
}

.mcwf-card .mcwf-card__title a,
.mcwf-card .mcwf-card__title a:visited {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s;
}

.mcwf-card .mcwf-card__body .mcwf-card__title a:hover,
.mcwf-card .mcwf-card__body .mcwf-card__title a:focus {
	color: var(--mcwf-text);
}

.mcwf-card__cats {
	overflow: hidden;
	color: var(--mcwf-muted);
	font-size: 13px;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mcwf-card .mcwf-card__cats a,
.mcwf-card .mcwf-card__cats a:visited {
	color: inherit;
	text-decoration: none;
}

.mcwf-card .mcwf-card__body .mcwf-card__cats a:hover {
	color: var(--mcwf-title);
}

.mcwf-card__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	line-height: 1;
}

.mcwf-card--align-left .mcwf-card__rating {
	justify-content: flex-start;
}

.mcwf-stars {
	position: relative;
	display: inline-block;
	color: var(--mcwf-border);
	font-family: Arial, sans-serif;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 2px;
	white-space: nowrap;
}

.mcwf-stars::before {
	content: "\2605\2605\2605\2605\2605";
}

.mcwf-stars__fill {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	overflow: hidden;
	color: var(--mcwf-star);
}

.mcwf-stars__fill::before {
	content: "\2605\2605\2605\2605\2605";
}

.mcwf-stars__count {
	color: var(--mcwf-muted);
	font-size: 12px;
}

.mcwf-card__price {
	color: var(--mcwf-price, var(--mcwf-primary));
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.mcwf-card__price del,
.mcwf-popup__price del {
	margin-inline-end: 4px;
	color: var(--mcwf-muted);
	font-size: 0.9em;
	font-weight: 400;
	opacity: 1;
}

.mcwf-card__price ins,
.mcwf-popup__price ins {
	padding: 0;
	color: inherit;
	text-decoration: none;
	background: none;
}

.mcwf-card__price small {
	font-weight: 400;
}

/* Buttons under the price */

.mcwf-card__actions {
	display: flex;
	gap: 8px;
	margin-top: auto;
	padding-top: 9px;
}

.mcwf-card__actions .mcwf-btn {
	--_p: 5px 10px;
	--_fs: calc(var(--mcwf-btn-fs) - 1px);

	flex: 1 1 0;
	min-width: 0;
	min-height: 38px;
}

.mcwf-card__remove {
	--_c: var(--mcwf-text);
	--_fs: 13px;
	--_fw: 600;
	--_lh: 1.4;

	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 4px;
	margin-bottom: 8px;
}

.mcwf-card--align-left .mcwf-card__remove {
	align-self: flex-start;
}

.mcwf-card__remove:hover {
	--_c: var(--mcwf-title);
}

.mcwf-card__remove .mcwf-icon {
	width: 14px;
	height: 14px;
}

/*
 * Devices with a mouse: tools and the Add to Cart bar appear on hover,
 * and the card keeps only the Buy Now button under the price.
 */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	.mcwf-card--hover .mcwf-card__hover-cart {
		display: block;
	}

	.mcwf-card--hover:hover .mcwf-card__hover-cart,
	.mcwf-card--hover:focus-within .mcwf-card__hover-cart {
		transform: none;
	}

	.mcwf-card--hover .mcwf-card__actions .mcwf-btn--cart {
		display: none;
	}

	/* Nothing left under the price: no empty gap. */
	.mcwf-card--hover .mcwf-card__actions:not(.mcwf-card__actions--two) {
		display: none;
	}

	.mcwf-card__tools {
		opacity: 0;
		transform: translateX(15px);
	}

	[dir="rtl"] .mcwf-card__tools {
		transform: translateX(-15px);
	}

	.mcwf-card:hover .mcwf-card__tools,
	.mcwf-card:focus-within .mcwf-card__tools,
	.mcwf-card__tools:has(.is-active) {
		opacity: 1;
		transform: none;
	}

	.mcwf-card__tool:hover .mcwf-tooltip,
	.mcwf-card__tool:focus-visible .mcwf-tooltip {
		opacity: 1;
		visibility: visible;
	}
}

/* Narrow cards: the cart button shrinks to an icon so Buy Now keeps its label. */
@container (max-width: 235px) {
	.mcwf-card__actions--two .mcwf-btn--cart {
		--_p: 0;

		flex: 0 0 40px;
	}

	.mcwf-card__actions--two .mcwf-btn--cart .mcwf-btn__icon {
		display: flex;
	}

	.mcwf-card__actions--two .mcwf-btn--cart .mcwf-btn__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	.mcwf-card__actions--two .mcwf-btn--cart.is-added .mcwf-btn__icon {
		visibility: hidden;
	}

	.mcwf-card__actions--two .mcwf-btn--cart.is-added::after {
		content: "\2713";
		position: absolute;
		font-size: 16px;
	}
}

@container (max-width: 190px) {
	.mcwf-badge {
		min-width: 40px;
		min-height: 40px;
		font-size: 12px;
	}

	.mcwf-card__tool {
		width: 34px;
		height: 34px;
	}
}

/* -------------------------------------------------------------------------
 * 5. Quantity stepper
 * ---------------------------------------------------------------------- */

.mcwf-qty {
	display: inline-flex;
	align-items: stretch;
	height: 42px;
	vertical-align: middle;
}

.mcwf-qty__btn {
	--_c: var(--mcwf-title);
	--_bw: 1px;
	--_bc: var(--mcwf-border);

	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 28px;
	min-width: 0;
	height: 100%;
}

.mcwf-qty__btn--minus {
	--_r: var(--mcwf-input-radius) 0 0 var(--mcwf-input-radius);
}

/*
 * Many themes add their own plus and minus buttons to every quantity field,
 * with a script. Where this plugin already printed its buttons, anything else
 * next to the field is hidden.
 */
.quantity:has(> .mcwf-qty__btn) > :not(.mcwf-qty__btn):not(.qty):not(label):not(.screen-reader-text) {
	display: none !important;
}

.mcwf-qty__btn--plus {
	--_r: 0 var(--mcwf-input-radius) var(--mcwf-input-radius) 0;
}

.mcwf-qty__btn:hover {
	--_c: var(--mcwf-primary-text);
	--_bg: var(--mcwf-primary);
	--_bc: var(--mcwf-primary);
}

.mcwf-qty__btn .mcwf-icon {
	width: 14px;
	height: 14px;
}

.mcwf-qty .mcwf-qty__input {
	width: 40px !important;
	min-width: 0;
	height: 100% !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 !important;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	background: var(--mcwf-surface) !important;
	border: solid var(--mcwf-border) !important;
	border-width: 1px 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

.mcwf-qty--small {
	height: 30px;
}

.mcwf-qty--small .mcwf-qty__btn {
	width: 24px;
}

.mcwf-qty--small .mcwf-qty__input {
	width: 32px !important;
	font-size: 13px;
}

.mcwf-qty--small .mcwf-qty__btn .mcwf-icon {
	width: 12px;
	height: 12px;
}

/* -------------------------------------------------------------------------
 * 6. Cart drawer, floating cart button, cart icon
 * ---------------------------------------------------------------------- */

.mcwf-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--mcwf-layer);
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.5;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.4s;
}

.mcwf-drawer.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.mcwf-drawer__overlay,
.mcwf-modal__overlay {
	position: absolute;
	inset: 0;
	background: var(--mcwf-overlay);
	opacity: 0;
	cursor: pointer;
	transition: opacity 0.4s;
}

.mcwf-drawer.is-open .mcwf-drawer__overlay,
.mcwf-modal.is-open .mcwf-modal__overlay {
	opacity: 1;
}

.mcwf-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-end: 0;
	display: flex;
	flex-direction: column;
	width: 340px;
	max-width: 100%;
	background: var(--mcwf-surface);
	outline: none;
	transform: translateX(100%);
	transition: transform 0.5s var(--mcwf-ease);
}

[dir="rtl"] .mcwf-drawer__panel,
.mcwf-drawer--left .mcwf-drawer__panel {
	transform: translateX(-100%);
}

.mcwf-drawer--left .mcwf-drawer__panel {
	inset-inline: 0 auto;
}

[dir="rtl"] .mcwf-drawer--left .mcwf-drawer__panel {
	transform: translateX(100%);
}

.mcwf-drawer.is-open .mcwf-drawer__panel {
	transform: none;
}

.admin-bar .mcwf-drawer__panel {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .mcwf-drawer__panel {
		top: 46px;
	}
}

.mcwf-drawer__header {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 20px 15px;
	border-bottom: 1px solid var(--mcwf-border);
}

.mcwf-drawer__title {
	color: var(--mcwf-title);
	font-size: 20px;
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.2;
}

.mcwf-drawer__close {
	--_c: var(--mcwf-title);
	--_fs: 13px;
	--_fw: 600;

	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.mcwf-drawer__close:hover {
	--_c: var(--mcwf-text);
}

.mcwf-drawer__close .mcwf-icon {
	width: 18px;
	height: 18px;
}

.mcwf-drawer__content {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	transition: opacity 0.2s;
}

.mcwf-drawer.is-busy .mcwf-drawer__content {
	opacity: 0.5 !important;
	pointer-events: none;
}

ul.mcwf-drawer__items {
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
	overscroll-behavior: contain;
}

.mcwf-drawer__item {
	position: relative;
	display: grid;
	grid-template-columns: 65px minmax(0, 1fr) auto;
	grid-template-areas:
		"thumb info remove"
		"thumb info total";
	column-gap: 12px;
	margin: 0;
	padding: 15px;
	list-style: none;
	border-bottom: 1px solid var(--mcwf-border);
	transition: opacity 0.2s, background-color 0.2s;
}

.mcwf-drawer__item:hover {
	background: var(--mcwf-light);
}

.mcwf-drawer__item.is-removing {
	opacity: 0.35;
}

.mcwf-drawer__thumb {
	grid-area: thumb;
}

.mcwf-drawer .mcwf-drawer__thumb img {
	display: block;
	width: 65px;
	height: auto;
	margin: 0;
	border-radius: calc(var(--mcwf-card-radius) / 2);
}

.mcwf-drawer__info {
	grid-area: info;
	min-width: 0;
}

.mcwf-drawer .mcwf-drawer__name,
.mcwf-drawer .mcwf-drawer__name:visited {
	display: block;
	margin-bottom: 6px;
	color: var(--mcwf-title);
	font-size: 14px;
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.3;
	text-decoration: none;
}

.mcwf-drawer .mcwf-drawer__info a.mcwf-drawer__name:hover {
	color: var(--mcwf-text);
}

.mcwf-drawer__info dl.variation {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0 5px;
	margin: 0 0 7px;
	padding: 0;
	color: var(--mcwf-muted);
	font-size: 12px;
	line-height: 1.5;
	border: 0;
}

.mcwf-drawer__info dl.variation dt,
.mcwf-drawer__info dl.variation dd {
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	font-weight: 400;
}

.mcwf-drawer__info dl.variation dd p {
	margin: 0;
}

.mcwf-drawer__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	color: var(--mcwf-muted);
	font-size: 13px;
}

.mcwf-drawer__remove {
	--_c: var(--mcwf-muted);

	grid-area: remove;
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: start;
	justify-self: end;
	width: 22px;
	height: 22px;
	margin: -3px -4px 0 0;
}

.mcwf-drawer__remove:hover {
	--_c: var(--mcwf-title);
}

.mcwf-drawer__remove .mcwf-icon {
	width: 16px;
	height: 16px;
}

.mcwf-drawer__line-total {
	grid-area: total;
	align-self: end;
	justify-self: end;
	color: var(--mcwf-price, var(--mcwf-primary));
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}

.mcwf-drawer__footer {
	flex: none;
	padding: 15px;
	border-top: 1px solid var(--mcwf-border);
	box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, 0.12);
}

.mcwf-drawer .mcwf-drawer__subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 15px;
	padding: 0;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
}

.mcwf-drawer__subtotal-label {
	color: var(--mcwf-title);
}

.mcwf-drawer__subtotal-value {
	color: var(--mcwf-price, var(--mcwf-primary));
}

.mcwf-drawer__buttons {
	display: grid;
	gap: 10px;
}

.mcwf-drawer__buttons .mcwf-btn {
	width: 100%;
}

.mcwf-drawer__empty {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 30px 20px;
	text-align: center;
}

.mcwf-drawer__empty-icon .mcwf-icon,
.mcwf-wishlist__empty-icon .mcwf-icon {
	width: 86px;
	height: 86px;
	color: var(--mcwf-border);
}

.mcwf-drawer .mcwf-drawer__empty-text {
	margin: 12px 0 20px;
	color: var(--mcwf-title);
	font-size: 18px;
	font-weight: 600;
}

/* Floating cart button */

.mcwf-floating-cart {
	--_c: var(--mcwf-primary-text);
	--_bg: var(--mcwf-primary);
	--_fs: 16px;
	--_fw: 400;
	--_r: 50%;
	--_shadow: 0 4px 16px rgba(0, 0, 0, 0.22);

	position: fixed;
	bottom: 24px;
	inset-inline-end: 24px;
	z-index: 9980;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
}

.mcwf-floating-cart--left {
	inset-inline: 24px auto;
}

.mcwf-floating-cart:hover {
	transform: translateY(-2px);
}

.mcwf-floating-cart .mcwf-icon {
	width: 26px;
	height: 26px;
}

.mcwf-floating-cart .mcwf-cart-count {
	position: absolute;
	top: -2px;
	inset-inline-end: -2px;
	color: var(--mcwf-primary);
	background: var(--mcwf-primary-text);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

@media (max-width: 767px) {
	.mcwf-floating-cart {
		bottom: 16px;
		inset-inline-end: 16px;
		width: 50px;
		height: 50px;
	}

	.mcwf-floating-cart--left {
		inset-inline: 16px auto;
	}
}

/* Count badges and header icons */

.mcwf-cart-count,
.mcwf-wishlist-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	color: var(--mcwf-primary-text);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	background: var(--mcwf-primary);
	border-radius: 10px;
}

a.mcwf-cart-icon,
a.mcwf-cart-icon:visited,
a.mcwf-wishlist-icon,
a.mcwf-wishlist-icon:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--mcwf-title);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	vertical-align: middle;
}

.mcwf-cart-icon__icon,
.mcwf-wishlist-icon__icon {
	position: relative;
	display: inline-flex;
	padding-inline-end: 9px;
}

.mcwf-cart-icon__icon .mcwf-icon,
.mcwf-wishlist-icon__icon .mcwf-icon {
	width: 26px;
	height: 26px;
}

.mcwf-cart-icon__icon .mcwf-cart-count,
.mcwf-wishlist-icon__icon .mcwf-wishlist-count {
	position: absolute;
	top: -7px;
	inset-inline-end: -3px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	font-size: 10px;
}

/* -------------------------------------------------------------------------
 * 7. Popup and variation picker
 * ---------------------------------------------------------------------- */

.mcwf-modal {
	position: fixed;
	inset: 0;
	z-index: calc(var(--mcwf-layer) + 1);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.5;
	visibility: hidden;
	pointer-events: none;
	transition: visibility 0s linear 0.3s;
}

.mcwf-modal.is-open {
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.mcwf-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 860px;
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow: auto;
	background: var(--mcwf-surface);
	border-radius: var(--mcwf-panel-radius);
	outline: none;
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.3s, transform 0.4s var(--mcwf-ease);
	overscroll-behavior: contain;
}

.mcwf-modal.is-open .mcwf-modal__dialog {
	opacity: 1;
	transform: none;
}

.mcwf-modal__close {
	--_c: var(--mcwf-title);
	--_bg: var(--mcwf-surface);
	--_r: 50%;
	--_shadow: 0 0 4px rgba(0, 0, 0, 0.15);

	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
}

.mcwf-modal__close:hover {
	--_c: var(--mcwf-text);
}

.mcwf-modal__loader {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 260px;
}

.mcwf-popup {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
}

.mcwf-popup__media {
	background: var(--mcwf-light);
}

.mcwf-popup .mcwf-popup__media .mcwf-popup__img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	margin: 0;
	object-fit: cover;
}

.mcwf-popup__summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 34px 30px 28px;
}

.mcwf-popup .mcwf-popup__summary .mcwf-popup__title {
	margin: 0;
	padding: 0 30px 0 0;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: 24px;
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.mcwf-popup .mcwf-popup__title a,
.mcwf-popup .mcwf-popup__title a:visited {
	color: inherit;
	text-decoration: none;
}

.mcwf-popup .mcwf-popup__summary .mcwf-popup__title a:hover {
	color: var(--mcwf-text);
}

.mcwf-popup__price {
	color: var(--mcwf-price, var(--mcwf-primary));
	font-size: 20px;
	font-weight: 600;
	line-height: 1.3;
}

.mcwf-popup__price .price {
	color: inherit;
	font-size: inherit;
}

.mcwf-popup .mcwf-popup__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
}

.mcwf-attr__label {
	display: block;
	margin: 0 0 8px;
	color: var(--mcwf-title);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.mcwf-attr__selected {
	color: var(--mcwf-text);
	font-weight: 400;
}

.mcwf-attr.has-error .mcwf-attr__label {
	color: var(--mcwf-danger);
}

.mcwf-attr__options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.mcwf-swatch {
	--_c: var(--mcwf-title);
	--_bg: var(--mcwf-surface);
	--_bw: 1px;
	--_bc: var(--mcwf-border);
	--_r: var(--mcwf-input-radius);
	--_fw: 400;
	--_p: 0 12px;
	--_fs: 14px;
	--_lh: 1;

	position: relative;
	min-width: 38px;
	height: 36px;
	overflow: hidden;
}

.mcwf-swatch:hover {
	--_bc: var(--mcwf-title);
}

.mcwf-swatch.is-selected {
	--_bc: var(--mcwf-primary);
	--_shadow: inset 0 0 0 1px var(--mcwf-primary);
	--_fw: 600;
}

.mcwf-swatch.is-unavailable {
	--_c: var(--mcwf-muted);
	--_bg: var(--mcwf-light);
}

/* Diagonal strike for options that do not fit the current selection. */
.mcwf-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--mcwf-border) calc(50% - 0.5px), var(--mcwf-border) calc(50% + 0.5px), transparent calc(50% + 0.5px));
	pointer-events: none;
}

.mcwf-popup .mcwf-attr__select {
	width: 100% !important;
	height: 42px !important;
	margin: 0;
	padding: 0 34px 0 14px !important;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font, inherit);
	font-size: 14px;
	line-height: 1.2;
	background: var(--mcwf-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px !important;
	border: 2px solid var(--mcwf-border) !important;
	border-radius: var(--mcwf-input-radius) !important;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

.mcwf-popup__reset {
	--_c: var(--mcwf-text);
	--_fs: 13px;

	align-self: flex-start;
	margin-top: -6px;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

.mcwf-popup__reset:hover {
	--_c: var(--mcwf-title);
}

.mcwf-popup__stock:empty {
	display: none;
}

.mcwf-popup .mcwf-popup__stock p {
	margin: 0;
	color: var(--mcwf-primary);
	font-size: 14px;
	font-weight: 600;
}

.mcwf-popup .mcwf-popup__stock .out-of-stock {
	color: var(--mcwf-danger);
}

.mcwf-popup .mcwf-popup__error {
	margin: 0;
	padding: 9px 12px;
	color: var(--mcwf-danger);
	font-size: 13px;
	line-height: 1.4;
	background: color-mix(in srgb, var(--mcwf-danger) 10%, var(--mcwf-surface));
	border-radius: var(--mcwf-input-radius);
}

.mcwf-popup__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mcwf-popup__actions .mcwf-btn {
	flex: 1 1 130px;
}

.mcwf-popup .mcwf-popup__details,
.mcwf-popup .mcwf-popup__details:visited {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	margin-top: auto;
	padding-top: 6px;
	color: var(--mcwf-title);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.mcwf-popup .mcwf-popup__summary .mcwf-popup__details:hover {
	color: var(--mcwf-primary);
}

.mcwf-popup__details .mcwf-icon {
	width: 16px;
	height: 16px;
}

[dir="rtl"] .mcwf-popup__details .mcwf-icon {
	transform: scaleX(-1);
}

/* Phones: the popup becomes a bottom sheet. */
@media (max-width: 767px) {
	.mcwf-modal {
		align-items: flex-end;
		padding: 0;
	}

	.mcwf-modal__dialog {
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: var(--mcwf-panel-radius) var(--mcwf-panel-radius) 0 0;
		transform: translateY(100%);
	}

	.mcwf-popup {
		display: block;
	}

	.mcwf-popup .mcwf-popup__media .mcwf-popup__img {
		height: 210px;
		min-height: 0;
		object-fit: contain;
	}

	.mcwf-popup__summary {
		padding: 18px 16px 20px;
	}

	.mcwf-popup .mcwf-popup__summary .mcwf-popup__title {
		padding: 0;
		font-size: 19px;
	}

	.mcwf-popup__price {
		font-size: 18px;
	}

	.mcwf-popup__actions .mcwf-qty {
		flex: 1 1 100%;
		justify-content: flex-start;
	}
}

/* -------------------------------------------------------------------------
 * 8. Toasts
 * ---------------------------------------------------------------------- */

.mcwf-toasts {
	position: fixed;
	bottom: 24px;
	inset-inline-start: 24px;
	z-index: calc(var(--mcwf-layer) + 10);
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 380px;
	max-width: calc(100vw - 48px);
	pointer-events: none;
}

.mcwf-toast {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 10px 12px 16px;
	color: var(--mcwf-surface);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.4;
	background: var(--mcwf-title);
	border-inline-start: 4px solid var(--mcwf-primary);
	border-radius: var(--mcwf-input-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: auto;
}

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

.mcwf-toast--error {
	border-inline-start-color: var(--mcwf-danger);
}

.mcwf-toast--info {
	border-inline-start-color: var(--mcwf-muted);
}

.mcwf-toast__text {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mcwf-toasts .mcwf-toast a.mcwf-toast__action,
.mcwf-toasts .mcwf-toast a.mcwf-toast__action:hover,
.mcwf-toasts .mcwf-toast a.mcwf-toast__action:visited {
	flex: none;
	color: var(--mcwf-surface);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-decoration: underline;
	text-transform: uppercase;
	text-underline-offset: 3px;
}

.mcwf-toast__close {
	--_c: var(--mcwf-surface);

	opacity: 0.7;
	--_fs: 20px;
	--_lh: 1;

	flex: none;
	width: 26px;
	height: 26px;
}

.mcwf-toast__close:hover {
	opacity: 1;
}

/* A left-hand cart drawer would sit on top of the toasts: move them across. */
.mcwf-toasts--end {
	inset-inline: auto 24px;
}

/* Phones: show toasts at the top, clear of the drawer's buttons and the floating cart. */
@media (max-width: 767px) {
	.mcwf-toasts,
	.mcwf-toasts--end {
		top: 14px;
		bottom: auto;
		inset-inline: 14px;
		flex-direction: column-reverse;
		width: auto;
		max-width: none;
	}

	.admin-bar .mcwf-toasts {
		top: 60px;
	}

	.mcwf-toast {
		transform: translateY(-14px);
	}
}

/* -------------------------------------------------------------------------
 * 9. Shop: toolbar, filters, pagination
 * ---------------------------------------------------------------------- */

.mcwf-archive {
	width: 100%;
	max-width: var(--mcwf-container, 1222px);
	margin-inline: auto;
	padding-block: 10px 60px;
}

.mcwf-archive .woocommerce-products-header__title {
	margin: 8px 0 16px;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: clamp(28px, 5vw, 40px);
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.2;
}

.mcwf-shop {
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.5;
}

/* Toolbar */

.mcwf-shop__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin-bottom: 24px;
}

.mcwf-shop .mcwf-shop__count {
	margin: 0;
	padding: 0;
	color: var(--mcwf-text);
	font-size: 14px;
}

.mcwf-shop__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
	margin-inline-start: auto;
}

.mcwf-shop__filter-toggle {
	--_c: var(--mcwf-title);
	--_fs: 14px;
	--_fw: 600;

	display: none;
	align-items: center;
	gap: 7px;
}

.mcwf-shop__per-page,
.mcwf-shop__views {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mcwf-shop__tools-label {
	margin-inline-end: 2px;
	color: var(--mcwf-title);
	font-weight: 600;
}

.mcwf-shop__tools-label::after {
	content: " :";
}

.mcwf-shop__per-page-btn {
	--_c: var(--mcwf-text);
	--_fs: 14px;
}

.mcwf-shop__per-page-btn + .mcwf-shop__per-page-btn::before {
	content: "/";
	margin-inline-end: 6px;
	color: var(--mcwf-muted);
	font-weight: 400;
}

.mcwf-shop__per-page-btn:hover,
.mcwf-shop__per-page-btn.is-active {
	--_c: var(--mcwf-title);
}

.mcwf-shop__per-page-btn.is-active {
	--_fw: 600;
}

.mcwf-shop__view-btn {
	--_c: var(--mcwf-muted);

	display: flex;
}

.mcwf-shop__view-btn:hover,
.mcwf-shop__view-btn.is-active {
	--_c: var(--mcwf-title);
}

.mcwf-shop .mcwf-shop__sort-select {
	width: auto !important;
	max-width: 100%;
	height: 36px !important;
	margin: 0;
	padding: 0 24px 0 2px !important;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font, inherit);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23242424' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 2px center / 16px !important;
	border: 0 !important;
	border-bottom: 2px solid var(--mcwf-border) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

[dir="rtl"] .mcwf-shop .mcwf-shop__sort-select {
	padding: 0 2px 0 24px !important;
	background-position: left 2px center !important;
}

.mcwf-shop .mcwf-shop__sort-select:focus {
	border-bottom-color: var(--mcwf-primary) !important;
}

/* Active filters */

.mcwf-shop__active {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 22px;
}

.mcwf-chip {
	--_c: var(--mcwf-title);
	--_fs: 13px;
	--_fw: 600;
	--_lh: 1.4;

	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.mcwf-chip:hover {
	--_c: var(--mcwf-text);
}

.mcwf-chip--clear {
	--_tt: uppercase;
	--_ls: 0.3px;
	--_fs: 12px;
}

.mcwf-chip .mcwf-icon {
	width: 14px;
	height: 14px;
}

/* Layout */

.mcwf-shop__layout {
	display: grid;
	grid-template-columns: 270px minmax(0, 1fr);
	gap: 30px;
	align-items: start;
}

.mcwf-shop--sidebar-right .mcwf-shop__layout {
	grid-template-columns: minmax(0, 1fr) 270px;
}

.mcwf-shop--sidebar-right .mcwf-shop__sidebar {
	order: 2;
}

.mcwf-shop--sidebar-none .mcwf-shop__layout {
	grid-template-columns: minmax(0, 1fr);
}

.mcwf-shop__main {
	position: relative;
	min-width: 0;
}

.mcwf-shop__results {
	transition: opacity 0.2s;
}

.mcwf-shop.is-loading .mcwf-shop__results {
	opacity: 0.4;
	pointer-events: none;
}

.mcwf-shop.is-loading .mcwf-shop__main::before {
	content: "";
	position: absolute;
	top: 80px;
	left: 50%;
	z-index: 4;
	width: 34px;
	height: 34px;
	margin-left: -17px;
	border: 2px solid rgba(0, 0, 0, 0.12);
	border-top-color: var(--mcwf-primary);
	border-radius: 50%;
	animation: mcwf-spin 0.7s linear infinite;
}

.mcwf-shop__sidebar-head,
.mcwf-shop__overlay,
.mcwf-shop__sidebar-foot {
	display: none;
}

/* Filter widgets */

.mcwf-shop .mcwf-filters {
	margin: 0;
	padding: 0;
}

.mcwf-widget {
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--mcwf-border);
}

.mcwf-widget:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}

.mcwf-widget .mcwf-widget__title {
	display: block;
	margin: 0 0 18px;
	padding: 0;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: 16px;
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.3;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.mcwf-widget__scroll {
	max-height: 232px;
	padding-inline-end: 6px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--mcwf-border) transparent;
}

ul.mcwf-filter-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.mcwf-filter-list--children {
	padding-inline-start: 26px;
}

.mcwf-filter-list .mcwf-filter-list__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcwf-filter-list .mcwf-filter-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 5px 0;
	color: var(--mcwf-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	cursor: pointer;
}

.mcwf-filter-item .mcwf-filter-item__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
}

.mcwf-filter-item__box {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
	background: var(--mcwf-surface);
	border: 2px solid var(--mcwf-border);
	border-radius: min(3px, var(--mcwf-input-radius));
	transition: background-color 0.2s, border-color 0.2s;
}

.mcwf-filter-item__box::after {
	content: "";
	position: absolute;
	top: 0;
	left: 3.5px;
	width: 5px;
	height: 9px;
	border: solid var(--mcwf-primary-text);
	border-width: 0 2px 2px 0;
	opacity: 0;
	transform: rotate(45deg);
}

.mcwf-filter-item__label {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	transition: color 0.2s;
}

.mcwf-filter-item__count {
	flex: none;
	min-width: 30px;
	padding: 0 6px;
	color: var(--mcwf-text);
	font-size: 12px;
	line-height: 20px;
	text-align: center;
	border: 1px solid var(--mcwf-border);
	border-radius: 35px;
	transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.mcwf-filter-item:hover .mcwf-filter-item__label {
	color: var(--mcwf-title);
}

.mcwf-filter-item:hover .mcwf-filter-item__box {
	border-color: var(--mcwf-primary);
}

.mcwf-filter-item:hover .mcwf-filter-item__count,
.mcwf-filter-item__input:checked ~ .mcwf-filter-item__count {
	color: var(--mcwf-primary-text);
	background: var(--mcwf-primary);
	border-color: var(--mcwf-primary);
}

.mcwf-filter-item__input:checked ~ .mcwf-filter-item__box {
	background: var(--mcwf-primary);
	border-color: var(--mcwf-primary);
}

.mcwf-filter-item__input:checked ~ .mcwf-filter-item__box::after {
	opacity: 1;
}

.mcwf-filter-item__input:checked ~ .mcwf-filter-item__label {
	color: var(--mcwf-title);
	font-weight: 600;
}

.mcwf-filter-item__input:focus-visible ~ .mcwf-filter-item__box {
	outline: 2px solid var(--mcwf-primary);
	outline-offset: 2px;
}

/* Search */

.mcwf-search {
	position: relative;
}

.mcwf-search .mcwf-search__input {
	width: 100% !important;
	height: 42px !important;
	margin: 0;
	padding: 0 46px 0 14px !important;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font, inherit);
	font-size: 14px;
	line-height: 1.2;
	background: var(--mcwf-surface) !important;
	border: 2px solid var(--mcwf-border) !important;
	border-radius: var(--mcwf-input-radius) !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

[dir="rtl"] .mcwf-search .mcwf-search__input {
	padding: 0 14px 0 46px !important;
}

.mcwf-search .mcwf-search__input:focus {
	border-color: var(--mcwf-muted) !important;
	outline: none;
}

.mcwf-search__btn {
	--_c: var(--mcwf-title);

	position: absolute;
	top: 0;
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 42px;
}

.mcwf-search__btn:hover {
	--_c: var(--mcwf-primary);
}

/* Price slider: two overlapping range inputs on one rail. */

.mcwf-price-slider {
	--mcwf-thumb: 12px;
	--mcwf-range-start: 0;
	--mcwf-range-end: 0;
}

.mcwf-price-slider__rail {
	position: relative;
	height: 18px;
	margin-bottom: 16px;
}

.mcwf-price-slider__rail::before,
.mcwf-price-slider__range {
	content: "";
	position: absolute;
	top: 50%;
	height: 2px;
	margin-top: -1px;
}

.mcwf-price-slider__rail::before {
	inset-inline: calc(var(--mcwf-thumb) / 2);
	background: var(--mcwf-border);
}

/* The thumb's centre travels from half a thumb in to half a thumb short of the end. */
.mcwf-price-slider__range {
	inset-inline-start: calc(var(--mcwf-thumb) / 2 + (100% - var(--mcwf-thumb)) * var(--mcwf-range-start, 0));
	inset-inline-end: calc(var(--mcwf-thumb) / 2 + (100% - var(--mcwf-thumb)) * var(--mcwf-range-end, 0));
	background: var(--mcwf-primary);
}

.mcwf-price-slider .mcwf-price-slider__input {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.mcwf-price-slider__input::-webkit-slider-runnable-track {
	height: 100%;
	background: none;
	border: 0;
}

.mcwf-price-slider__input::-moz-range-track {
	height: 100%;
	background: none;
	border: 0;
}

.mcwf-price-slider__input::-webkit-slider-thumb {
	width: var(--mcwf-thumb);
	height: 18px;
	margin: 0;
	background: linear-gradient(var(--mcwf-primary), var(--mcwf-primary)) center / 3px 100% no-repeat;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: ew-resize;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
}

.mcwf-price-slider__input::-moz-range-thumb {
	width: var(--mcwf-thumb);
	height: 18px;
	background: linear-gradient(var(--mcwf-primary), var(--mcwf-primary)) center / 3px 100% no-repeat;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: ew-resize;
	pointer-events: auto;
}

.mcwf-price-slider__input:focus-visible::-webkit-slider-thumb {
	outline: 2px solid var(--mcwf-primary);
	outline-offset: 2px;
}

.mcwf-price-slider__input:focus-visible::-moz-range-thumb {
	outline: 2px solid var(--mcwf-primary);
	outline-offset: 2px;
}

/* Fingers need a bigger target than a mouse pointer. */
@media (pointer: coarse) {
	.mcwf-price-slider {
		--mcwf-thumb: 26px;
	}

	.mcwf-price-slider__rail {
		height: 28px;
	}

	.mcwf-price-slider__input::-webkit-slider-thumb {
		height: 28px;
		background-size: 4px 18px;
	}

	.mcwf-price-slider__input::-moz-range-thumb {
		height: 28px;
		background-size: 4px 18px;
	}
}

.mcwf-price-slider__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.mcwf-price-slider__label {
	order: 2;
	color: var(--mcwf-text);
	font-size: 14px;
}

.mcwf-price-slider__values {
	color: var(--mcwf-title);
	font-weight: 600;
	white-space: nowrap;
}

.mcwf-price-slider__apply {
	--_c: var(--mcwf-title);
	--_bg: var(--mcwf-light);
	--_r: var(--mcwf-btn-radius);
	--_p: 7px 14px;
	--_fs: 12px;
	--_fw: var(--mcwf-btn-fw);
	--_tt: var(--mcwf-btn-tt);
	--_ls: 0.3px;
}

.mcwf-price-slider__apply:hover {
	--_shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.08);
}

/* Pagination */

ul.mcwf-pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcwf-pagination__list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcwf-pagination .mcwf-pagination__link,
.mcwf-pagination .mcwf-pagination__link:visited,
.mcwf-pagination__dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 6px;
	color: var(--mcwf-title);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	border-radius: var(--mcwf-btn-radius);
	transition: color 0.2s, background-color 0.2s;
}

.mcwf-pagination .mcwf-pagination__list a.mcwf-pagination__link:hover,
.mcwf-pagination .mcwf-pagination__list a.mcwf-pagination__link:focus {
	color: var(--mcwf-title);
	background: var(--mcwf-light);
}

.mcwf-pagination .mcwf-pagination__list .mcwf-pagination__link.is-current {
	color: var(--mcwf-primary-text);
	background: var(--mcwf-primary);
}

[dir="rtl"] .mcwf-pagination__link--prev span,
[dir="rtl"] .mcwf-pagination__link--next span {
	display: inline-block;
	transform: scaleX(-1);
}

/* Tablet and phone: the sidebar slides in from the side. */
@media (max-width: 1024px) {
	.mcwf-shop__layout,
	.mcwf-shop--sidebar-right .mcwf-shop__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mcwf-shop__filter-toggle {
		display: inline-flex;
	}

	.mcwf-shop__per-page,
	.mcwf-shop__views {
		display: none;
	}

	.mcwf-shop__sidebar {
		position: fixed;
		top: 0;
		bottom: 0;
		inset-inline-start: 0;
		z-index: var(--mcwf-layer);
		display: flex;
		flex-direction: column;
		order: 0;
		width: 320px;
		max-width: 88vw;
		background: var(--mcwf-surface);
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform 0.5s var(--mcwf-ease), visibility 0s linear 0.5s;
	}

	[dir="rtl"] .mcwf-shop__sidebar {
		transform: translateX(100%);
	}

	.mcwf-shop.is-sidebar-open .mcwf-shop__sidebar {
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	.admin-bar .mcwf-shop__sidebar {
		top: 32px;
	}

	.mcwf-shop__sidebar-head {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: space-between;
		padding: 18px 15px;
		border-bottom: 1px solid var(--mcwf-border);
	}

	.mcwf-shop__sidebar-title {
		color: var(--mcwf-title);
		font-size: 20px;
		font-weight: 600;
		line-height: 1.2;
	}

	.mcwf-shop__sidebar-close {
		--_c: var(--mcwf-title);
		--_fs: 13px;
		--_fw: 600;

		display: inline-flex;
		align-items: center;
		gap: 5px;
	}

	.mcwf-shop__sidebar-close .mcwf-icon {
		width: 18px;
		height: 18px;
	}

	.mcwf-shop .mcwf-filters {
		flex: 1;
		min-height: 0;
		padding: 22px 15px;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.mcwf-shop__sidebar-foot {
		display: block;
		flex: none;
		padding: 12px 15px;
		border-top: 1px solid var(--mcwf-border);
	}

	.mcwf-shop__sidebar-foot .mcwf-btn {
		width: 100%;
	}

	.mcwf-shop__overlay {
		position: fixed;
		inset: 0;
		z-index: calc(var(--mcwf-layer) - 1);
		display: block;
		background: var(--mcwf-overlay);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s, visibility 0s linear 0.4s;
	}

	.mcwf-shop.is-sidebar-open .mcwf-shop__overlay {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}
}

@media (max-width: 782px) {
	.admin-bar .mcwf-shop__sidebar {
		top: 46px;
	}
}

@media (max-width: 767px) {
	.mcwf-shop__toolbar {
		gap: 10px 16px;
		margin-bottom: 18px;
	}

	.mcwf-shop .mcwf-shop__count {
		order: 3;
		flex-basis: 100%;
		font-size: 13px;
	}

	.mcwf-grid__footer,
	.mcwf-shop__footer {
		margin-top: 30px;
	}
}

/* -------------------------------------------------------------------------
 * 10. Wishlist
 * ---------------------------------------------------------------------- */

.mcwf-wishlist {
	position: relative;
	min-height: 160px;
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.5;
}

.mcwf-wishlist__loader {
	display: flex;
	justify-content: center;
	padding: 60px 0;
}

.mcwf-wishlist__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30px 15px 40px;
	text-align: center;
}

.mcwf-wishlist .mcwf-wishlist__empty-title {
	margin: 14px 0 8px;
	color: var(--mcwf-title);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.3;
}

.mcwf-wishlist .mcwf-wishlist__empty-text {
	max-width: 440px;
	margin: 0 0 22px;
	color: var(--mcwf-text);
	font-size: 14px;
}

/* -------------------------------------------------------------------------
 * 11. Single product page
 * ---------------------------------------------------------------------- */

button.mcwf-buy-now-single.mcwf-buy-now-single.button.alt,
button.mcwf-buy-now-single.mcwf-buy-now-single.button.alt:hover,
button.mcwf-buy-now-single.mcwf-buy-now-single.button.alt:focus {
	margin-inline-start: 8px;
	color: var(--mcwf-buy-text);
	background-color: var(--mcwf-buy);
	border-color: var(--mcwf-buy);
}

button.mcwf-buy-now-single.mcwf-buy-now-single.button.alt:hover {
	box-shadow: inset 0 0 0 200px rgba(255, 255, 255, 0.12);
}

/*
 * Loading state of Add to Cart and Buy Now in the product form.
 *
 * The script marks the busy button with its own class, not WooCommerce's
 * "loading": WooCommerce and many themes draw that one as a spinner 0.618em
 * from the top and 1em from the end of the button, which sits above the text
 * line or over its last letter, and widen the button while it shows.
 *
 * Here the spinner follows the text on the same line, and the two are centred
 * together. The pseudo-elements add no width in total (-11px + 8px + 14px -
 * 11px), so the button keeps its size and nothing around it moves.
 */
form.cart button.single_add_to_cart_button.single_add_to_cart_button.mcwf-loading.mcwf-loading,
form.cart button.mcwf-buy-now-single.mcwf-buy-now-single.mcwf-loading.mcwf-loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0.75;
	pointer-events: none;
}

/* Moves the text back by half the spinner's room, so text and spinner are centred as a pair. */
form.cart button.single_add_to_cart_button.single_add_to_cart_button.mcwf-loading.mcwf-loading::before,
form.cart button.mcwf-buy-now-single.mcwf-buy-now-single.mcwf-loading.mcwf-loading::before {
	content: "";
	position: static;
	display: block;
	flex: none;
	width: 0;
	height: 0;
	margin: 0;
	margin-inline-end: -11px;
	padding: 0;
	border: 0;
	background: none;
	animation: none;
}

form.cart button.single_add_to_cart_button.single_add_to_cart_button.mcwf-loading.mcwf-loading::after,
form.cart button.mcwf-buy-now-single.mcwf-buy-now-single.mcwf-loading.mcwf-loading::after {
	content: "";
	position: static;
	display: block;
	flex: none;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	margin: 0;
	margin-inline: 8px -11px;
	padding: 0;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	background: none;
	opacity: 1;
	transform: none;
	animation: mcwf-spin 0.6s linear infinite;
}

.mcwf-wishlist-btn--single {
	--_c: var(--mcwf-title);
	--_fs: 14px;
	--_fw: 600;
	--_lh: 1.4;

	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 4px 0 14px;
	clear: both;
}

.mcwf-wishlist-btn--single:hover {
	--_c: var(--mcwf-text);
}

.mcwf-wishlist-btn--single.is-active,
.mcwf-wishlist-btn--single.is-active:hover {
	--_c: var(--mcwf-primary);
}

/* -------------------------------------------------------------------------
 * 12. Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	[class*="mcwf-"],
	[class*="mcwf-"]::before,
	[class*="mcwf-"]::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.9s !important;
	}

	.mcwf-card--has-hover-image:hover .mcwf-card__media .mcwf-card__img--hover {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * 13. Elementor widgets
 * ---------------------------------------------------------------------- */

.mcwf-button-widget,
.mcwf-icon-widget {
	line-height: 1;
}

/*
 * The Single Product widget has no width of its own: its layout follows the
 * room it is given. In a row container it therefore takes the space that is
 * left, the way Elementor's own fluid widgets do, and never gets too narrow
 * to use. A width or "grow" value set on the widget in Elementor still wins.
 */
.elementor-element.elementor-widget-mcwf-single-product.elementor-widget-mcwf-single-product {
	--flex-grow: var(--container-widget-flex-grow, 0);

	min-width: min(100%, 280px);
}

/* Elementor leaves this variable empty in a row container: start from a good half of the row there, full width otherwise. */
.e-con > .elementor-element.elementor-widget-mcwf-single-product,
.e-con-inner > .elementor-element.elementor-widget-mcwf-single-product {
	width: var(--container-widget-width, 55%);
}

/* "Full width" alignment of the Add to Cart / Buy Now button widget. */
.mcwf-align-justify .mcwf-button-widget .mcwf-btn {
	display: flex;
	width: 100%;
}

@media (max-width: 1024px) {
	.mcwf-align-tablet-justify .mcwf-button-widget .mcwf-btn {
		display: flex;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.mcwf-align-mobile-justify .mcwf-button-widget .mcwf-btn {
		display: flex;
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * 14. Product search
 *
 * The field reads its own optional variables (--mcwf-search-height, -radius,
 * -border-width, -bg, -color, -border, -focus, -button-bg, -button-color), so
 * one search widget can be
 * restyled without touching the rest of the page. They are not declared here
 * on purpose: a value set on a wrapper (an Elementor widget) must reach it.
 * ---------------------------------------------------------------------- */

.mcwf-search {
	position: relative;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	color: var(--mcwf-text);
	font-family: var(--mcwf-font, inherit);
	font-size: var(--mcwf-fs);
	line-height: 1.4;
	text-align: start;
}

.mcwf-search .mcwf-search__form {
	display: flex;
	align-items: stretch;
	height: var(--mcwf-search-height, 46px);
	margin: 0;
	padding: 0;
	overflow: hidden;
	background: var(--mcwf-search-bg, var(--mcwf-surface));
	border: var(--mcwf-search-border-width, 2px) solid var(--mcwf-search-border, var(--mcwf-border));
	border-radius: var(--mcwf-search-radius, var(--mcwf-input-radius));
	transition: border-color 0.2s;
}

.mcwf-search .mcwf-search__form:focus-within {
	border-color: var(--mcwf-search-focus, var(--mcwf-primary));
}

.mcwf-search .mcwf-search__input {
	flex: 1 1 auto;
	width: auto !important;
	min-width: 0;
	height: 100% !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 16px !important;
	color: var(--mcwf-search-color, var(--mcwf-title)) !important;
	font-family: inherit;
	font-size: calc(var(--mcwf-fs) + 1px);
	line-height: normal;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: 0 !important;
	-webkit-appearance: none;
	appearance: none;
}

.mcwf-search .mcwf-search__input::placeholder {
	color: var(--mcwf-muted);
	opacity: 1;
}

.mcwf-search .mcwf-search__input::-webkit-search-cancel-button,
.mcwf-search .mcwf-search__input::-webkit-search-decoration {
	display: none;
	-webkit-appearance: none;
}

.mcwf-search__clear {
	--_c: var(--mcwf-muted);

	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 34px;
}

.mcwf-search__clear:hover,
.mcwf-search__clear:focus-visible {
	--_c: var(--mcwf-search-color, var(--mcwf-title));
}

.mcwf-search__clear .mcwf-icon {
	width: 16px;
	height: 16px;
}

/* Category dropdown */

.mcwf-search .mcwf-search__cat-wrap {
	position: relative;
	display: flex;
	flex: none;
	align-items: stretch;
	max-width: 36%;
	margin: 0;
	padding: 0;
	color: var(--mcwf-search-color, var(--mcwf-title));
	border-inline-start: 1px solid var(--mcwf-search-border, var(--mcwf-border));
}

.mcwf-search .mcwf-search__cat-wrap::after {
	content: "";
	position: absolute;
	top: 50%;
	inset-inline-end: 15px;
	width: 7px;
	height: 7px;
	border: solid currentColor;
	border-width: 0 1.5px 1.5px 0;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

.mcwf-search .mcwf-search__cat {
	width: auto !important;
	max-width: 100%;
	height: 100% !important;
	min-height: 0;
	margin: 0 !important;
	padding: 0 34px 0 16px !important;
	color: inherit !important;
	font-family: inherit;
	font-size: var(--mcwf-fs);
	line-height: normal;
	text-overflow: ellipsis;
	background: transparent none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

[dir="rtl"] .mcwf-search .mcwf-search__cat {
	padding: 0 16px 0 34px !important;
}

.mcwf-search .mcwf-search__cat:focus-visible,
.mcwf-search__clear:focus-visible,
.mcwf-search__submit:focus-visible {
	outline-offset: -4px;
}

/* Search button */

.mcwf-search__submit {
	--_c: var(--mcwf-search-color, var(--mcwf-title));
	--_p: 0 12px;

	position: relative;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: var(--mcwf-search-height, 46px);
}

.mcwf-search__submit:hover,
.mcwf-search__submit:focus-visible {
	--_c: var(--mcwf-search-focus, var(--mcwf-primary));
}

.mcwf-search--filled .mcwf-search__submit,
.mcwf-search--filled .mcwf-search__submit:hover,
.mcwf-search--filled .mcwf-search__submit:focus-visible {
	--_bg: var(--mcwf-search-button-bg, var(--mcwf-primary));
	--_c: var(--mcwf-search-button-color, var(--mcwf-primary-text));
	--_p: 0 18px;
	--_fs: var(--mcwf-btn-fs);
	--_fw: var(--mcwf-btn-fw);
	--_tt: var(--mcwf-btn-tt);
	--_ls: 0.3px;
}

.mcwf-search--filled .mcwf-search__submit:hover,
.mcwf-search--filled .mcwf-search__submit:focus-visible {
	--_shadow: inset 0 0 0 200px rgba(0, 0, 0, 0.1);
}

/* While a search runs, a spinner takes the place of the icon. */
.mcwf-search.is-loading .mcwf-search__submit > * {
	visibility: hidden;
}

.mcwf-search.is-loading .mcwf-search__submit::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 18px;
	height: 18px;
	margin: auto;
	border: 2px solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	animation: mcwf-spin 0.7s linear infinite;
}

/* Results */

.mcwf-search__results {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	z-index: 1000;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	background: var(--mcwf-surface);
	border: 1px solid var(--mcwf-border);
	border-radius: var(--mcwf-panel-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
	overscroll-behavior: contain;
}

.mcwf-search .mcwf-search__list {
	margin: 0;
	padding: 6px;
	list-style: none;
}

.mcwf-search .mcwf-search__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcwf-search a.mcwf-search__link,
.mcwf-search a.mcwf-search__link:visited {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 8px 10px;
	color: var(--mcwf-title);
	text-decoration: none;
	border-radius: var(--mcwf-input-radius);
	transition: background-color 0.15s;
}

.mcwf-search a.mcwf-search__link:hover,
.mcwf-search a.mcwf-search__link:focus {
	background: var(--mcwf-light);
}

.mcwf-search a.mcwf-search__link:focus-visible {
	outline-offset: -2px;
}

.mcwf-search__thumb {
	flex: none;
	width: 54px;
}

.mcwf-search .mcwf-search__thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: var(--mcwf-input-radius);
}

.mcwf-search__info {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mcwf-search__title {
	color: var(--mcwf-title);
	font-size: var(--mcwf-title-fs);
	font-weight: 600;
	line-height: 1.35;
}

.mcwf-search__sku {
	color: var(--mcwf-muted);
	font-size: 12px;
}

.mcwf-search__price {
	color: var(--mcwf-price, var(--mcwf-primary));
	font-size: var(--mcwf-fs);
	font-weight: 600;
	line-height: 1.3;
}

.mcwf-search__price del {
	color: var(--mcwf-muted);
	font-weight: 400;
}

.mcwf-search__price ins {
	text-decoration: none;
	background: none;
}

.mcwf-search a.mcwf-search__all,
.mcwf-search a.mcwf-search__all:visited {
	display: block;
	padding: 13px 16px;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: var(--mcwf-btn-fs);
	font-weight: var(--mcwf-btn-fw);
	line-height: 18px;
	letter-spacing: 0.3px;
	text-align: center;
	text-decoration: none;
	text-transform: var(--mcwf-btn-tt);
	border-top: 1px solid var(--mcwf-border);
	transition: color 0.2s;
}

.mcwf-search a.mcwf-search__all:hover,
.mcwf-search a.mcwf-search__all:focus {
	color: var(--mcwf-primary);
}

.mcwf-search .mcwf-search__empty {
	margin: 0;
	padding: 18px 16px;
	color: var(--mcwf-text);
	text-align: center;
}

/* Search icon and popup */

.mcwf-search-toggle {
	--_c: var(--mcwf-title);
	--_fs: 14px;
	--_fw: 600;

	display: inline-flex;
	align-items: center;
	gap: 10px;
	vertical-align: middle;
}

.mcwf-search-toggle:hover,
.mcwf-search-toggle:focus-visible {
	--_c: var(--mcwf-primary);
}

.mcwf-search-toggle .mcwf-icon {
	width: 26px;
	height: 26px;
}

.mcwf-search-modal {
	align-items: flex-start;
	padding-top: min(12vh, 110px);
}

.mcwf-search-modal .mcwf-search-modal__dialog {
	max-width: 720px;
	padding: 58px 24px 24px;
	overflow: visible;
}

.mcwf-search--modal {
	--mcwf-search-height: 54px;
}

.mcwf-search--modal .mcwf-search__results {
	position: static;
	max-height: calc(100vh - 280px);
	max-height: calc(100dvh - 280px);
	margin-top: 12px;
	box-shadow: none;
}

@media (max-width: 480px) {
	/* The category list would leave no room to type. */
	.mcwf-search .mcwf-search__cat-wrap {
		display: none;
	}

	.mcwf-search .mcwf-search__input {
		padding: 0 12px !important;
	}

	.mcwf-search-modal {
		padding: 10px;
	}

	.mcwf-search-modal .mcwf-search-modal__dialog {
		padding: 54px 14px 14px;
	}

	.mcwf-search--modal .mcwf-search__results {
		max-height: calc(100vh - 150px);
		max-height: calc(100dvh - 150px);
	}
}

/* -------------------------------------------------------------------------
 * 15. WhatsApp and Messenger buttons
 * ---------------------------------------------------------------------- */

.mcwf-chat {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	clear: both;
	margin: 0 0 18px;
}

.mcwf-chat .mcwf-chat__btn {
	--_c: var(--mcwf-chat-text);
	--_p: 5px 18px;

	/* Side by side where both labels fit, one per row otherwise. */
	flex: 1 1 210px;
	min-width: 0;
}

.mcwf-chat .mcwf-chat__btn--whatsapp {
	--_bg: var(--mcwf-whatsapp);
}

.mcwf-chat .mcwf-chat__btn--messenger {
	--_bg: var(--mcwf-messenger);
}

.mcwf-chat .mcwf-chat__btn .mcwf-icon {
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------------------
 * 16. Category slider
 *
 * One list, shown per screen size as a grid (rows) or as a slider (one row
 * that scrolls sideways). The classes mcwf-cats--{d,t,m}-{grid,slider} say
 * which; the column counts come in as --mcwf-cats-d, -t and -m.
 * ---------------------------------------------------------------------- */

.mcwf-cats {
	--_cols: var(--mcwf-cats-d, 6);
	--_gap: var(--mcwf-cats-gap, 20px);
	--_r: var(--mcwf-card-radius);

	display: grid;
	grid-template-columns: minmax(0, 100vw);
	min-width: 0;
	max-width: 100%;
	font-family: var(--mcwf-font, inherit);
}

.mcwf-cats--square {
	--_r: 0;
}

.mcwf-cats--circle {
	--_r: 50%;
}

.mcwf-cats .mcwf-cats__carousel {
	container-type: inline-size;
}

ul.mcwf-cats__list.mcwf-cats__list {
	display: grid;
	grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
	gap: var(--_gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Slider on desktop. */
.mcwf-cats--d-slider ul.mcwf-cats__list.mcwf-cats__list {
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
	.mcwf-cats {
		--_cols: var(--mcwf-cats-t, 4);
	}

	.mcwf-cats--t-grid ul.mcwf-cats__list.mcwf-cats__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}

	.mcwf-cats--t-slider ul.mcwf-cats__list.mcwf-cats__list {
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
}

@media (max-width: 767px) {
	.mcwf-cats {
		--_cols: var(--mcwf-cats-m, 3);
		--_gap: min(var(--mcwf-cats-gap, 20px), 14px);
	}

	.mcwf-cats--m-grid ul.mcwf-cats__list.mcwf-cats__list {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--_cols), minmax(0, 1fr));
		overflow: visible;
		scroll-snap-type: none;
	}

	.mcwf-cats--m-slider ul.mcwf-cats__list.mcwf-cats__list {
		grid-auto-flow: column;
		grid-auto-columns: calc((100% - (var(--_cols) - 1) * var(--_gap)) / var(--_cols));
		grid-template-columns: none;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
}

ul.mcwf-cats__list::-webkit-scrollbar {
	display: none;
}

.mcwf-cats li.mcwf-cats__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-snap-align: start;
}

.mcwf-cats li.mcwf-cats__item::before,
.mcwf-cats li.mcwf-cats__item::marker {
	content: none;
}

.mcwf-cats a.mcwf-cats__link,
.mcwf-cats a.mcwf-cats__link:visited,
.mcwf-cats a.mcwf-cats__link:hover,
.mcwf-cats a.mcwf-cats__link:focus {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	height: 100%;
	color: var(--mcwf-cats-name, var(--mcwf-title));
	text-align: center;
	text-decoration: none;
	box-shadow: none;
}

.mcwf-cats .mcwf-cats__media {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--mcwf-cats-bg, var(--mcwf-light));
	border-radius: var(--_r);
	isolation: isolate;
}

.mcwf-cats .mcwf-cats__media img.mcwf-cats__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 0;
	transition: transform 0.6s var(--mcwf-ease);
}

.mcwf-cats a.mcwf-cats__link:hover img.mcwf-cats__img {
	transform: scale(1.06);
}

.mcwf-cats .mcwf-cats__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 0;
	max-width: 100%;
}

.mcwf-cats .mcwf-cats__name {
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: var(--mcwf-cats-name-fs, 15px);
	font-weight: var(--mcwf-heading-fw);
	line-height: 1.3;
	overflow-wrap: anywhere;
	transition: color 0.2s;
}

.mcwf-cats--below a.mcwf-cats__link:hover .mcwf-cats__name {
	color: var(--mcwf-primary);
}

.mcwf-cats .mcwf-cats__count {
	color: var(--mcwf-muted);
	font-size: 13px;
	line-height: 1.3;
}

/* Name on the image: a dark fade at the bottom keeps light text readable on any picture. */
.mcwf-cats--overlay a.mcwf-cats__link,
.mcwf-cats--overlay a.mcwf-cats__link:visited,
.mcwf-cats--overlay a.mcwf-cats__link:hover,
.mcwf-cats--overlay a.mcwf-cats__link:focus {
	position: relative;
	display: block;
	color: var(--mcwf-cats-name, #fff);
}

.mcwf-cats--overlay .mcwf-cats__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 60%);
	pointer-events: none;
}

.mcwf-cats--overlay .mcwf-cats__body {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	padding: 12px 10px 14px;
}

/* In a circle the text sits in the middle, where the circle is widest, over an even shade. */
.mcwf-cats--overlay.mcwf-cats--circle .mcwf-cats__media::after {
	background: rgba(0, 0, 0, 0.38);
}

.mcwf-cats--overlay.mcwf-cats--circle .mcwf-cats__body {
	inset: 0;
	justify-content: center;
	padding: 12%;
}

.mcwf-cats--overlay .mcwf-cats__count {
	color: rgba(255, 255, 255, 0.85);
}

/* Arrows in the middle of the pictures: half the width of one item down from the top. */
.mcwf-cats .mcwf-carousel__arrow {
	top: 35%;
	margin-top: -20px;
}

@supports (container-type: inline-size) {
	.mcwf-cats .mcwf-carousel__arrow {
		top: calc((100cqi - (var(--_cols) - 1) * var(--_gap)) / var(--_cols) / 2);
	}
}

.mcwf-cats.mcwf-cats--overlay .mcwf-carousel__arrow {
	top: 50%;
}

@media (max-width: 767px) {
	.mcwf-cats .mcwf-carousel__arrow {
		margin-top: -17px;
	}

	.mcwf-cats .mcwf-cats__name {
		font-size: min(var(--mcwf-cats-name-fs, 15px), 14px);
	}

	.mcwf-cats .mcwf-cats__count {
		font-size: 12px;
	}
}

/* -------------------------------------------------------------------------
 * 17. Call now
 * ---------------------------------------------------------------------- */

a.mcwf-call,
a.mcwf-call:visited,
a.mcwf-call:hover,
a.mcwf-call:focus {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	max-width: 100%;
	color: var(--mcwf-title);
	font-family: var(--mcwf-font, inherit);
	line-height: 1.2;
	text-decoration: none;
	vertical-align: middle;
	box-shadow: none;
}

a.mcwf-call.mcwf-call--left {
	flex-direction: row-reverse;
}

.mcwf-call .mcwf-call__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.mcwf-call .mcwf-call__number {
	color: var(--mcwf-call-number, var(--mcwf-title));
	font-family: var(--mcwf-font-heading, var(--mcwf-font, inherit));
	font-size: var(--mcwf-call-number-fs, 16px);
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	direction: ltr;
	unicode-bidi: isolate;
	transition: color 0.2s;
}

.mcwf-call .mcwf-call__label {
	color: var(--mcwf-call-text, var(--mcwf-text));
	font-size: var(--mcwf-call-text-fs, 12px);
	line-height: 1.3;
}

a.mcwf-call:hover .mcwf-call__number,
a.mcwf-call:focus-visible .mcwf-call__number {
	color: var(--mcwf-primary);
}

.mcwf-call .mcwf-call__media {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--mcwf-call-img, 40px);
	height: var(--mcwf-call-img, 40px);
}

.mcwf-call .mcwf-call__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: contain;
}

/* Without a picture: a phone in a circle of the primary colour. */
.mcwf-call .mcwf-call__media--icon {
	color: var(--mcwf-primary-text);
	background: var(--mcwf-primary);
	border-radius: 50%;
}

.mcwf-call .mcwf-call__media--icon .mcwf-icon {
	width: 55%;
	height: 55%;
}

@media (max-width: 767px) {
	.mcwf-call--m-number .mcwf-call__label {
		display: none;
	}

	/* Picture only: the text stays for screen readers. */
	.mcwf-call--m-image .mcwf-call__text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	a.mcwf-call.mcwf-call--m-image {
		position: relative;
		gap: 0;
	}
}

/* -------------------------------------------------------------------------
 * 18. Page spacing
 *
 * Space between the theme's header and footer and the product page, cart,
 * checkout, shop and wishlist of this plugin. Margins, so that a gap the
 * theme already leaves with margins is not doubled. Pages built with
 * Elementor keep the spacing set in Elementor.
 * ---------------------------------------------------------------------- */

body.mcwf-page-gap div.mcwf-product:not(.elementor div),
body.mcwf-page-gap div.mcwf-area:not(.elementor div),
body.mcwf-page-gap div.mcwf-archive:not(.elementor div),
body.mcwf-page-gap div.mcwf-shop:not(.elementor div, .mcwf-archive div),
body.mcwf-page-gap div.mcwf-wishlist:not(.elementor div) {
	margin-top: var(--mcwf-page-gap-top, 50px);
	margin-bottom: var(--mcwf-page-gap-bottom, 50px);
}

@media (max-width: 767px) {
	body.mcwf-page-gap div.mcwf-product:not(.elementor div),
	body.mcwf-page-gap div.mcwf-area:not(.elementor div),
	body.mcwf-page-gap div.mcwf-archive:not(.elementor div),
	body.mcwf-page-gap div.mcwf-shop:not(.elementor div, .mcwf-archive div),
	body.mcwf-page-gap div.mcwf-wishlist:not(.elementor div) {
		margin-top: var(--mcwf-page-gap-top-m, 50px);
		margin-bottom: var(--mcwf-page-gap-bottom-m, 50px);
	}
}