:root {
	--light-grey: #F4F5F5;
	--mid-grey: #5A5A5B;
	--baby-pink: #FABDCB;
	--navy: #12265A;
	--green: #D0F277;
	--white: #FFFFFF;
	--border-radius-s: 10px;
	--border-radius-l: 20px;
	--blur: blur(4px);
}

.product_main_section {
	& .product-media-container {
		& .product__modal-opener {
			padding: 50px 30px;
			background: rgba(255, 255, 255, 0.15);
			border-radius: var(--border-radius-s);
		}
	}
	
	& .product__info-wrapper {
		text-align: left;
	}
	
	& .product_top {
		display: grid;
		grid-template-columns: 1fr 500px;
		justify-content: space-between;
		gap: 30px;
	}
	
	& .product__title h1 {
		color: var(--navy);
		font-family: Beachday;
		letter-spacing: 0.5px;
		font-weight: 400;
		font-size: clamp(24px, 2vw, 32px);
	}
	
	& .product__info-container {
		background: var(--white);
		border-radius: var(--border-radius-s);
		padding: 20px 40px;
		max-width: 500px;
	}
	
	& .quantity__label,
	& .product__description,
	& .product__tax,
	& .product_pack_size {
		color: var(--navy);
	}
	
	& .product_pack_size {
		display: block;
		font-size: 18px;
		font-weight: 700;
		color: var(--navy);
		margin-bottom: 10px;
	}
	
	& .product__description {
		margin: 0 0 20px;
	}
	
	& .product_inventory {
		font-size: 15px;
		font-weight: 700;
		line-height: 20px;
		letter-spacing: 0.5px;
		margin-bottom: 20px;
		
		> span {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			padding: 15px;
			border-radius: var(--border-radius-s);
			
			&:before {
				content: '';
				display: inline-block;
				height: 10px;
				aspect-ratio: 1 / 1;
				background: center / contain no-repeat;
			}
		}
		
		& .product_in_stock {
			background: #5AC230;
			color: var(--white);
			
			&:before {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23FFFFFF' fill-rule='evenodd' d='M8.5.8c.3-.3.8-.4 1.2-.1.3.3.4.8.1 1.1l-6 7.4c-.2.4-.8.4-1.2 0L.2 7a.8.8 0 0 1 0-1.2c.4-.3.9-.3 1.2 0l1.7 1.7L8.5.8Z' clip-rule='evenodd'/%3E%3C/svg%3E");
			}
		}
		
		& .product_not_in_stock {
			background: var(--Red);
			color: var(--white);
			
			&:before {
				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%23FFFFFF' d='M0 9c0-.3.1-.6.4-.8l3-3.3L.6 2C.4 1.7.2 1.4.2 1 .2.5.7 0 1.4 0c.5 0 .8.2 1.2.5L5 3.4 7.5.6C7.8.2 8 0 8.7 0s1.1.4 1.1 1c0 .3 0 .6-.3.8l-3 3 3.1 3.3c.2.2.4.5.4.8 0 .6-.5 1.1-1.2 1.1-.6 0-.9-.2-1.2-.5L5 6.5l-2.7 3c-.3.3-.6.5-1.2.5C.6 10 0 9.6 0 9Z'/%3E%3C/svg%3E");
			}
		}
	}
	
	& .product_bundle_contents {
		padding: 10px 20px 10px 10px;
		background: var(--light-grey);
		border-radius: var(--border-radius-s);
		margin: 0 0 20px;
		
		ul {
			li {
				color: var(--mid-grey);
				
				a {
					color: var(--mid-grey);
					font-weight: 400;
					font-size: 16px;
					line-height: 20px;
					
					span {
						text-transform: capitalize;
					}
				}
				
				&:not(:last-of-type) {
					margin-bottom: 5px;
				}
			}
		}
	}
	
	& .product_form_container {
		display: flex;
		flex-flow: row nowrap;
		align-items: flex-end;
		justify-content: space-between;
		gap: 40px;
		border-top: 1px solid #D9D9D9;
		padding-top: 20px;
		
		& .variation_form {
			display: none;
		}
	}
	
	& .product-form__quantity {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		& .form__label {
			margin-bottom: 5px;
		}
		
		& .quantity {
			height: 55px;
			font-size: 18px;
			
			&:after {
				border: 1px solid #D9D9D9;
				box-shadow: none;
			}
		}
		
		& .quantity__rules {
			display: none;
		}
	}
	
	& .product_buy_container {
		align-items: flex-end;
		gap: 10px;
		width: 100%;
		
		& .price__container {
			color: var(--navy);
			font-size: 22px;
			
			& .price__regular {
				font-weight: 700;
			}
		}
		
		& .price_wrapper {
			display: flex;
			gap: 5px;
			justify-content: flex-end;
			
			& .price__regular {
				text-align: right;
				justify-content: flex-end;
			}
		}
		
		& .product-form__submit {
			margin: 0;
			min-width: 200px;
		}
	}
	
	& .trade_info_container {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-bottom: 20px;
		
		&.trade_signup {
			background: #E8F8FF;
			padding: 20px;
			border-radius: var(--border-radius-s);
			color: var(--navy);
			font-size: 16px;
			display: block;
			width: 100%;
			
			& p {
				margin: 0 0 5px;
			}
			
			& ul {
				margin: 0;
				padding: 0;
				
				& li {
					list-style: none;
					display: flex;
					align-items: flex-start;
					gap: 10px;
					
					& p {
						flex: 1;
					}
					
					&:before {
						content: '';
						display: block;
						width: 10px;
						top: 7px;
						position: relative;
						aspect-ratio: 1 / 1;
						background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 10 10'%3E%3Cpath fill='%235ac230' fill-rule='evenodd' d='M8.5.8Q9 .3 9.7.7q.5.5.1 1.1l-6 7.4q-.5.6-1.2 0L.2 7a1 1 0 0 1 0-1.2q.7-.4 1.2 0l1.7 1.7z' clip-rule='evenodd'/%3E%3C/svg%3E");
					}
					
					&:last-of-type {
						& p {
							margin: 0;
						}
					}
				}
			}
		}
		
		& > div {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 20px;
			border-radius: var(--border-radius-s);
			background: var(--light-grey);
			color: var(--mid-grey)
		}
		
		& .trade_box_label {
			font-weight: 700;
		}
		
	}
}

