/**
 * MorazWEB Color Swatches — single product page styling.
 *
 * Same near-square language as the archive (--mcs-radius).
 * Three swatch flavours: image / color / button (sizes).
 *
 * Selected states:
 *   image  -> white check mark in the centre (with shadow).
 *   color  -> black ring (no check — keeps the colour readable).
 *   button -> black border, white background, black text (no fill).
 *
 * All swatches carry a light-grey border so a white swatch never
 * disappears against the page.
 */

.mcs-single-wrapper {
	--mcs-item-size: 34px;
	--mcs-gap: 8px;
	--mcs-radius: 1px;
	--mcs-border: #e3e3e3;            /* light-grey resting border */
	--mcs-border-selected: #000000;   /* selected border */

	/* !important guards against WooCommerce's responsive rule
	   ".woocommerce ... table.variations td" which sets display:block on
	   everything inside the variations table — our <ul> must stay flex. */
	display: flex !important;
	flex-wrap: wrap;
	/* align-items:center keeps each swatch at its own height instead of
	   stretching it to the tallest item on the row. Needed because the
	   <ul> is now a direct child of td.value (server-rendered) and a flex
	   row defaults to align-items:stretch. */
	align-items: center;
	gap: var(--mcs-gap);
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	line-height: 1;          /* neutralise line-height inherited from td.value */
}

/* Hide the original <select> but keep it in the DOM — it is the engine. */
select.mcs-single-hidden-select {
	display: none !important;
}

/* Base swatch item — every flavour gets the light border. */
.mcs-single-wrapper .mcs-single-item {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	list-style: none;
	/* Fixed box: width AND height pinned, and flex-grow/shrink disabled,
	   so every swatch is exactly the same size regardless of its content
	   or the height of its neighbours on the same wrapped row. */
	flex: 0 0 auto;
	align-self: center;
	min-width: var(--mcs-item-size);
	width: var(--mcs-item-size);
	height: var(--mcs-item-size);
	display: flex !important;
	position: relative;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	line-height: 1;
	cursor: pointer;
	outline: none;
	background: #fff;
	border: 1px solid var(--mcs-border);
	border-radius: var(--mcs-radius);
	transition: border-color 150ms ease, box-shadow 150ms ease;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.mcs-single-wrapper .mcs-single-item .variable-item-contents {
	display: flex !important;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	position: relative;
}

/* Image swatch.
   Note: an optimisation plugin (e.g. Imagify) may wrap the <img> in a
   <picture> element for WebP delivery. In that case the .variable-item-image
   class lands on the <picture>, not the <img>. The selectors below cover
   both shapes — a bare <img.variable-item-image> and a
   <picture.variable-item-image> with an <img> inside it — so the swatch
   image always fills the 34x34 box the same way. */
.mcs-single-wrapper .image-variable-item {
	width: var(--mcs-item-size);
}
.mcs-single-wrapper .image-variable-item .variable-item-image,
.mcs-single-wrapper .image-variable-item picture,
.mcs-single-wrapper .image-variable-item img {
	display: block;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	object-fit: cover;
	border-radius: var(--mcs-radius);
	pointer-events: none;
}
/* When the image is inside a <picture>, the <picture> is the 100% box and
   the inner <img> fills it. */
.mcs-single-wrapper .image-variable-item picture > img {
	width: 100%;
	height: 100%;
}

/* Color swatch */
.mcs-single-wrapper .color-variable-item {
	width: var(--mcs-item-size);
}
.mcs-single-wrapper .variable-item-color {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--mcs-radius);
}

/* Button (text) swatch — e.g. sizes S / M / L. Overrides the fixed
   width from .mcs-single-item: a text button sizes to its label plus
   padding, but the height stays locked so the row aligns. */
.mcs-single-wrapper .button-variable-item {
	width: auto;
	min-width: var(--mcs-item-size);
	padding: 0 12px;
}
.mcs-single-wrapper .variable-item-button {
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #333;
	white-space: nowrap;
}

/* Hover — darken the border slightly. */
.mcs-single-wrapper .mcs-single-item:hover {
	border-color: #999;
}

/* ---- Selected states ---- */

/* All flavours: black border when selected. */
.mcs-single-wrapper .mcs-single-item.selected {
	border-color: var(--mcs-border-selected);
}

/* Image: white check mark in the centre, with a drop-shadow so it shows
   on light images too. */
.mcs-single-wrapper .image-variable-item.selected .variable-item-contents::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml;utf8,%3Csvg filter='drop-shadow(0px 0px 2px rgb(0 0 0 / .9))' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' d='M4 16L11 23 27 7'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 60% 60%;
	pointer-events: none;
}

/* Out-of-stock + selected: no check mark. The border alone marks selection,
   and the diagonal slash already communicates "not available" — adding a
   ✓ on top would falsely imply a confirmed valid choice. */
