/* General styles for body and main container */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #eee; /* #E0F2F7 Biru Muda */
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            min-height: 100vh;
            box-sizing: border-box; /* Include padding in element's total width and height */
        }
		
		.text-label {
			font-size: 10px;
		}

        .container {
            width: 100%;
            background-color: #fff;
            overflow: hidden;
        }

        /* Header section styles */
        .header {
            padding-top: 12px; /* Equivalent to p-4 */
            padding-bottom: 8px; /* Equivalent to p-4 */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header-title {
            font-size: 30px; /* Equivalent to text-3xl */
            font-weight: 700; /* Equivalent to font-bold */
            color: #1f2937; /* Equivalent to text-gray-800 */
            letter-spacing: 0.05em; /* Equivalent to tracking-wider */
        }

        .header-icons {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .cart-button {
            position: relative;
            color: #4b5563; /* Equivalent to text-gray-600 */
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
        }

        .cart-button ion-icon {
            width: 28px; /* Equivalent to w-7 */
            height: 28px; /* Equivalent to h-7 */
        }

        .login-button {
            position: relative;
            color: #4b5563; /* Equivalent to text-gray-600 */
            cursor: pointer;
            background: none;
            border: none;
            padding: 0;
        }

        .login-button ion-icon {
            width: 28px; /* Equivalent to w-7 */
            height: 28px; /* Equivalent to h-7 */
        }

        /* Search Bar section styles */
		.search-bar {
			padding: 16px;
			border-bottom: 1px solid #e5e7eb;
			width: 100%;        /* Tambahkan */
			box-sizing: border-box; /* Supaya padding ikut dihitung */
		}

		/* Pastikan wrapper full width */
		.search-input-wrapper {
			position: relative;
			width: 100%; /* Tambahkan */
		}

		.search-input-wrapper input:focus {
			border: 1.5px solid #d1d5db;
			border-color: #16a34a; /* warna hijau dari Tailwind bg-green-600 */
		}

        .search-icon {
            position: absolute;
            left: 12px; /* Equivalent to left-3 */
            top: 50%;
            transform: translateY(-50%); /* Equivalent to -translate-y-1/2 */
            width: 20px; /* Equivalent to w-5 */
            height: 20px; /* Equivalent to h-5 */
            color: #9ca3af; /* Equivalent to text-gray-400 */
        }

		/* Input full width */
		.search-input {
			width: 100%;
			padding: 8px 16px 8px 40px;
			border: 1px solid #d1d5db;
			border-radius: 6px;
			box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
			font-size: 14px;
			outline: none;
			box-sizing: border-box;
		}
		
		input:focus {
			outline: none;
			box-shadow: none;
		}
		
		input[readonly]:focus {
			outline: none;
			box-shadow: none;
		}

        /* Categories section styles */
        .categories-section {
            padding: 16px;
            overflow-x: auto;
            white-space: nowrap;
        }

        .categories-wrapper {
            display: inline-flex;
            gap: 12px; /* Equivalent to space-x-3 */
        }

        .category-button {
            padding: 8px 16px;
            border-radius: 8px; /* Equivalent to rounded-full */
            font-size: 14px; /* Equivalent to text-sm */
            font-weight: 600; /* Equivalent to font-medium */
            flex-shrink: 0;
            cursor: pointer;
            border: 1px solid;
            border-color: #ccc;
            transition: background-color 0.2s;
        }

        .category-button.active {
            background-color: #222222; /* Equivalent to bg-green-500 */
            color: #fff;
			font-weight: 600;
        }

        .category-button.active:hover {
            background-color: #111111; /* Equivalent to bg-green-500 */
            color: #fff;
			font-weight: 600;
        }

        .category-button:not(.active) {
            background-color: #f3f4f6; /* Equivalent to bg-gray-100 */
            color: #374151; /* Equivalent to text-gray-700 */
        }

        .category-button:not(.active):hover {
            background-color: #e5e7eb; /* Equivalent to hover:bg-gray-200 */
        }

        /* Image Banner section styles */
        .banner-section {
            padding-right: 18px;
            padding-left: 18px;
            padding-bottom: 18px;
        }

        /* Common styles for product sections */
        .product-section {
            padding: 10px;
            border-top: 1px solid #e5e7eb;
        }
	
		.two-lines-title {
		  display: -webkit-box;
		  -webkit-line-clamp: 2;
		  -webkit-box-orient: vertical;  
		  overflow: hidden;
		}

        .section-title {
            font-size: 18px; /* Equivalent to text-lg */
            font-weight: 600; /* Equivalent to font-semibold */
            color: #1f2937; /* Equivalent to text-gray-800 */
			padding-bottom: 10px;
        }

        /* Product Grid for "Produk Terbaru" */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* Default 2 columns for mobile and tablet */
            gap: 16px; /* Equivalent to gap-4 */
        }

		/* Common styling for all product cards (grid and slider items) */
		.product-card-popular {
			background-color: #fff;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
			border-radius: 8px;
			text-align: left;
			text-decoration: none;
			color: inherit;
			transition: box-shadow 0.2s;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			overflow: hidden;
			padding: 8px;
			height: 100%; /* semua card sama tinggi */
		}

		.product-card-popular:hover {
			box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
		}

        /* Specific styles for the Popular Product Slider section */
        .popular-product-section {
            padding: 10px;
            border-top: 1px solid #e5e7eb;
        }

        #productSlider {
            display: flex;
            overflow-x: auto;
            gap: 16px; /* gap-4 */
            scroll-behavior: smooth; /* scroll-smooth */
            scroll-snap-type: x mandatory; /* scroll-snap-x mandatory */
            padding: 0 32px; /* px-8 equivalent for outer padding */
            padding-bottom: 10px; /* To prevent scrollbar from overlaying content */
            -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        }

        #productSlider .product-card-popular { /* Specific width for slider items */
            flex-shrink: 0;
            scroll-snap-align: start;
            width: 160px; /* w-40 */
        }

        /* Hide scrollbar for horizontal scroll sections */
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }

        /* Slider Navigation Buttons */
        .slider-nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%); /* -translate-y-1/2 */
            z-index: 10;
            background-color: #fff; /* bg-white */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow */
            padding: 4px 8px; /* px-2 py-1 */
            width: 32px; /* w-8 */
            height: 32px; /* h-8 */
            border-radius: 9999px; /* rounded-full */
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            transition: background-color 0.2s, box-shadow 0.2s;
        }

        .slider-nav-button:hover {
            background-color: #f0f0f0;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        .slider-nav-button ion-icon {
            font-size: 18px; /* text-lg */
            color: #4b5563; /* Default icon color */
        }

        .slider-nav-button.left-arrow {
            left: 0; /* left-0 */
        }

        .slider-nav-button.right-arrow {
            right: 0; /* right-0 */
        }

		.swiper-pagination-bullet {
		  width: 5px;
		  height: 5px;
		  background-color: #ccc;
		  border-radius: 9999px;
		  position: relative;
		  opacity: 1;
		  transition: all 0.3s ease;
		  overflow: hidden;
		}

		.swiper-pagination-bullet-active {
		  width: 32px;
		  background-color: #ccc; /* same */
		}

		/* Progress inside the active dot */
		.swiper-pagination-bullet-active::after {
		  content: '';
		  position: absolute;
		  left: 0;
		  top: 0;
		  height: 100%;
		  width: 0%;
		  background-color: #fff;
		  animation: bulletProgress 4s linear forwards;
		  border-radius: 9999px;
		}

		@keyframes bulletProgress {
		  0% { width: 0%; }
		  100% { width: 100%; }
		}
		
        /* Custom styles for image containers to ensure consistent aspect ratio */
        .main-image-container {
            /* Force a 1:1 aspect ratio for the main image container */
            aspect-ratio: 1 / 1;
            /* Ensure the image inside fills the container while maintaining its aspect ratio */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden; /* Hide overflowing parts of the image */
        }
        .main-image {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Ensures the entire image is visible, scales down if needed */
        }
        .thumbnail-container img {
            object-fit: contain; /* Ensures the entire thumbnail image is visible */
        }
	
		/* Scrollbar tipis (default untuk desktop) */
		.scrollbar-thin {
		  -ms-overflow-style: auto;
		  scrollbar-width: thin;
		}

		.scrollbar-thin::-webkit-scrollbar {
		  height: 6px; /* Horizontal scrollbar height */
		}

		.scrollbar-thin::-webkit-scrollbar-track {
		  background: transparent;
		}

		.scrollbar-thin::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.3);
		  border-radius: 4px;
		}

		/* Sembunyikan scrollbar di mobile (max 768px) */
		@media (max-width: 768px) {
		  .scrollbar-thin {
			-ms-overflow-style: none;  /* IE dan Edge */
			scrollbar-width: none;     /* Firefox */
		  }
		  .scrollbar-thin::-webkit-scrollbar {
			display: none; /* Chrome, Safari, Opera */
		  }
		}
	
		/* Tailwind plugin style manual */
		.scrollbar-hide {
		  -ms-overflow-style: none;  /* IE and Edge */
		  scrollbar-width: none;     /* Firefox */
		}
		.scrollbar-hide::-webkit-scrollbar {
		  display: none;             /* Chrome, Safari, Opera */
		}

        /* Media Queries for Responsiveness */
        /* Tablet and larger screens (640px to 1023px) */
        @media (min-width: 640px) { /* Equivalent to sm: breakpoint in Tailwind */
            .container {
                max-width: 512px; /* Max width remains 512px */
            }
            .search-bar, .categories-section, .product-section, .popular-product-section {
                padding: 10px; /* Equivalent to p-6 */
            }
            .product-grid {
                grid-template-columns: repeat(3, 1fr); /* Berubah menjadi 3 kolom di desktop */
            }
            /* product-grid remains 2 columns here for tablets */
            #productSlider .product-card-popular {
                width: 180px; /* Adjust slider card width for larger screens */
            }
            .slider-nav-button {
                width: 40px; /* Larger buttons on wider screens */
                height: 40px;
                font-size: 24px;
            }
             .slider-nav-button.left-arrow {
                left: 10px;
            }
            .slider-nav-button.right-arrow {
                right: 10px;
            }
			.banner-image {
				width: 100%;
				height: auto;
				object-fit: cover;
			}
        }

        /* Desktop and larger screens (1024px and up) */
        @media (min-width: 1024px) { /* Equivalent to lg: breakpoint in Tailwind */
            .container {
                max-width: 1024px; /* Max width remains 512px */
            }
            .product-grid {
                grid-template-columns: repeat(4, 1fr); /* Berubah menjadi 3 kolom di desktop */
            }
            #productSlider .product-card-popular {
                width: 200px; /* Further adjust slider card width */
            }
            .slider-nav-button.left-arrow {
                left: 20px;
            }
            .slider-nav-button.right-arrow {
                right: 20px;
            }
			.banner-image {
				width: 100%;
				height: auto;
				object-fit: cover;
			}
        }