/**
 * Grazia Donna – archive loop variation UX.
 */

/* Show size swatches from the start (Woodmart hides them until first selection). */
.wd-product.product-type-variable .wd-quick-shop-2:not(.wd-form-inited) tr:not(:first-child) .wd-swatches-product {
	display: inline-flex !important;
}

/* Keep native "בחירת אפשרות" dropdowns hidden – swatches replace them. */
.wd-product.product-type-variable .wd-quick-shop-2 .with-swatches select,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product + select {
	display: none !important;
}

/* Stable swatch area height (color + size) – no jump on first selection. */
.wd-product.product-type-variable .wd-quick-shop-2 table.variations tr {
	animation: none;
}

/* Replace Woodmart "+N" limit – carousel shows 5 at a time. */
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch-divider,
.wd-product.product-type-variable .wrapp-swatches .wd-swatch-divider {
	display: none !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product:not(.gd-swatch-carousel-ready) .wd-swatch.wd-hidden,
.wd-product.product-type-variable .wrapp-swatches .wd-swatches-grid:not(.gd-swatch-carousel-ready) .wd-swatch.wd-hidden {
	display: none !important;
}

/* Swatch carousel – exactly 5 visible, arrows on left & right. */
.gd-swatch-carousel {
	display: inline-flex;
	flex-direction: row;
	direction: ltr;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

.gd-swatch-carousel-track-wrap {
	flex: 0 1 auto;
	min-width: 0;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

.gd-swatch-carousel-track-wrap > .wd-swatches-product,
.gd-swatch-carousel-track-wrap > .wd-swatches-grid {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
	gap: var(--wd-swatch-v-sp, 5px) var(--wd-swatch-h-sp, 8px);
}

.wd-swatches-product .wd-swatch.gd-swatch-carousel-hidden,
.wd-swatches-grid .wd-swatch.gd-swatch-carousel-hidden {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

.gd-swatch-carousel-arrow {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--color-gray-500, #888);
	cursor: pointer;
	line-height: 1;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.gd-swatch-carousel-arrow-icon {
	display: block;
	width: 8px;
	height: 8px;
	border-top: 2px solid currentColor;
	border-inline-end: 2px solid currentColor;
	opacity: 0.85;
}

.gd-swatch-carousel-arrow--left .gd-swatch-carousel-arrow-icon {
	transform: rotate(-135deg);
	margin-inline-start: 1px;
}

.gd-swatch-carousel-arrow--right .gd-swatch-carousel-arrow-icon {
	transform: rotate(45deg);
	margin-inline-end: 1px;
}

.gd-swatch-carousel-arrow:hover:not(.gd-disabled) {
	color: var(--color-gray-900, #222);
}

.gd-swatch-carousel-arrow:hover:not(.gd-disabled) .gd-swatch-carousel-arrow-icon {
	opacity: 1;
}

.gd-swatch-carousel-arrow.gd-disabled {
	opacity: 0.2;
	cursor: default;
	pointer-events: none;
}

/* Size swatches – no background/border, underline on hover/selected only. */
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text:not(.gd-out-of-stock),
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text:not(.gd-out-of-stock):hover,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text.wd-active:not(.gd-out-of-stock) {
	box-shadow: none !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	--brd-width: 0 !important;
	--wd-swatch-brd-color: transparent !important;
	--wd-swatch-inn-sp: 0 !important;
	min-width: auto;
	min-height: auto;
	width: auto;
	height: auto;
	color: var(--color-gray-900, #222) !important;
}

@media (hover: hover) {
	.wd-product.product-type-variable .wd-quick-shop-2 [class*='wd-swatches'] .wd-swatch.wd-text:hover:not(.wd-disabled):not(.gd-out-of-stock) {
		box-shadow: none !important;
		background: transparent !important;
		background-color: transparent !important;
		border: none !important;
		border-color: transparent !important;
		--wd-swatch-brd-color: transparent !important;
		color: var(--color-gray-900, #222) !important;
	}
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text:not(.gd-out-of-stock)::after {
	display: none !important;
	content: none !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text .wd-swatch-text {
	display: inline-block;
	padding: 0 0 2px;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.01em;
	color: inherit;
	text-decoration: none !important;
	border-bottom: 1px solid transparent;
	transition: font-weight 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text:hover:not(.gd-out-of-stock):not(.wd-disabled) .wd-swatch-text,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text.wd-active:not(.gd-out-of-stock) .wd-swatch-text {
	font-weight: 500;
	border-bottom-color: var(--color-gray-900, #222);
	color: var(--color-gray-900, #222);
}

/* Out-of-stock – grey text/colors, diagonal strike, not clickable. */
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-disabled:not(.gd-out-of-stock),
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-disabled:not(.gd-out-of-stock):hover {
	opacity: 1 !important;
	filter: none !important;
	cursor: pointer !important;
	pointer-events: auto !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.gd-out-of-stock,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.gd-out-of-stock:hover,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.gd-out-of-stock.wd-active {
	cursor: not-allowed !important;
	pointer-events: auto !important;
	opacity: 1 !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text.gd-out-of-stock,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text.gd-out-of-stock:hover,
.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text.gd-out-of-stock.wd-active {
	box-shadow: none !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--color-gray-300, #c4c4c4) !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.gd-out-of-stock {
	cursor: not-allowed;
	pointer-events: auto;
	opacity: 1;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text.gd-out-of-stock {
	color: var(--color-gray-300, #c4c4c4) !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text.wd-active.gd-out-of-stock .wd-swatch-text {
	font-weight: 400 !important;
	border-bottom-color: transparent !important;
	color: var(--color-gray-300, #c4c4c4) !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text.gd-out-of-stock .wd-swatch-text {
	position: relative;
	color: var(--color-gray-300, #c4c4c4) !important;
	font-weight: 400 !important;
	border-bottom-color: transparent !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatches-product .wd-swatch.wd-text.gd-out-of-stock .wd-swatch-text::after {
	display: block !important;
	content: '' !important;
	position: absolute;
	left: -2px;
	right: -2px;
	top: 50%;
	height: 1px;
	background: var(--color-gray-400, #aaa);
	transform: rotate(-42deg);
	pointer-events: none;
	z-index: 2;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-bg.gd-out-of-stock {
	opacity: 0.35;
	filter: grayscale(0.85);
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-bg.gd-out-of-stock::before {
	display: block !important;
	content: '' !important;
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: none !important;
	background-image: linear-gradient(
		to top left,
		transparent calc(50% - 0.5px),
	 rgba(160, 160, 160, 0.95) 50%,
		transparent calc(50% + 0.5px)
	) !important;
	opacity: 1 !important;
	z-index: 4;
	pointer-events: none;
}

.wd-product.product-type-variable .wd-quick-shop-2 .wd-swatch.wd-text.gd-out-of-stock::before {
	display: none !important;
	content: none !important;
}

.wd-product.product-type-variable .wd-quick-shop-2 td.value.cell.with-swatches {
	text-align: center;
	padding-inline: 2px;
	overflow: visible;
}

.wd-product.product-type-variable .wd-quick-shop-2 table.variations {
	width: 100%;
}

/*
 * Product title above color/size variations (Woodmart quick-hover default is below).
 */
.wd-products .wd-product.product-type-variable .wd-product-wrapper {
	display: flex;
	flex-direction: column;
}

.wd-products .wd-product.product-type-variable .wd-product-wrapper > .product-element-bottom {
	display: flex;
	flex-direction: column;
}

.wd-products .wd-product.product-type-variable .wd-entities-title {
	order: 1;
}

.wd-products .wd-product.product-type-variable .variations_form.wd-quick-shop-2 {
	order: 2;
}

.wd-products .wd-product.product-type-variable .product-rating-price,
.wd-products .wd-product.product-type-variable .product-element-bottom > .price,
.wd-products .wd-product.product-type-variable .wd-product-wrapper > .price {
	order: 3;
}

.wd-products .wd-product.product-type-variable .wd-product-cats,
.wd-products .wd-product.product-type-variable .wd-product-brands-links,
.wd-products .wd-product.product-type-variable .wd-product-sku,
.wd-products .wd-product.product-type-variable .wd-product-stock,
.wd-products .wd-product.product-type-variable .product-element-bottom > .star-rating,
.wd-products .wd-product.product-type-variable .wd-product-wrapper > .star-rating {
	order: 4;
}

/*
 * In stretch grids, variable products had shorter images because swatches
 * took space while simple products grew empty space in product-element-bottom.
 * Let the thumb absorb that extra height on variable products only.
 */
.wd-products[class*='wd-stretch-cont'] .wd-product.product-type-variable .wd-product-wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wd-products[class*='wd-stretch-cont'] .wd-product.product-type-variable .wd-product-thumb {
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

.wd-products[class*='wd-stretch-cont'] .wd-product.product-type-variable .product-element-bottom {
	flex: 0 0 auto;
}

.wd-products[class*='wd-stretch-cont'] .wd-product.product-type-variable .wd-product-thumb > .wd-product-img-link {
	display: block;
	width: 100%;
	height: 100%;
}

.wd-products[class*='wd-stretch-cont'] .wd-product.product-type-variable .wd-product-thumb > .wd-product-img-link :is(img, picture) {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * Quick-hover archive: add-to-cart bar only while hovering.
 * Never pin it open via wd-variation-active (that was shifting the image).
 */
.wd-products .wd-product.product-type-variable.wd-hover-quick .wd-add-btn {
	transform: translateY(103%) translateZ(0) !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.wd-products .wd-product.product-type-variable.wd-hover-quick:hover .wd-add-btn {
	transform: translateY(0) translateZ(0) !important;
	visibility: visible !important;
	opacity: 0.8 !important;
	pointer-events: auto !important;
}

/* Quantity field appearing after selection was growing the bar – hide in archive. */
.wd-products .wd-product.product-type-variable .wd-add-btn .quantity {
	display: none !important;
}

/*
 * Stop Woodmart transitions from animating layout bounce.
 */
.wd-product.product-type-variable :is(
	.wd-product-wrapper,
	.wd-product-thumb,
	.wd-product-card-bg,
	.wd-product-img-link,
	.wd-add-btn,
	.wrapp-swatches,
	.product-element-bottom,
	.variations_form.wd-quick-shop-2
) {
	transition: none !important;
}

/* Reserve space for color + size swatches under the image. */
.wd-product.product-type-variable .wd-product-wrapper > .variations_form.wd-quick-shop-2,
.wd-product.product-type-variable .product-element-bottom > .variations_form.wd-quick-shop-2,
.wd-product.product-type-variable .wd-product-wrapper > .wd-quick-shop-2 {
	flex-shrink: 0;
	min-height: 76px;
}

.wd-product.product-type-variable.wd-hover-base .wrapp-swatches {
	min-height: 82px;
	align-content: center;
}

/*
 * Woodmart pins the add button after partial selection – block that
 * (quick-hover hover-only rule above is the primary fix).
 */
.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-quick:not(:hover) .wd-add-btn,
.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-quick.wd-variation-active:not(:hover) .wd-add-btn,
.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-quick.product-swatched:not(:hover) .wd-add-btn,
.wd-product.product-type-variable.gd-variation-complete.wd-hover-quick:not(:hover) .wd-add-btn,
.wd-product.product-type-variable.gd-variation-complete.wd-hover-quick.wd-variation-active:not(:hover) .wd-add-btn {
	transform: translateY(103%) translateZ(0) !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-buttons-on-hover .wd-product-thumb,
.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-buttons-on-hover:hover .wd-product-thumb,
.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-buttons-on-hover.wd-variation-active .wd-product-thumb {
	clip-path: none !important;
}

.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-buttons-on-hover :is(
	.product-element-bottom,
	.wd-product-grid-slider-pagin
) {
	transform: none !important;
}

.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-buttons-on-hover .wd-product-footer {
	opacity: 0 !important;
	visibility: hidden !important;
}

.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-alt.wd-variation-active .swap-wrapp {
	overflow: clip;
	height: calc(var(--wd-text-font-size) * 1.4);
	transition: all 0.3s ease;
	margin-block: -0.2em;
}

.wd-product.product-type-variable:not(.gd-variation-complete).wd-hover-alt.wd-variation-active .swap-elements {
	display: block;
	transition: transform 0.3s ease;
	transform: none;
}

/* Inline validation notice above the product card. */
.wd-product.product-type-variable {
	position: relative;
}

.wd-product.product-type-variable .gd-variation-notice {
	position: absolute;
	top: 8px;
	inset-inline: 8px;
	z-index: 30;
	padding: 8px 14px;
	border-radius: 4px;
	background-color: rgba(34, 34, 34, 0.92);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	pointer-events: none;
	animation: gd-variation-notice-in 0.25s ease;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

@keyframes gd-variation-notice-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Gentle highlight on swatch area when validation fails. */
.wd-product.product-type-variable.gd-variation-highlight .wrapp-swatches,
.wd-product.product-type-variable.gd-variation-highlight .wd-quick-shop-2 {
	outline: 2px solid rgba(34, 34, 34, 0.35);
	outline-offset: 3px;
	border-radius: 4px;
	transition: outline-color 0.25s ease;
}

.wd-product.product-type-variable.gd-variation-highlight-both .wrapp-swatches,
.wd-product.product-type-variable.gd-variation-highlight-both .wd-quick-shop-2 {
	animation: gd-variation-pulse 0.55s ease 2;
}

.wd-product.product-type-variable.gd-variation-highlight-size .wd-quick-shop-2 tr:nth-child(2) .wd-swatches-product {
	outline: 2px solid rgba(34, 34, 34, 0.45);
	outline-offset: 3px;
	border-radius: 4px;
	animation: gd-variation-pulse 0.55s ease 2;
}

.wd-product.product-type-variable.gd-variation-highlight-color .wd-quick-shop-2 tr:has(.wd-swatch.wd-bg) .wd-swatches-product {
	outline: 2px solid rgba(34, 34, 34, 0.45);
	outline-offset: 3px;
	border-radius: 4px;
	animation: gd-variation-pulse 0.55s ease 2;
}

@keyframes gd-variation-pulse {
	0%,
	100% {
		outline-color: rgba(34, 34, 34, 0.2);
	}

	50% {
		outline-color: rgba(34, 34, 34, 0.55);
	}
}