/* File: assets/frontend/archive-product-rail.css */

/* Archive-only swatch rail mechanics and interaction polish. */
.wvs-archive-product-wrapper {
	--c2c-rail-item-size: 34px;
	--c2c-rail-gap: 8px;
	--c2c-rail-radius: 8px;
	--c2c-nav-preinit-opacity: 0.45;
	--c2c-rail-border: #dfe2e4;
	--c2c-rail-border-hover: #76e3c6;
	--c2c-rail-border-active: #11c491;
	--c2c-rail-label-size: 1.12rem;
	--c2c-rail-label-weight: 560;
	--c2c-rail-label-color: #5a6168;
	--c2c-rail-label-opacity: 0.98;
	--c2c-rail-label-top: 12px;
	--c2c-rail-anim-ms: 420ms;
	--c2c-main-image-fade-ms: 130ms;
	--c2c-hover-exit-ms: 160ms;
	display: block !important;
	max-width: 100% !important;
	min-width: 0 !important;
}

.wvs-archive-product-wrapper .c2c-archive-card-head {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 12px;
	width: 100%;
	margin: 0 0 8px !important;
}

.wvs-archive-product-wrapper .c2c-archive-card-count,
.wvs-archive-product-wrapper h6.dynamic {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	position: static !important;
	float: none !important;
	margin: 0 !important;
	text-align: right;
	white-space: nowrap;
	flex: 0 0 auto;
}

.wvs-archive-product-wrapper .c2c-archive-card-title,
.wvs-archive-product-wrapper h5.dynamic {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
}

.wvs-archive-product-wrapper .c2c-archive-card-image-slot {
	margin: 0 !important;
}

.wvs-archive-product-wrapper .c2c-archive-card-swatch-slot {
	display: block !important;
	position: relative !important;
	width: var(--c2c-rail-width, 100%) !important;
	max-width: 100% !important;
	min-width: 0 !important;
	margin: 0 !important;
	overflow: visible !important;
}

.wvs-archive-product-wrapper .woo-variation-swatches,
.wvs-archive-product-wrapper .woo-variation-items-wrapper {
	display: block !important;
	max-width: 100% !important;
	min-width: 0 !important;
	width: 100% !important;
	overflow: visible !important;
}

/* Let empty rail space click through to the card overlay; re-enable only actual controls. */
.wvs-archive-product-wrapper .woo-variation-swatches,
.wvs-archive-product-wrapper .woo-variation-items-wrapper,
.wvs-archive-product-wrapper ul.variable-items-wrapper {
	pointer-events: none;
}

.wvs-archive-product-wrapper .reset_variations,
.wvs-archive-product-wrapper .woo-variation-swatches-reset-link,
.wvs-archive-product-wrapper a.reset {
	display: none !important;
}

/* Hard-disable native tooltip chrome in archive rails (frontend + builder). */
.wvs-archive-product-wrapper .wvs-tooltip,
.wvs-archive-product-wrapper [data-wvstooltip]::before,
.wvs-archive-product-wrapper [data-wvstooltip]::after,
.wvs-archive-product-wrapper [data-wvs-tooltip]::before,
.wvs-archive-product-wrapper [data-wvs-tooltip]::after {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	content: none !important;
}

