.product-slider-container {
				display: flex;
				gap: 20px;
				background: white;
				padding: 20px;
				max-width: fit-content;
				float:right;
			}

			.main-image-container {
				position: relative;
				width: 450px;
				height: 450px;
				overflow: hidden;
			}

			.main-image-wrapper {
				width: 100%;
				height: 100%;
				overflow: hidden;
				position: relative;
			}

			.main-image-track {
				display: flex;
				height: 100%;
				transition: transform 0.3s ease-out;
				will-change: transform;
			}

			.main-image {
				min-width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				cursor: pointer;
				padding: 10px;
				box-sizing: border-box;
			}

			.main-image:hover .zoom-icon {
				opacity: 1;
			}

			.main-image img {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
				object-fit: contain;
				user-select: none;
				-webkit-user-drag: none;
			}

			/* Main slider navigation arrows */
			.slider-arrow {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(255, 255, 255, 0.85);
				border: none;
				color: #333;
				font-size: 22px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				cursor: pointer;
				z-index: 10;
				opacity: 0;
				transition: opacity 0.3s ease, background 0.3s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2px 8px rgba(0,0,0,0.15);
			}

			.main-image-container:hover .slider-arrow {
				opacity: 1;
			}

			.slider-arrow:hover {
				background: rgba(255, 255, 255, 1);
			}

			.slider-arrow:disabled {
				opacity: 0 !important;
				cursor: default;
			}

			.main-image-container:hover .slider-arrow:disabled {
				opacity: 0.3 !important;
			}

			.slider-arrow-prev {
				left: 10px;
			}

			.slider-arrow-next {
				right: 10px;
			}

			/* Dot indicators for main slider */
			.slider-dots {
				position: absolute;
				bottom: 10px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				gap: 6px;
				z-index: 10;
			}

			.slider-dot {
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: rgba(0,0,0,0.2);
				border: none;
				cursor: pointer;
				padding: 0;
				transition: background 0.3s ease;
			}

			.slider-dot.active {
				background: #58A291;
			}

			.zoom-icon {
				position: absolute;
				top: 15px;
				right: 15px;
				background: rgba(255, 255, 255, 0.9);
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 15px;
				opacity: 0;
				transition: opacity 0.3s ease;
				pointer-events: none;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
			}

			.thumbnail-container {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-height: 450px;
				overflow-y: auto;
				overflow-x: hidden;
				padding-right: 5px;
			}

			.thumbnail-track {
				display: flex;
				flex-direction: column;
				gap: 10px;
			}

			.thumbnail {
				min-width: 80px;
				width: 80px;
				min-height: 80px;
				height: 80px;
				cursor: pointer;
				overflow: hidden;
				transition: all 0.3s ease;
				opacity: 0.6;
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #f9f9f9;
			}

			.thumbnail:hover {
				opacity: 0.8;
				transform: scale(1.05);
			}

			.thumbnail.active {
				border-color: #58A291;
				opacity: 1;
			}

			.thumbnail img {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
				object-fit: contain;
				user-select: none;
				-webkit-user-drag: none;
			}

			/* Lightbox Styles */
			.lightbox {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.95);
				z-index: 9999;
				display: none;
				align-items: center;
				justify-content: center;
			}

			.lightbox.active {
				display: flex;
				animation: fadeIn 0.3s ease;
			}

			@keyframes fadeIn {
				from {
					opacity: 0;
				}
				to {
					opacity: 1;
				}
			}

			.lightbox-close {
				position: absolute;
				top: 20px;
				right: 20px;
				background: rgba(255, 255, 255, 0.2);
				border: none;
				color: white;
				font-size: 40px;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				cursor: pointer;
				z-index: 10001;
				transition: all 0.3s ease;
				line-height: 1;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.lightbox-close:hover {
				background: rgba(255, 255, 255, 0.3);
				transform: rotate(90deg);
			}

			.lightbox-nav {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(255, 255, 255, 0.2);
				border: none;
				color: white;
				font-size: 30px;
				width: 50px;
				height: 50px;
				border-radius: 50%;
				cursor: pointer;
				z-index: 10001;
				transition: all 0.3s ease;
			}

			.lightbox-nav:hover {
				background: rgba(255, 255, 255, 0.3);
				transform: translateY(-50%) scale(1.1);
			}

			.lightbox-nav:disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}

			.lightbox-nav:disabled:hover {
				transform: translateY(-50%) scale(1);
			}

			.lightbox-prev {
				left: 30px;
			}

			.lightbox-next {
				right: 30px;
			}

			.lightbox-content {
				width: 90%;
				height: 90%;
				max-width: 1200px;
				max-height: 90vh;
				overflow: hidden;
				position: relative;
			}

			.lightbox-track {
				display: flex;
				height: 100%;
				transition: transform 0.3s ease-out;
			}

			.lightbox-image {
				min-width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20px;
			}

			.lightbox-image img {
				max-width: 100%;
				max-height: 100%;
				width: auto;
				height: auto;
				object-fit: contain;
				user-select: none;
				-webkit-user-drag: none;
			}

			/* Scrollbar styling for thumbnails */
			.thumbnail-container::-webkit-scrollbar {
				width: 6px;
			}

			.thumbnail-container::-webkit-scrollbar-track {
				background: #f1f1f1;
				border-radius: 10px;
			}

			.thumbnail-container::-webkit-scrollbar-thumb {
				background: #888;
				border-radius: 10px;
			}

			.thumbnail-container::-webkit-scrollbar-thumb:hover {
				background: #555;
			}

			/* Mobile responsiveness */
			@media (max-width: 768px) {
				body {
					padding: 10px;
				}
				
				.product-slider-container {
					flex-direction: column;
					padding: 10px;
					max-width: 100% !important;
					width: 100% !important;
					float: none !important;
					overflow: hidden;
					box-sizing: border-box;
				}

				.main-image-container {
					width: 100% !important;
					height: auto !important;
					aspect-ratio: 1 / 1;
					max-width: 100%;
					margin: 0 auto;
					overflow: hidden;
				}

				.main-image-wrapper {
					width: 100%;
					height: 100%;
					overflow: hidden;
				}

				.main-image {
					min-width: 100%;
					width: 100%;
					box-sizing: border-box;
				}

				.main-image img {
					max-width: 100%;
					max-height: 100%;
					width: auto;
					height: auto;
					object-fit: contain;
				}
				
				.thumbnail-container {
					flex-direction: row;
					max-height: none;
					overflow: hidden;
					padding-right: 0;
					padding-bottom: 5px;
					width: 100%;
					max-width: 100%;
					box-sizing: border-box;
				}

				.thumbnail-track {
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: center;
					gap: 6px;
					width: 100%;
				}

				.thumbnail {
					min-width: 60px;
					width: 60px;
					min-height: 60px;
					height: 60px;
					flex-shrink: 0;
				}
				
				.zoom-icon {
					width: 35px;
					height: 35px;
					font-size: 18px;
					top: 10px;
					right: 10px;
				}
				
				.lightbox-close {
					top: 10px;
					right: 10px;
					width: 45px;
					height: 45px;
					font-size: 35px;
				}
				
				.lightbox-nav {
					width: 45px;
					height: 45px;
					font-size: 25px;
				}
				
				.lightbox-prev {
					left: 10px;
				}
				
				.lightbox-next {
					right: 10px;
				}
				
				.thumbnail-container::-webkit-scrollbar {
					height: 6px;
					width: auto;
				}
			}

			@media (max-width: 768px) {
				.slider-arrow {
					width: 34px;
					height: 34px;
					font-size: 18px;
				}

				.slider-arrow-prev {
					left: 6px;
				}

				.slider-arrow-next {
					right: 6px;
				}
			}

			@media (max-width: 480px) {
				.product-slider-container {
					padding: 10px;
				}

				.thumbnail {
					min-width: 60px;
					width: 60px;
					min-height: 60px;
					height: 60px;
				}
			}

			/* ===== Card Carousel (Product List) ===== */
			.card-carousel {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;
				touch-action: pan-y pinch-zoom;
			}

			.card-carousel-track {
				display: flex;
				height: 100%;
				transition: transform 0.3s ease-out;
				will-change: transform;
			}

			.card-carousel-slide {
				min-width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.card-carousel-slide a {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
			}

			.card-carousel-slide img {
				max-width: 90%;
				max-height: 90%;
				object-fit: contain;
				user-select: none;
				-webkit-user-drag: none;
			}

			.card-carousel-arrow {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				background: rgba(255, 255, 255, 0.85);
				border: none;
				color: #333;
				font-size: 18px;
				width: 32px;
				height: 32px;
				border-radius: 50%;
				cursor: pointer;
				z-index: 5;
				opacity: 0;
				transition: opacity 0.25s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 1px 4px rgba(0,0,0,0.15);
				padding: 0;
				line-height: 1;
			}

			.card-carousel:hover .card-carousel-arrow {
				opacity: 1;
			}

			.card-carousel-arrow:hover {
				background: #fff;
			}

			.card-carousel-arrow.cc-prev {
				left: 6px;
			}

			.card-carousel-arrow.cc-next {
				right: 6px;
			}

			.card-carousel-dots {
				position: absolute;
				bottom: 6px;
				left: 50%;
				transform: translateX(-50%);
				display: flex;
				gap: 4px;
				z-index: 5;
			}

			.card-carousel-dots .cc-dot {
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: rgba(0,0,0,0.2);
				border: none;
				padding: 0;
				cursor: pointer;
				transition: background 0.3s;
			}

			.card-carousel-dots .cc-dot.active {
				background: #58A291;
			}