.quantity_control_1 {
	label {
		width: 40px;
		height: 30px;
		line-height: 30px;
		float: left;
	}
	.control_group {
		width: 70%;
		overflow: auto;
		float: left;
		button {
			height: 30px;
			aspect-ratio: 1/1;
			box-sizing: border-box;
			float: left;
			font-size: 14px;
			font-weight: bold;
		}
		input {
			margin: 0 4px;
			padding: 0;
			height: 30px;
			line-height: 30px;
			text-align: center;
			aspect-ratio: 1.5/1;
			box-sizing: border-box;
			display: block;
			float: left;
			font-size: 14px;
			font-weight: bold;
		}
	}
}

.view_item {
	width: 100%;
	max-width: 2000px;
	padding: 0;
	box-sizing: border-box;
	overflow: auto;
	@media (min-width: 1301px) {
		margin: 0 auto;
		padding: 40px 10% 60px 10%;

		&.mobile {
			display: none;
		}
	}
	@media (max-width: 1300px) {
		&.desktop {
			display: none;
		}
	}
	.wrap {
		width: 100%;
		margin: 0 auto;
		overflow: auto;
		display: flex;
		flex-wrap: wrap;
		.video_marketing {
			width: 100%;
			height: auto;
			overflow: auto;
			float: left;
			position: relative;
			padding: 0px;
			box-sizing: border-box;
			background-color: #568e02;
			margin: 0 auto 10px auto;
			@media (max-width: 1300px) {
				margin: 0 auto 0 auto;
			}
			video {
				width: 50%;
				max-width: 150px;
				margin: 0 auto;
				display: block;
			}
		}
		.product_images {
			width: 40%;
			@media (max-width: 1300px) {
				margin: 0 auto;
				width: 50%;
			}
			@media (max-width: 800px) {
				margin: 0 auto;
				width: 100%;
				max-width: 400px;
			}
			> .innr {
				display: grid;
				grid-template-columns: 1fr 9fr;
				position: sticky;
				align-self: start;
				top: 0;
			}
			.item_img {
				@media (max-width: 1300px) {
					width: 100%;
					height: auto;
					overflow: auto;
					position: relative;
					padding: 2.5px;
					box-sizing: border-box;

					.sm_img {
						float: left;
						width: 20%;
						aspect-ratio: 1/1;
						height: 100%;
						padding: 2.5px;
						box-sizing: border-box;
					}
				}
				@media (min-width: 1301px) {
					display: flex;
					flex-direction: column;
					gap: 5px;
					overflow-y: auto;

					.sm_img {
						float: left;
						width: 100%;
						aspect-ratio: 1/1;
						box-sizing: border-box;
					}
				}
				.sm_img {
					> .innr {
						height: 100%;
						width: 100%;
						box-sizing: border-box;
						background-repeat: no-repeat;
						background-position: center;
						background-size: cover;
						cursor: pointer;
						position: relative;
						overflow: hidden;
						border: #cbc1ff 1px solid;
						background-color: white;
						img {
							position: absolute;
							inset: 0;
							margin: auto;
							width: 100%;
						}
						&:hover {
							border: #0045ff 1px solid;
							box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
						}
					}
					&.active > .innr {
						border: #000000 1px solid;
						background-color: white;
					}
				}
			}
			.lg_image_box {
				@media (min-width: 1301px) {
					width: 100%;
					overflow: auto;
				}
			}
		}
		.additional_details {
			width: 30%;
			box-sizing: border-box;
			overflow-x: hidden;
			margin: 0 auto;
			overflow: auto;
			@media (max-width: 1300px) {
				width: 50%;
			}
			@media (max-width: 800px) {
				width: 600%;
				max-width: 400px;
			}
			.details_title {
				padding: 0 0 5px 0;
				margin: 0;
			}
			.details {
				font-size: 12px;
				width: 100%;
				margin: 0;
				overflow: hidden;
				transition: max-height 0.3s ease-in-out;
				border-top: 1px solid rgba(255, 255, 255, 0.15);
			}
			.item_top_info {
				width: 100%;
				overflow: auto;
				box-sizing: border-box;
				padding: 0;
				> .innr {
					width: 100%;
					overflow: auto;
				}
				.brand {
					color: #050068;
					font-size: 25px;
					line-height: 25px;
					font-weight: bold;
				}
				.name {
					color: #050068;
					font-size: 16px;
					margin: 5px 0;
				}
			}
			.details_title {
				padding: 0 0 5px 0;
				margin: 0;
			}
			.details {
				font-size: 12px;
				width: 100%;
				margin: 0;
				overflow: hidden;
				transition: max-height 0.3s ease-in-out;
				border-top: 1px solid rgba(255, 255, 255, 0.15);
			}
			.item_top_info {
				width: 100%;
				overflow: auto;
				box-sizing: border-box;
				padding: 0;
				> .innr {
					width: 100%;
					overflow: auto;
				}
				.brand {
					color: #050068;
					font-size: 25px;
					line-height: 25px;
					font-weight: bold;
				}
				.name {
					color: #050068;
					font-size: 16px;
					margin: 5px 0;
				}
			}
		}
		.item_info {
			width: 30%;
			@media (max-width: 1300px) {
				float: left;
				width: 100%;
				padding: 10px 0 0 0;
				box-sizing: border-box;
			}
			> .innr {
				position: relative;
				color: white;
				box-sizing: border-box;
				background-color: #050068;
				@media (max-width: 1300px) {
					width: 100%;
					height: 100%;
					padding: 10px;
				}
				@media (min-width: 1301px) {
					width: 100%;
					padding: 10px;
					position: sticky;
					top: 0;
				}
				.brand {
					margin: 0;
					font-size: 25px;
				}
				.name {
					margin: 2px 0;
					font-size: 18px;
				}
				.addcart {
					width: 100%;
					inset: auto 0 20px 0;
					margin: auto;
					overflow: auto;
					text-align: center;
					position: absolute;
					padding: 0 10px;
					box-sizing: border-box;
					display: none;
					.no_stock,
					.add_item_to_cart {
						background-color: #ffd200;
						padding: 9px 0;
						font-size: 15px;
						font-weight: bold;
						color: #050068;
						outline: none;
						width: 100%;
						cursor: pointer;
						border-width: 0;
					}
				}
				.vrnt_qty {
					overflow: auto;
					width: 100%;
					position: relative;
					padding: 10px 0;
					border-top: 1px solid rgba(255, 255, 255, 0.15);
					border-bottom: 1px solid rgba(255, 255, 255, 0.15);
					select {
						width: 50px;
						height: 30px;
					}
				}
				.variant_switch_title {
					width: 100%;
					margin: 0 0 10px 0;
					padding: 10px 0 5px 0;
					font-size: 14px;
					font-weight: normal;
					border-bottom: 1px solid rgba(255, 255, 255, 0.15);
				}
				.vrnt_switch {
					width: 100%;
					overflow: auto;
					.item {
						&:hover {
							background-color: #08009f;
						}
						&:active {
							background-color: #030039;
						}
					}
					> .frame {
						position: relative;
						overflow: hidden;
						width: 100%;
						-webkit-overflow-scrolling: touch;
						> .innr {
							display: flex;
							flex-wrap: nowrap;
							transform: translateZ(0);
							white-space: nowrap;
						}
					}
					.item {
						flex: 0 0 auto;
						width: 100px;
						margin-right: 10px;
						font-size: 12px;
						> .innr {
							height: 100%;
							width: 100%;
							white-space: normal;
							box-sizing: border-box;
							border-radius: 5px;
							&.active {
								background-color: #0000b5;
								border: solid #3b3bc9 1px;
							}
						}
						.image {
							width: 100%;
							overflow: hidden;
							img {
								width: 100%;
								height: 100%;
								aspect-ratio: 1/1;
								object-fit: cover;
							}
						}
						.info {
							overflow: hidden;
							width: 100%;
							padding: 5px;
							box-sizing: border-box;
							.vrnt_name {
								width: 100%;
								font-size: 0.9em;
							}
							.price {
								width: 100%;
								font-size: 1em;
								font-weight: bold;
							}
						}
					}
					.scrollbar {
						margin-top: 10px;
						height: 5px;
						background: #eee;
						.handle {
							height: 100%;
							background: #2c23ff;
							cursor: pointer;
						}
					}
				}
			}
		}
	}
	.item_top_info {
		@media (max-width: 1300px) {
			width: 100%;
			overflow: auto;
			background-color: #050068;
			padding: 10px;
			box-sizing: border-box;

			> .innr {
				width: 100%;
				overflow: auto;
			}
			.brand {
				color: #ffd200;
				font-size: 20px;
				font-weight: bold;
			}
			.name {
				color: white;
				font-size: 16px;
			}
		}
	}
	.item_images {
		@media (max-width: 1300px) {
			img {
				width: 100%;
			}
		}
	}
	.bundle_deal {
		width: 100%;
		overflow: auto;
		padding: 0;
		box-sizing: border-box;
		.bundle_info {
			box-sizing: border-box;
			@media (max-width: 1300px) {
				padding: 5px;
			}
			@media (min-width: 1301px) {
				padding: 0;
			}
			> .innr {
				width: 100%;
				overflow: auto;
				border: 1px solid #e3e3e3;
				padding: 5px;
				box-sizing: border-box;
				background-color: #f2f2f2;
			}
			.details {
				width: 100%;
				overflow: auto;
				color: black;
				padding: 0;
				box-sizing: border-box;
				.name {
					font-size: 15px;
					font-weight: bold;
				}
				.savings {
					font-size: 13px;
				}
			}
			.bundle_savings {
				width: 100%;
				overflow: auto;
				padding: 10px 5px;
				box-sizing: border-box;
			}
			.bundle_items {
				overflow: auto;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				padding: 2px 0;
				.item_box {
					float: left;
					padding: 2px 0;
					box-sizing: border-box;
					overflow: auto;
					@media (max-width: 800px) {
						width: 100%;
					}
					@media (min-width: 801px) and (max-width: 1300px) {
						width: 33.333%;
					}
					@media (min-width: 1301px) {
						width: 100%;
					}
					> .innr {
						height: 100%;
						overflow: auto;
						position: relative;
						box-sizing: border-box;
						display: flex;
						background-color: white;
						border: 1px solid #d9d9d9;
					}
					img {
						aspect-ratio: 1/1;
						object-fit: cover;
						float: left;
						height: auto;
						@media (max-width: 1300px) {
							width: 18%;
						}
						@media (min-width: 1301px) {
							width: 10%;
						}
					}
					.text {
						float: left;
						flex-grow: 1;
						padding: 5px;
						box-sizing: border-box;
						.item_name {
							font-size: 12px;
						}
						.item_price {
							font-size: 14px;
							font-weight: bold;
							width: 100%;
						}
					}
				}
			}
			.add_bundle_to_cart {
				width: 100%;
				text-align: center;
				padding: 10px;
				box-sizing: border-box;
				border-radius: 0;
				font-weight: bold;
				background-color: blue;
				color: white;
				font-size: 12px;
			}
		}
	}
	.vrnt_switch {
		max-width: 100%;
		overflow-x: hidden;
		.frame {
			max-width: 100%;
			overflow-x: auto;
			overflow-y: hidden;
		}
	}
	.variants_box {
		@media (min-width: 1301px) {
			background-color: #050068;
			padding: 0;
			box-sizing: border-box;

			.variant_switch_title {
				width: 100%;
				margin: 0 0 10px 0;
				padding: 5px 0;
				font-size: 14px;
				font-weight: normal;
				border-bottom: 1px solid rgba(255, 255, 255, 0.15);
				color: white;
			}
			.vrnt_switch {
				width: 100%;
				overflow: auto;
				> .frame {
					position: relative;
					overflow: hidden;
					width: 100%;
					-webkit-overflow-scrolling: touch;
					> .innr {
						display: flex;
						flex-wrap: nowrap;
						transform: translateZ(0);
						white-space: nowrap;
					}
				}
				.item {
					flex: 0 0 auto;
					width: 100px;
					margin-right: 10px;
					font-size: 12px;
					> .innr {
						height: 100%;
						width: 100%;
						white-space: normal;
						box-sizing: border-box;
						border-radius: 5px;
						&.active {
							background-color: #0000b5;
							border: solid #3b3bc9 1px;
						}
					}
					.image {
						width: 100%;
						overflow: auto;
						img {
							width: 100%;
							aspect-ratio: 1/1;
						}
					}
					.info {
						overflow: auto;
						width: 100%;
						padding: 5px;
						box-sizing: border-box;
						color: white;
						.vrnt_name {
							width: 100%;
							font-size: 0.9em;
						}
						.price {
							width: 100%;
							font-size: 1em;
							font-weight: bold;
						}
					}
				}
				.scrollbar {
					margin-top: 10px;
					height: 5px;
					background: #eee;
					.handle {
						height: 100%;
						background: #2c23ff;
						cursor: pointer;
					}
				}
			}
		}
	}
}

section {
	&.mrkt {
		width: 100%;
		overflow: auto;
		max-width: 2000px;
		margin: 0 auto;
		.desktop_bg_image {
			width: 100%;
			@media (max-width: 500px) {
				display: none;
			}
		}
		.mobile_bg_image {
			width: 100%;
			@media (min-width: 501px) {
				display: none;
			}
		}
	}
	&.item_style_2 {
		width: 100%;
		max-width: 2000px;
		margin: 0 auto;
		overflow: auto;
		background-color: #030039;
	}
	&.no_item {
		margin: 0 auto;
		width: 100%;
		overflow: auto;
		max-width: 1000px;
		padding: 10px;
		box-sizing: border-box;
		h1 {
			text-align: center;
			font-size: 20px;
			color: #050068;
		}
	}
	&.item_added_to_cart_modal {
		width: 100%;
		height: 100%;
		position: fixed;
		inset: 0;
		z-index: 10;
		display: none;
		@media (max-width: 800px) {
			background-color: rgb(13, 0, 56);
		}
		@media (min-width: 801px) {
			padding: 10%;
			box-sizing: border-box;
			background-color: rgba(255, 255, 255, 0.9);
		}
		> .innr {
			width: 95%;
			max-width: 500px;
			overflow: auto;
			height: auto;
			padding: 50px 20px;
			box-sizing: border-box;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			@media (min-width: 801px) {
				background-color: rgb(13, 0, 56);
			}
		}
		/* INJECTED CART ANIMATION */
		.image {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 20px;
			.animated-cart-icon {
				width: 64px;
				height: 64px;
				color: #4CAF50;
				opacity: 0;
				animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
				.cart-checkmark {
					stroke: #4CAF50;
					stroke-width: 3;
					stroke-dasharray: 15;
					stroke-dashoffset: 15;
					animation: drawCheck 0.4s ease-out 0.4s forwards;
				}
			}
		}
		.note {
			text-align: center;
			width: 100%;
			color: white;
			font-size: 18px;
			span {
				font-size: 25px;
			}
		}
		.control {
			width: 100%;
			overflow: auto;
			padding-top: 30px;
			box-sizing: border-box;
			.item {
				float: left;
				width: 100%;
				overflow: auto;
				padding: 5px;
				box-sizing: border-box;
				a {
					width: 100%;
					height: auto;
					overflow: auto;
					background-color: yellow;
					display: block;
					text-align: center;
					text-decoration: none;
					font-size: 14px;
					position: relative;
					font-weight: bold;
					color: black;
					span {
						width: 100%;
						padding: 5px;
						box-sizing: border-box;
						display: block;
					}
				}
			}
		}
	}
}

