.no-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;      /* Internet Explorer/Edge */
  user-select: none;         /* Standard syntax */
}


body {
  -webkit-user-select: none;
  user-select: none;
  
}

    
    :root {
    --scrollbar-bg: #ffffff; 
    --scrollbar-thumb: #000000; 
}

[data-theme="dark"] {
    --scrollbar-bg: #1A1D24; 
    --scrollbar-thumb: #ffffff;
}
    
::-webkit-scrollbar {
    width: 0.7vw;
    background-color: var(--scrollbar-bg);
    transition: background-color 0.3s;
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 60px;
    border: 2px solid var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color); 
}
    
    
    
    
        /* --- CSS Variables --- */
        :root {
            --bg-color: #f4f7f6;
            --surface-color: #ffffff;
            --text-main: #2b2b2b;
            --text-muted: #6c757d;
            --primary-color: #000000;
            --primary-hover: #333333;
            --primary-text: #ffffff;
            --success-color: #198754;
            --border-color: #e9ecef;
            --shadow: 0 10px 40px rgba(0,0,0,0.08);
            --pill-radius: 50px;
            --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        [data-theme="dark"] {
            --bg-color: #0f1115;
            --surface-color: #1a1d24;
            --text-main: #f8f9fa;
            --text-muted: #a0aab5;
            --primary-color: #ffffff;
            --primary-hover: #cccccc;
            --primary-text: #000000;
            --border-color: #2d323e;
            --shadow: 0 10px 40px rgba(0,0,0,0.5);
        }

        /* --- Global & Animations --- */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; scroll-behavior: smooth; }
        body { background-color: var(--bg-color); color: var(--text-main); transition: var(--transition); overflow-x: hidden; }
        img { max-width: 100%; border-radius: 8px; }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-on-load { animation: fadeInUp 0.8s ease forwards; }

        /* --- Header & Smart Nav --- */
        header {
            position: sticky; top: 0; z-index: 1000;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
        }
        [data-theme="dark"] header { background-color: rgba(26, 29, 36, 0.9); }

        /* Dynamic Header Styles */
        .top-bar {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 5%;
            max-height: 100px;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            opacity: 1;
        }
        
        header.scrolled .top-bar {
            max-height: 0;
            padding-top: 0;
            padding-bottom: 0;
            opacity: 0;
        }

        .logo { font-size: 28px; font-weight: 800; color: var(--primary-color); letter-spacing: 2px; display: flex; align-items: center; }
        .nav-actions { display: flex; gap: 15px; align-items: center; }

        /* --- Logo Image Switcher Styles --- */
        .theme-logo .dark-logo { display: none; }
        [data-theme="dark"] .theme-logo .light-logo { display: none; }
        [data-theme="dark"] .theme-logo .dark-logo { display: inline-block; }
        .theme-logo .light-logo { display: inline-block; }
        
        .header-logo-img { height: 40px; width: auto; vertical-align: middle; }
        .hero-logo-img { height: 100px; width: auto; vertical-align: middle; margin-bottom: 10px; }
        @media (max-width: 768px) {
            .hero-logo-img { height: 70px; }
        }

        /* Smart Menu */
        .smart-nav {
            display: flex; overflow-x: auto; gap: 10px; padding: 10px 5%;
            background: var(--surface-color); border-top: 1px solid var(--border-color);
            scrollbar-width: none; /* Firefox */
        }
        .smart-nav::-webkit-scrollbar { display: none; } /* Chrome */
        
        .nav-link {
            text-decoration: none; color: var(--text-muted);
            padding: 8px 20px; border-radius: var(--pill-radius);
            font-size: 14px; font-weight: 500; white-space: nowrap;
            transition: var(--transition); border: 1px solid transparent;
        }
        .nav-link:hover { color: var(--primary-color); }
        .nav-link.active {
            background-color: var(--primary-color); color: var(--primary-text);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }
        [data-theme="dark"] .nav-link.active { box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3); }

        /* --- Buttons --- */
        button { cursor: pointer; border: none; outline: none; transition: var(--transition); }
        .btn-icon {
            background: var(--bg-color); color: var(--text-main);
            width: 45px; height: 45px; border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            font-size: 18px; border: 1px solid var(--border-color);
        }
        .btn-icon:hover { background: var(--primary-color); color: var(--primary-text); border-color: var(--primary-color); }
        
        .cart-badge {
            position: absolute; top: -5px; right: -5px;
            background: #dc3545; color: white; font-size: 12px; width: 22px; height: 22px;
            border-radius: 50%; display: flex; justify-content: center; align-items: center; font-weight: bold;
        }

        /* --- Main Container & Unified Sections --- */
        .container { max-width: 1300px; margin: 40px auto; padding: 0 20px; }
        
        /* Unified section spacing and alignment */
        section { 
            padding: 60px 0; 
            margin-bottom: 40px; 
            scroll-margin-top: 130px; /* Adjusted Offset for sticky nav on deskops */
            width: 100%;
        } 
        
        .category-title {
            font-size: 26px; font-weight: 700; margin-bottom: 30px;
            color: var(--text-main); display: flex; align-items: center; gap: 10px;
            max-width: 1100px; margin-left: auto; margin-right: auto; /* Aligned with centered grid */
        }
        .category-title::after {
            content: ''; flex: 1; height: 2px; background: var(--border-color); margin-left: 15px;
        }

        /* --- Home Section --- */
        #home-section {
            position: relative;
            width: 100vw;
            height: 100vh;
            margin-left: calc(-50vw + 50%); /* To break out of container and make full screen */
            border-radius: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--bg-color); /* Same as background */
            box-shadow: none;
            margin-top: -120px; /* Offset for header */
            padding-top: 120px; /* Prevent content from hiding behind header */
        }
        #particles-js {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .home-content {
            position: relative;
            z-index: 2;
            text-align: center;
            pointer-events: none;
            padding: 20px;
        }
        .home-content h1 {
            font-size: 5rem;
            color: var(--text-main);
            font-weight: 800;
            letter-spacing: 2px;
            text-shadow: none;
            margin: 0;
            line-height: 1.1;
        }
        .home-content h1 span {
            display: block;
            font-size: 0.4em;
            font-weight: 500;
            color: var(--text-muted);
            margin-top: 10px;
            letter-spacing: 1px;
        }
        @media (max-width: 768px) {
            .home-content h1 { font-size: 3.5rem; }
            #home-section { height: 100vh; margin-top: -120px; padding-top: 120px; }
        }

        /* --- Product Grid & Cards (Updated to exactly 3 items centered) --- */
        .product-grid {
            display: grid; 
            grid-template-columns: repeat(3, 1fr); /* 3 items max per row */
            gap: 30px;
            justify-content: center;
            max-width: 1100px;
            margin: 0 auto; /* Center the grid container */
        }
        
        /* Responsive Grid Adjustments */
        @media (max-width: 992px) {
            .product-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 768px) {
            .product-grid { grid-template-columns: 1fr; max-width: 450px; }
        }

        /* Show only 3 items initially */
        .product-grid .product-card:nth-child(n+4) { display: none; opacity: 0; }
        /* When expanded, show all with animation (They will naturally wrap underneath) */
        .product-grid.expanded .product-card:nth-child(n+4) { display: flex; animation: fadeInUp 0.5s ease forwards; }

        .product-card {
            background-color: var(--surface-color); border: 1px solid var(--border-color);
            border-radius: 20px; padding: 20px; box-shadow: var(--shadow);
            display: flex; flex-direction: column; position: relative;
            overflow: hidden;
        }
        .product-card:hover {  border-color: var(--primary-color); }
        
        .product-img-wrapper { height: 200px; display: flex; justify-content: center; align-items: center; margin-bottom: 15px; cursor: pointer; }
        .product-img-wrapper img { max-height: 100%; object-fit: contain; transition: transform 0.5s; }
        .product-card:hover .product-img-wrapper img { transform: scale(1.08); }
        
        .product-title { font-size: 17px; font-weight: 600; margin-bottom: 10px; flex-grow: 1; }
        .product-price { font-size: 22px; font-weight: 700; color: var(--text-main); margin-bottom: 15px; }

        /* --- Quantity & Add to Cart Controls --- */
        .action-group { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
        .qty-control {
            display: flex; justify-content: space-between; align-items: center;
            background: var(--bg-color); border-radius: var(--pill-radius);
            padding: 5px; border: 1px solid var(--border-color);
        }
        .qty-btn {
            width: 35px; height: 35px; border-radius: 50%;
            background: var(--surface-color); color: var(--text-main);
            font-size: 18px; font-weight: bold; border: 1px solid var(--border-color);
            display: flex; justify-content: center; align-items: center;
        }
        .qty-btn:hover { background: var(--primary-color); color: var(--primary-text); border-color: var(--primary-color); }
        .qty-display { font-weight: 600; font-size: 16px; width: 30px; text-align: center; }

        .btn-add, .btn-info {
            padding: 12px; border-radius: var(--pill-radius); font-weight: 600; font-size: 15px; text-align: center; width: 100%;
        }
        .btn-info { background: transparent; border: 1px solid var(--text-muted); color: var(--text-main); margin-bottom: 5px; }
        .btn-info:hover { background: var(--text-muted); color: white; }
        
        .btn-add { background-color: var(--primary-color); color: var(--primary-text); }
        .btn-add:hover { background-color: var(--primary-hover); }
        .btn-add.added { background-color: var(--success-color); color: white; }

        /* Show More Button */
        .btn-show-more {
            display: block; margin: 30px auto 0; padding: 12px 40px;
            background: transparent; color: var(--primary-color);
            border: 2px solid var(--primary-color); border-radius: var(--pill-radius);
            font-weight: 600; font-size: 16px;
        }
        .btn-show-more:hover { background: var(--primary-color); color: var(--primary-text); }

        /* --- Modals --- */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
            z-index: 2000; display: none; justify-content: center; align-items: center;
            opacity: 0; transition: opacity 0.3s ease;
        }
        .modal-content {
            background-color: var(--surface-color); color: var(--text-main);
            width: 90%; max-width: 550px; border-radius: 24px; padding: 35px;
            position: relative; box-shadow: 0 25px 50px rgba(0,0,0,0.5);
            max-height: 90vh; overflow-y: auto; transform: translateY(50px); transition: transform 0.3s ease;
        }
        .modal-overlay.show { display: flex; opacity: 1; }
        .modal-overlay.show .modal-content { transform: translateY(0); }
        
        .close-modal {
            position: absolute; top: 20px; right: 25px;
            font-size: 24px; cursor: pointer; color: var(--text-muted);
            background: var(--bg-color); width: 40px; height: 40px; border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
        }
        .close-modal:hover { color: #dc3545; background: #ffe6e6; }

        /* Cart Items */
        .cart-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 15px 0; border-bottom: 1px solid var(--border-color);
        }
        .cart-item-info h4 { font-size: 15px; margin-bottom: 5px; }
        .cart-item-price { color: var(--text-main); font-weight: 600; }
        .cart-total { font-size: 22px; font-weight: 800; margin: 25px 0; text-align: right; color: var(--text-main); }
        
        .checkout-form input {
            width: 100%; padding: 15px; margin-bottom: 15px; font-size: 15px;
            border: 1px solid var(--border-color); border-radius: 12px;
            background: var(--bg-color); color: var(--text-main);
        }
        .checkout-form input:focus { outline: 2px solid var(--primary-color); }
        .btn-order { width: 100%; padding: 18px; font-size: 18px; border-radius: var(--pill-radius); background: #25D366; color: white; font-weight: bold; }
        .btn-order:hover { filter: brightness(1.1); }
        
        /* Back to Top Button Styles */
        #backToTop {
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background-color: var(--primary-color);
          color: var(--primary-text);
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          z-index: 1000;
          opacity: 0;
          visibility: hidden;
          transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
          transform: translateY(20px);
        }

        #backToTop.show {
          opacity: 1;
          visibility: visible;
          transform: translateY(0);
        }

        #backToTop i {
          font-size: 20px;
          z-index: 10;
        }

        /* Floating Cart Button Styles */
        #floating-cart {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        }

        #floating-cart.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        #floating-cart .btn-icon {
            width: 50px;
            height: 50px;
            background-color: var(--primary-color);
            color: var(--primary-text);
            border-color: var(--primary-color);
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        #floating-cart .btn-icon:hover {
            transform: scale(1.1);
        }

        #floating-cart .cart-badge {
            top: -5px;
            right: -5px;
            width: 24px;
            height: 24px;
            font-size: 13px;
        }

        /* Scroll Progress Circle */
        .progress-circle {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          transform: rotate(-90deg);
        }

        .progress-circle path {
          fill: none;
          stroke: var(--primary-color);
          stroke-width: 4;
          stroke-linecap: round;
          stroke-dasharray: 307.919;
          stroke-dashoffset: 307.919;
          transition: stroke-dashoffset 0.1s linear;
        }

        /* Lightbox Modal Styles */
        .modal {
          display: none;
          position: fixed;
          z-index: 2000;
          padding-top: 50px;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0, 0, 0, 0.9);
          opacity: 0;
          transition: opacity 0.3s ease;
        }

        .modal.show {
          display: block;
          opacity: 1;
        }

        .modal-content {
          margin: auto;
          display: block;
          max-width: 90%;
          max-height: 85vh;
          width: auto; /* Preserve original width */
          height: auto; /* Preserve original height */
          border-radius: 12px;
          box-shadow: 0 15px 50px rgba(0, 0, 0, 0.5);
        }

        /* Enhanced Image Zoom Modal Close Button */
        .close-modal-fixed {
            position: fixed;
            top: 25px;
            right: 30px;
            font-size: 28px;
            color: #ffffff;
            background: rgba(255, 255, 255, 0.15);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 2200;
            backdrop-filter: blur(5px);
        }
        .close-modal-fixed:hover {
            background: #dc3545;
            color: #fff;
            transform: scale(1.1) rotate(90deg);
        }

        /* Smart Install App Button Styles */
        #smart-install-btn {
            position: fixed;
            bottom: 25px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background-color: var(--primary-color);
            color: var(--primary-text);
            border: 2px solid var(--primary-color);
            padding: 12px 28px;
            border-radius: var(--pill-radius);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            z-index: 1001;
            box-shadow: 0 10px 25px rgba(0,0,0,0.3);
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0;
            visibility: hidden;
        }

        #smart-install-btn.show {
            transform: translateX(-50%) translateY(0);
            opacity: 1;
            visibility: visible;
        }

        #smart-install-btn:hover {
            background-color: transparent;
            color: var(--primary-color);
            background: var(--surface-color);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }