/**
 * Competer: WC Boost variation swatches — spacing, label alignment, touch-friendly buttons.
 * Loads after wcboost-variation-swatches.
 */

/* -------------------------------------------------------------------------
   CSS variables (scoped so plugin inline size settings can still apply lower)
   ------------------------------------------------------------------------- */
.woocommerce table.variations td.value {
	--wcboost-swatches-item-width: 42px;
	--wcboost-swatches-item-height: 42px;
	--wcboost-swatches-item-padding: 4px;
	--wcboost-swatches-item-gap: 0.55rem;
	--wcboost-swatches-button-font-size: 0.9375rem;
	--wcboost-swatches-label-font-size: 0.9375rem;
}

/* -------------------------------------------------------------------------
   Attribute row: label + swatches on one line (avoids stacked “title / type”)
   ------------------------------------------------------------------------- */
.woocommerce table.variations {
	display: block;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 0 0.25rem;
}

.woocommerce table.variations tbody {
	display: block;
}

.woocommerce table.variations tr {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	width: 100%;
	box-sizing: border-box;
}

.woocommerce table.variations tr + tr {
	margin-top: 1rem;
}

.woocommerce table.variations th.label,
.woocommerce table.variations td.label {
	display: block;
	flex: 0 0 auto;
	padding: 0;
	padding-inline-end: 1rem;
	margin: 0;
	vertical-align: middle;
	width: auto;
	min-width: min(7rem, 35%);
	max-width: 42%;
	text-align: start;
}

.woocommerce table.variations th.label label,
.woocommerce table.variations td.label label {
	display: inline;
	line-height: 1.35;
	font-weight: 600;
	margin: 0;
	padding: 0;
	cursor: pointer;
}

.woocommerce table.variations td.value {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	vertical-align: middle;
}

/* Swatch block sits flush under value cell */
.woocommerce table.variations td.value .wcboost-variation-swatches {
	display: block;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

/* “Clear” link breathing room */
.woocommerce table.variations td.value .reset_variations {
	display: inline-block;
	margin-top: 0.85rem;
	line-height: 1.4;
}

/* Selected value next to attribute title (same text line; plugin adds “: ” via ::before) */
.woocommerce .wcboost-variation-swatches__selected-label {
	display: inline;
	margin: 0;
	padding: 0;
	line-height: inherit;
	font-size: inherit;
	font-weight: 600;
	vertical-align: baseline;
	white-space: normal;
}

.woocommerce .wcboost-variation-swatches__selected-label::before {
	white-space: pre;
}

/* -------------------------------------------------------------------------
   Swatch list: tighter, even gaps (row + column when wrapped)
   ------------------------------------------------------------------------- */
.woocommerce .wcboost-variation-swatches__wrapper {
	gap: var(--wcboost-swatches-item-gap) 0.65rem;
	align-items: center;
}

/* -------------------------------------------------------------------------
   Button + label swatches: padding and min tap target
   ------------------------------------------------------------------------- */
.woocommerce .wcboost-variation-swatches--button .wcboost-variation-swatches__item {
	min-width: 2.75rem;
	min-height: 2.5rem;
	padding: 0.5rem 0.9rem !important;
	line-height: 1.25;
	box-sizing: border-box;
}

.woocommerce .wcboost-variation-swatches--label .wcboost-variation-swatches__item {
	min-height: 2.5rem;
	padding: 0.45rem 0.95rem !important;
	line-height: 1.25;
	box-sizing: border-box;
}

.woocommerce .wcboost-variation-swatches--label .wcboost-variation-swatches__name {
	padding: 0 0.1rem;
}

/* Color / image tiles: consistent box */
.woocommerce .wcboost-variation-swatches--color .wcboost-variation-swatches__item,
.woocommerce .wcboost-variation-swatches--image .wcboost-variation-swatches__item {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Product loop / quick variable forms (smaller footprint)
   ------------------------------------------------------------------------- */
.woocommerce .variations_form_loop table.variations th.label,
.woocommerce .variations_form_loop table.variations td.label {
	min-width: 4.5rem;
	max-width: 40%;
	padding-inline-end: 0.65rem;
}

.woocommerce .variations_form_loop table.variations th.label label,
.woocommerce .variations_form_loop table.variations td.label label {
	font-size: 0.875rem;
}

.woocommerce .variations_form_loop table.variations td.value {
	--wcboost-swatches-item-width: 34px;
	--wcboost-swatches-item-height: 34px;
	--wcboost-swatches-item-gap: 0.4rem;
}

.woocommerce .variations_form_loop .wcboost-variation-swatches--button .wcboost-variation-swatches__item,
.woocommerce .variations_form_loop .wcboost-variation-swatches--label .wcboost-variation-swatches__item {
	min-height: 2.125rem;
	padding: 0.35rem 0.65rem !important;
	font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
   Mobile: stack label above value on very narrow summaries if needed
   ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.woocommerce.single-product table.variations th.label,
	.woocommerce.single-product table.variations td.label {
		min-width: 5rem;
		max-width: 46%;
		padding-inline-end: 0.65rem;
	}

	.woocommerce table.variations tr {
		gap: 0.35rem 0.65rem;
	}

	.woocommerce .wcboost-variation-swatches__wrapper {
		gap: 0.45rem 0.5rem;
	}
}