* { margin: 0; padding: 0; box-sizing: border-box; }
		/* Theme colors */
        :root {
            --primary: #303f9f;
            --primary-dark: #1a237e;
            --primary-light: #5c6bc0;
            --orange: #f57c00;
            --green: #2e7d32;
            --black: #212121;
            --red: #c62828;
            --bg-light: #f5f7fa;
            --text-dark: #1e1e2f;
            --text-light: #5e5e72;
            --glass-white: rgba(255, 255, 255, 0.7);
            --glass-border: rgba(255, 255, 255, 0.5);
        }
        body {
            font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background: #f5f7fa;
            color: #1e1e2f;
            line-height: 1.4;
            font-size: 14px; letter-spacing: 0.01em;
        }
        /* main theme color #303f9f – used as primary */
        .theme-bg { background: #303f9f; }
        .theme-text { color: #303f9f; }
        .theme-border { border-color: #303f9f; }
        /* sub colors: orange #f57c00, green #2e7d32, black #212121, red #c62828 */
        .sub-orange { color: #f57c00; background: rgba(245, 124, 0, 0.05); }
        .sub-green { color: #2e7d32; background: rgba(46, 125, 50, 0.05); }
        .sub-black { color: #212121; background: #fafafa; }
        .sub-red { color: #c62828; background: rgba(198, 40, 40, 0.05); }

        /* glassmorphism + Apple design principles */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px) saturate(180%);
            -webkit-backdrop-filter: blur(12px) saturate(180%);
            border-radius: 24px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(255,255,255,0.3) inset;
        }
        .glass-card {
            background: rgba(255, 255, 255, 0.65);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.7);
            box-shadow: 0 8px 20px -6px rgba(0, 20, 40, 0.15);
            transition: all 0.2s ease;
        }
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.8);
            border-color: rgba(48, 63, 159, 0.2);
            box-shadow: 0 16px 30px -10px rgba(48, 63, 159, 0.2);
        }
        .wrapper {
            max-width: 1440px;
            margin: 0 auto;
            padding: 20px 32px 40px;
        }
        /* top bar with contact & login */
        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0 20px;
            flex-wrap: wrap;
            row-gap: 12px;
        }
        .logo-area { display: flex; align-items: center; gap: 12px; }
        .logo-icon { max-height: 32px; font-size: 32px; color: #303f9f; filter: drop-shadow(0 4px 6px rgba(48,63,159,0.2)); }
        .logo-text { font-weight: 600; font-size: 22px; letter-spacing: -0.02em; background: linear-gradient(130deg, #303f9f 20%, #5c6bc0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .contact-row {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 12px;
            background: rgba(48,63,159,0.05);
            padding: 6px 16px;
            border-radius: 40px;
            backdrop-filter: blur(4px);
        }
        .contact-row i { color: #303f9f; width: 18px; }
        .contact-row span { font-weight: 500; }
        .nav-links { display: flex; gap: 24px; font-weight: 500; font-size: 13px; flex-wrap: wrap; }
        .nav-links a { text-decoration: none; color: #1e293b; font-weight: 500; border-bottom: 2px solid transparent; padding-bottom: 4px; }
        .nav-links a:hover { border-bottom-color: #303f9f; }
        .cart-badge {
            position: relative;
            display: inline-flex;
            align-items: center;
        }
        .cart-count {
            position: absolute;
            top: -10px;
            right: -12px;
            background: #c62828;
            color: white;
            font-size: 10px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 30px;
            line-height: 1;
        }
        .cart-total {
            font-size: 11px;
            background: #303f9f;
            color: white;
            padding: 2px 8px;
            border-radius: 40px;
            margin-left: 4px;
            white-space: nowrap;
        }
        /* carousel */
        .carousel-container { margin: 20px 0 36px; border-radius: 36px; overflow: hidden; background: rgba(255,255,255,0.5); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.8); box-shadow: 0 25px 40px -20px #303f9f55; }
        .carousel-track { display: flex; width: 100%; scroll-snap-type: x mandatory; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
        .carousel-track::-webkit-scrollbar { display: none; }
        .carousel-item { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: space-between; padding: 48px 64px; min-height: 360px; background: radial-gradient(circle at 10% 30%, rgba(48,63,159,0.03), transparent 50%); }
        .carousel-content { max-width: 450px; }
        .carousel-badge { background: rgba(48,63,159,0.15); color: #303f9f; padding: 4px 12px; border-radius: 40px; font-size: 12px; font-weight: 600; display: inline-block; backdrop-filter: blur(4px); margin-bottom: 12px; }
        .carousel-content h2 { font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 8px 0 16px; background: linear-gradient(150deg, #1a237e, #303f9f); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
        .carousel-desc { font-size: 14px; color: #3a3a5a; margin-bottom: 28px; opacity: 0.8; }
        .price-tag { font-size: 24px; font-weight: 600; color: #2e7d32; margin-bottom: 12px; }
        .carousel-img-placeholder { margin-top: 20px; width: 300px; height: 220px; background: rgba(48,63,159,0.1); border-radius: 32px; display: flex; align-items: center; justify-content: center; font-size: 80px; color: #303f9f; border: 2px dashed rgba(48,63,159,0.3); box-shadow: 0 20px 30px -10px rgba(0,0,0,0.2); backdrop-filter: blur(8px); }
        .carousel-controls { display: flex; justify-content: center; gap: 20px; padding: 16px 0 8px; }
        .dot { width: 10px; height: 10px; border-radius: 10px; background: rgba(48,63,159,0.3); transition: 0.2s; cursor: pointer; }
        .dot.active { background: #303f9f; width: 28px; }

        /* categories row */
        .categories-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 48px 0 32px; justify-content: space-between; }
        .cat-item { flex: 1 1 auto; min-width: 100px; background: rgba(255,255,255,0.5); backdrop-filter: blur(10px); padding: 12px 16px; border-radius: 40px; font-size: 13px; font-weight: 500; color: #1e293b; border: 1px solid rgba(255,255,255,0.7); box-shadow: 0 4px 8px rgba(0,0,0,0.02); text-align: center; display: flex; align-items: center; justify-content: center; gap: 8px; }
        .cat-item i { color: #303f9f; font-size: 16px; }

        .section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 48px 0 20px; }
        .section-title h3 { font-size: 18px; font-weight: 600; color: #303f9f; letter-spacing: -0.01em; border-left: 6px solid #f57c00; padding-left: 16px; }
        .section-link { font-size: 12px; color: #c62828; font-weight: 500; text-decoration: none; border-bottom: 1px dashed #c62828; }

        .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 48px; }
        .product-card { padding: 20px; display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); border-radius: 38px; border: 1px solid rgba(255,255,255,0.6); transition: 0.25s; }
        .product-img-placeholder { width: 100%; aspect-ratio: 1/0.9; background: rgba(48,63,159,0.05); border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #303f9f; margin-bottom: 16px; border: 2px dashed rgba(48,63,159,0.2); }
        .product-category { font-size: 10px; text-transform: uppercase; color: #f57c00; font-weight: 600; margin-bottom: 4px; }
        .product-title { font-weight: 600; font-size: 16px; margin-bottom: 6px; color: #212121; }
        .product-meta { display: flex; justify-content: space-between; font-size: 12px; color: #2e7d32; font-weight: 500; margin: 12px 0 8px; }
        .product-price { font-size: 18px; font-weight: 700; color: #303f9f; }
        .product-price small { font-size: 11px; font-weight: 400; color: #555; }

        /* New Arrivals / Low Budget / Refurbished – 3-column carousel grids */
        .triple-carousel-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin: 48px 0;
        }
        .carousel-subsection {
            background: rgba(255,255,255,0.4);
            backdrop-filter: blur(8px);
            border-radius: 32px;
            padding: 20px 16px;
            border: 1px solid rgba(255,255,255,0.6);
        }
        .subsection-title {
            font-size: 16px;
            font-weight: 600;
            color: #303f9f;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .mini-carousel {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            gap: 16px;
            padding-bottom: 8px;
            scrollbar-width: thin;
        }
        .mini-carousel::-webkit-scrollbar { height: 4px; background: #ddd; border-radius: 4px; }
        .mini-carousel::-webkit-scrollbar-thumb { background: #303f9f; border-radius: 4px; }
        .carousel-screen {
            flex: 0 0 100%;
            scroll-snap-align: start;
            display: grid;
            gap: 12px;
        }
        .micro-product {
            background: rgba(255,255,255,0.5);
            backdrop-filter: blur(4px);
            border-radius: 16px;
            padding: 12px;
            border: 1px solid rgba(255,255,255,0.5);
            font-size: 12px;
			display: flex;
			align-items: center;
			gap: 12px;
			min-width: 0;
        }
        .micro-product .title { font-weight: 600; }
        .micro-product .price { color: #2e7d32; font-weight: 500; }

		.micro-product-img {
			width: 50px;
			height: 50px;
			background: #fff;
			border-radius: 12px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24px;
			color: #303f9f;
			flex-shrink: 0;
			border: 1px solid rgba(48,63,159,0.2);
			padding: 5px;
		}

		.micro-product-content {
			flex: 1;
		}

		.micro-product .title { 
			font-weight: 600; 
			display: block;
			margin-bottom: 2px;
		}

		.micro-product .price { 
			color: #2e7d32; 
			font-weight: 500; 
			margin-top: 4px;
		}

        /* double promo panel */
        .double-panel { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; margin: 36px 0; }
        .promo-glass { padding: 28px; border-radius: 32px; display: flex; align-items: center; justify-content: space-between; background: rgba(245, 124, 0, 0.03); }
        .promo-glass .icon { font-size: 64px; color: #f57c20; opacity: 0.5; }
		
		/* Enhanced Newsletter Section - Fully Responsive */
		.newsletter-section {
			background: linear-gradient(135deg, rgba(48,63,159,0.05) 0%, rgba(48,63,159,0.02) 100%);
			border-radius: 48px;
			padding: 48px;
			margin: 48px 0;
			position: relative;
			overflow: hidden;
			border: 1px solid rgba(255,255,255,0.8);
			backdrop-filter: blur(8px);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 40px;
		}

		.newsletter-content {
			flex: 1;
			max-width: 600px;
			z-index: 2;
		}

		.newsletter-section h3 {
			font-size: clamp(20px, 4vw, 28px);
			font-weight: 600;
			color: #303f9f;
			margin-bottom: 8px;
			line-height: 1.3;
		}

		.newsletter-section p {
			font-size: clamp(12px, 3vw, 14px);
			color: #5e5e72;
			margin-bottom: 28px;
			line-height: 1.6;
		}

		.newsletter-form {
			width: 100%;
		}

		.form-group {
			display: flex;
			gap: 12px;
			width: 100%;
			flex-wrap: wrap;
		}

		.newsletter-input {
			flex: 1;
			min-width: 200px;
			padding: 16px 24px;
			border: 2px solid rgba(48,63,159,0.15);
			border-radius: 60px;
			background: rgba(255,255,255,0.9);
			font-size: clamp(13px, 3vw, 15px);
			font-family: 'Poppins', sans-serif;
			outline: none;
			transition: all 0.3s ease;
			box-shadow: 0 4px 12px rgba(0,0,0,0.02);
		}

		.newsletter-input:focus {
			border-color: #303f9f;
			background: white;
			box-shadow: 0 8px 20px rgba(48,63,159,0.15);
			transform: translateY(-2px);
		}

		.newsletter-input:hover {
			border-color: rgba(48,63,159,0.3);
		}

		.newsletter-btn {
			background: #303f9f;
			color: white;
			border: none;
			padding: 16px 36px;
			border-radius: 60px;
			font-size: clamp(13px, 3vw, 15px);
			font-weight: 500;
			cursor: pointer;
			font-family: 'Poppins', sans-serif;
			white-space: nowrap;
			display: flex;
			align-items: center;
			gap: 10px;
			transition: all 0.3s ease;
			box-shadow: 0 8px 20px rgba(48,63,159,0.3);
			position: relative;
			overflow: hidden;
		}

		.newsletter-btn::before {
			content: '';
			position: absolute;
			top: 50%;
			left: 50%;
			width: 0;
			height: 0;
			border-radius: 50%;
			background: rgba(255,255,255,0.2);
			transform: translate(-50%, -50%);
			transition: width 0.6s, height 0.6s;
		}

		.newsletter-btn:hover::before {
			width: 300px;
			height: 300px;
		}

		.newsletter-btn:hover {
			background: #3949ab;
			transform: translateY(-2px);
			box-shadow: 0 12px 28px rgba(48,63,159,0.4);
		}

		.newsletter-btn:active {
			transform: translateY(0);
		}

		.btn-icon {
			font-size: 14px;
			transition: transform 0.3s ease;
		}

		.newsletter-btn:hover .btn-icon {
			transform: translateX(5px);
		}

		.form-message {
			margin-top: 12px;
			font-size: 12px;
			min-height: 20px;
			color: #2e7d32;
			transition: all 0.3s ease;
		}

		.newsletter-footer {
			display: flex;
			align-items: center;
			gap: 8px;
			margin-top: 20px;
			color: #888;
			font-size: 12px;
		}

		.newsletter-footer i {
			color: #f57c00;
			font-size: 14px;
		}

		.newsletter-decoration {
			display: flex;
			gap: 20px;
			font-size: 48px;
			color: rgba(48,63,159,0.1);
			z-index: 1;
		}

		.newsletter-decoration i {
			animation: float 3s ease-in-out infinite;
		}

		.newsletter-decoration i:nth-child(2) {
			animation-delay: 0.5s;
		}

		.newsletter-decoration i:nth-child(3) {
			animation-delay: 1s;
		}

		@keyframes float {
			0%, 100% { transform: translateY(0); }
			50% { transform: translateY(-10px); }
		}

		/* Success/Error message styles */
		.form-message.success {
			color: #2e7d32;
			background: rgba(46,125,50,0.1);
			padding: 8px 16px;
			border-radius: 40px;
		}

		.form-message.error {
			color: #c62828;
			background: rgba(198,40,40,0.1);
			padding: 8px 16px;
			border-radius: 40px;
		}

		/* Responsive Breakpoints */
		@media screen and (max-width: 1024px) {
			.newsletter-section {
				padding: 40px 32px;
			}
			
			.newsletter-decoration {
				font-size: 40px;
				gap: 16px;
			}
		}

		@media screen and (max-width: 860px) {
			.newsletter-section {
				flex-direction: column;
				text-align: center;
				padding: 40px 24px;
				gap: 20px;
			}
			
			.newsletter-content {
				max-width: 100%;
			}
			
			.newsletter-footer {
				justify-content: center;
			}
			
			.newsletter-decoration {
				display: none; /* Hide decorative elements on mobile */
			}
		}

		@media screen and (max-width: 720px) {
			.newsletter-section {
				padding: 32px 20px;
				border-radius: 36px;
			}
			
			.form-group {
				flex-direction: column;
				gap: 12px;
			}
			
			.newsletter-input {
				width: 100%;
				padding: 14px 20px;
				text-align: center;
			}
			
			.newsletter-btn {
				width: 100%;
				justify-content: center;
				padding: 14px 28px;
			}
			
			.newsletter-btn:hover {
				transform: translateY(-1px);
			}
		}

		@media screen and (max-width: 480px) {
			.newsletter-section {
				padding: 28px 16px;
				margin: 32px 0;
				border-radius: 28px;
			}
			
			.newsletter-section h3 {
				font-size: 20px;
			}
			
			.newsletter-section p {
				font-size: 12px;
				margin-bottom: 20px;
			}
			
			.newsletter-input {
				padding: 12px 16px;
				font-size: 13px;
			}
			
			.newsletter-btn {
				padding: 12px 20px;
				font-size: 13px;
			}
			
			.btn-text {
				display: inline-block;
			}
			
			.newsletter-footer {
				flex-direction: column;
				gap: 4px;
			}
			
			.newsletter-footer i {
				font-size: 12px;
			}
		}

		@media screen and (max-width: 320px) {
			.newsletter-section {
				padding: 20px 12px;
			}
			
			.newsletter-section h3 {
				font-size: 18px;
			}
			
			.btn-text {
				font-size: 12px;
			}
			
			.newsletter-btn {
				padding: 10px 16px;
			}
		}

		/* Touch device optimizations */
		@media (hover: none) and (pointer: coarse) {
			.newsletter-btn:hover {
				transform: none;
				background: #303f9f;
			}
			
			.newsletter-btn:active {
				background: #3949ab;
				transform: scale(0.98);
			}
			
			.newsletter-input {
				font-size: 16px; /* Prevents zoom on iOS */
			}
		}

		/* Dark mode support (optional) */
		@media (prefers-color-scheme: dark) {
			.newsletter-section {
				background: linear-gradient(135deg, rgba(48,63,159,0.15) 0%, rgba(48,63,159,0.05) 100%);
			}
			
			.newsletter-input {
				background: rgba(30,30,47,0.9);
				border-color: rgba(255,255,255,0.1);
				color: #fff;
			}
			
			.newsletter-input:focus {
				background: #1e1e2f;
			}
			
			.newsletter-section p {
				color: #a0a0b0;
			}
		}

		/* Loading state */
		.newsletter-btn.loading {
			pointer-events: none;
			opacity: 0.7;
		}

		.newsletter-btn.loading .btn-icon {
			animation: spin 1s linear infinite;
		}

		@keyframes spin {
			from { transform: rotate(0deg); }
			to { transform: rotate(360deg); }
		}

		/* RTL support (if needed) */
		[dir="rtl"] .newsletter-btn:hover .btn-icon {
			transform: translateX(-5px);
		}

        /* footer */
        .site-footer { margin-top: 64px; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(16px); border-top: 1px solid rgba(255,255,255,0.8); border-radius: 48px 48px 24px 24px; padding: 48px 40px 32px; box-shadow: 0 -10px 30px -10px rgba(48,63,159,0.1); }
        .footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 30px; }
        .footer-col p { font-size: 12px; color: #2c3e50; margin: 16px 0 12px; line-height: 1.6; }
        .footer-col h5 { font-size: 13px; font-weight: 600; color: #303f9f; margin-bottom: 20px; letter-spacing: 0.3px; }
        .footer-col ul { list-style: none; }
        .footer-col li { margin-bottom: 12px; font-size: 12px; }
        .footer-col a { text-decoration: none; color: #374151; border-bottom: 1px dotted transparent; }
        .footer-col a:hover { color: #303f9f; border-bottom-color: #f57c00; }
        .social-links { display: flex; gap: 20px; font-size: 20px; color: #303f9f; margin-top: 20px; }
        .footer-bottom { display: flex; justify-content: space-between; border-top: 1px solid rgba(48,63,159,0.2); margin-top: 40px; padding-top: 24px; font-size: 11px; color: #5e5e72; }
		
		/* Improved responsive navigation */
		.top-nav-container {
			width: 100%;
			margin-bottom: 20px;
		}

		.top-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12px 0 20px;
			flex-wrap: wrap;
			row-gap: 15px;
			position: relative;
		}

		/* Contact row improvements */
		.contact-row {
			display: flex;
			align-items: center;
			gap: 25px;
			font-size: 12px;
			background: rgba(48,63,159,0.05);
			padding: 8px;
			border-radius: 40px;
			backdrop-filter: blur(4px);
			flex-wrap: wrap;
		}

		.contact-item {
			display: flex;
			align-items: center;
			gap: 8px;
			white-space: nowrap;
		}

		.contact-item i { 
			color: #303f9f; 
			width: 16px;
			font-size: 12px;
		}

		.login-link {
			color: #303f9f;
			text-decoration: none;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 6px;
			padding: 4px 12px;
			background: rgba(48,63,159,0.1);
			border-radius: 30px;
			transition: all 0.2s ease;
		}

		.login-link:hover {
			background: #303f9f;
			color: white;
		}

		/* Mobile toggle button */
		.mobile-toggle {
			display: none;
			font-size: 24px;
			color: #303f9f;
			cursor: pointer;
			padding: 8px;
			border-radius: 8px;
			transition: all 0.2s ease;
		}

		/* Navigation links */
		.nav-links { 
			display: flex; 
			gap: 32px; 
			font-weight: 500; 
			font-size: 13px; 
			margin: 10px 0 15px;
			padding: 0 5px;
			flex-wrap: wrap;
		}

		.nav-links a { 
			text-decoration: none; 
			color: #1e293b; 
			font-weight: 500; 
			border-bottom: 2px solid transparent; 
			padding: 8px 0 4px; 
			transition: all 0.2s ease;
			position: relative;
		}

		.nav-links a:hover { 
			border-bottom-color: #303f9f; 
			color: #303f9f;
		}

		.nav-links a::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 0;
			height: 2px;
			background: #303f9f;
			transition: width 0.2s ease;
		}

		.nav-links a:hover::after {
			width: 100%;
		}

		/* Responsive breakpoints for navigation */
		@media screen and (max-width: 1024px) {
			.contact-row {
				gap: 15px;
				padding: 8px 15px;
			}
			
			.contact-item span {
				font-size: 11px;
			}
		}

		@media screen and (max-width: 860px) {
			.mobile-toggle {
				display: block;
				order: 3;
			}
			
			.top-bar {
				position: relative;
			}
			
			.contact-row {
				display: none;
				width: 100%;
				order: 4;
				margin-top: 15px;
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
				padding: 15px;
				background: rgba(255,255,255,0.95);
				backdrop-filter: blur(10px);
				border-radius: 20px;
				box-shadow: 0 10px 30px rgba(0,0,0,0.1);
			}
			
			.contact-row.show {
				display: flex;
			}
			
			.contact-item {
				width: 100%;
				white-space: normal;
				word-break: break-word;
			}
			
			.login-link {
				width: 100%;
				justify-content: center;
			}
			
			.nav-links {
				display: none;
				width: 100%;
				flex-direction: column;
				gap: 15px;
				padding: 20px;
				background: rgba(255,255,255,0.95);
				backdrop-filter: blur(10px);
				border-radius: 20px;
				margin-top: 10px;
				box-shadow: 0 10px 30px rgba(0,0,0,0.1);
			}
			
			.nav-links.show {
				display: flex;
			}
			
			.nav-links a {
				padding: 12px 15px;
				border-radius: 12px;
				background: rgba(48,63,159,0.03);
				width: 100%;
				text-align: left;
			}
			
			.nav-links a:hover {
				background: rgba(48,63,159,0.1);
				border-bottom-color: transparent;
			}
			
			.nav-links a::after {
				display: none;
			}
			
			.icon-group {
				margin-left: auto;
			}
		}

		@media screen and (max-width: 580px) {
			.top-bar {
				flex-wrap: wrap;
			}
			
			.logo-area {
				width: auto;
			}
			
			.icon-group {
				gap: 12px;
				margin-right: 10px;
			}
			
			.cart-total {
				font-size: 10px;
				padding: 2px 6px;
			}
			
			.logo-text {
				font-size: 18px;
			}
			
			.logo-icon {
				font-size: 28px;
				max-height: 28px; 
			}
		}

		@media screen and (max-width: 380px) {
			.icon-group {
				gap: 8px;
			}
			
			.logo-text {
				font-size: 16px;
			}
		}

        /* responsive */
        @media (max-width: 1024px) {
            .product-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
            .carousel-item { flex-direction: column; text-align: center; padding: 40px 24px; }
            .triple-carousel-row { grid-template-columns: 1fr; }
        }
        @media (max-width: 720px) {
            .wrapper { padding: 16px; }
            .top-bar { flex-direction: column; align-items: stretch; }
            .nav-links { flex-wrap: wrap; gap: 12px; }
            .double-panel { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .cat-item { min-width: 40%; }
        }
        @media (max-width: 480px) {
            .product-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
        }
        .micro { font-size: 10px; }
				
		/* Icon group - prevent overflow */
		.icon-group {
			display: flex;
			gap: 15px;
			font-size: 16px;
			color: #303f9f;
			align-items: center;
			position: relative;
			flex-shrink: 1;
			min-width: 0; /* Allows flex items to shrink below content size */
			max-width: 100%;
		}

		/* Search container - flexible */
		.search-container {
			position: relative;
			margin-right: 5px;
			flex: 0 1 auto;
			min-width: 40px; /* Collapses to icon only on smallest screens */
			max-width: 250px;
			transition: all 0.3s ease;
		}

		.search-form {
			display: flex;
			align-items: center;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 40px;
			border: 1px solid rgba(48, 63, 159, 0.2);
			overflow: hidden;
			transition: all 0.3s ease;
			width: 100%;
		}

		.search-input {
			flex: 1;
			border: none;
			padding: 8px 12px;
			font-size: 12px;
			font-family: 'Poppins', sans-serif;
			background: transparent;
			outline: none;
			color: #212121;
			min-width: 0; /* Allows input to shrink */
			width: 100%;
		}

		.search-input::placeholder {
			color: #888;
			font-size: 11px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.search-btn {
			background: transparent;
			border: none;
			padding: 8px 10px;
			cursor: pointer;
			color: #303f9f;
			transition: all 0.2s ease;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}

		.search-btn:hover {
			color: #f57c00;
		}

		/* User icon and cart */
		.icon-group > i, .icon-group .cart-badge {
			flex-shrink: 0;
		}

		.cart-total {
			font-size: 11px;
			background: #303f9f;
			color: white;
			padding: 2px 8px;
			border-radius: 40px;
			white-space: nowrap;
			flex-shrink: 0;
		}

		/* Responsive adjustments for icon-group */
		@media screen and (max-width: 860px) {
			.icon-group {
				gap: 12px;
				margin-left: auto;
				max-width: 60%; /* Prevents taking too much space */
			}
			
			.search-container {
				max-width: 180px;
			}
		}

		@media screen and (max-width: 720px) {
			.top-bar {
				flex-wrap: wrap;
			}
			
			.logo-area {
				flex: 0 0 auto;
			}
			
			.icon-group {
				margin-left: 0;
				width: auto;
				flex: 1 1 auto;
				justify-content: flex-end;
			}
		}

		@media screen and (max-width: 580px) {
			.icon-group {
				width: 100%;
				justify-content: space-between;
				margin-top: 10px;
				gap: 8px;
				max-width: 100%;
			}
			
			.search-container {
				flex: 1 1 auto;
				margin-right: 5px;
				min-width: 120px;
				max-width: none;
			}
			
			.search-form {
				width: 100%;
			}
			
			.search-input {
				padding: 8px 10px;
				font-size: 12px;
			}
			
			.cart-total {
				font-size: 10px;
				padding: 2px 6px;
			}
		}

		@media screen and (max-width: 420px) {
			.icon-group {
				gap: 5px;
			}
			
			.search-container {
				min-width: 100px;
			}
			
			.search-input {
				padding: 8px 6px;
				font-size: 11px;
			}
			
			.search-input::placeholder {
				font-size: 10px;
			}
			
			.search-btn {
				padding: 8px 6px;
			}
		}

		@media screen and (max-width: 320px) {
			.search-container {
				min-width: 80px;
			}
			
			.search-input {
				padding: 8px 4px;
			}
			
			.search-btn {
				padding: 8px 4px;
			}
		}
		
		/* Alert System */
        .alert-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 400px;
        }
        
        .custom-alert {
            background: white;
            backdrop-filter: blur(10px);
            border-left: 4px solid var(--primary);
            border-radius: 12px;
            padding: 16px 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: flex-start;
            gap: 12px;
            animation: slideIn 0.3s ease;
            position: relative;
        }
        
        .custom-alert.success {
            border-left-color: var(--green);
        }
        
        .custom-alert.error {
            border-left-color: var(--red);
        }
        
        .custom-alert.warning {
            border-left-color: var(--orange);
        }
        
        .alert-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        
        .alert-content {
            flex: 1;
        }
        
        .alert-title {
            font-weight: 600;
            font-size: 14px;
            margin-bottom: 4px;
            color: var(--black);
        }
        
        .alert-message {
            font-size: 12px;
            color: var(--text-light);
            line-height: 1.5;
        }
        
        .alert-close {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            font-size: 16px;
            padding: 0 4px;
            transition: color 0.2s ease;
        }
        
        .alert-close:hover {
            color: var(--black);
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
		
		@media (max-width: 720px) {
			.footer-bottom {
				flex-direction: column;
				gap: 20px;
			}
		}