/**
 * Store Kit — variation swatches.
 *
 * The original select stays in the DOM and keeps driving WooCommerce; it is
 * hidden accessibly rather than removed, so assistive technology and any
 * integration reading it still work.
 */

.sk-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sk-sw-gap, 8px);
	margin: 0 0 var(--sk-space-2);
}

/* An even grid gives every swatch the same share of the row, which reads
 * better than wrapping when the labels differ in length. */
.sk-swatch-grid .sk-swatches:not(.sk-swatches--preview) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--sk-sw-btn-w, 52px), 1fr));
}

.sk-swatch-grid .sk-swatches--color:not(.sk-swatches--preview),
.sk-swatch-grid .sk-swatches--image:not(.sk-swatches--preview) {
	grid-template-columns: repeat(auto-fill, minmax(var(--sk-sw-size, 38px), max-content));
}

.sk-swatches + select,
.sk-swatches ~ .sk-hidden-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Base swatch
 * ---------------------------------------------------------------------- */

.sk-swatch {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: var(--sk-sw-border-w, 1px) solid var(--sk-sw-border, #d1d5db);
	border-radius: var(--sk-sw-radius, 10px);
	background: var(--sk-card);
	color: var(--sk-primary);
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--sk-duration) var(--sk-ease), box-shadow var(--sk-duration) var(--sk-ease), transform var(--sk-duration) var(--sk-ease);
}

.sk-swatch:hover:not(.is-unavailable) {
	border-color: var(--sk-primary-soft);
	transform: translateY(-1px);
}

.sk-swatch:focus-visible {
	outline: 2px solid var(--sk-accent);
	outline-offset: 2px;
}

.sk-swatch.is-selected {
	border-color: var(--sk-sw-sel-border, #111827);
	box-shadow: 0 0 0 1px var(--sk-sw-sel-border, #111827);
}

/* Unavailable rather than hidden: seeing what exists but cannot be combined
 * is more useful than options silently disappearing. */
.sk-swatch.is-unavailable {
	cursor: not-allowed;
	opacity: 0.4;
}

.sk-swatch.is-unavailable::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -2px;
	right: -2px;
	height: 1px;
	background: var(--sk-faint);
	transform: rotate(-22deg);
	transform-origin: center;
}

/* -------------------------------------------------------------------------
 * Colour
 * ---------------------------------------------------------------------- */

.sk-swatches--color .sk-swatch {
	width: var(--sk-sw-size, 38px);
	height: var(--sk-sw-size, 38px);
	padding: 3px;
	border-radius: var(--sk-radius-pill);
}

.sk-swatches--color .sk-swatch__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px rgba(17, 24, 39, 0.12);
}

.sk-swatches--color .sk-swatch.is-selected {
	border-color: var(--sk-sw-sel-border, #111827);
	border-width: 2px;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Image
 * ---------------------------------------------------------------------- */

.sk-swatches--image .sk-swatch {
	width: var(--sk-sw-img, 58px);
	height: var(--sk-sw-img, 58px);
	padding: 2px;
	overflow: hidden;
}

.sk-swatches--image .sk-swatch__img,
.sk-swatches--image .sk-swatch img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--sk-radius-sm) - 3px);
	object-fit: cover;
}

.sk-swatches--image .sk-swatch__fill {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc(var(--sk-radius-sm) - 3px);
	background: var(--sk-card-alt);
}

/* -------------------------------------------------------------------------
 * Label button
 * ---------------------------------------------------------------------- */

.sk-swatches--button .sk-swatch {
	min-width: var(--sk-sw-btn-w, 52px);
	min-height: var(--sk-sw-btn-h, 44px);
	padding: 0 var(--sk-space-4);
	border-radius: var(--sk-sw-radius, 10px);
	font-size: var(--sk-sw-font, 14px);
	font-weight: 600;
}

