@keyframes button-bundle-spin {
	0% {
	  	transform: rotate(0deg);
	}
	100% {
	  	transform: rotate(360deg);
	}
}

.glozin-products-carousel {
	ul.products {
		li.product {
			height: auto;

			.product-inner {
				height: 100%;

				.woocommerce-LoopProduct-link {
					overflow: hidden;
				}
			}
		}
	}
}

// Products Bundle
.glozin-products-bundle {
	--col-width: 350px;
	--col-gap: 30px;

	ul.products {
		row-gap: 30px;
		
		li.product {
			margin-bottom: 0;

			.product-loop-button-atc {
				display: none !important;
			}
		}
	}

	.woocommerce-loop-product__title {
		a {
			line-height: normal;
		}
	}

	.wcboost-variation-swatches {
		margin-top: 11px;
	}

	li.product {
		.variations {
			position: relative;

			.wcboost-variation-swatches__wrapper {
				--wcboost-swatches-item-gap: 4px;
			}

			.wcboost-variation-swatches__item {
				box-shadow: none;
				border: 1px solid var(--gz-border-color);

				&:hover:not(.disabled),
				&.selected {
					border-color: var(--gz-color-dark);
					box-shadow: none;
				}

				&:after {
					bottom: calc(100% + 1px);
				}

				&.disabled {
					position: relative;
					overflow: hidden;
					opacity: 1;

					.wcboost-variation-swatches__name {
						&:before {
							content: "";
							height: 100%;
							width: 100%;
							background: linear-gradient( to top left, transparent calc(50% - 1px), #ddd, transparent calc(50% + 1px)) no-repeat;
							display: block;
							position: absolute;
							z-index: 3;
							top: 0;
							left: 0;
							bottom: 0;
							right: 0;
						}
					}
				}
			}

			.wcboost-variation-swatches__selected-label {
				font-weight: 600;
				color: var(--gz-color-dark);

				&::before {
					font-weight: 400;
					color: var(--gz-color-base);
				}
			}

			.wcboost-variation-swatches--label,
			.wcboost-variation-swatches--button {
				--wcboost-swatches-item-height: 30px;
				--wcboost-swatches-item-padding: 0 20px;

				.wcboost-variation-swatches__item {
					.wcboost-variation-swatches__name {
						font-weight: 500;
					}

					&:hover:not(.disabled),
					&.selected {
						background-color: var(--gz-color-dark);
						color: var(--gz-color-light);
					}

					&.disabled {
						background-color: var(--gz-color-light-grey);
					}
				}
			}

			.wcboost-variation-swatches--image {
				--gz-image-rounded: 0;

				.wcboost-variation-swatches__item.disabled {
					.wcboost-variation-swatches__name {
						width: 0;
						height: 0;
						position: unset;
						clip: inherit;
						clip-path: inherit;
						margin: 0;
					}
				}
			}

			.wcboost-variation-swatches--color {
				--wcboost-swatches-item-width: 27px;
				--wcboost-swatches-item-height: 27px;
			}

			.wcboost-variation-swatches--image {
				--wcboost-swatches-item-width: 30px;
				--wcboost-swatches-item-height: 30px;
			}

			.wcboost-variation-swatches--color,
			.wcboost-variation-swatches--image {
				--wcboost-swatches-item-padding: 3px;
			}

			.wcboost-variation-swatches--round {
				.wcboost-variation-swatches__item {
					img {
						border-radius: 999em;
					}
				}
			}

			.wcboost-variation-swatches--rounded {
				.wcboost-variation-swatches__item,
				.wcboost-variation-swatches__item img,
				.wcboost-variation-swatches__name {
					border-radius: 4px;
				}
			}

			.wcboost-variation-swatches--square {
				&.wcboost-variation-swatches--label {
					.wcboost-variation-swatches__item {
						border-radius: var(--wcboost-variation-swatches-label-shape, 0px);
					}
				}
			}

			.wcboost-variation-swatches--round {
				&.wcboost-variation-swatches--label {
					.wcboost-variation-swatches__item {
						border-radius: var(--wcboost-variation-swatches-label-shape, 999em);
					}
				}
			}

			.wcboost-variation-swatches--rounded {
				&.wcboost-variation-swatches--label {
					.wcboost-variation-swatches__item {
						border-radius: var(--wcboost-variation-swatches-label-shape, 4px);
					}
				}
			}
		}

		&.product-type-variable {
			&.outofstock {
				table.variations {
					.wcboost-variation-swatches {
						.wcboost-variation-swatches__item {
							position: relative;
							overflow: hidden;
							opacity: 1;

							.wcboost-variation-swatches__name {
								&:before {
									content: "";
									height: 100%;
									width: 100%;
									background: linear-gradient( to top left, transparent calc(50% - 1px), #ddd, transparent calc(50% + 1px)) no-repeat;
									display: block;
									position: absolute;
									z-index: 3;
									top: 0;
									left: 0;
									bottom: 0;
									right: 0;
								}
							}
						}
					}

					.wcboost-variation-swatches--label,
					.wcboost-variation-swatches--button {
						.wcboost-variation-swatches__item {
							background-color: var(--gz-color-light-grey);

							&:hover,
							&.selected {
								color: inherit;
							}
						}
					}

					.wcboost-variation-swatches--image {
						.wcboost-variation-swatches__item {
							.wcboost-variation-swatches__name {
								width: 0;
								height: 0;
								position: unset;
								clip: inherit;
								clip-path: inherit;
								margin: 0;
							}
						}
					}
				}
			}
		}
	}
}

.glozin-products-bundle__products {
	margin-bottom: var(--col-gap);

	&.adding {
		pointer-events: none;
	}
}

.glozin-products-bundle__sidebar {
	border-radius: 15px 15px 0 0;
	backdrop-filter: blur(20px);
    background-color: #fffc;
	margin-inline-start: calc(var(--gz-container-spacing) * -1);
	margin-inline-end: calc(var(--gz-container-spacing) * -1);
	box-shadow: 5px 0 30px #00000014;
}

.glozin-bundle__toggle {
	width: 40px;
	height: 40px;

	span {
		cursor: pointer;

		&:before {
			content: "";
			width: 12px;
			height: 1px;
			background-color: currentColor;
			position: absolute;
			transition: all .3s ease-out;
		}

		&:after {
			content: "";
			width: 12px;
			height: 1px;
			background-color: currentColor;
			position: absolute;
			transform: rotate(90deg);
			transition: all .3s ease-out;
		}
	}

	&.active {
		span {
			&:before,
			&:after {
				transform: rotate(180deg);
			}
		}
	}
}

.glozin-products-bundle__progressbar {
	--gz-bundle-progressbar-width: 0;

	width: 100%;
	height: 5px;
    background-color: #ebebeb;

	&::after {
		content: '';
		display: block;
		position: absolute;
		inset-block-start: 0;
		inset-inline-start: 0;
		width: var(--gz-bundle-progressbar-width);
		height: 100%;
		background-color: var(--gz-color-dark);
		z-index: 1;
		transition: width .7s cubic-bezier(.7, 0, .3, 1) .1s;
	}
}

.glozin-products-bundle__sidebar-description {
	strong {
		color: var(--gz-color-dark);
	}
}

.glozin-products-bundle__sidebar-products {
	height: auto;
	overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    scrollbar-color: auto;
    scrollbar-width: thin;
    padding-inline-end: 10px;
    margin-inline-end: -10px;
    max-height: 370px;
}

.glozin-add-to-bundle {
	--gz-button-padding-top: 15.5px;
	--gz-button-padding-bottom: 15.5px;
	--gz-button-border-width: 2px;
	--gz-button-border-color: var(--gz-button-bg-color-hover);

	border: var(--gz-button-border-width) solid var(--gz-button-border-color);

	&:not(.disabled):not(:disabled) {
		--gz-button-color: var(--gz-color-dark);
		--gz-button-bg-color: var(--gz-color-light);
	}

	&.disabled,
	&:disabled {
		opacity: 0.6;
	}
}

.product-bundle__item {
	--col-width: 90px;
	--col-gap: 7px;

	.quantity {
		--gz-quantity-height: 35px;
		--gz-quantity-width: 35px;
		--gz-quantity-button-padding: 10px;
	}
}

.product-bundle__item-thumbnail {
	--gz-image-rounded: 100%
}

.product-bundle__loading {
	--col-width: 90px;
	--col-gap: 10px;

	.bg-bundle {
		background-color: #ebebeb;
	}

	.h-10 {
		height: 10px;
	}
}

.product-loading__thumbnail {
	height: var(--col-width);
}

.product-loading__text {
	max-width: 135px;

	&.text-2 {
		max-width: 55px;
	}

	&.text-3 {
		max-width: 95px;
	}
}

.glozin-add-to-cart-bundle {
	&.disabled,
	&:disabled {
		opacity: 0.6;
	}
}

.product-bundle__item-remove {
	cursor: pointer;
	position: relative;
	--gz-animation-state: running;

	&:before {
		display: none;
		content: "";
		width: 14px;
		height: 14px;
		mask-image: url(data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyBpZD0iaWNvbi1sb2FkIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0IiB2aWV3Qm94PSIwIDAgMTQgMTQiPgogICAgICA8cGF0aCBkPSJNNy4zNDM5NSAzLjI3NTA0QzguMjkyNzcgMy4yNzUwNCA5LjA2MTkzIDIuNTQxOSA5LjA2MTkzIDEuNjM3NTJDOS4wNjE5MyAwLjczMzE0MyA4LjI5Mjc3IDAgNy4zNDM5NSAwQzYuMzk1MTQgMCA1LjYyNTk4IDAuNzMzMTQzIDUuNjI1OTggMS42Mzc1MkM1LjYyNTk4IDIuNTQxOSA2LjM5NTE0IDMuMjc1MDQgNy4zNDM5NSAzLjI3NTA0WiIgPjwvcGF0aD48cGF0aCBkPSJNNy4zNDQxNSAxNC4wMDAyQzcuOTEzMzggMTQuMDAwMiA4LjM3NDgyIDEzLjU2MDQgOC4zNzQ4MiAxMy4wMTc4QzguMzc0ODIgMTIuNDc1MiA3LjkxMzM4IDEyLjAzNTQgNy4zNDQxNSAxMi4wMzU0QzYuNzc0OTIgMTIuMDM1NCA2LjMxMzQ4IDEyLjQ3NTIgNi4zMTM0OCAxMy4wMTc4QzYuMzEzNDggMTMuNTYwNCA2Ljc3NDkyIDE0LjAwMDIgNy4zNDQxNSAxNC4wMDAyWiIgPjwvcGF0aD48cGF0aCBkPSJNMy4xMjI0NiA0Ljc3NzcxQzMuOTc2NDUgNC43Nzc3MSA0LjY2ODc1IDQuMTE3ODMgNC42Njg3NSAzLjMwMzgzQzQuNjY4NzUgMi40ODk4MyAzLjk3NjQ1IDEuODI5OTYgMy4xMjI0NiAxLjgyOTk2QzIuMjY4NDcgMS44Mjk5NiAxLjU3NjE3IDIuNDg5ODMgMS41NzYxNyAzLjMwMzgzQzEuNTc2MTcgNC4xMTc4MyAyLjI2ODQ3IDQuNzc3NzEgMy4xMjI0NiA0Ljc3NzcxWiIgPjwvcGF0aD48cGF0aCBkPSJNMTEuNTY1IDEyLjE2OTJDMTIuMDM5NCAxMi4xNjkyIDEyLjQyNCAxMS44MDI3IDEyLjQyNCAxMS4zNTA1QzEyLjQyNCAxMC44OTgzIDEyLjAzOTQgMTAuNTMxNyAxMS41NjUgMTAuNTMxN0MxMS4wOTA2IDEwLjUzMTcgMTAuNzA2MSAxMC44OTgzIDEwLjcwNjEgMTEuMzUwNUMxMC43MDYxIDExLjgwMjcgMTEuMDkwNiAxMi4xNjkyIDExLjU2NSAxMi4xNjkyWiIgPjwvcGF0aD48cGF0aCBkPSJNMS4zNzQwNSA4LjYzNzc0QzIuMTMyOTEgOC42Mzc3NCAyLjc0ODA5IDguMDUxMzcgMi43NDgwOSA3LjMyODA0QzIuNzQ4MDkgNi42MDQ3MSAyLjEzMjkxIDYuMDE4MzQgMS4zNzQwNSA2LjAxODM0QzAuNjE1MTgyIDYuMDE4MzQgMCA2LjYwNDcxIDAgNy4zMjgwNEMwIDguMDUxMzcgMC42MTUxODIgOC42Mzc3NCAxLjM3NDA1IDguNjM3NzRaIiA+PC9wYXRoPjxwYXRoIGQ9Ik0xMy4zMTM3IDcuOTgxOTNDMTMuNjkzIDcuOTgxOTMgMTQuMDAwNCA3LjY4ODg2IDE0LjAwMDQgNy4zMjczNEMxNC4wMDA0IDYuOTY1ODMgMTMuNjkzIDYuNjcyNzYgMTMuMzEzNyA2LjY3Mjc2QzEyLjkzNDQgNi42NzI3NiAxMi42MjcgNi45NjU4MyAxMi42MjcgNy4zMjczNEMxMi42MjcgNy42ODg4NiAxMi45MzQ0IDcuOTgxOTMgMTMuMzEzNyA3Ljk4MTkzWiIgPjwvcGF0aD48cGF0aCBkPSJNMi4yNzEzOCAxMC41NDEzQzEuODAxNDcgMTAuOTg5MiAxLjgwMTQ3IDExLjcxMzkgMi4yNzEzOCAxMi4xNjE4QzIuNzQwNzMgMTIuNjA5NyAzLjUwMjE2IDEyLjYwOTcgMy45NzE1MSAxMi4xNjE4QzQuNDQxNDIgMTEuNzEzOSA0LjQ0MTQyIDEwLjk4OTIgMy45NzE1MSAxMC41NDEzQzMuNTAyMTYgMTAuMDkyOCAyLjc0MTI4IDEwLjA4ODYgMi4yNzEzOCAxMC41NDEzWiIgPjwvcGF0aD48cGF0aCBkPSJNMTEuNTY0OSAzLjc5NDY1QzExLjg0OTMgMy43OTQ2NSAxMi4wNzk5IDMuNTc0ODUgMTIuMDc5OSAzLjMwMzcxQzEyLjA3OTkgMy4wMzI1NyAxMS44NDkzIDIuODEyNzcgMTEuNTY0OSAyLjgxMjc3QzExLjI4MDQgMi44MTI3NyAxMS4wNDk4IDMuMDMyNTcgMTEuMDQ5OCAzLjMwMzcxQzExLjA0OTggMy41NzQ4NSAxMS4yODA0IDMuNzk0NjUgMTEuNTY0OSAzLjc5NDY1WiIgPjwvcGF0aD4KICA8L3N2Zz4=);
		mask-size: 100%;
		background-color: var(--gz-color-dark);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		animation: button-bundle-spin 0.8s infinite linear var(--gz-animation-state);
		transform: none;
	}

	&.loading {
		&:before {
			display: block;
		}

		.glozin-svg-icon {
			opacity: 0;
		}
	}
}

@media (min-width: 1025px) {
	.glozin-products-bundle__products {
		margin-bottom: 0;
	}

    .glozin-products-bundle__sidebar {
		border-radius: 15px;
		margin: 0;
		border: 2px solid var(--gz-color-dark);
        max-height: calc(100svh - 120px);
		box-shadow: none;

		overflow-x: hidden;
		overflow-y: auto;
		scroll-behavior: smooth;
		scrollbar-color: auto;
		scrollbar-width: thin;
    }
}

@media (min-width: 768px) {
	.glozin-products-bundle {
		--col-gap: 40px;
	}
}

@media (max-width: 767px) {
    .glozin-products-bundle__sidebar {
        bottom: var(--gz-navigation-bar-height, 0);
    }
}