/* WC Shared Group – frontend styles (inherits theme fonts/colors, overridable via CSS variables) */

.wcsg-group {
	--wcsg-size: 64px;
	--wcsg-gap: 10px;
	--wcsg-border: rgba(0, 0, 0, 0.15);
	--wcsg-border-active: currentColor;
	--wcsg-bg: transparent;
	--wcsg-bg-active: transparent;
	--wcsg-text: inherit;
	--wcsg-text-active: inherit;
	--wcsg-radius: 8px;
	margin: 0 0 1.25em;
	position: relative;
}

.wcsg-title {
	margin: 0 0 0.6em;
	font-weight: 600;
}
.wcsg-title__selected {
	font-weight: 400;
	opacity: 0.85;
	margin-inline-start: 0.35em;
}

.wcsg-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wcsg-gap);
	align-items: stretch;
}
.wcsg-item {
	margin: 0;
	padding: 0;
}

.wcsg-swatch {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	text-decoration: none;
	color: var(--wcsg-text);
	background: var(--wcsg-bg);
	border: 2px solid var(--wcsg-border);
	border-radius: var(--wcsg-radius);
	padding: 3px;
	line-height: 1.2;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
	outline-offset: 2px;
	cursor: pointer;
}
.wcsg-swatch:hover,
.wcsg-swatch:focus-visible {
	border-color: var(--wcsg-border-active);
	color: var(--wcsg-text-active);
	transform: translateY(-1px);
}
.wcsg-item.is-active .wcsg-swatch {
	border-color: var(--wcsg-border-active);
	background: var(--wcsg-bg-active);
	color: var(--wcsg-text-active);
	box-shadow: 0 0 0 1px var(--wcsg-border-active);
	cursor: default;
}

/* image */
.wcsg-swatch__img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wcsg-size);
	height: var(--wcsg-size);
	overflow: hidden;
	border-radius: calc(var(--wcsg-radius) - 3px);
	background: #fff;
}
.wcsg-swatch__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain; /* התמונה נכנסת בשלמותה */
	margin: 0;
}

/* color */
.wcsg-style-color .wcsg-swatch {
	border-radius: 50%;
	padding: 3px;
}
.wcsg-swatch__color {
	display: block;
	width: calc(var(--wcsg-size) * 0.55);
	height: calc(var(--wcsg-size) * 0.55);
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* label only */
.wcsg-style-label .wcsg-swatch {
	padding: 0.5em 1em;
	font-size: 0.9em;
	font-weight: 500;
}
.wcsg-style-image_label .wcsg-swatch {
	padding: 4px 4px 6px;
	max-width: calc(var(--wcsg-size) + 24px);
}
.wcsg-swatch__label {
	font-size: 0.8em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

/* out of stock */
.wcsg-item.is-out-of-stock .wcsg-swatch {
	opacity: 0.5;
	position: relative;
}
.wcsg-item.is-out-of-stock .wcsg-swatch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent calc(50% - 1px), currentColor 50%, transparent calc(50% + 1px));
	pointer-events: none;
	opacity: 0.6;
}

/* loading state: intentionally invisible – the switch must feel instant.
   The cart buttons keep working; a click made before the new product
   has fully arrived is simply replayed once it lands (see frontend.js). */
.wcsg-group.is-loading .wcsg-items {
	pointer-events: auto;
}
.wcsg-pending.wcsg-clicked {
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.wcsg-swatch { transition: none; }
	.wcsg-group.is-loading::after { animation: none; }
}

.wcsg-editor-notice {
	padding: 10px 14px;
	border: 1px dashed #bbb;
	border-radius: 6px;
	font-size: 13px;
	opacity: 0.8;
}