/* WooCommerce widgets: Products (.msw-products) and Product Categories (.msw-cats).
   Every colour / size the Style tab exposes is a custom property on the .msw root;
   the defaults below are the values used when a control is left empty.

   Class prefix is `msw-` on purpose: the Hello MauveStudio theme's icon font owns
   `.ms-<name>::before` (ms-product, ms-bag, ms-search, ms-plus…) and would draw
   glyphs into any element named like that.

   Buttons, inputs and the select carry at least three classes in every selector so
   they beat Elementor's Site Settings → Buttons / Form Fields rules
   (`.elementor-kit-N button:hover` etc.), which otherwise repaint borders and radii. */
.msw {
	--ms-cols: 4;
	--ms-gap: 28px;
	--ms-ratio: 3 / 4;
	--ms-fit: cover;
	--ms-row: 240px;
	--ms-zoom: 1.06;
	--ms-align: flex-start;
	--ms-card-bg: transparent;
	--ms-card-radius: 0px;
	--ms-img-radius: 4px;
	--ms-img-bg: #F4F1EA;
	--ms-img-tint: transparent;
	--ms-media-mb: 16px;
	--ms-ov-from: rgba(0, 0, 0, 0);
	--ms-ov-to: rgba(0, 0, 0, 0.62);
	--ms-ov-text: #FFFFFF;
	--ms-ov-valign: flex-end;
	--ms-cat-color: #8A8578;
	--ms-cat-mb: 6px;
	--ms-title-color: inherit;
	--ms-title-color-h: #E23B26;
	--ms-title-mb: 6px;
	--ms-star: #E9B949;
	--ms-star-empty: #DDD8CC;
	--ms-star-size: 14px;
	--ms-rcount-color: #8A8578;
	--ms-rating-mb: 6px;
	--ms-price-color: inherit;
	--ms-price-sale: inherit;
	--ms-price-old: #A29D91;
	--ms-price-mb: 0px;
	--ms-excerpt-color: #6D685E;
	--ms-excerpt-mb: 0px;
	--ms-excerpt-mt: 8px;
	--ms-btn-color: #FFFFFF;
	--ms-btn-bg: #1A1816;
	--ms-btn-border: #1A1816;
	--ms-btn-color-h: #FFFFFF;
	--ms-btn-bg-h: #E23B26;
	--ms-btn-border-h: #E23B26;
	--ms-btn-bw: 1px;
	--ms-btn-radius: 999px;
	--ms-btn-round: 44px;
	--ms-btn-icon: 18px;
	--ms-btn-gap: 8px;
	--ms-btn-w: auto;
	--ms-btn-mt: 14px;
	--ms-vc-color: inherit;
	--ms-badge-sale-bg: #E23B26;
	--ms-badge-sale-color: #FFFFFF;
	--ms-badge-new-bg: #1A1816;
	--ms-badge-new-color: #FFFFFF;
	--ms-badge-oos-bg: #FFFFFF;
	--ms-badge-oos-color: #1A1816;
	--ms-badge-radius: 999px;
	--ms-badge-offset: 12px;
	--ms-bar-mb: 40px;
	--ms-bar-gap: 20px;
	--ms-pill-color: inherit;
	--ms-pill-bg: transparent;
	--ms-pill-border: rgba(0, 0, 0, 0.18);
	--ms-pill-color-h: #1A1816;
	--ms-pill-bg-h: rgba(0, 0, 0, 0.05);
	--ms-pill-border-h: rgba(0, 0, 0, 0.35);
	--ms-pill-color-a: #FFFFFF;
	--ms-pill-bg-a: #1A1816;
	--ms-pill-border-a: #1A1816;
	--ms-pill-radius: 999px;
	--ms-pill-bw: 1px;
	--ms-pill-gap: 8px;
	--ms-pill-count: currentColor;
	--ms-tool-color: inherit;
	--ms-tool-bg: transparent;
	--ms-tool-border: rgba(0, 0, 0, 0.18);
	--ms-tool-border-f: #1A1816;
	--ms-tool-radius: 999px;
	--ms-tool-h: 42px;
	--ms-search-w: 240px;
	--ms-pg-color: inherit;
	--ms-pg-bg: transparent;
	--ms-pg-border: rgba(0, 0, 0, 0.18);
	--ms-pg-color-h: #1A1816;
	--ms-pg-bg-h: rgba(0, 0, 0, 0.05);
	--ms-pg-border-h: rgba(0, 0, 0, 0.35);
	--ms-pg-color-a: #FFFFFF;
	--ms-pg-bg-a: #1A1816;
	--ms-pg-border-a: #1A1816;
	--ms-pg-size: 42px;
	--ms-pg-radius: 999px;
	--ms-pg-gap: 8px;
	--ms-pg-mt: 40px;
	--ms-spinner: #1A1816;
	--ms-arrow-size: 44px;
	--ms-arrow-icon: 18px;
	--ms-arrow-offset: 0px;
	--ms-arrow-top: 50%;
	--ms-arrow-color: #1A1816;
	--ms-arrow-bg: #FFFFFF;
	--ms-arrow-border: rgba(0, 0, 0, 0.12);
	--ms-arrow-color-h: #FFFFFF;
	--ms-arrow-bg-h: #1A1816;
	--ms-arrow-radius: 50%;
	--ms-dot-size: 8px;
	--ms-dot-gap: 8px;
	--ms-dot-top: 24px;
	--ms-dot: rgba(0, 0, 0, 0.2);
	--ms-dot-active: #1A1816;
	--ms-circle: 70%;
	--ms-cat-arrow: 18px;
	--ms-list-media: 40%;
	--ms-list-gap: 24px;
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Underlined / plain filter styles read better with more room and a dark active state.
   Declared on the Elementor wrapper's descendant so a control value on .msw still wins. */
.msw-bar-underline .msw,
.msw-bar-plain .msw {
	--ms-pill-color-a: #1A1816;
	--ms-pill-border-a: #1A1816;
	--ms-pill-gap: 22px;
}

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

.msw [hidden] {
	display: none !important;
}

.msw-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.msw-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	vertical-align: middle;
}

