/* DC Colour Swatches — storefront
   Override the look with these custom properties in your theme. */
:root {
	--dcs-size: 38px;
	--dcs-gap: 10px;
	--dcs-ring: #111;
	--dcs-ring-gap: 3px;
	--dcs-outline: rgba(0, 0, 0, .18);
}

/* Progressive enhancement: dropdown until JS is ready, then swatches */
.dcs-swatches { display: none; }
.dcs-has-swatches .dcs-swatches { display: flex; flex-wrap: wrap; gap: var(--dcs-gap); padding: var(--dcs-ring-gap); margin: calc(var(--dcs-ring-gap) * -1); }
.dcs-has-swatches select.dcs-select { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }

.dcs-swatch {
	position: relative; display: inline-flex; align-items: center; justify-content: center;
	width: var(--dcs-size); height: var(--dcs-size); padding: 0; margin: 0;
	border: 0; border-radius: 50%; background: transparent; cursor: pointer;
	box-shadow: 0 0 0 0 var(--dcs-ring);
	transition: box-shadow .15s ease, transform .15s ease;
}
.dcs-swatch__fill {
	width: 100%; height: 100%; border-radius: 50%;
	background: linear-gradient(135deg, var(--dcs-c1) 50%, var(--dcs-c2) 50%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.dcs-swatch--light .dcs-swatch__fill { box-shadow: inset 0 0 0 1px var(--dcs-outline); }
.dcs-swatch:hover { transform: scale(1.08); }
.dcs-swatch[aria-pressed="true"] { box-shadow: 0 0 0 var(--dcs-ring-gap) #fff, 0 0 0 calc(var(--dcs-ring-gap) + 2px) var(--dcs-ring); }
.dcs-swatch:focus-visible { outline: 2px solid var(--dcs-ring); outline-offset: 4px; }

/* Not made in the size you picked (still clickable — it switches you over) */
.dcs-swatch.is-unavailable { opacity: .45; }
/* Out of stock */
.dcs-swatch:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.dcs-swatch.is-unavailable::after, .dcs-swatch:disabled::after {
	content: ''; position: absolute; left: 50%; top: 8%; width: 2px; height: 84%;
	background: #111; transform: translateX(-50%) rotate(45deg); border-radius: 2px;
}

.dcs-chosen { margin-left: .35rem; font-weight: 500; opacity: .7; }
.dcs-chosen:not(:empty)::before { content: '— '; }

/* Shop cards */
.dcs-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: -.1rem 0 .85rem; }
.dcs-dot {
	width: 18px; height: 18px; border-radius: 50%;
	background: linear-gradient(135deg, var(--dcs-c1) 50%, var(--dcs-c2) 50%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .15s ease, box-shadow .15s ease;
}
.dcs-dot--light { box-shadow: inset 0 0 0 1px var(--dcs-outline); }
.dcs-dot:hover, .dcs-dot:focus-visible { transform: scale(1.15); box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--dcs-ring); outline: none; }
.dcs-dots__more { font-size: .8rem; font-weight: 600; opacity: .6; }

@media (max-width: 560px) {
	:root { --dcs-size: 42px; } /* bigger tap targets */
	.dcs-dot { width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce) { .dcs-swatch, .dcs-dot { transition: none; } }