.add_to_cart_controls {
	width: 100%;
	overflow: auto;
	padding: 0;
	box-sizing: border-box;
	z-index: 100;
	margin-top: 10px;
	&.stuck {
		position: fixed;
		inset: auto 0 0 0;
		width: 100%;
		z-index: 1000;
		@media (min-width: 1301px) {
			display: none;
		}
	}
	> .innr {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffd200;
		padding: 5px;
		box-sizing: border-box;
		.price {
			float: left;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 40px;
			width: auto;
			padding: 0 5px;
			box-sizing: border-box;
			border-radius: 5px;
			font-weight: bold;
			font-size: 20px;
			color: #000000;
			sup {
				align-self: start;
			}
		}
		.add_item_to_cart {
			float: right;
			height: 40px;
			line-height: 40px;
			padding: 0 20px;
			box-sizing: border-box;
			border-radius: 5px;
			font-weight: bold;
			background-color: blue;
			color: white;
			cursor: pointer;
		}
	}
	> .innr_2 {
		width: 100%;
		overflow: auto;
		background-color: #ffd200;
		padding: 0;
		box-sizing: border-box;
		.item {
			width: 100%;
			box-sizing: border-box;
			background-color: #000aff;
			padding: 5px;
			> .innr {
				height: auto;
				width: 100%;
				overflow: auto;
				box-sizing: border-box;
			}
			.image {
				width: 15%;
				float: left;
				overflow: auto;
				img {
					width: 100%;
					aspect-ratio: 1/1;
					display: block;
				}
			}
			.info {
				overflow: auto;
				width: 75%;
				font-size: 14px;
				padding: 0 5px;
				box-sizing: border-box;
				.vrnt_name {
					width: 100%;
					font-size: 12px;
				}
				.price {
					width: 100%;
					font-size: 14px;
					font-weight: bold;
				}
			}
		}
	}
}