.msw-notice {
	padding: 14px 18px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
	opacity: 0.8;
}

/* Invisible probe: its box follows --ms-cols / --ms-gap, so a ResizeObserver in
   ms-woo.js learns about breakpoint changes and live edits in the Elementor editor. */
.msw-probe {
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--ms-cols, 1) * 1px);
	height: var(--ms-gap, 0px);
	visibility: hidden;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Grid / list / carousel / collage containers
 * ------------------------------------------------------------------- */
.msw-products__list,
.msw-cats__list {
	display: grid;
	grid-template-columns: repeat(var(--ms-cols), minmax(0, 1fr));
	gap: var(--ms-gap);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msw-products--carousel .msw-products__list,
.msw-cats--carousel .msw-cats__list {
	display: block;
}

.msw-swiper {
	position: relative;
	overflow: hidden;
	width: 100%;
}

/* Before Swiper runs (and if it never does) the slides fall back to a flex row of
   --ms-cols items, so nothing collapses or piles up. */
.msw-swiper .swiper-wrapper {
	display: flex;
	gap: 0;
}

.msw-swiper:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 calc((100% - (var(--ms-cols) - 1) * var(--ms-gap)) / var(--ms-cols));
	max-width: calc((100% - (var(--ms-cols) - 1) * var(--ms-gap)) / var(--ms-cols));
	margin-right: var(--ms-gap);
}

.msw-swiper .swiper-slide {
	height: auto;
	box-sizing: border-box;
}

.msw-swiper .swiper-slide > * {
	height: 100%;
}

/* Collage: fixed-height rows, dense packing, tiles fill their cell. The patterns
   (.msw-collage-* on the Elementor wrapper) span tiles across 2 columns / rows from
   tablet up; on phones every tile is 1×1 so a 1-column grid can never overflow. */
.msw-products--collage .msw-products__list,
.msw-cats--collage .msw-cats__list {
	grid-auto-rows: var(--ms-row);
	grid-auto-flow: dense;
	align-items: stretch;
}

.msw-products--collage .msw-product,
.msw-cats--collage .msw-cat {
	height: 100%;
}

.msw-products--collage .msw-product__media,
.msw-cats--collage .msw-cat__media {
	flex: 1 1 auto;
	min-height: 0;
}

.msw-products--collage .msw-product__link,
.msw-cats--collage .msw-cat__media {
	aspect-ratio: auto;
	height: 100%;
}

.msw-products--collage .msw-product__media {
	display: flex;
	flex-direction: column;
}

.msw-products--collage .msw-product__link {
	flex: 1 1 auto;
	min-height: 0;
}

@media (min-width: 768px) {
	.msw-collage-big-first .msw-products__list > :nth-child(1),
	.msw-collage-big-first .msw-cats__list > :nth-child(1),
	.msw-collage-alternate .msw-products__list > :nth-child(6n+1),
	.msw-collage-alternate .msw-cats__list > :nth-child(6n+1),
	.msw-collage-mosaic .msw-products__list > :nth-child(7n+1),
	.msw-collage-mosaic .msw-cats__list > :nth-child(7n+1) {
		grid-column: span 2;
		grid-row: span 2;
	}

	.msw-collage-mosaic .msw-products__list > :nth-child(7n+4),
	.msw-collage-mosaic .msw-cats__list > :nth-child(7n+4) {
		grid-row: span 2;
	}

	.msw-collage-mosaic .msw-products__list > :nth-child(7n+6),
	.msw-collage-mosaic .msw-cats__list > :nth-child(7n+6) {
		grid-column: span 2;
	}

	.msw-collage-rows .msw-products__list > :nth-child(5n+1),
	.msw-collage-rows .msw-cats__list > :nth-child(5n+1),
	.msw-collage-rows .msw-products__list > :nth-child(5n+5),
	.msw-collage-rows .msw-cats__list > :nth-child(5n+5) {
		grid-column: span 2;
	}
}

