
body.wpcb-template-woocommerce {

	&.wpcb-template-width-full {

		.wpcb-configurator-wrapper {
			margin: 0 calc(50% - 50vw) !important;
			max-width: 100vw !important;
			width: 100vw !important;
		}
	}

	.wpcb-configurator-wrapper {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: stretch;

		.wpcb-block-column-gallery {
			flex-grow: 1 !important;

			@media (min-width: 768px) {
				flex-basis: 50%;
			}

			@media (min-width: 1024px) {
				flex-basis: calc(100% - 512px);
			}

			@media (min-width: 1440px) {
				flex-basis: calc(100% - 612px);
			}

			.wp-block-woocommerce-product-image-gallery {
				width: 100%;
				max-width: 100%;
			}
		}

		.woocommerce-product-gallery {
			float: none !important;
			margin: 0 !important;
		}

		.wpcb-block-column-summary {
			flex-grow: 1 !important;

			@media (min-width: 768px) {
				flex-basis: 50%;
			}

			@media (min-width: 1024px) {
				flex-basis: 576px;
				flex-grow: 0;
			}

			@media (min-width: 1440px) {
				flex-basis: 676px;
				flex-grow: 0;
			}
		}
	}

	&.wpcb-template-width-full {

		.woocommerce-product-gallery {
			flex-grow: 1 !important;
			
			@media (min-width: 1024px) {
				flex: 0 0 calc(100% - 636px);
			}

			@media (min-width: 1440px) {
				flex: 0 0 calc(100% - 736px);
			}
		}

		.entry-summary {
			flex-grow: 1 !important;
			padding: 30px;

			@media (min-width: 1024px) {
				flex-basis: 576px;
				flex-grow: 0;
			}

			@media (min-width: 1440px) {
				flex-basis: 676px;
				flex-grow: 0;
			}
		}
	}

	&.wpcb-template-height-fixed {

		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			.wpcb-configurator-wrapper {
				min-height: 100vh;	
				overflow: hidden;
			}

			.wpcb-configurator-gallery__model {
				min-height: 100vh;

				model-viewer {
					min-height: inherit;
				}
			}
		}
	}

	&.wpcb-template-height-auto {
		
		.wpcb-configurator-wrapper {
			align-items: flex-start !important;
		}

		.wpcb-configurator-wrapper > .wpcb-block-configurator-gallery,
		.wpcb-configurator-wrapper > .woocommerce-product-gallery {
			position: sticky !important;
			top: 0;
		}
	}
}

.wpcb-template-floating {

	.wpcb-configurator-options {

		.wpcb-configurator-field,
		.wpcb-configurator-field-group {

			&:not(.wpcb-removed) {
				background-color: $template_background;
				border: 1px solid $template_border;
				padding: 12px;
				border-radius: 8px;
			}
		}

		.wpcb-configurator-field-group .wpcb-configurator-field {
			border: 0;
			padding: 0;
			border-radius: 0;
		}
	}

	.wpcb-configurator-form-totals,
	.wpcb-configurator-inline-quote-form {
		background-color: $template_background;
		border: 1px solid $template_border;
		padding: 12px;
		border-radius: 8px;
	}

	&.wpcb-border-square {
		.wpcb-configurator-options {
			.wpcb-configurator-field,
			.wpcb-configurator-field-group {
				border-radius: 0;
			}
		}

		.wpcb-configurator-form-totals {
			border-radius: 0;
		}
	}
}

.wpcb-template-popup {
	position: absolute;
	display: none;

	&.active {
		display: block;
		z-index: 499;
		
		&:before {
			content: '';
			display: block;
			position: fixed;
			z-index: 499;
			right: 0;
			left: 0;
			bottom: 0;
			top: 0;
			background: $template_accent;
			opacity: 0.5;
			transition: all .3s ease-in-out;
		}

		.wpcb-configurator-popup-wrapper {
			width: inherit;
			z-index: 499;
		}
	}

	.wpcb-configurator-popup-wrapper {
		box-sizing: border-box;
		position: fixed;
		background-color: $template_accent;
		border: 1px solid $template_border;
		border-radius: 12px;
		height: auto;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: inherit;
		width: inherit;
		max-width: 100%;
		max-height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			flex-wrap: wrap;
			height: 100%;
			width: 100%;
			max-width: calc(100% - 60px);
			max-height: calc(100% - 60px);
		}

		.wpcb-configurator-product-summary {
			@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
				flex: 0 0 100%;
			}
		}
	}

	&.wpcb-template-shortcode-basic,
	&.wpcb-template-shortcode-basic-summary {

		.wpcb-configurator-popup-wrapper {
			background-color: $template_background;
			padding: 20px;
			height: auto;
			overflow: auto;
		}
	}
	
	&.alignfull {
		right: 0;
		left: 0;
		overflow: hidden;

		.wpcb-configurator-popup-wrapper {
			width: 100%;
		}	
	}

	.wpcb-configurator-popup-close {
		min-width: fit-content;
		appearance: none;
		border: 1px solid $template_border;
		background-color: $template_accent;
		border-radius: 6px;
		padding: 5px;
		cursor: pointer;

		img {
			display: block;
			width: 24px;
			height: 24px;
		}
	}

	.wpcb-configurator-product-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.wpcb-configurator-product-price {
		margin: 0;
	}

	&.wpcb-template-shortcode-floating .wpcb-configurator-form {
		overflow: hidden;
	}

	.wpcb-configurator-options {
		margin: 0;
		overflow: auto;

		@media (max-width: 991px) {
			flex: 1;
		}
		
		@media (max-width: 991px) and (orientation: landscape), (min-width: 992px) {
			height: 100%;
		}
	}

	.wpcb-configurator-options-content {
		padding: 20px;
	}
	
	.wpcb-configurator-product-summary {
		margin-bottom: 20px;
	}

	// .wpcb-configurator-options-content {
	// 	display: flex;
	// 	flex-direction: column;
	// 	max-height: 100%;
	// 	overflow: hidden;
	// }

	// .wpcb-configurator-options-header {
	// 	justify-self: flex-start;
	// }

	// .wpcb-configurator-form {
	// 	overflow-y: scroll;
	// }

	// .wpcb-configurator-options-footer {
  	// 	justify-self: flex-end;
	// }
	
	&.wpcb-border-square {
		.wpcb-configurator-popup-wrapper,
		.wpcb-configurator-popup-close {
			border-radius: 0;
		}
	}
}

// body.wpcb-panel-active .wpcb-configurator-popup-wrapper {
// 	@media (max-width: 991px) {
// 		overflow: visible;
// 	}
// }
