product-bundle {

	--card-border-radius: 1.25rem;

	--color-basket-border: black;
	--color-card-background: white;
	--color-skeleton: white;
	--color-progress-inactive: white;
	--color-progress-active: black;
	--color-separator: rgb(var(--color-light-gray));


	display: flex;
	align-items: flex-start;
	gap: 2.5rem;

	.flex-row {
		display: flex;
		flex-direction: row;
	}
	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.product-bundle-left {
		flex: 1 1 0;

		.product-list {
			display: grid;
			grid-template-columns: repeat(var(--items-columns), 1fr);
			column-gap: 1.5rem;
			row-gap: 1.5rem;

			.product-list-item {
				background-color: var(--color-card-background);
				border-radius: var(--card-border-radius);

				.card-wrapper { background-color: transparent !important; }
			}

			@media screen and (width <= 950px) {
				grid-template-columns: repeat(2, 1fr);
			}

			@media screen and (width <= 700px) {
				grid-template-columns: repeat(1, 1fr);
			}

			@media screen and (width <= 615px) {
				grid-template-columns: repeat(2, 1fr);
			}

		}

		product-bundle-variant-radios {
			flex-direction: column;
			margin-inline: 5%;
			padding-inline: 5%;
			padding-block: 7%;
			border: 1px solid var(--color-separator);
			border-radius: var(--card-border-radius);
		}

	}

	.product-bundle-right {
		
		flex: 0 0 33%;
		min-width: 300px;
		
		position: sticky;
		top: calc( var(--header-height) + 1rem );
		max-height: calc(100vh - var(--header-height) - 2rem);

		padding: 1.875rem;
		border: 2px solid var(--color-basket-border);
		border-radius: var(--card-border-radius);

		.product-bundle-header, .product-bundle-footer, .product-bundle-contents {
			display: flex;
			flex-direction: column;
			gap: .5rem;
		}

		.product-bundle-contents {
			gap: 1.5rem;

			overflow-x: hidden;
			overflow-y: auto;
			scroll-behavior: smooth;

			@media screen and (width <= 615px) {
				gap: 0.5rem;
				/* &:not(.expanded) {
					height: 0;
				} */
			}
		}

		.product-bundle-footer .total {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			font-size: 1.75rem;

			border-top: 1px solid var(--color-separator);
			padding-top: 0.5rem;
		}

		.progress {
			width: 100%;
			margin: 0 auto;
			height: .5rem;
			margin-top: 0.75rem;
			background-color: var(--color-progress-inactive);
			border-radius: 100px;

			.status {
				width: var(--progress, 0);
				height: 100%;
				background-color: var(--color-progress-active);
				transition: width 400ms ease;
				border-radius: 100px;
			}
		}

		@media screen and (width <= 615px) {
			width: 100%;
			max-height: 350px;
			background: white;
			z-index: 10;
			bottom: 0;
		}

	}

	@media screen and (width <= 615px) {
		flex-direction: column;
	}

	product-bundle-basket {
		display: flex;
		flex-direction: column;
		overflow-x: hidden;
		overflow-y: auto;
		gap: 2.5rem;

		@media screen and (width <=615px) {
			gap: 1rem;
		}
	}

	product-bundle-basket-item {
		flex: 1 0 96px; /** Vertical **/

		display: grid;
		grid-template-columns: 96px 1fr 60px; /** Horizontal **/
		column-gap: 0.75rem;

		figure {
			display: flex;
			margin: 0;
			background-color: transparent;

			img {
				aspect-ratio: 1 / 1;
				object-fit: contain;
				width: 100%;
			}
		}

		.details {
			display: flex;
			flex-direction: column;
			gap: 0.625rem;
			justify-content: center;

			.product-variant {
				font-size: 90%;
				opacity: .9;
			}

			.product-price {
				margin-top: 0.25rem;
			}
		}

		.skeleton {

			background-color: var(--color-skeleton);
			
			figure {
				background-color: var(--color-skeleton);
			}


			.details & {
				height: 1rem;
				width: 100%;
				border-radius: 9999px;

				background-color: var(--color-skeleton);

				&.skeleton--sm { width: 40%; }
			}
		}

		.actions {
			display: flex;
			align-items: center;
			justify-content: center;

			font-size: 1.1rem;
			
			> * {
				text-decoration: underline;
				cursor: pointer;
				opacity: .85;
				transition: opacity 200ms linear;
				&:hover {
					opacity: 1;
				}
			}

		}

		&[data-empty="true"] .hide-if-empty { display: none; }
		&[data-empty="false"] .hide-if-full { display: none; }


	}

	product-bundle-add-to-cart-button {
		display: flex;

		button.product-add-to-cart {
			width: 75%;
			margin-inline: auto;
			margin-block: 0.5rem;
			flex-grow: 0;
		}
	}

	product-bundle-add-to-bundle-button {
		display: flex;
		justify-content: center;
		margin-block: 0.25rem;

		button.product-add-to-bundle {
			width: auto;
			background-color: rgba(var(--color-button));
			color: rgba(var(--color-white));
			border-radius: 8px;
			padding-block: 1rem;
			padding-inline: 1.5rem;
			margin-block: 0.5rem;
		}
	}

}