/* ---------------------------------------------------------------------
 * Product card
 * ------------------------------------------------------------------- */
.msw-product {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	background: var(--ms-card-bg);
	border-radius: var(--ms-card-radius);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}

.msw-product__media {
	position: relative;
	overflow: hidden;
	background: var(--ms-img-bg);
	border-radius: var(--ms-img-radius);
	margin-bottom: var(--ms-media-mb);
}

.msw-product__link {
	position: relative;
	display: block;
	aspect-ratio: var(--ms-ratio);
	overflow: hidden;
}

.msw-product__link::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ms-img-tint);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.msw-product:hover .msw-product__link::after {
	opacity: 1;
}

.msw .msw-product__img,
.msw .msw-cat__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: var(--ms-fit);
	object-position: center;
	margin: 0;
	transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.45s ease;
	will-change: transform;
}

.msw .msw-product__img--alt {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/* Hover effects */
.msw-hover--zoom .msw-product:hover .msw-product__img,
.msw-hover--zoom .msw-cat:hover .msw-cat__img {
	transform: scale(var(--ms-zoom));
}

.msw-hover--swap .msw-product:hover .msw-product__img--alt {
	opacity: 1;
}

.msw-hover--lift .msw-product:hover,
.msw-hover--lift .msw-cat:hover {
	transform: translateY(-6px);
}

/* Badges */
.msw-product__badges {
	position: absolute;
	top: var(--ms-badge-offset);
	left: var(--ms-badge-offset);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	z-index: 2;
	pointer-events: none;
}

.msw-badges-tr .msw-product__badges {
	left: auto;
	right: var(--ms-badge-offset);
	align-items: flex-end;
}

.msw-badges-bl .msw-product__badges {
	top: auto;
	bottom: var(--ms-badge-offset);
}

.msw-badges-br .msw-product__badges {
	top: auto;
	bottom: var(--ms-badge-offset);
	left: auto;
	right: var(--ms-badge-offset);
	align-items: flex-end;
}

.msw-badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: var(--ms-badge-radius);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.msw-badge--sale {
	background: var(--ms-badge-sale-bg);
	color: var(--ms-badge-sale-color);
}

.msw-badge--new {
	background: var(--ms-badge-new-bg);
	color: var(--ms-badge-new-color);
}

.msw-badge--oos {
	background: var(--ms-badge-oos-bg);
	color: var(--ms-badge-oos-color);
}

/* Body */
.msw-product__body {
	display: flex;
	flex-direction: column;
	align-items: var(--ms-align);
	min-width: 0;
	text-align: left;
}

.msw .msw-product__cat {
	display: inline-block;
	margin: 0 0 var(--ms-cat-mb);
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ms-cat-color);
	text-decoration: none;
}

.msw .msw-product__title {
	margin: 0 0 var(--ms-title-mb);
	font-size: 17px;
	line-height: 1.3;
	font-weight: 500;
}

.msw .msw-product__title a {
	color: var(--ms-title-color);
	text-decoration: none;
	transition: color 0.25s ease;
}

.msw .msw-product:hover .msw-product__title a {
	color: var(--ms-title-color-h);
}

/* Rating: five masked stars, the filled layer clipped to the percentage */
.msw-product__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 var(--ms-rating-mb);
}

.msw-stars {
	position: relative;
	display: inline-block;
	width: calc(var(--ms-star-size) * 5 + 4px * 4);
	height: var(--ms-star-size);
	background-color: var(--ms-star-empty);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4 6.1 20.5l1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E");
	-webkit-mask-size: var(--ms-star-size) var(--ms-star-size);
	mask-size: var(--ms-star-size) var(--ms-star-size);
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: 0 0;
	mask-position: 0 0;
	flex: 0 0 auto;
}

.msw-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	background-color: var(--ms-star);
}

.msw-product__rcount {
	font-size: 12px;
	color: var(--ms-rcount-color);
}

/* Price (WooCommerce's own <span class="price"> markup) */
.msw .msw-product__price {
	margin: 0 0 var(--ms-price-mb);
	font-size: 15px;
	line-height: 1.4;
	color: var(--ms-price-color);
}