/* Loader suppression (archive rail only). */
.wvs-archive-product-wrapper .wvs-spinner,
.wvs-archive-product-wrapper .loading-spinner,
.wvs-archive-product-wrapper .wvs-loading-spinner,
.wvs-archive-product-wrapper .blockUI,
.wvs-archive-product-wrapper .blockOverlay,
.wvs-archive-product-wrapper .blockMsg {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.wvs-archive-product-wrapper .woo-variation-swatches-loading,
.wvs-archive-product-wrapper.woo-variation-swatches-loader,
.wvs-archive-product-wrapper .woo-variation-swatches.woo-variation-swatches-loader {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

.wvs-archive-product-wrapper .blockUI::before,
.wvs-archive-product-wrapper .blockUI::after,
.wvs-archive-product-wrapper .blockOverlay::before,
.wvs-archive-product-wrapper .blockOverlay::after,
.wvs-archive-product-wrapper .blockMsg::before,
.wvs-archive-product-wrapper .blockMsg::after,
.wvs-archive-product-wrapper .wvs-spinner::before,
.wvs-archive-product-wrapper .wvs-spinner::after,
.wvs-archive-product-wrapper .loading-spinner::before,
.wvs-archive-product-wrapper .loading-spinner::after,
.wvs-archive-product-wrapper .wvs-loading-spinner::before,
.wvs-archive-product-wrapper .wvs-loading-spinner::after {
	display: none !important;
	content: none !important;
	animation: none !important;
}

.wvs-archive-product-wrapper .c2c-archive-swatch-rail {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 6px;
	width: var(--c2c-rail-width, 100%);
	max-width: 100%;
}

.wvs-archive-product-wrapper .c2c-archive-swatch-rail,
.wvs-archive-product-wrapper ul.variable-items-wrapper,
.wvs-archive-product-wrapper .c2c-archive-swatch-name-row,
.wvs-archive-product-wrapper .c2c-archive-swatch-name {
	width: var(--c2c-rail-width, 100%) !important;
	max-width: 100% !important;
}

.wvs-archive-product-wrapper ul.variable-items-wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: var(--c2c-rail-gap-runtime, var(--c2c-rail-gap)) !important;
	width: var(--c2c-rail-width, 100%) !important;
	max-width: 100% !important;
	min-width: 0 !important;
	min-height: var(--c2c-rail-reserved-size, var(--c2c-rail-item-size, 34px)) !important;
	box-sizing: border-box !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Pre-ready: keep row clipped while JS builds first page; ready: allow full outline bleed. */
.wvs-archive-product-wrapper:not(.c2c-archive-boot-ready) ul.variable-items-wrapper {
	overflow-x: hidden !important;
}

.wvs-archive-product-wrapper ul.variable-items-wrapper > li.variable-item,
.wvs-archive-product-wrapper ul.variable-items-wrapper > li.c2c-archive-swatch-nav {
	float: none !important;
	clear: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	flex: 0 0 var(--c2c-rail-item-size) !important;
	width: var(--c2c-rail-item-size) !important;
	height: var(--c2c-rail-item-size) !important;
	max-width: var(--c2c-rail-item-size) !important;
	min-width: var(--c2c-rail-item-size) !important;
	box-sizing: border-box !important;
	overflow: visible !important;
	pointer-events: auto;
}

.wvs-archive-product-wrapper ul.variable-items-wrapper > li.variable-item *,
.wvs-archive-product-wrapper ul.variable-items-wrapper > li.c2c-archive-swatch-nav * {
	pointer-events: auto;
}

.wvs-archive-product-wrapper ul.variable-items-wrapper > li.variable-item.c2c-archive-filter-hidden {
	display: none !important;
}

.wvs-archive-product-wrapper li.variable-item {
	font-size: 0 !important;
	line-height: 0 !important;
}

.wvs-archive-product-wrapper li.variable-item:hover,
.wvs-archive-product-wrapper li.variable-item.selected,
.wvs-archive-product-wrapper li.variable-item[aria-checked="true"],
.wvs-archive-product-wrapper li.variable-item:focus,
.wvs-archive-product-wrapper li.variable-item:focus-visible {
	border: 0 !important;
	outline: none !important;
	box-shadow: none !important;
}

.wvs-archive-product-wrapper li.variable-item .variable-item-contents {
	width: var(--c2c-rail-item-size) !important;
	height: var(--c2c-rail-item-size) !important;
	border: 0 !important;
	border-radius: var(--c2c-rail-radius) !important;
	box-shadow: var(--c2c-rail-swatch-shadow, 0 0 0 1px var(--c2c-rail-border)) !important;
	background: #fff !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease !important;
	outline: none !important;
}

.wvs-archive-product-wrapper li.variable-item:not(.selected):not([aria-checked="true"]):hover .variable-item-contents {
	border-color: transparent !important;
	background: #f4fffb !important;
	box-shadow: var(--c2c-rail-swatch-hover-shadow, 0 0 0 1px var(--c2c-rail-border-hover)) !important;
}

.wvs-archive-product-wrapper li.variable-item.selected .variable-item-contents,
.wvs-archive-product-wrapper li.variable-item[aria-checked="true"] .variable-item-contents {
	border-color: transparent !important;
	background: #ecfff8 !important;
	box-shadow: var(--c2c-rail-swatch-active-shadow, 0 0 0 2px var(--c2c-rail-border-active)) !important;
}

.wvs-archive-product-wrapper li.variable-item .variable-item-contents::before,
.wvs-archive-product-wrapper li.variable-item .variable-item-contents::after,
.wvs-archive-product-wrapper li.variable-item .variable-item-span,
.wvs-archive-product-wrapper li.variable-item .variable-item-span.wvs-show-more {
	display: none !important;
	content: none !important;
}

.wvs-archive-product-wrapper li.variable-item img.variable-item-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: calc(var(--c2c-rail-radius) - 2px) !important;
	background: #eceff1 !important;
}

.wvs-archive-product-wrapper .woo-variation-swatches.wvs-behavior-hide .variable-items-wrapper .variable-item.disabled,
.wvs-archive-product-wrapper .woo-variation-swatches.wvs-behavior-hide .variable-items-wrapper .variable-item.disabled:hover,
.wvs-archive-product-wrapper .wvs-behavior-hide .variable-items-wrapper .variable-item.disabled,
.wvs-archive-product-wrapper .wvs-behavior-hide .variable-items-wrapper .variable-item.disabled:hover {
	width: var(--c2c-rail-item-size) !important;
	height: var(--c2c-rail-item-size) !important;
	min-width: var(--c2c-rail-item-size) !important;
	min-height: var(--c2c-rail-item-size) !important;
	opacity: 0.38 !important;
	visibility: visible !important;
	transform: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.wvs-archive-product-wrapper ul.variable-items-wrapper > li.variable-item.variation-disabled {
	display: flex !important;
}

.wvs-archive-product-wrapper img.wvs-archive-product-image,
.wvs-archive-product-wrapper img.c2c-archive-card-image {
	transition-property: opacity !important;
	transition-duration: var(--c2c-main-image-fade-ms) !important;
	transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
	will-change: opacity;
}

/* Boot-only smoothing: keep layout stable on first uncached paint. */
.c2c-archive-card.c2c-archive-boot-pending .c2c-archive-card-image-slot {
	position: relative;
	overflow: hidden;
	background: #eceff1;
	border-radius: 12px;
}

.c2c-archive-card.c2c-archive-boot-pending .c2c-archive-card-image-slot::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, rgba(255,255,255,0) 8%, rgba(255,255,255,.24) 24%, rgba(255,255,255,0) 40%);
	transform: translateX(-120%);
	animation: c2cArchiveCardShimmer 1.05s ease-in-out infinite;
	pointer-events: none;
	z-index: 1;
}

