/**
 * Product Variants — Blocksy swatch overrides to match Figma design.
 * Figma Node: 17286:70405 (VARIANT/BUNDLE section)
 * Task: 86ewyqwy5
 *
 * Targets Blocksy Pro's native button swatches on single product pages.
 */

/* ── Label: "Size", "Firmness" ── */
.variations th.label label {
	font-family: 'Barlow', sans-serif !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #4a4a4a !important;
	line-height: 1;
}

/* ── Swatch container: 12px gap, flex-wrap ── */
.variations .ct-variation-swatches[data-swatches-type="button"] {
	gap: 12px;
	flex-wrap: wrap;
}

/* ── Button swatch: 100×40px pill, 6px radius ── */
.variations .ct-variation-swatches[data-swatches-type="button"] .ct-swatch {
	min-width: 100px;
	height: 40px;
	padding: 8px 16px;
	border-radius: 6px;
	border: 2px solid #e4e5e7;
	font-family: 'Barlow', sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #4a4a4a;
	line-height: 24px;
	background: transparent;
	box-sizing: border-box;
}

/* ── Hover state ── */
.variations .ct-variation-swatches[data-swatches-type="button"] .ct-swatch:hover {
	border-color: #b0a89d;
}

/* ── Selected state: brown border ──
   Blocksy applies `.active` to the parent `.ct-swatch-container`, not the
   `.ct-swatch` element itself. */
.variations .ct-variation-swatches[data-swatches-type="button"] .ct-swatch-container.active .ct-swatch {
	border-color: #59402e;
	background: transparent;
	color: #4a4a4a;
}