/**
 * Mariya Dykalo — Variation Swatches
 * Tweak the variables below to match the brand exactly.
 */
.mdykalo-size-block,
.mdykalo-swatches-wrap {
	--mdswatch-gap: 8px;
	--mdswatch-pad-y: 12px;
	--mdswatch-pad-x: 8px;
	--mdswatch-border: rgba(139, 139, 139, 0.5);
	--mdswatch-border-hover: rgba(139, 139, 139, 0.5);
	--mdswatch-bg: transparent;
	--mdswatch-text: #333;
	--mdswatch-selected-bg: rgba(139, 139, 139, 0.5);
	--mdswatch-selected-text: #ececec;
	--mdswatch-selected-border: rgba(139, 139, 139, 0.5);
	--mdswatch-radius: 1px;
	--mdswatch-min-w: 52px;
}

/* Hide the native <select> but keep it in the DOM for WooCommerce JS. */
.mdykalo-swatches-wrap select {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The visible UI is the relocated block; hide the original variations table
   and reset link inside the form. The (hidden) <select> stays functional. */
.variations_form table.variations,
.variations_form .reset_variations {
	display: none !important;
}

/* Relocated block: intro text + label + buttons, placed above the price. */
.mdykalo-size-block {
	margin: 0 0 22px;
	width: 100%;
}

.mdykalo-size-intro,
.mdykalo-size-label {
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-weight: var(--e-global-typography-text-font-weight);
    color: var(--e-global-color-text);
	font-size: var(--e-global-typography-text-font-size);
    line-height: var(--e-global-typography-text-line-height);
    letter-spacing: var(--e-global-typography-text-letter-spacing);
}

.mdykalo-size-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	    margin-top: 16px;
}


ul.mdykalo-swatches {
	display: flex !important;
	flex-wrap: wrap;
	gap: var(--mdswatch-gap);
	list-style: none;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
}

ul.mdykalo-swatches li.mdykalo-swatch-item {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}
ul.mdykalo-swatches li.mdykalo-swatch-item::before {
	content: none;
}

/* High specificity + !important so theme/WooCommerce button styles don't win. */
ul.mdykalo-swatches li button.mdykalo-swatch {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: var(--mdswatch-min-w);
	width: auto;
	height: auto;
	margin: 0 !important;
	padding: var(--mdswatch-pad-y) var(--mdswatch-pad-x) !important;
	border: 0.6px solid var(--mdswatch-border) !important;
	border-radius: var(--mdswatch-radius) !important;
	background: var(--mdswatch-bg) !important;
	box-shadow: none !important;
	font: inherit;
	color: var(--e-global-color-text)!important;
	font-size: 14px !important;
	font-weight: 155% !important;
	line-height: 1 !important;
	font-family: var(--e-global-typography-text-font-family), Sans-serif;
	letter-spacing: 0%;
	text-transform: uppercase !important;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

ul.mdykalo-swatches li button.mdykalo-swatch:hover,
ul.mdykalo-swatches li button.mdykalo-swatch:focus-visible {
	border-color: var(--mdswatch-border-hover) !important;
	background: var(--mdswatch-border-hover) !important;
	color: var(--mdswatch-selected-text) !important;
	outline: none;
}

ul.mdykalo-swatches li button.mdykalo-swatch.is-selected {
	background: var(--mdswatch-selected-bg) !important;
	color: var(--mdswatch-selected-text) !important;
	border-color: var(--mdswatch-selected-border) !important;
}

/* Out of stock / not available for the current combination. */
ul.mdykalo-swatches li button.mdykalo-swatch.is-unavailable,
ul.mdykalo-swatches li button.mdykalo-swatch:disabled {
	color: #bbb !important;
	border-color: #eee !important;
	background: #fafafa !important;
	cursor: not-allowed;
	position: relative;
}

ul.mdykalo-swatches li button.mdykalo-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	height: 1px;
	background: #ccc;
	transform: rotate(-12deg);
}