.c2c-archive-card.c2c-archive-boot-pending img.c2c-archive-card-image,
.c2c-archive-card.c2c-archive-boot-pending img.wvs-archive-product-image {
	opacity: .98 !important;
}

.c2c-archive-card.c2c-archive-boot-ready .c2c-archive-card-image-slot::before {
	animation: none;
	opacity: 0;
}

.c2c-archive-card.c2c-archive-boot-ready img.c2c-archive-card-image,
.c2c-archive-card.c2c-archive-boot-ready img.wvs-archive-product-image {
	opacity: 1 !important;
}

.wvs-archive-product-wrapper:not(.c2c-archive-boot-ready) .c2c-archive-card-swatch-slot,
.wvs-archive-product-wrapper[data-c2c-rail-ready="0"] .c2c-archive-card-swatch-slot {
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
}

.wvs-archive-product-wrapper.c2c-archive-boot-ready[data-c2c-rail-ready="1"] .c2c-archive-card-swatch-slot {
	opacity: 1;
	pointer-events: auto;
}

.wvs-archive-product-wrapper li.c2c-archive-swatch-nav > button {
	appearance: none;
	-webkit-appearance: none;
	width: var(--c2c-rail-item-size);
	height: var(--c2c-rail-item-size);
	border: 1.5px solid #c8cdd2;
	border-radius: calc(var(--c2c-rail-radius) + 1px);
	background: linear-gradient(180deg, #ffffff 0%, #f7f8f9 100%);
	color: #394047;
	cursor: pointer;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 1px 2px rgba(0, 0, 0, 0.06);
	outline: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	opacity: 1;
	transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease, background-color 200ms ease;
}

.wvs-archive-product-wrapper .c2c-archive-swatch-nav__button--svg svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
	transform: translateY(0);
}

