/* Colour swatches for variation attributes (single product page). */

.ak-swatch-hidden {
	display: none !important;
}

.ak-color-swatches {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.ak-swatch {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
}

.ak-swatch__dot {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--ak-swatch, #ccc);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ak-swatch:hover .ak-swatch__dot {
	transform: scale(1.06);
}

.ak-swatch.is-active .ak-swatch__dot {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px #d32b2b;
}

.ak-swatch:focus-visible {
	outline: none;
}

.ak-swatch:focus-visible .ak-swatch__dot {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px #1e73be;
}

.ak-swatch__label {
	font-size: 12px;
	line-height: 1;
	color: #6b6b6b;
}

.ak-swatch.is-active .ak-swatch__label {
	color: #222;
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
   Layout: give the colour selector its own full-width row.

   Electio lays the variation form out as a flex ROW, so the attribute table is
   crammed into a narrow left column beside the Add-to-Cart block. Rather than
   restyle Electio's variations table (it relies on negative offsets, which
   overlap the short description when overridden), the swatches are relocated by
   JS into a standalone `.ak-swatch-block` placed directly under the price and
   above Add-to-Cart. This styles that block. The now-empty native colour row is
   hidden.
   --------------------------------------------------------------------------- */

.ak-swatch-block {
	margin: 4px 0 22px;
}

.ak-swatch-heading {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 600;
	text-transform: capitalize;
	color: #222;
}

.ak-swatch-block .ak-color-swatches {
	margin-top: 0;
}

/* Hide the original (now empty) colour row left behind in the variations table. */
.variations_form tr.ak-swatch-source-row {
	display: none;
}

/* ---------------------------------------------------------------------------
   Selected-variation price + Add-to-Cart tidy-up.

   Electio pulls WooCommerce's single-variation price box above the Add-to-Cart
   row with a negative offset, so it overlaps the buttons and leaves dead space
   in the box. Rather than fight that, hide the floating price box and mirror the
   selected colour's price into the headline price line (see color-swatches.js).
   --------------------------------------------------------------------------- */

/* Hide the floating per-variation price/availability box (mirrored up instead).
   WooCommerce sets an inline display:block on show, so !important is required. */
.variations_form .single_variation {
	display: none !important;
}

/* Collapse the emptied colour attribute table (see color-swatches.js) so the
   quantity + Add-to-Cart row fills the width instead of sitting to the right of
   a blank 180px column. */
.variations_form table.variations.ak-variations-empty {
	display: none;
}

.variations_form .single_variation_wrap {
	flex: 1 1 100%;
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Add-to-Cart row (swatch products only).

   Electio lays quantity, Add-to-Cart and the HappyPay installment widget in a
   single flex row. The HappyPay widget reserves ~340px even when it has no
   offer to show, leaving a blank column beside the button. Reflow the row:
   quantity + Add-to-Cart on their own line (button fills the width), payment
   widget on its own line below where it belongs — and it collapses to nothing
   when empty. Scoped via .ak-has-swatches so other products are untouched.
   --------------------------------------------------------------------------- */

.variations_form.ak-has-swatches .woocommerce-variation-add-to-cart {
	flex-wrap: wrap;
	row-gap: 14px;
	justify-content: flex-start;
}

.variations_form.ak-has-swatches .woocommerce-variation-add-to-cart .quantity {
	order: 1;
}

.variations_form.ak-has-swatches .woocommerce-variation-add-to-cart .single_add_to_cart_button {
	order: 2;
	flex: 1 1 auto;
	min-width: 180px;
}

.variations_form.ak-has-swatches .woocommerce-variation-add-to-cart .happypay-widget-container,
.variations_form.ak-has-swatches .woocommerce-variation-add-to-cart .happy-pay-wrapper {
	order: 3;
	flex-basis: 100%;
	margin: 0;
}