.product_extra_info {
	& .product_header {
		text-transform: uppercase;
	}
	
	& .product_faqs {
		display: flex;
		flex-direction: column;
		position: relative;
		
		.faq_item {
			background: var(--light-grey);
			border: none;
			position: relative;
			padding: 0 20px;
			z-index: 2;
			border-radius: var(--border-radius-s);
			
			.title {
				color: var(--navy);
				cursor: pointer;
				margin: 0;
				background: right center / 15px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 19 11'%3E%3Cpath fill='%23e1251b' fill-rule='evenodd' d='m18.6 2.5-8.2 7.6q-.9.8-1.8 0L.4 2.5Q-.3 1.7.4 1q.9-.7 1.8 0l7.3 6.6L16.8.9q.9-.7 1.8 0 .7.8 0 1.6' clip-rule='evenodd'/%3E%3C/svg%3E");
				padding: 20px 60px 20px 0;
				box-sizing: border-box;
				font-weight: 700;
				text-transform: uppercase;
			}
			
			.tab_inner {
				box-sizing: border-box;
				display: grid;
				grid-template-rows: 0fr;
				transition: grid-template-rows .4s, padding .4s;
				color: var(--navy);
				
				> .rte {
					overflow: hidden;
				}
			}
			
			&.active {
				.tab_inner {
					grid-template-rows: 1fr;
					padding: 0 0 20px;
				}
				
				.title {
					background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 19 10'%3E%3Cpath fill='%23e1251b' fill-rule='evenodd' d='M.4 8 8.6.4q.9-.7 1.8 0L18.6 8c.5.4.5 1.2 0 1.6q-.9.8-1.8 0L9.5 3 2.2 9.6q-.9.8-1.8 0C-.1 9.2-.1 8.4.4 8' clip-rule='evenodd'/%3E%3C/svg%3E");
				}
			}
		}
	}
	
	& .nutritional_values {
		& ul {
			padding: 0;
			margin: 0;
			list-style: none;
		}
		& li {
			display: flex;
			justify-content: space-between;
			border-bottom: none;
			margin-bottom: 10px;
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
	
	& .product_usps {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 20px;
		color: var(--navy);
		
		& .product_usp {
			max-width: 400px;
		}
		
		& .product_usps_header {
			font-weight: 700;
			text-transform: uppercase;
		}
	}
}

@media (width < 1024px) {
	.product_main_section {
		& .product__media-wrapper slider-component:not(.thumbnail-slider--no-slide) {
			margin: 0;
		}
		& .slider.slider--mobile .slider__slide {
			width: 100%;
		}
		& .product_top {
			grid-template-columns: 1fr;
			gap: 0;
		}
		& .product__info-container {
			padding: 20px;
		}
		& .product_form_container {
			gap: 20px;
		}
		& .product_buy_container {
			& .product-form__submit {
				min-width: 0;
			}
		}
	}
	.product_extra_info {
		& .product_usps {
			flex-wrap: wrap;
		}
	}
}

.bundle_product {
}