.wvs-archive-product-wrapper li.c2c-archive-swatch-nav > button:hover {
	border-color: var(--c2c-rail-border-hover);
	color: #273039;
	background: linear-gradient(180deg, #ffffff 0%, #f3fbf8 100%);
	box-shadow: 0 2px 8px rgba(17, 196, 145, 0.16);
}

.wvs-archive-product-wrapper li.c2c-archive-swatch-nav > button:active {
	background: #eef8f4;
	border-color: #5bd8b6;
	color: #243038;
}

.wvs-archive-product-wrapper li.c2c-archive-swatch-nav > button:focus-visible {
	outline: 2px solid rgba(17, 196, 145, 0.34);
	outline-offset: 1px;
}

.wvs-archive-product-wrapper li.c2c-archive-swatch-nav--preinit .c2c-archive-swatch-nav__button {
	opacity: 0.45;
	pointer-events: none;
	cursor: default;
}

.wvs-archive-product-wrapper li.c2c-archive-swatch-nav--ready .c2c-archive-swatch-nav__button {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 180ms ease-out;
}

.wvs-archive-product-wrapper ul.variable-items-wrapper.c2c-rail-dir-next li.variable-item.c2c-rail-enter {
	animation: c2cRailInFromRight var(--c2c-rail-anim-ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

.wvs-archive-product-wrapper ul.variable-items-wrapper.c2c-rail-dir-prev li.variable-item.c2c-rail-enter {
	animation: c2cRailInFromLeft var(--c2c-rail-anim-ms) cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes c2cRailInFromRight {
	0% {
		opacity: 0.18;
		transform: translateX(12px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes c2cRailInFromLeft {
	0% {
		opacity: 0.18;
		transform: translateX(-12px);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes c2cArchiveCardShimmer {
	0% {
		transform: translateX(-120%);
	}
	100% {
		transform: translateX(130%);
	}
}

.wvs-archive-product-wrapper .c2c-archive-swatch-name-row {
	display: block !important;
	flex: 0 0 100% !important;
	justify-content: flex-start !important;
	width: var(--c2c-rail-width, 100%) !important;
	max-width: 100% !important;
	list-style: none !important;
	margin: var(--c2c-rail-label-top) 0 0 !important;
	padding: 0 !important;
	opacity: 0;
	transition: opacity 160ms ease;
}

.wvs-archive-product-wrapper .c2c-archive-swatch-name {
	margin-top: 0 !important;
	display: block;
	position: static !important;
	width: var(--c2c-rail-width, 100%);
	max-width: 100%;
	font-size: var(--c2c-rail-label-size);
	line-height: 1.23;
	font-weight: var(--c2c-rail-label-weight);
	color: var(--c2c-rail-label-color);
	letter-spacing: 0.002em;
	opacity: var(--c2c-rail-label-opacity);
	min-height: 1.23em;
	padding-left: 1px;
	transition: opacity 160ms ease;
}

.wvs-archive-product-wrapper:not(.c2c-archive-boot-ready) .c2c-archive-swatch-name-row,
.wvs-archive-product-wrapper[data-c2c-rail-ready="0"] .c2c-archive-swatch-name-row,
.wvs-archive-product-wrapper:not(.c2c-archive-boot-ready) .c2c-archive-swatch-name,
.wvs-archive-product-wrapper[data-c2c-rail-ready="0"] .c2c-archive-swatch-name {
	opacity: 0;
	pointer-events: none;
}

.wvs-archive-product-wrapper.c2c-archive-boot-ready[data-c2c-rail-ready="1"] .c2c-archive-swatch-name-row,
.wvs-archive-product-wrapper.c2c-archive-boot-ready[data-c2c-rail-ready="1"] .c2c-archive-swatch-name {
	opacity: 1;
	pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
	.c2c-archive-card.c2c-archive-boot-pending .c2c-archive-card-image-slot::before {
		animation: none !important;
	}
}