/**
 * Akoirah catalog — gold colour / karat selector.
 *
 * Styled to match the approved production design: a "Metal :" row of pills
 * carrying a colour dot plus its name, then a "Karat :" row of plain pills,
 * above a live price breakup. Kept at low specificity (single classes, no
 * !important) so the theme can still override it.
 */

.ak-var {
	margin: 20px 0 22px;
}

.ak-var__group + .ak-var__group {
	margin-top: 20px;
}

.ak-var__label {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 500;
	color: #1a1a1a;
	letter-spacing: 0.01em;
}

.ak-var__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

/* The wrapper class is required by an Elementor rule on the product template
   that hides everything inside its Add-to-Cart widget except an allowlist
   which includes .single_variation_wrap and its descendants. Without it the
   selector renders into the page but is display:none. */
.ak-var-wrap {
	width: 100%;
}

.ak-var__summary {
	margin: 0 0 16px;
	font-size: 15px;
	color: #4a4a4a;
}

.ak-var__summary-sep {
	margin: 0 2px;
	color: #b0b0b0;
}

/* ── Metal + Karat pills ────────────────────────────────────────────────── */

/* Rendered as <span>, not <button>. Elementor's global kit styles every
   button on the site (`.elementor-kit-6 button` — Belleza 18px, uppercase,
   orange) at a higher specificity than a single class, so buttons here came
   out as "ROSE / WHITE / YELLOW" in orange. Spans avoid that fight entirely
   rather than escalating with !important. */

.ak-var__color,
.ak-var__karat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 1px solid #dcdcdc;
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: #1a1a1a;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ak-var__color {
	gap: 8px;
	padding: 11px 18px 11px 13px;
}

.ak-var__karat {
	min-width: 66px;
	padding: 12px 18px;
}

.ak-var__dot {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.08);
	flex: 0 0 auto;
}

.ak-var__dot--yg {
	background: radial-gradient(circle at 32% 28%, #f7dfa4 0%, #d9a94b 60%, #c2913a 100%);
}

.ak-var__dot--rg {
	background: radial-gradient(circle at 32% 28%, #f7d9cf 0%, #e0a191 60%, #c98374 100%);
}

.ak-var__dot--wg {
	background: radial-gradient(circle at 32% 28%, #fdfdfd 0%, #dcdfe1 60%, #bfc4c7 100%);
}

.ak-var__color:hover,
.ak-var__karat:hover {
	border-color: #9a9a9a;
}

.ak-var__color.is-active,
.ak-var__karat.is-active {
	border-color: #1a1a1a;
	box-shadow: inset 0 0 0 1px #1a1a1a;
}

/* ── Unavailable combinations ───────────────────────────────────────────── */

/* Kept visible but clearly out of reach, so the full range the design comes
   in stays legible. */
.ak-var__color.is-disabled,
.ak-var__karat.is-disabled {
	cursor: not-allowed;
	opacity: 0.4;
}

.ak-var__color.is-disabled:hover,
.ak-var__karat.is-disabled:hover {
	border-color: #dcdcdc;
}

.ak-var__karat.is-disabled {
	position: relative;
	overflow: hidden;
}

.ak-var__karat.is-disabled::after {
	content: "";
	position: absolute;
	left: 12%;
	right: 12%;
	top: 50%;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.ak-var__color:focus-visible,
.ak-var__karat:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 3px;
}

/* ── Messages ───────────────────────────────────────────────────────────── */

.ak-var__notice {
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: #b3261e;
}

.ak-var__notice[hidden] {
	display: none;
}

/* ── Price ──────────────────────────────────────────────────────────────── */

/* Rendered into the theme's own price slot, so it inherits the theme's
   typography rather than imposing its own size. */
.ak-var-price {
	display: inline-block;
}

.ak-var-from {
	font-size: 0.78em;
	color: #6b6b6b;
	letter-spacing: 0.03em;
}

@media (max-width: 480px) {
	.ak-var__karat {
		min-width: 56px;
		padding: 10px 12px;
	}

	.ak-var__color {
		padding: 8px 12px 8px 10px;
		font-size: 13px;
	}
}

/* ── Listing card swatches ──────────────────────────────────────────────── */

.ak-plp-swatches {
	margin: 10px 0;
}

.ak-plp-swatches__list {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.ak-plp-swatch {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid #e2e2e2;
	border-radius: 50%;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.ak-plp-swatch--yg {
	background: radial-gradient(circle at 32% 28%, #f7dfa4 0%, #d9a94b 60%, #c2913a 100%);
}

.ak-plp-swatch--rg {
	background: radial-gradient(circle at 32% 28%, #f7d9cf 0%, #e0a191 60%, #c98374 100%);
}

.ak-plp-swatch--wg {
	background: radial-gradient(circle at 32% 28%, #fdfdfd 0%, #dcdfe1 60%, #bfc4c7 100%);
}

.ak-plp-swatch:hover {
	transform: scale(1.12);
}

.ak-plp-swatch.is-active {
	border-color: #fff;
	box-shadow: 0 0 0 1.5px #1a1a1a;
}

.ak-plp-swatch:focus-visible {
	outline: 2px solid #1a1a1a;
	outline-offset: 3px;
}