.mcs-single-wrapper .image-variable-item.selected.mcs-out-of-stock .variable-item-contents::after {
	background-image: none;
}

/* Color: just the black border (set above) — no check, keep colour readable.
   Button: black border, white background, black text — no fill. Both are
   already covered by the shared .selected border rule, so nothing extra. */

/* ---- Unavailable / out-of-stock ----
   A single red diagonal slash (ported from the site's old custom CSS),
   dimmed and not clickable. */
.mcs-single-wrapper .mcs-single-item.mcs-disabled {
	cursor: not-allowed;
	opacity: 0.6;
	pointer-events: none;
}
.mcs-single-wrapper .mcs-single-item.mcs-disabled .variable-item-contents::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120%;
	height: 1px;
	background-color: #e35656;
	transform: translate(-50%, -50%) rotate(-45deg);
	pointer-events: none;
}

/* ---- Table layout override ----
   By default WooCommerce renders the variations as a real table: <th> in
   one column, <td> in another — which spreads the label and the swatches
   across the row. We turn every part into a block so each attribute is a
   tidy stack: label line on top, swatch row underneath.
   Scoped to .variations so no other table is touched. */
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
	display: block;
	width: auto;
	max-width: none;
}

/* Space between one attribute block and the next. */
.woocommerce div.product form.cart table.variations tr {
	margin-bottom: 14px;
}

/* The label line: "מידה ← S" — name + selected value on one line,
   vertically aligned on the same baseline, pushed to the right.
   HTML order is <label> then <span>; with direction:rtl the label sits
   on the right and the value follows to its left. */
.woocommerce div.product form.cart table.variations th.label {
	white-space: nowrap;
	margin-bottom: 6px;
	padding: 0;
	text-align: right;
	display: flex;
	direction: rtl;
	justify-content: flex-start;
	align-items: baseline;
	gap: 2px;
}
.woocommerce div.product form.cart table.variations th.label label {
	display: inline;
	font-weight: 600;
}
.mcs-selected-name {
	margin: 0 6px;
	font-weight: 600;
	color: inherit;
	font-size: inherit;
}

/* The value cell just holds the swatch row. */
.woocommerce div.product form.cart table.variations td.value {
	padding: 0;
}

/* ---- RTL — swatches hug the right edge ---- */
.rtl .mcs-single-wrapper {
	justify-content: flex-start;
	direction: rtl;
}

/* ---- Ported from the site's old custom CSS ----
   Fix padding in the variation selection block, and tighten the
   attribute name / value line-height. */
.woocommerce div.product form.cart table td {
	padding: unset;
}
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
	line-height: 1em;
}

/* ---- Out of stock indicator ----
   Applied by JS (isOutOfStock in mcs-single.js). The swatch colour stays
   100% accurate — we don't dim or desaturate. A thick red diagonal line
   sits on top, sandwiched by a white halo so it stays readable on any
   background (dark images, busy patterns, etc.). Click is still allowed —
   WooCommerce shows the "out of stock" message and disables add-to-cart;
   we don't want to silently block selection. */
.mcs-single-item.mcs-out-of-stock {
	position: relative;
}
.mcs-single-item.mcs-out-of-stock::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)
	);
}

/* ---- Gallery-loading indicator ----
   While the variation gallery rebuilds (toggled by 'mcs:gallery-loading'
   from mcs-gallery.js) the whole variations block dims and a spinner is
   centred over it. JS wraps table.variations in .mcs-variations-box; the
   spinner host overlays that box. Identical on desktop and mobile.

   The spinner is the 9-dot "pl" loader by jkantner (CodePen WbxwNNX),
   compiled from SCSS to plain CSS and namespaced with the mcs- prefix. */
.mcs-variations-box {
	position: relative;
}
.mcs-loading-host {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 5;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.6);
	pointer-events: none;
}
.mcs-loading-host.mcs-is-loading {
	display: flex;
}

