/**
 * Jarilo Product Color Swatches — front-end styles.
 *
 * Uses CSS custom properties so themes / Elementor can override easily.
 */

.jarilo-pcs {
	--jarilo-pcs-size: 16px;
	--jarilo-pcs-gap: 6px;
	--jarilo-pcs-border: rgba(0, 0, 0, 0.15);
	--jarilo-pcs-border-light: rgba(0, 0, 0, 0.35);
	--jarilo-pcs-more-bg: #f2f2f2;
	--jarilo-pcs-more-color: #555;
	--jarilo-pcs-more-size: 11px;

	margin: 8px 0;
	line-height: 1;
}

.jarilo-pcs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jarilo-pcs-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jarilo-pcs__swatch,
.jarilo-pcs__more {
	display: inline-block;
	width: var(--jarilo-pcs-size);
	height: var(--jarilo-pcs-size);
	border-radius: 50%;
	border: 1px solid var(--jarilo-pcs-border);
	box-sizing: border-box;
	vertical-align: middle;
	transition: transform 0.15s ease;
}

.jarilo-pcs__swatch:hover {
	transform: scale(1.15);
}

/* Light colours get a slightly darker border so white/cream is still visible. */
.jarilo-pcs__swatch--light {
	border-color: var(--jarilo-pcs-border-light);
}

/* Unknown colour: neutral chip with a slash. */
.jarilo-pcs__swatch--unknown {
	background:
		linear-gradient(
			to top right,
			transparent calc(50% - 1px),
			rgba(0, 0, 0, 0.35) calc(50% - 1px),
			rgba(0, 0, 0, 0.35) calc(50% + 1px),
			transparent calc(50% + 1px)
		),
		#fafafa;
}

/* "+N more" pill. */
.jarilo-pcs__more {
	width: auto;
	min-width: var(--jarilo-pcs-size);
	height: var(--jarilo-pcs-size);
	padding: 0 6px;
	border-radius: 999px;
	background: var(--jarilo-pcs-more-bg);
	color: var(--jarilo-pcs-more-color);
	font-size: var(--jarilo-pcs-more-size);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: transparent;
}

/* Screen-reader-only utility (in case the theme doesn't provide one). */
.jarilo-pcs .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}