.byob-bundle-builder {

	.fluid {
		padding: 0 20px;
		@media only screen and (max-width: 768px) {
			padding:0;
		}
	}

	.flex {

		display: flex;
		justify-content: space-between;
		position: relative;
		align-items: flex-start;

		@media only screen and (max-width: 1024px) {
			flex-wrap: wrap;
		}

		.collection-group.ppr-2 .group .group-collection .block {
			width: 50%;
		}
		.collection-group.ppr-3 .group .group-collection .block {
			width: 33.3%;
			@media only screen and (max-width: 1024px) {
				width: 33.3%;
				@media only screen and (max-width: 768px) {
					width: 50%;
				}
			}
		}
		.collection-group.ppr-4 .group .group-collection .block {
			width: 25%;
			@media only screen and (max-width: 1024px) {
				width: 33.3%;
				@media only screen and (max-width: 768px) {
					width: 50%;
				}
			}
		}

		.collection-group {

			width: 60%;

			@media only screen and (max-width: 1024px) {
				width: 100%;
			}

			.group {

				.group-title {}
				.group-desc {}

				.group-collection {

					display: flex;
					flex-wrap: wrap;
					margin: 0 -10px;

					&.disabled {

						.block {
							opacity: .4;
							pointer-events: none;
						}

					}

					.block {

						.product-block {

							padding:0 10px 20px;
							margin:0;
							height: 100%;
							position: relative;

							@media only screen and (max-width: 768px) {
								padding: 0 5px 10px;
							}

							.block-inner {
								padding-bottom: 56px;
							}

							.product-block-options__item.active {
						    	box-shadow: 0 0 0 2px var(--bg, #f7f2ef), 0 0 0 3px rgba(var(--text), .3);
						    }

						    .product-block-options__item--unavailable {
						    	pointer-events: none;
						    }

							.button-container {

					    		width: calc(100% - 28px);
					    		margin-top: 16px;
					    		position: absolute;
					    		bottom: 14px;
					    		left: 14px;

					    		.button {
					    			width: 100%;
					    			display: block;
					    			text-align: center;
					    			color: #000;
					    			text-transform: uppercase;
					    			/* font-size: 13px; */
                                    font-size: 1rem;
					    			font-weight: 700;
					    			@media only screen and (max-width: 768px) {
					    				padding: 13px 0;
                                        font-size: 0.813rem;
					    			}
                                  
                                    &:hover {
					    				color: #fff;
					    			}
					    		}
					    		.button.added {
					    			
					    		}

					    	}

					    	.image-cont .quick-action-button {

					    		@media only screen and (max-width: 768px) {

					    			right: 10px;
					    			pointer-events: auto;

					    		}

					    	}

					    	.image-page-button {
					    		opacity: 1;
					    		width: 38px;
					    		height: 38px;
					    		display: block;

					    		@media only screen and (max-width: 768px) {
									right: 0;
									left: auto;
									top: auto;
        							bottom: 0;
        							width: 28px;
        							height: 28px;
        							pointer-events: auto;
					    		}

					    		&::before {
					    			display: none;
					    		}
					    		svg {
					    			display: none;
					    		}
					    		&::after {
					    			background-image: url(icon-slick-arrow.svg);
								    background-repeat: no-repeat;
								    background-position: center center;
								    background-size: 22px;
								    @media only screen and (max-width: 768px) {
								    	background-size: 16px;
								    	opacity: .3;
								    }
					    		}
					    		&.image-page-button--previous {
					    			&::after {
					    				transform: rotate(180deg);
					    			}
					    			@media only screen and (max-width: 768px) {
										right: 32px;
										left: auto;
						    		}
					    		}
					    	}

						}

					}


				}

			}

		}

		.bundle-group {

			width: calc(40% - 30px);
			position: sticky;
			top: 40px;

			@media only screen and (max-width: 1024px) {
				position: static;
				width: 100%;
				order: -1;
				margin-bottom: 40px;
			}

			.bundle-items {

				display: flex;
				flex-wrap: wrap;
				margin: 0 -5px;

				.bundle-item {

					width: 33.3%;
					padding: 0 10px 15px;

					@media only screen and (max-width: 768px) {
						padding: 0 5px 10px;
					}

					&.active {
						order: -1;
					}

					.item {

						width: 100%;
						position: relative;

						.placeholder {

							border: 1px solid #757575;
							border-style: dashed;
							width: 100%;
							position: relative;
							padding-top: 100%;
							border-radius: 10px;
							overflow: hidden;

							img {

								position: absolute;
								top:0;
								left:0;
								width: 100%;
								height: 100%;
								object-fit: cover;

							}

						}

						&.filled {

							[data-remove-bundle-item] {
								position: absolute;
								top: -10px;
								right: -10px;
								width: 35px;
								height: 35px;
								background: #058BEB;
								border-radius: 50%;
								z-index: 3;
								display: flex;
								justify-content: center;
								align-items: center;
								cursor: pointer;

								svg {
									path {
										fill: #fff;
									}
								}

							}

							.placeholder {
								border-style: solid;
							}

						}

						p {

							margin:6px 0 0 0;
							font-size: 14px;
							line-height: 130%;
							font-weight: 600; 
							color: #434343;

						}

					    .swatch-method-standard .product-block-options__item.active {

					    	box-shadow: 0 0 0 2px var(--bg, #f7f2ef), 0 0 0 3px rgba(var(--text), .3);

					    }

					}

				}

			}

			.bundle-count-message {

				display: none;

				span {

					/* font-size: 25px; */
                    font-size: 1.563rem;
					font-family: Poppins,sans-serif;
					font-weight: 700;
					letter-spacing: 0;
					margin-right: 5px;
                    @media only screen and (max-width: 768px) {
                      font-size: 1.125rem;
                    }
				}

				span.bundleprice {
					color: #058BEB;
					margin-right: 3px;
				}

				span.bundleTotal {
					opacity: .5;
					text-decoration: line-through;
				}

			}

			.btn-container {

				margin-top: 20px;

				.button {
					text-transform: uppercase;
	    			/* font-size: 13px; */
                    font-size: 1rem;
	    			font-weight: 700;
                  @media only screen and (max-width: 768px) {
                    font-size: 0.813rem;
                  }
	    		}

				.button.disabled {
					background: #999;
					border-color: #999;
					pointer-events: none;
				}

			}

		}

	}

}