.msw .msw-product__price .price,
.msw .msw-product__price .amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.msw .msw-product__price del {
	color: var(--ms-price-old);
	opacity: 1;
	margin-right: 6px;
	font-weight: 400;
}

.msw .msw-product__price del .amount {
	color: inherit;
}

.msw .msw-product__price ins {
	text-decoration: none;
	color: var(--ms-price-sale);
	font-weight: inherit;
}

.msw .msw-product__excerpt {
	margin: 0 0 var(--ms-excerpt-mb);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ms-excerpt-color);
}

/* Add to cart (an <a> without the theme-facing "button" class on purpose) */
.msw-product__cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	width: 100%;
	justify-content: var(--ms-align);
	margin-top: var(--ms-btn-mt);
}

.msw .msw-product a.msw-product__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ms-btn-gap);
	width: var(--ms-btn-w);
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 11px 22px;
	border: var(--ms-btn-bw) solid var(--ms-btn-border);
	border-radius: var(--ms-btn-radius);
	background: var(--ms-btn-bg);
	color: var(--ms-btn-color);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	white-space: nowrap;
	position: relative;
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.msw .msw-product a.msw-product__btn:hover,
.msw .msw-product a.msw-product__btn:focus-visible {
	background: var(--ms-btn-bg-h);
	color: var(--ms-btn-color-h);
	border-color: var(--ms-btn-border-h);
	border-radius: var(--ms-btn-radius);
	text-decoration: none;
}

.msw .msw-product a.msw-product__btn .msw-icon {
	width: var(--ms-btn-icon);
	height: var(--ms-btn-icon);
}

/* Icon-only: a round button */
.msw.msw-btn--icon .msw-product a.msw-product__btn,
.msw.msw-btn--icon .msw-product a.msw-product__btn:hover {
	width: var(--ms-btn-round);
	height: var(--ms-btn-round);
	padding: 0;
	border-radius: 50%;
}

/* WooCommerce adds a "View cart" link right after the button once an item is added */
.msw .msw-product .added_to_cart {
	display: inline-block;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--ms-vc-color);
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

/* Add-to-cart states (classes set by WooCommerce's wc-add-to-cart.js): while adding, the
   label/icon give way to a spinner; on success a check mark pops in; ms-woo.js clears
   the "added" state after a moment so the label comes back. Both are drawn in
   currentColor, so they follow the button's text colour (hover colour included). */
.msw .msw-product a.msw-product__btn > * {
	transition: opacity 0.25s ease;
}

/* The label fades out twice over: its span → opacity 0, and the button's own text colour
   → transparent (covers a bare text node, should anything rewrite the anchor). The
   spinner / check therefore take their colour from the button variables, not currentColor. */
.msw .msw-product a.msw-product__btn.loading,
.msw .msw-product a.msw-product__btn.added {
	color: transparent;
}

.msw .msw-product .msw-product__btn.loading > *,
.msw .msw-product .msw-product__btn.added > * {
	opacity: 0; /* fades out; fades back in when the classes go */
}

.msw .msw-product .msw-product__btn.loading::before,
.msw .msw-product .msw-product__btn.added::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	box-sizing: border-box;
	background: none;
	font-family: inherit;
	color: var(--ms-btn-color);
}

.msw .msw-product .msw-product__btn.loading:hover::before,
.msw .msw-product .msw-product__btn.added:hover::before {
	color: var(--ms-btn-color-h);
}

.msw .msw-product .msw-product__btn.loading::before {
	width: 1.25em;
	height: 1.25em;
	margin: -0.625em 0 0 -0.625em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: msw-spin 0.7s linear infinite, msw-fade-in 0.25s ease;
}

