/* Handle swatches — v9
   - Prompt removed entirely
   - Name sits below the swatches (both breakpoints), lighter weight
   - Borders: 1px #D8D8D8 normal, 2px #222 selected. No shadow/scale/glow.
   - Desktop 6-across grid; mobile scroll strip, 56px chips
   - Native dropdown hidden */

/* Fully hide the native variation dropdown once the JS swatches are active.
   Kept class-gated so the dropdown still works if the JS ever fails to load. */
.variations_form.has-handle-swatches .variations {
	display: none !important;
}

/* Flex column. Grid first, name second, on every breakpoint. */
.savernake-handle-swatches {
	display: flex;
	flex-direction: column;
	margin: 0 0 8px;
}

/* Prompt removed entirely. */
.savernake-handle-swatches__label {
	display: none;
}

/* Swatch grid sits first. */
.savernake-handle-swatches__grid {
	order: 1;
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0.75rem;
}

/* Material name: feedback under the swatches. Secondary to the product title. */
.savernake-handle-swatches__selected {
	order: 2;
	margin: 8px 0 0;
	padding-left: 2%;
	font-family: inherit;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.2;
	color: #111111;
}

/* Reset the theme button styling so there is no orange surround. */
.savernake-handle-swatches__chip,
.savernake-handle-swatches__chip:hover,
.savernake-handle-swatches__chip:focus,
.savernake-handle-swatches__chip:active {
	display: block;
	width: 100%;
	min-width: 0;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font: inherit;
	cursor: pointer;
	box-sizing: border-box;
}

/* The square. 1px grey border (also defines pale swatches on the cream). */
.savernake-handle-swatches__swatch {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	background-size: cover;
	background-position: center;
	border: 1px solid #D8D8D8;
	box-shadow: none;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}

/* Selected: 2px charcoal. Nothing else. */
.savernake-handle-swatches__chip.is-active .savernake-handle-swatches__swatch {
	border: 2px solid #222222;
}

.savernake-handle-swatches__chip.is-disabled,
.savernake-handle-swatches__chip:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Mobile: horizontal scrolling strip, 56px chips. */
@media (max-width: 767px) {
	/* Gap between the product image and the strip. The block sits in the outer
	   container on mobile, so this margin is the clean single lever for it. */
	.savernake-handle-swatches {
		margin-top: 14px;
	}

	.savernake-handle-swatches__grid {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.5rem;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding: 2px;
		scrollbar-width: thin;
	}

	.savernake-handle-swatches__chip,
	.savernake-handle-swatches__chip:hover,
	.savernake-handle-swatches__chip:focus,
	.savernake-handle-swatches__chip:active {
		flex: 0 0 auto;
		width: 56px;
		scroll-snap-align: center;
	}
}