/* --- 9-dot spinner --- */
.mcs-pl {
	--mcs-pl-size: 3.4em;
	aspect-ratio: 1;
	display: grid;
	gap: calc(var(--mcs-pl-size) * 0.125);
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
	width: var(--mcs-pl-size);
}
.mcs-pl__dot {
	position: relative;
}
.mcs-pl__dot,
.mcs-pl__dot::before,
.mcs-pl__dot::after {
	animation-duration: 2s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.mcs-pl__dot::before,
.mcs-pl__dot::after {
	aspect-ratio: 1;
	background-color: #1a1a1a;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	width: 100%;
}
.mcs-pl__dot::after {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0);
}
.mcs-pl__dot--red::before,
.mcs-pl__dot--red::after     { background-color: hsl(0 90% 60%); }
.mcs-pl__dot--yellow::before,
.mcs-pl__dot--yellow::after  { background-color: hsl(45 90% 50%); }
.mcs-pl__dot--green::before,
.mcs-pl__dot--green::after   { background-color: hsl(150 90% 40%); }
.mcs-pl__dot--blue::before,
.mcs-pl__dot--blue::after    { background-color: hsl(210 90% 50%); }
.mcs-pl__dot--lg::after { width: 500%; }
.mcs-pl__dot--sm::after { width: 167%; }
.mcs-pl__dot:nth-child(2) { animation-name: mcs-dot-rotate; transform-origin: 50% 200%; }
.mcs-pl__dot:nth-child(4) { animation-name: mcs-dot-rotate; transform-origin: 200% 50%; }
.mcs-pl__dot:nth-child(6) { animation-name: mcs-dot-rotate; transform-origin: -100% 50%; }
.mcs-pl__dot:nth-child(8) { animation-name: mcs-dot-rotate; transform-origin: 50% -100%; }
.mcs-pl__dot:nth-child(1)::before { animation-name: mcs-dot-scale1; }
.mcs-pl__dot:nth-child(2)::before { animation-name: mcs-dot-scale2; }
.mcs-pl__dot:nth-child(3)::before { animation-name: mcs-dot-scale3; }
.mcs-pl__dot:nth-child(4)::before { animation-name: mcs-dot-scale4; }
.mcs-pl__dot:nth-child(5)::before { animation-name: mcs-dot-scale5; }
.mcs-pl__dot:nth-child(6)::before { animation-name: mcs-dot-scale6; }
.mcs-pl__dot:nth-child(7)::before { animation-name: mcs-dot-scale7; }
.mcs-pl__dot:nth-child(8)::before { animation-name: mcs-dot-scale8; }
.mcs-pl__dot:nth-child(9)::before { animation-name: mcs-dot-scale9; }
.mcs-pl__dot:nth-child(3)::after { animation-name: mcs-dot-wave3; }
.mcs-pl__dot:nth-child(5)::after { animation-name: mcs-dot-wave5a, mcs-dot-wave5b; }
.mcs-pl__dot:nth-child(7)::after { animation-name: mcs-dot-wave7; }
.mcs-pl__dot:nth-child(9)::after { animation-name: mcs-dot-wave9; }
@keyframes mcs-dot-rotate {
	from, 22% { animation-timing-function: ease-out; transform: rotate(-45deg); }
	37%, to   { transform: rotate(0); }
}
@keyframes mcs-dot-scale1 {
	from, 36% { transform: translate(0, 0) scale(0); }
	50%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(75%, 75%) scale(0); }
}
@keyframes mcs-dot-scale2 {
	from, 25% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
	40%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(0, -100%) scale(0); }
}
@keyframes mcs-dot-scale3 {
	from, 27% { animation-timing-function: ease-in; transform: translate(0, 0) scale(0); }
	45%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(-75%, 75%) scale(0); }
}
@keyframes mcs-dot-scale4 {
	from, 28% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
	43%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(-100%, 0) scale(0); }
}
@keyframes mcs-dot-scale5 {
	from, 9%, to { transform: scale(0); }
	26%       { transform: scale(1.17); }
	41%, 75%  { transform: scale(1); }
}
@keyframes mcs-dot-scale6 {
	from, 22% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
	37%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(100%, 0) scale(0); }
}
@keyframes mcs-dot-scale7 {
	from, 36% { animation-timing-function: ease-in; transform: translate(0, 0) scale(0); }
	53%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(75%, -75%) scale(0); }
}
@keyframes mcs-dot-scale8 {
	from, 24% { animation-timing-function: ease-out; transform: translate(0, 0) scale(0); }
	39%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(0, 100%) scale(0); }
}
@keyframes mcs-dot-scale9 {
	from, 32% { animation-timing-function: ease-in; transform: translate(0, 0) scale(0); }
	49%, 71%  { transform: translate(0, 0) scale(1); }
	87%, to   { transform: translate(-75%, -75%) scale(0); }
}
@keyframes mcs-dot-wave3 {
	from      { visibility: hidden; }
	45%       { opacity: 1; transform: translate(-50%, -50%) scale(calc(1 / 1.67)); visibility: hidden; }
	61%, to   { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mcs-dot-wave5a {
	from      { transform: translate(-50%, -50%) scale(0.2); }
	8%        { transform: translate(-50%, -50%) scale(0.8); }
	25%, to   { transform: translate(-50%, -50%) scale(1); }
}
@keyframes mcs-dot-wave5b {
	from, 25%, to { opacity: 0; }
	8%        { opacity: 0.5; }
}
@keyframes mcs-dot-wave7 {
	from      { visibility: hidden; }
	53%       { opacity: 1; transform: translate(-50%, -50%) scale(calc(1 / 1.67)); visibility: hidden; }
	69%, to   { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
@keyframes mcs-dot-wave9 {
	from      { visibility: hidden; }
	49%       { opacity: 1; transform: translate(-50%, -50%) scale(calc(1 / 1.67)); visibility: hidden; }
	65%, to   { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}