/* Compact colour-dot row on archive product cards (lika-variation-image-swatches). */
.lika-loop-swatches {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: -3px;
}
.lika-loop-swatches:focus { outline: none; }
.lls-dot {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	flex: 0 0 auto;
	box-shadow: 0 0 0 1px rgba(30, 25, 20, .16), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
/* lika-webp wraps the img in <picture> — both must fill the dot. */
.lls-dot picture { display: block; width: 100%; height: 100%; }
.lls-dot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.lls-extra { display: none; }
.lika-loop-swatches.is-open .lls-extra { display: block; }
.lika-loop-swatches.is-open .lls-more { display: none; }
.lls-more {
	border: 0;
	background: none;
	padding: 2px 2px;
	margin: 0;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px;
	line-height: 1.4;
	color: #8A817A;
	border-radius: 6px;
}
.lls-more:hover,
.lls-more:focus-visible { color: var(--brand, #0E6B63); text-decoration: underline; }
.lls-more-short { display: none; }

@media (max-width: 560px) {
	.lls-dot { width: 26px; height: 26px; }
	.lls-more-full { display: none; }
	.lls-more-short { display: inline; }
}

/* Fabric-type dots (scarves): photo circles need a touch more room than flat colours. */
.lika-loop-swatches--types .lls-dot { width: 34px; height: 34px; }
@media (max-width: 560px) {
	.lika-loop-swatches--types .lls-dot { width: 30px; height: 30px; }
}