:root {
	/* Swatches */
	--atop-vs-border: #e5e5e5;
	--atop-vs-border-selected: #2dbd0b;
	--atop-vs-glow: #2dbd0b;
	--atop-vs-bg-hover: rgba(255, 242, 248, 0.5);
	--atop-vs-bg-selected: #fff2f8;
	--atop-vs-text-muted: #888888;
	--atop-vs-badge-bg: #2dbd0b;
	--atop-vs-badge-text: #fff;

	/* Sticky ATC bar */
	--atop-vs-sticky-bg: rgba(255, 255, 255, 0.8);
	--atop-vs-sticky-bg-mobile: rgba(255, 255, 255, 0.92);
	--atop-vs-sticky-shadow: rgba(0, 0, 0, 0.1);
	--atop-vs-sticky-btn-bg: #2dbd0b;
	--atop-vs-sticky-btn-text: #fff;

	/* Group switcher */
	--atop-vgs-border-default: #e5e5e5;
	--atop-vgs-bg-default: #ffffff;
	--atop-vgs-brand: #e88aa8;
	--atop-vgs-brand-soft: #fff2f8;
	--atop-vgs-shadow-soft: rgba(214, 0, 87, 0.12);
	--atop-vgs-shadow-strong: rgba(214, 0, 87, 0.18);
}

.single-product form.variations_form .variations {
	display: none !important;
}

.atop-variations {
	display: grid;
	gap: 12px;
	margin: 16px 0 20px;
}

.woocommerce.single .product .main_section .cart .atop-variations {
	margin-bottom: 20px;
}

.woocommerce.single .product .main_section .cart.sticky-form .atop-variations {
	margin-bottom: 0;
}

.atop-variation {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border: 1px solid var(--atop-vs-border);
	border-radius: 10px;
	cursor: pointer;
	transition-duration: 0.1s;
	position: relative;
}

.atop-variation:hover {
	background-color: var(--atop-vs-bg-hover);
}

.atop-variation img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
}

.atop-variation .atop-title {
	font-weight: 600;
	max-width: 45%;
}

.atop-variation .atop-prices {
	margin-left: auto;
	text-align: right;
}

.atop-variation .atop-old {
	text-decoration: line-through;
	display: block;
	font-size: .9em;
	font-weight: normal;
}

.atop-variation .atop-old bdi {
	text-decoration: line-through;
	display: block;
	font-size: 1.1em !important;
	font-weight: normal;
	color: var(--atop-vs-text-muted);
}

.atop-variation input[type="radio"] {
	display: none;
}

.atop-variation:has(input[type="radio"]:checked),
.atop-selected-product {
	border: 2px solid var(--atop-vs-border-selected);
	transform: scale(1.02);
	background-color: var(--atop-vs-bg-selected);
}

.single_variation_wrap {
	display: flex;
	flex-direction: column;
}

.woocommerce-variation-price del .woocommerce-Price-amount bdi,
.atop-prices del .amount {
	color: var(--atop-vs-text-muted) !important;
	font-weight: normal;
	font-size: 16px !important;
}

.woocommerce-variation-price ins .woocommerce-Price-amount bdi {
	font-size: 28px !important;
	font-weight: bold;
}

.atop-variation .atop-free-shipping {
	position: absolute;
	right: 0;
	bottom: 0;
	background-color: var(--atop-vs-badge-bg);
	color: var(--atop-vs-badge-text);
	padding: 3px 10px;
	border-top-left-radius: 8px;
	border-bottom-right-radius: 8px;
	font-weight: normal;
	font-size: 11px;
	display: inline-block;
}

/* Hide the top summary price when a variation price is displayed in the cart area. */
.single-product .product.product-type-variable:has(form.cart .woocommerce-variation-price .amount) .summary.entry-summary > .price {
	display: none !important;
}

/* ---- Variation group switcher ---- */
.atop-var-group-switcher {
	display: flex;
	gap: 12px;
	margin: 16px 0 12px;
}

.atop-var-group-btn {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
	border: 1px solid var(--atop-vgs-border-default);
	border-radius: 10px;
	background: var(--atop-vgs-bg-default);
	cursor: pointer;
	transition: border-color 0.1s, box-shadow 0.1s, background-color 0.1s, color 0.1s;
	font: inherit;
	color: inherit;
	text-align: center;
}

.atop-var-group-btn input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}

.atop-var-group-btn:hover,
.atop-var-group-btn:focus-visible {
	background-color: var(--atop-vgs-bg-default);
	border-color: var(--atop-vgs-brand);
	box-shadow: inset 0 0 3px var(--atop-vgs-shadow-soft);
	color: inherit;
}

.atop-var-group-btn img {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 8px;
}

.atop-var-group-btn__slideshow {
	position: relative;
	display: block;
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	overflow: hidden;
}

.atop-var-group-btn__slideshow img {
	position: absolute;
	inset: 0;
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: 8px;
	opacity: 0;
	z-index: 0;
	animation-duration: calc(var(--atop-vgs-slide-count, 2) * 3.6s);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-delay: calc(var(--atop-vgs-slide-i, 0) * 3.6s);
}

.atop-var-group-btn__slideshow img:first-child {
	opacity: 1;
}

/*
 * Smooth fade in → hold → fade out.
 * Fade-out finishes as the next slide’s delay starts, so they never both sit at full opacity.
 */