.msw .msw-product .msw-product__btn.added::before {
	width: 0.55em;
	height: 1em;
	margin: -0.62em 0 0 -0.27em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	animation: msw-check-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.msw .msw-product .msw-product__btn.loading::after,
.msw .msw-product .msw-product__btn.added::after {
	display: none; /* WooCommerce's own spinner pseudo-element, should the theme add the .button rules */
}

/* ms-woo.js adds .msw-out for a moment before removing .added: the check fades away
   first, then the label fades back in. */
.msw .msw-product .msw-product__btn.added.msw-out::before {
	opacity: 0;
	animation: none;
	transition: opacity 0.25s ease;
}

@keyframes msw-check-pop {
	0%   { transform: rotate(45deg) scale(0.4); opacity: 0; }
	100% { transform: rotate(45deg) scale(1); opacity: 1; }
}

@keyframes msw-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Actions floated on the image (Overlay / Minimal cards) */
.msw-product__actions {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	max-width: calc(100% - 24px);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.msw-product__actions .added_to_cart {
	background: var(--ms-btn-bg);
	color: var(--ms-btn-color);
	padding: 6px 12px;
	border-radius: var(--ms-btn-radius);
	text-decoration: none;
}

.msw-product:hover .msw-product__actions,
.msw-product:focus-within .msw-product__actions,
.msw-btn-always-yes .msw-product__actions {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.msw-product__actions {
		opacity: 1;
		transform: none;
	}
}

/* Text-style button on an overlay/minimal card spans the media bottom edge */
.msw-btn--text .msw-product__actions,
.msw-btn--icon-text .msw-product__actions {
	left: 12px;
	right: 12px;
	max-width: none;
	justify-content: center;
}

.msw-btn--text .msw-product__actions a.msw-product__btn,
.msw-btn--icon-text .msw-product__actions a.msw-product__btn {
	width: 100%;
}

/* ---- Overlay card: text on the image --------------------------------- */
.msw-cards--overlay .msw-product__media {
	margin-bottom: 0;
}

.msw-cards--overlay .msw-product__link::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, var(--ms-ov-from) 40%, var(--ms-ov-to) 100%);
	pointer-events: none;
}

.msw-cards--overlay .msw-product__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: 20px;
	color: var(--ms-ov-text);
	pointer-events: none;
}

.msw-cards--overlay .msw-product__body a,
.msw-cards--overlay .msw-product__body .msw-product__price,
.msw-cards--overlay .msw-product__body .msw-product__cat,
.msw-cards--overlay .msw-product__body .msw-product__excerpt,
.msw-cards--overlay .msw-product__rcount {
	color: inherit;
	pointer-events: auto;
}

.msw-cards--overlay .msw-product__body .msw-product__price del {
	color: inherit;
	opacity: 0.7;
}

.msw-cards--overlay .msw-product__body .msw-product__title a {
	color: inherit;
}

.msw-cards--overlay .msw-product__actions {
	bottom: auto;
	top: 12px;
}

.msw-cards--overlay.msw-btn--text .msw-product__actions,
.msw-cards--overlay.msw-btn--icon-text .msw-product__actions {
	top: auto;
	bottom: 12px;
}

.msw-cards--overlay.msw-btn--text .msw-product__body,
.msw-cards--overlay.msw-btn--icon-text .msw-product__body {
	transition: transform 0.3s ease;
}

.msw-cards--overlay.msw-btn--text .msw-product:hover .msw-product__body,
.msw-cards--overlay.msw-btn--icon-text .msw-product:hover .msw-product__body,
.msw-cards--overlay.msw-btn--text.msw-btn-always-yes .msw-product__body,
.msw-cards--overlay.msw-btn--icon-text.msw-btn-always-yes .msw-product__body {
	transform: translateY(calc(-1 * (var(--ms-btn-icon) + 34px)));
}

/* ---- Minimal card: title + price row, nothing else shouts ----------- */
.msw-cards--minimal .msw-product__body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 12px;
}

.msw-cards--minimal .msw-product__cat,
.msw-cards--minimal .msw-product__rating,
.msw-cards--minimal .msw-product__excerpt {
	flex: 0 0 100%;
}

.msw-cards--minimal .msw-product__title {
	flex: 1 1 auto;
	margin-bottom: 0;
	font-size: 15px;
}

.msw-cards--minimal .msw-product__price {
	flex: 0 0 auto;
	margin: 0;
}

/* ---- List layout: image beside the text ------------------------------ */
.msw-products--list .msw-product {
	display: grid;
	grid-template-columns: var(--ms-list-media) minmax(0, 1fr);
	gap: var(--ms-list-gap);
	align-items: center;
}

.msw-products--list .msw-product__media {
	margin-bottom: 0;
}

.msw-products--list .msw-product__body {
	padding: 0;
}

@media (max-width: 600px) {
	.msw-products--list:not(.msw-list-row-yes) .msw-product {
		grid-template-columns: minmax(0, 1fr);
	}

	.msw-products--list:not(.msw-list-row-yes) .msw-product__media {
		margin-bottom: var(--ms-media-mb);
	}
}

/* ---------------------------------------------------------------------
 * Filter bar
 * ------------------------------------------------------------------- */
.msw-products__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ms-bar-gap);
	margin-bottom: var(--ms-bar-mb);
}

.msw-bar-align-left .msw-products__bar {
	justify-content: flex-start;
}

.msw-bar-align-center .msw-products__bar,
.msw-bar-align-center .msw-products__filters,
.msw-bar-align-center .msw-products__tools {
	justify-content: center;
}

.msw-bar-align-right .msw-products__bar,
.msw-bar-align-right .msw-products__filters,
.msw-bar-align-right .msw-products__tools {
	justify-content: flex-end;
}