.sk-swatches--button .sk-swatch.is-selected {
	background: var(--sk-sw-sel-bg, #111827) !important;
	color: var(--sk-sw-sel-fg, #ffffff) !important;
}

/* -------------------------------------------------------------------------
 * Size grid
 * ---------------------------------------------------------------------- */

.sk-swatches--size .sk-swatch {
	min-width: var(--sk-sw-btn-w, 52px);
	width: auto;
	height: var(--sk-sw-btn-h, 44px);
	padding: 0 10px;
	border-radius: var(--sk-sw-radius, 10px);
	font-size: var(--sk-sw-font, 14px);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sk-swatches--size .sk-swatch.is-selected {
	background: var(--sk-sw-sel-bg, #111827) !important;
	color: var(--sk-sw-sel-fg, #ffffff) !important;
}

/* Themes style every button in the summary as a call to action, which makes
 * a row of unselected sizes look like four Add to cart buttons. */
.sk-swatches .sk-swatch:not(.is-selected) {
	background: var(--sk-card) !important;
	border-color: var(--sk-sw-border, #d1d5db) !important;
	color: var(--sk-primary);
	box-shadow: none !important;
	text-transform: none;
	letter-spacing: 0;
}

.sk-swatches .sk-swatch.is-selected {
	border-color: var(--sk-sw-sel-border, #111827) !important;
}

.sk-swatches .sk-swatch:hover:not(.is-unavailable):not(.is-selected) {
	border-color: var(--sk-sw-sel-border, #111827) !important;
}

/* The chosen value, printed beside the attribute label. */
.sk-swatch-value {
	margin-left: 6px;
	color: var(--sk-muted);
	font-size: 0.9em;
	font-weight: 400;
}

.sk-swatch__label {
	display: block;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Unavailable option treatment
 * ---------------------------------------------------------------------- */

.sk-swatch-dim .sk-swatch.is-unavailable::after {
	content: none;
}

.sk-swatch-hide .sk-swatch.is-unavailable {
	display: none;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.sk-swatch:hover:not(.is-unavailable) {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
 * Small screens
 *
 * A swatch has to stay large enough to tap without eating the row, so the
 * sizes are set separately rather than scaled down.
 * ---------------------------------------------------------------------- */

@media (max-width: 640px) {
	.sk-swatches {
		gap: var(--sk-sw-gap-m, 6px);
	}

	.sk-swatch {
		border-radius: var(--sk-sw-radius-m, 10px);
	}

	.sk-swatches--color .sk-swatch {
		width: var(--sk-sw-size-m, 34px);
		height: var(--sk-sw-size-m, 34px);
		border-radius: var(--sk-radius-pill);
	}

	.sk-swatches--image .sk-swatch {
		width: var(--sk-sw-img-m, 48px);
		height: var(--sk-sw-img-m, 48px);
	}

	.sk-swatches--button .sk-swatch,
	.sk-swatches--size .sk-swatch {
		min-width: var(--sk-sw-btn-w-m, 44px);
		min-height: var(--sk-sw-btn-h-m, 38px);
		height: var(--sk-sw-btn-h-m, 38px);
		font-size: var(--sk-sw-font-m, 13px);
	}

	/* The phone arrangement overrides the desktop one. "Same as desktop"
	 * writes no class, so nothing here applies and the desktop rules stand. */
	.sk-swm-grid .sk-swatches--button:not(.sk-swatches--preview),
	.sk-swm-grid .sk-swatches--size:not(.sk-swatches--preview) {
		display: grid;
		grid-template-columns: repeat(var(--sk-sw-cols-m, 4), minmax(0, 1fr));
	}

	.sk-swm-grid .sk-swatches--color:not(.sk-swatches--preview),
	.sk-swm-grid .sk-swatches--image:not(.sk-swatches--preview) {
		display: flex;
		flex-wrap: wrap;
	}

	.sk-swm-wrap .sk-swatches:not(.sk-swatches--preview) {
		display: flex;
		flex-wrap: wrap;
	}

	.sk-swm-grid .sk-swatches--button .sk-swatch,
	.sk-swm-grid .sk-swatches--size .sk-swatch,
	.sk-swm-full .sk-swatches--button .sk-swatch,
	.sk-swm-full .sk-swatches--size .sk-swatch {
		min-width: 0;
		width: 100%;
		padding: 0 4px;
	}

	/* A long option name should shrink rather than overflow its column. */
	.sk-swatches--button .sk-swatch__label,
	.sk-swatches--size .sk-swatch__label {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* -------------------------------------------------------------------------
 * Listing preview
 *
 * Read only swatches under a product in the shop grid. Declared last, and at
 * a higher specificity than the interactive rules above, so a preview is
 * never sized like a control a customer can press.
 * ---------------------------------------------------------------------- */

.sk-swatches.sk-swatches--preview {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	overflow: hidden;
}

.sk-swatches.sk-swatches--preview .sk-swatch {
	flex: 0 0 auto;
	width: var(--sk-sw-preview, 22px);
	min-width: 0;
	height: var(--sk-sw-preview, 22px);
	min-height: 0;
	padding: 2px;
	border-radius: var(--sk-radius-pill);
	font-size: calc(var(--sk-sw-preview, 22px) * 0.46);
	cursor: default;
	pointer-events: none;
}

.sk-swatches.sk-swatches--preview.sk-swatches--button .sk-swatch,
.sk-swatches.sk-swatches--preview.sk-swatches--size .sk-swatch {
	width: auto;
	min-width: var(--sk-sw-preview, 22px);
	height: var(--sk-sw-preview, 22px);
	padding: 0 6px;
	border-radius: calc(var(--sk-sw-preview, 22px) * 0.3);
	font-weight: 600;
}

.sk-swatches.sk-swatches--preview .sk-swatch__label {
	line-height: 1;
}

.sk-swatches.sk-swatches--preview .sk-swatch--more {
	width: auto;
	min-width: 0;
	padding: 0 4px;
	border: 0;
	background: transparent !important;
	color: var(--sk-muted);
	font-weight: 600;
}

/* The preview keeps its size on a phone: it is an indication, not a control,
 * and shrinking it further would make it unreadable. */
@media (max-width: 640px) {
	.sk-swatches.sk-swatches--preview .sk-swatch,
	.sk-swatches.sk-swatches--preview.sk-swatches--button .sk-swatch,
	.sk-swatches.sk-swatches--preview.sk-swatches--size .sk-swatch {
		width: auto;
		min-width: var(--sk-sw-preview, 22px);
		height: var(--sk-sw-preview, 22px);
		font-size: calc(var(--sk-sw-preview, 22px) * 0.46);
	}

	.sk-swatches.sk-swatches--preview.sk-swatches--color .sk-swatch,
	.sk-swatches.sk-swatches--preview.sk-swatches--image .sk-swatch {
		width: var(--sk-sw-preview, 22px);
	}
}