/* Ezhalha Woo — variation swatches. The native select stays for WooCommerce
   and assistive tech; the strip is the visual control. Logical properties
   keep RTL free; size and shape come from the merchant's settings via the
   --ezw-swatch-size custom property set inline. */
.ezw-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block: 6px 10px;
}

/* Hide the select visually only — screen readers and Woo still use it. */
td.value select + .ezw-swatches,
.ezw-swatches {
	--ezw-swatch-size: 50px;
}

select:has(+ .ezw-swatches) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.ezw-swatch {
	box-sizing: border-box;
	min-inline-size: var(--ezw-swatch-size);
	block-size: var(--ezw-swatch-size);
	padding: 0;
	border: 2px solid #d7dbdf;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ezw-swatches--round .ezw-swatch--img {
	border-radius: 50%;
}

.ezw-swatches--round .ezw-swatch--text,
.ezw-swatches--square .ezw-swatch {
	border-radius: 8px;
}

.ezw-swatch--text {
	inline-size: auto;
	block-size: auto;
	min-block-size: calc(var(--ezw-swatch-size) * 0.64);
	padding: 4px 12px;
	font-size: 14px;
	line-height: 1.4;
}

.ezw-swatch img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.ezw-swatch:hover {
	border-color: #18A4AA;
}

.ezw-swatch.is-selected {
	border-color: #18A4AA;
	box-shadow: 0 0 0 2px rgba(24, 164, 170, 0.35);
}

.ezw-swatch.is-disabled {
	opacity: 0.35;
	filter: grayscale(1);
}

/* --- Shipping line on the product page (v1.9.2) ------------------------- */
.ezw-shipping-info {
	display: flex;
	align-items: center;
	gap: 0.4em;
	flex-wrap: wrap;
	margin-block: 10px;
	padding: 8px 12px;
	background: #F4F8FA;
	border-inline-start: 3px solid #18A4AA;
	border-radius: 8px;
	font-size: 0.95em;
}

.ezw-shipping-info__sep {
	color: #8b959e;
}