.discount_id_1_old_price {
	position: relative;
	width: 100%;
	text-align: center;
	background-color: #ffd200;
	font-weight: bold;
	font-size: 13px;
	overflow: hidden;
	color: #030039;
}

#animation_container {
	width: 100% !important;
	max-width: 1400px;
	height: auto !important;
	position: relative !important;
	display: block;
	margin: 0 auto;
	canvas {
		width: 100% !important;
		height: auto !important;
		position: relative !important;
		display: block;
	}
	#dom_overlay_container {
		display: none !important;
	}
}

/* EasyZoom */
.lg_image_box {
	position: relative;
	.lg_img {
		width: 100%;
		aspect-ratio: 1/1;
		box-sizing: border-box;
		padding: 0 5px;
		.innr {
			border: 1px solid #050068;
			width: 100%;
			height: 100%;
			position: relative;
			overflow: hidden;
			background-color: white;
			a {
				display: block;
				width: 100%;
				height: 100%;
				img {
					width: 100%;
					height: 100%;
					object-fit: contain;
					transition: transform 0.3s ease;
				}
			}
			.easyzoom {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}
	.toggle_zoom_mode {
		position: absolute;
		right: 12px;
		top: 10px;
		z-index: 20;
		width: 30px;
		height: 30px;
		border: none;
		background-color: rgba(0, 0, 0, 0.38);
		border-radius: 6px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0;
		color: #ffffff;
		opacity: 0.7;
		transition: background-color 0.15s ease, opacity 0.15s ease;
		svg {
			display: block;
			pointer-events: none;
		}
		&:hover {
			background-color: rgba(0, 0, 0, 0.6);
			opacity: 1;
		}
	}
	&.zoom_mode {
		.toggle_zoom_mode {
			background-color: #050068;
			opacity: 1;
		}
		.easyzoom.is-ready img {
			cursor: crosshair;
		}
	}
	.easyzoom-flyout {
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}
}

.easyzoom {
	position: relative;
	display: inline-block;
	img {
		vertical-align: bottom;
	}
	&.is-loading img {
		cursor: progress;
	}
	&.is-ready img {
		cursor: crosshair;
	}
	&.is-error img {
		cursor: not-allowed;
	}
}

.easyzoom-notice {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 150;
	width: 10em;
	margin: -1em 0 0 -5em;
	line-height: 2em;
	text-align: center;
	background: #FFF;
	box-shadow: 0 0 10px #888;
}

.easyzoom-flyout {
	position: absolute;
	z-index: 100;
	overflow: hidden;
	background: #FFF;
}

/* Keyframes */
@keyframes popIn {
	0% {
		transform: scale(0.5);
		opacity: 0;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}

@keyframes drawCheck {
	to {
		stroke-dashoffset: 0;
	}
}