.atop-var-group-btn__slideshow[data-slides="2"] img {
	animation-name: atop-vgs-slideshow-2;
}

.atop-var-group-btn__slideshow[data-slides="3"] img {
	animation-name: atop-vgs-slideshow-3;
}

.atop-var-group-btn__slideshow[data-slides="4"] img {
	animation-name: atop-vgs-slideshow-4;
}

.atop-var-group-btn__slideshow[data-slides="5"] img {
	animation-name: atop-vgs-slideshow-5;
}

.atop-var-group-btn__slideshow[data-slides="6"] img {
	animation-name: atop-vgs-slideshow-6;
}

@keyframes atop-vgs-slideshow-2 {
	0% {
		opacity: 0;
		z-index: 1;
	}
	2.5% {
		opacity: 1;
		z-index: 1;
	}
	47.5% {
		opacity: 1;
		z-index: 1;
	}
	50% {
		opacity: 0;
		z-index: 0;
	}
	100% {
		opacity: 0;
		z-index: 0;
	}
}

@keyframes atop-vgs-slideshow-3 {
	0% {
		opacity: 0;
		z-index: 1;
	}
	2% {
		opacity: 1;
		z-index: 1;
	}
	31.333% {
		opacity: 1;
		z-index: 1;
	}
	33.333% {
		opacity: 0;
		z-index: 0;
	}
	100% {
		opacity: 0;
		z-index: 0;
	}
}

@keyframes atop-vgs-slideshow-4 {
	0% {
		opacity: 0;
		z-index: 1;
	}
	2% {
		opacity: 1;
		z-index: 1;
	}
	23% {
		opacity: 1;
		z-index: 1;
	}
	25% {
		opacity: 0;
		z-index: 0;
	}
	100% {
		opacity: 0;
		z-index: 0;
	}
}

@keyframes atop-vgs-slideshow-5 {
	0% {
		opacity: 0;
		z-index: 1;
	}
	1.5% {
		opacity: 1;
		z-index: 1;
	}
	18.5% {
		opacity: 1;
		z-index: 1;
	}
	20% {
		opacity: 0;
		z-index: 0;
	}
	100% {
		opacity: 0;
		z-index: 0;
	}
}

@keyframes atop-vgs-slideshow-6 {
	0% {
		opacity: 0;
		z-index: 1;
	}
	1.5% {
		opacity: 1;
		z-index: 1;
	}
	15.167% {
		opacity: 1;
		z-index: 1;
	}
	16.667% {
		opacity: 0;
		z-index: 0;
	}
	100% {
		opacity: 0;
		z-index: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atop-var-group-btn__slideshow img {
		animation: none;
		opacity: 0;
	}

	.atop-var-group-btn__slideshow img:first-child {
		opacity: 1;
	}
}

.atop-var-group-btn__label {
	font-weight: 600;
	line-height: 1.2;
}

.atop-var-group-btn:has(input:checked) {
	border-color: var(--atop-vgs-brand);
	box-shadow: inset 0 0 4px var(--atop-vgs-shadow-strong);
	background-color: var(--atop-vgs-brand-soft);
}

.atop-var-group-btn:has(input:checked):hover,
.atop-var-group-btn:has(input:checked):focus-visible {
	background-color: var(--atop-vgs-brand-soft);
	border-color: var(--atop-vgs-brand);
	box-shadow: inset 0 0 4px var(--atop-vgs-shadow-strong);
}

/* CSS group filtering (max 3 groups) — driven by data-active-group on the list. */
.atop-variations[data-grouped] > .atop-variation {
	display: none !important;
}

.atop-variations[data-grouped][data-active-group="0"] > .atop-variation[data-var-group="0"],
.atop-variations[data-grouped][data-active-group="1"] > .atop-variation[data-var-group="1"],
.atop-variations[data-grouped][data-active-group="2"] > .atop-variation[data-var-group="2"] {
	display: flex !important;
}

/* Sticky ATC: keep showing only the checked variation. */
form.cart.sticky-form .atop-variations[data-grouped] > .atop-variation {
	display: none !important;
}

form.cart.sticky-form .atop-variations[data-grouped] > .atop-variation:has(.atop-variation-radio:checked) {
	display: flex !important;
}

@media (max-width: 768px) {
	.atop-variation {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		grid-template-rows: auto auto;
		column-gap: 12px;
		row-gap: 6px;
		align-items: start;
	}

	.atop-variations[data-grouped] > .atop-variation {
		display: none !important;
	}

	.atop-variations[data-grouped][data-active-group="0"] > .atop-variation[data-var-group="0"],
	.atop-variations[data-grouped][data-active-group="1"] > .atop-variation[data-var-group="1"],
	.atop-variations[data-grouped][data-active-group="2"] > .atop-variation[data-var-group="2"] {
		display: grid !important;
	}

	form.cart.sticky-form .atop-variations[data-grouped] > .atop-variation:has(.atop-variation-radio:checked) {
		display: grid !important;
	}

	.atop-variation img {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: start;
	}

	.atop-variation .atop-title {
		grid-column: 2;
		grid-row: 1;
		max-width: none;
	}

	.atop-variation .atop-prices {
		grid-column: 2;
		grid-row: 2;
		margin-left: 0;
		text-align: left;
	}

	.atop-variation:has(.atop-free-shipping) {
		padding-bottom: 28px;
	}
}