.msw-bar-align-center .msw-products__bar > *,
.msw-bar-align-right .msw-products__bar > *,
.msw-bar-align-left .msw-products__bar > * {
	flex: 0 1 auto;
}

.msw-products__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-pill-gap);
	min-width: 0;
}

.msw .msw-products__bar .msw-products__pill {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	padding: 9px 18px;
	border-style: solid;
	border-width: var(--ms-pill-bw);
	border-color: var(--ms-pill-border);
	border-radius: var(--ms-pill-radius);
	background: var(--ms-pill-bg);
	color: var(--ms-pill-color);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	transform: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.msw .msw-products__bar .msw-products__pill:hover,
.msw .msw-products__bar .msw-products__pill:focus-visible {
	background: var(--ms-pill-bg-h);
	color: var(--ms-pill-color-h);
	border-color: var(--ms-pill-border-h);
}

.msw .msw-products__bar .msw-products__pill.is-active,
.msw .msw-products__bar .msw-products__pill.is-active:hover {
	background: var(--ms-pill-bg-a);
	color: var(--ms-pill-color-a);
	border-color: var(--ms-pill-border-a);
}

.msw-products__count {
	font-size: 0.85em;
	opacity: 0.7;
	color: var(--ms-pill-count);
}

/* Underline / plain filter styles */
.msw-bar-underline .msw .msw-products__bar .msw-products__pill,
.msw-bar-plain .msw .msw-products__bar .msw-products__pill {
	padding-left: 0;
	padding-right: 0;
	border-width: 0;
	border-radius: 0;
	background: transparent;
	color: var(--ms-pill-color);
}

.msw-bar-underline .msw .msw-products__bar .msw-products__pill {
	border-bottom-width: var(--ms-pill-bw);
	border-bottom-color: transparent;
}

.msw-bar-underline .msw .msw-products__bar .msw-products__pill:hover,
.msw-bar-underline .msw .msw-products__bar .msw-products__pill:focus-visible {
	background: transparent;
	color: var(--ms-pill-color-h);
	border-bottom-color: var(--ms-pill-border-h);
}

.msw-bar-underline .msw .msw-products__bar .msw-products__pill.is-active,
.msw-bar-underline .msw .msw-products__bar .msw-products__pill.is-active:hover {
	background: transparent;
	color: var(--ms-pill-color-a);
	border-bottom-color: var(--ms-pill-border-a);
}

.msw-bar-plain .msw .msw-products__bar .msw-products__pill:hover,
.msw-bar-plain .msw .msw-products__bar .msw-products__pill:focus-visible {
	background: transparent;
	color: var(--ms-pill-color-h);
}

.msw-bar-plain .msw .msw-products__bar .msw-products__pill.is-active,
.msw-bar-plain .msw .msw-products__bar .msw-products__pill.is-active:hover {
	background: transparent;
	color: var(--ms-pill-color-a);
	font-weight: 700;
}

/* Tools: search + sort */
.msw-products__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.msw-bar-align-center .msw-products__tools,
.msw-bar-align-left .msw-products__tools {
	margin-left: 0;
}

.msw-products__search {
	position: relative;
	display: inline-flex;
	align-items: center;
	width: var(--ms-search-w);
	max-width: 100%;
	margin: 0;
}

.msw-products__search .msw-icon {
	position: absolute;
	left: 14px;
	width: 16px;
	height: 16px;
	color: var(--ms-tool-color);
	opacity: 0.6;
	pointer-events: none;
}

/* Five classes: beats Site Settings → Form Fields (`.elementor-kit-N input:not(…):not(…):focus`). */
.msw .msw-products__bar .msw-products__tools .msw-products__search input.msw-products__input,
.msw .msw-products__bar .msw-products__tools .msw-products__sortwrap .msw-products__sort {
	width: 100%;
	height: var(--ms-tool-h);
	min-height: 0;
	margin: 0;
	padding: 0 16px;
	border: 1px solid var(--ms-tool-border);
	border-radius: var(--ms-tool-radius);
	background: var(--ms-tool-bg);
	color: var(--ms-tool-color);
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	box-shadow: none;
	outline: none;
	transition: border-color 0.25s ease;
}

.msw .msw-products__bar .msw-products__tools .msw-products__search input.msw-products__input {
	padding-left: 38px;
}

.msw .msw-products__bar .msw-products__tools .msw-products__search input.msw-products__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.msw .msw-products__bar .msw-products__tools .msw-products__search input.msw-products__input:focus,
.msw .msw-products__bar .msw-products__tools .msw-products__search input.msw-products__input:focus-visible,
.msw .msw-products__bar .msw-products__tools .msw-products__sortwrap .msw-products__sort:focus,
.msw .msw-products__bar .msw-products__tools .msw-products__sortwrap .msw-products__sort:focus-visible {
	border: 1px solid var(--ms-tool-border-f);
	border-radius: var(--ms-tool-radius);
	background: var(--ms-tool-bg);
	color: var(--ms-tool-color);
	box-shadow: none;
	outline: none;
}

.msw-products__sortwrap {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.msw .msw-products__bar .msw-products__tools .msw-products__sortwrap .msw-products__sort {
	appearance: none;
	-webkit-appearance: none;
	width: auto;
	min-width: 160px;
	padding-right: 40px;
	cursor: pointer;
	background-image: none;
}

.msw-products__sortwrap .msw-icon {
	position: absolute;
	right: 14px;
	width: 16px;
	height: 16px;
	color: var(--ms-tool-color);
	opacity: 0.6;
	pointer-events: none;
}

/* ---------------------------------------------------------------------
 * Body states, pagination, load more, infinite scroll
 * ------------------------------------------------------------------- */
.msw-products__body {
	position: relative;
	min-height: 60px;
}

.msw-products__list {
	transition: opacity 0.25s ease;
}

.msw-products.is-loading .msw-products__list {
	opacity: 0.35;
	pointer-events: none;
}

.msw-products__spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 2px solid var(--ms-spinner);
	border-right-color: transparent;
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
	animation: msw-spin 0.8s linear infinite;
	pointer-events: none;
	z-index: 5;
}

.msw-products.is-loading .msw-products__spinner {
	opacity: 1;
}

.msw-products.is-appending .msw-products__spinner {
	top: auto;
	bottom: -50px;
}

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

.msw-products__empty {
	grid-column: 1 / -1;
	padding: 40px 20px;
	text-align: center;
	font-size: 15px;
	opacity: 0.75;
}

.msw-products__footer {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: var(--ms-pg-mt);
}

.msw-products__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ms-pg-gap);
}

