/**
 * MorazWEB Color Swatches — styling.
 *
 * Self-contained. All rules are scoped under .mcs-wrapper so they affect
 * only this plugin's output and nothing else on the page.
 *
 * To resize the swatches, change --mcs-item-size below.
 */

.mcs-wrapper {
	--mcs-item-size: 30px;            /* swatch width & height */
	--mcs-gap: 8px;                   /* space between swatches */
	--mcs-radius: 1px;                /* corner radius — near-square by design */
	--mcs-border: #cfcfcf;            /* light-grey resting border — frames white swatches */
	--mcs-hover-shadow: 0 0 0 1px #999999;
	--mcs-selected-shadow: 0 0 0 1px #000000;

	display: block;
	box-sizing: border-box;
	margin: 8px 0 12px 0;
	padding: 0;
}

/* ul.variations + li wrapper — strip default list styling.
 * Theme/Woo CSS often targets `ul.variations li` or `.woocommerce ul li` with
 * margins or padding that leak into our flex grid and shift the first row
 * sideways. Use !important on the structural reset so the grid stays aligned
 * regardless of what the theme adds. */
.mcs-wrapper ul.variations,
.mcs-wrapper .woo-variation-items-wrapper,
.mcs-wrapper .variable-items-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.mcs-wrapper ul.variations > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* The flex row of swatches */
.mcs-wrapper .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: var(--mcs-gap);
}

/* RTL — swatches hug the right edge. Same trick as mcs-single.css. */
.rtl .mcs-wrapper,
.rtl .mcs-wrapper .variable-items-wrapper {
	direction: rtl;
}

/* Each swatch item — but NOT the +N toggle, which shares the .variable-item class
 * but must stay borderless and background-less (handled in its own block below). */
.mcs-wrapper .variable-items-wrapper .variable-item:not(.mcs-more-toggle) {
	box-sizing: border-box;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: var(--mcs-item-size);
	height: var(--mcs-item-size);
	display: flex;
	position: relative;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	outline: none;
	border: 1px solid var(--mcs-border);
	border-radius: var(--mcs-radius);
	transition: all 200ms ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/* Contents wrapper inside the item */
.mcs-wrapper .variable-items-wrapper .variable-item .variable-item-contents {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* The swatch image itself — fill the square */
.mcs-wrapper .variable-items-wrapper .variable-item img {
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	overflow: hidden;
	line-height: 1;
	pointer-events: none;
}

/* Hover state — only on real swatches, not the +N toggle. */
.mcs-wrapper .variable-items-wrapper .variable-item:not(.mcs-more-toggle):hover {
	box-shadow: var(--mcs-hover-shadow);
	background-color: #ffffff;
}

/* Selected state — 1px ring around the swatch. The +N toggle is never "selected". */
.mcs-wrapper .variable-items-wrapper .variable-item.selected,
.mcs-wrapper .variable-items-wrapper .variable-item.selected:hover {
	box-shadow: var(--mcs-selected-shadow);
}

/* RTL spacing */
.rtl .mcs-wrapper .variable-items-wrapper .variable-item {
	text-align: right;
}

/* Hidden swatches (beyond the archive limit) — revealed by the +N toggle.
 * !important because theme/Elementor/JetWoo CSS sets display on .variable-item
 * with equal specificity but loads after this file. */
.mcs-wrapper .image-variable-item.mcs-hidden {
	display: none !important;
}

/* "+N" toggle — text-only, same square footprint as a swatch so the grid stays aligned. */
.mcs-wrapper .mcs-more-toggle {
	box-sizing: border-box;
	width: var(--mcs-item-size);
	height: var(--mcs-item-size);
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border: 0;
	background: transparent;
	border-radius: 0;
	transition: color 200ms ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.mcs-wrapper .mcs-more-toggle:hover {
	background: transparent;
	border: 0;
}

.mcs-wrapper .mcs-more-toggle:hover .mcs-more-label {
	color: #000;
}

.mcs-wrapper .mcs-more-toggle .variable-item-contents {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
}

.mcs-wrapper .mcs-more-label {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #555;
}

/* ---- Out of stock indicator ----
   Mirrors the single-page behaviour (mcs-single.css). The swatch colour
   stays 100% accurate — we don't dim or desaturate. A red 2px diagonal
   line is drawn on top, sandwiched by a white halo so it stays readable
   on any background. The +N toggle never gets this class. */
.mcs-wrapper .variable-item.mcs-out-of-stock .variable-item-contents {
	position: relative;
}
.mcs-wrapper .variable-item.mcs-out-of-stock .variable-item-contents::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 2;
	/* White halo (4px band) sandwiching a red 2px line, all on the diagonal. */
	background: linear-gradient(
		to top right,
		transparent calc(50% - 1px),
		#d63638 calc(50% - 1px),
		#d63638 calc(50% + 1px),
		transparent calc(50% + 1px)
	);
}

/* WooCommerce ships a clearfix on .products ul / ul.products via ::before and
 * ::after with `display: table`. The ::after is the real clearfix and we leave
 * it alone. The ::before, however, renders as a phantom inline-start cell at
 * the start of the products grid — visible in RTL as a gap that pushes the
 * first row sideways. Hide only the ::before. JetWooBuilder lays the catalog
 * out with flex anyway, so dropping this pseudo-element has no layout cost. */
.woocommerce .products ul::before,
.woocommerce ul.products::before {
	display: none !important;
}