/**
 * Aqlano Variation Swatches — frontend styles.
 *
 * @package Aqlano_Variation_Swatches
 */

.aqlano-vs {
	--aqlano-vs-size: 72px;
	--aqlano-vs-gap: 10px;
	--aqlano-vs-border: #111;
	--aqlano-vs-muted: #767676;
	margin: 0 0 16px;
}

.aqlano-vs-hidden,
.aqlano-vs .aqlano-vs-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.aqlano-vs__selected-name {
	display: inline-block;
	font-weight: 600;
	margin-left: 4px;
}

.aqlano-vs__groups {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.aqlano-vs__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.aqlano-vs__price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	font-size: 15px;
	line-height: 1.4;
}

.aqlano-vs__price {
	font-weight: 700;
	color: #111;
}

.aqlano-vs__discount {
	color: #111;
	font-weight: 600;
}

.aqlano-vs__regular {
	color: var(--aqlano-vs-muted);
	text-decoration: line-through;
	font-size: 14px;
}

.aqlano-vs__swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--aqlano-vs-gap);
	align-items: flex-start;
}

.aqlano-vs__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 10px;
	font-size: 15px;
}

.aqlano-vs__label {
	font-weight: 600;
}

.aqlano-vs-linked-wrap {
	margin-bottom: 16px;
}

.aqlano-vs-linked-wrap .aqlano-vs__swatch,
.aqlano-vs-linked-wrap .aqlano-vs__swatch span {
	box-sizing: border-box;
}

.aqlano-vs__swatch {
	position: relative;
	display: inline-block;
	vertical-align: top;
	width: var(--aqlano-vs-size);
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
}

.aqlano-vs__swatch--link {
	text-decoration: none;
	color: inherit;
}

.aqlano-vs__swatch-media {
	position: relative;
	display: block;
	width: var(--aqlano-vs-size);
	height: var(--aqlano-vs-size);
	border: 1px solid #d4d4d4;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aqlano-vs__swatch img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.aqlano-vs--linked .aqlano-vs__hover-label {
	display: none !important;
}

.aqlano-vs:not(.aqlano-vs--linked) .aqlano-vs__hover-label {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	z-index: 5;
	padding: 4px 8px;
	border-radius: 4px;
	background: #111;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}

.aqlano-vs:not(.aqlano-vs--linked) .aqlano-vs__swatch:hover .aqlano-vs__hover-label,
.aqlano-vs:not(.aqlano-vs--linked) .aqlano-vs__swatch:focus-visible .aqlano-vs__hover-label {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.aqlano-vs__swatch:hover:not(.is-selected):not([aria-current="true"]):not(.is-unavailable) .aqlano-vs__swatch-media,
.aqlano-vs__swatch:focus-visible:not(.is-selected):not([aria-current="true"]):not(.is-unavailable) .aqlano-vs__swatch-media {
	border-color: #888 !important;
}

/* Premium selected state: thin border + check badge */
.aqlano-vs__swatch.is-selected .aqlano-vs__swatch-media,
.aqlano-vs__swatch[aria-current="true"] .aqlano-vs__swatch-media,
.aqlano-vs__swatch-media.is-selected {
	border: 2px solid #111 !important;
	box-shadow: none !important;
}

.aqlano-vs__check {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 4;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #111;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	pointer-events: none;
}

.aqlano-vs__check::after {
	content: "";
	position: absolute;
	top: 4px;
	left: 6px;
	width: 4px;
	height: 7px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Out of stock — color swatches */
.aqlano-vs__swatch.is-unavailable,
.aqlano-vs__swatch.is-unavailable .aqlano-vs__swatch-media {
	cursor: not-allowed;
	pointer-events: none;
}

.aqlano-vs__swatch.is-unavailable img {
	filter: grayscale(100%);
	opacity: 0.45;
}

.aqlano-vs__soldout-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: rgba(255, 255, 255, 0.35);
	pointer-events: none;
}

.aqlano-vs__unavailable-line {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		#777 calc(50% - 1px),
		#777 calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	pointer-events: none;
}

.aqlano-vs__swatch:focus-visible {
	outline: none;
}

.aqlano-vs__swatch:focus-visible .aqlano-vs__swatch-media {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

.variations .variation-swatche .value.with-swatches .aqlano-vs {
	width: 100%;
}

.aqlano-vs-enabled .variation-swatche .variation-selector:not(.aqlano-vs-hidden) {
	width: 100%;
}

/* Out of stock — Anvogue size/attribute swatches */
.aqlano-vs-enabled .pls-swatches .swatch-term.swatch-disabled,
.aqlano-vs-enabled .pls-swatches .swatch.swatch-disabled,
.aqlano-vs-enabled .pls-swatches .swatch.disabled {
	position: relative;
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

.aqlano-vs-enabled .pls-swatches .swatch-term.swatch-disabled::after,
.aqlano-vs-enabled .pls-swatches .swatch.swatch-disabled::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top left,
		transparent calc(50% - 1px),
		#888 calc(50% - 1px),
		#888 calc(50% + 1px),
		transparent calc(50% + 1px)
	);
	pointer-events: none;
}

.aqlano-vs-enabled .pls-swatches .swatch-label.swatch-disabled span,
.aqlano-vs-enabled .pls-swatches .swatch-term.swatch-disabled span {
	text-decoration: line-through;
}