.msw .msw-products__footer .msw-products__page,
.msw .msw-products__footer .msw-products__more {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	min-height: 0;
	margin: 0;
	border-style: solid;
	border-width: 1px;
	border-color: var(--ms-pg-border);
	border-radius: var(--ms-pg-radius);
	background: var(--ms-pg-bg);
	color: var(--ms-pg-color);
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	letter-spacing: normal;
	text-shadow: none;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	transform: none;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.msw .msw-products__footer .msw-products__page {
	min-width: var(--ms-pg-size);
	height: var(--ms-pg-size);
	padding: 0 6px;
}

.msw .msw-products__footer .msw-products__page .msw-icon {
	width: 16px;
	height: 16px;
}

.msw .msw-products__footer .msw-products__more {
	padding: 14px 30px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.msw .msw-products__footer .msw-products__page:hover,
.msw .msw-products__footer .msw-products__page:focus-visible,
.msw .msw-products__footer .msw-products__more:hover,
.msw .msw-products__footer .msw-products__more:focus-visible {
	background: var(--ms-pg-bg-h);
	color: var(--ms-pg-color-h);
	border-color: var(--ms-pg-border-h);
}

.msw .msw-products__footer .msw-products__page.is-current,
.msw .msw-products__footer .msw-products__page.is-current:hover {
	background: var(--ms-pg-bg-a);
	color: var(--ms-pg-color-a);
	border-color: var(--ms-pg-border-a);
	cursor: default;
}

.msw .msw-products__footer .msw-products__page[disabled] {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.msw-products__dots-sep {
	padding: 0 4px;
	opacity: 0.6;
}

.msw-products__sentinel {
	width: 100%;
	height: 1px;
}

/* ---------------------------------------------------------------------
 * Carousel arrows & dots (both widgets) — inside .msw-nav (static, in flow)
 * ------------------------------------------------------------------- */
.msw-nav {
	position: static;
}

.msw .msw-nav .msw-arrow {
	appearance: none;
	-webkit-appearance: none;
	position: absolute;
	top: var(--ms-arrow-top);
	z-index: 6;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--ms-arrow-size);
	height: var(--ms-arrow-size);
	min-height: 0;
	margin: 0;
	padding: 0;
	border-style: solid;
	border-width: 1px;
	border-color: var(--ms-arrow-border);
	border-radius: var(--ms-arrow-radius);
	background: var(--ms-arrow-bg);
	color: var(--ms-arrow-color);
	font-size: 0;
	line-height: 1;
	cursor: pointer;
	box-shadow: none;
	outline: none;
	transform: translateY(-50%);
	transition: background-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}

.msw .msw-nav .msw-arrow--prev {
	left: var(--ms-arrow-offset);
}

.msw .msw-nav .msw-arrow--next {
	right: var(--ms-arrow-offset);
}

.msw .msw-nav .msw-arrow .msw-icon {
	width: var(--ms-arrow-icon);
	height: var(--ms-arrow-icon);
}

.msw .msw-nav .msw-arrow:hover,
.msw .msw-nav .msw-arrow:focus-visible {
	background: var(--ms-arrow-bg-h);
	color: var(--ms-arrow-color-h);
	border-color: var(--ms-arrow-border);
	border-radius: var(--ms-arrow-radius);
	transform: translateY(-50%);
}

.msw .msw-nav .msw-arrow.swiper-button-disabled {
	opacity: 0.3;
	cursor: default;
}

.msw .msw-nav .msw-arrow.swiper-button-lock {
	display: none;
}

.msw-dots {
	display: flex;
	justify-content: center;
	gap: var(--ms-dot-gap);
	margin-top: var(--ms-dot-top);
}

.msw-dots:empty {
	display: none;
}

.msw-dots .swiper-pagination-bullet {
	width: var(--ms-dot-size);
	height: var(--ms-dot-size);
	margin: 0;
	border-radius: 50%;
	background: var(--ms-dot);
	opacity: 1;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.msw-dots .swiper-pagination-bullet-active {
	background: var(--ms-dot-active);
	transform: scale(1.25);
}

/* ---------------------------------------------------------------------
 * Product categories
 * ------------------------------------------------------------------- */
.msw .msw-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	color: inherit;
	text-decoration: none;
	background: var(--ms-card-bg);
	border-radius: var(--ms-card-radius);
	transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
}

.msw-cat__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--ms-ratio);
	background: var(--ms-img-bg);
	border-radius: var(--ms-img-radius);
	margin-bottom: var(--ms-media-mb);
}

.msw-cat__media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--ms-img-tint);
	opacity: 0;
	transition: opacity 0.35s ease;
	pointer-events: none;
}

.msw-cat:hover .msw-cat__media::after {
	opacity: 1;
}

.msw-cat__body {
	display: flex;
	flex-direction: column;
	align-items: var(--ms-align);
	min-width: 0;
	text-align: center;
}

.msw .msw-cat__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 var(--ms-title-mb);
	font-size: 18px;
	line-height: 1.25;
	font-weight: 500;
	color: var(--ms-title-color);
	transition: color 0.25s ease;
}

.msw .msw-cat:hover .msw-cat__name {
	color: var(--ms-title-color-h);
}

.msw .msw-cat__name .msw-icon {
	width: var(--ms-cat-arrow);
	height: var(--ms-cat-arrow);
	transition: transform 0.3s ease;
}

.msw .msw-cat:hover .msw-cat__name .msw-icon {
	transform: translateX(5px);
}

.msw .msw-cat__count {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ms-cat-color);
}

.msw .msw-cat__desc {
	margin: var(--ms-excerpt-mt) 0 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ms-excerpt-color);
}

/* Overlay tiles */
.msw-cats--overlay .msw-cat__media {
	margin-bottom: 0;
}

.msw-cats--overlay .msw-cat__media::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, var(--ms-ov-from) 35%, var(--ms-ov-to) 100%);
	pointer-events: none;
}

.msw-cats--overlay .msw-cat__body {
	position: absolute;
	inset: 0;
	z-index: 2;
	justify-content: var(--ms-ov-valign);
	padding: 22px;
	color: var(--ms-ov-text);
}

.msw-cats--overlay .msw-cat__name,
.msw-cats--overlay .msw-cat__count,
.msw-cats--overlay .msw-cat__desc {
	color: inherit;
}

.msw-cats--overlay .msw-cat:hover .msw-cat__name {
	color: inherit;
}

/* Circle tiles */
.msw-cats--circle .msw-cat__media {
	width: var(--ms-circle);
	max-width: 100%;
	aspect-ratio: 1 / 1;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
}

.msw-cats--circle .msw-cat__body {
	align-items: center;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Motion preferences
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.msw .msw-product__img,
	.msw .msw-cat__img,
	.msw-product,
	.msw .msw-cat,
	.msw-product__actions {
		transition: none;
	}

	.msw .msw-product .msw-product__btn.added::before,
	.msw .msw-product .msw-product__btn.loading::before {
		animation: none;
	}

	.msw .msw-product .msw-product__btn.loading::before {
		animation: msw-spin 0.7s linear infinite; /* a spinner has to spin */
	}

	.msw .msw-product a.msw-product__btn > * {
		transition: none;
	}

	.msw-hover--zoom .msw-product:hover .msw-product__img,
	.msw-hover--zoom .msw-cat:hover .msw-cat__img,
	.msw-hover--lift .msw-product:hover,
	.msw-hover--lift .msw-cat:hover {
		transform: none;
	}
}