@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Montserrat:wght@400;600;700&display=swap");
        body {
            font-family: 'Montserrat', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8; /* Lighter, subtle background */
            color: #333;
        }
        .main-header {
            display: flex;
            align-items: center;
            justify-content: space-between; /* Distribute space between items */
            padding: 20px 60px;
            margin-top: 20px; /* Added margin for spacing from top */
            flex-wrap: wrap; /* Allow items to wrap on smaller screens */
        }
        .header-logo {
            height: 160px; /* Adjust size as needed */
            width: auto;
            object-fit: contain;
        }
        h1 {
            font-family: 'Montserrat', sans-serif;
            color: #222; /* Darker for premium feel */
            margin: 0; /* Remove default h1 margins */
            font-weight: 700;
            font-size: 2.5em;
            text-align: center; /* Center text for better mobile display */
            flex-grow: 1; /* Allow h1 to take available space */
        }

        .card-base {
            border: none;
            padding: 20px;
            text-align: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            background-color: #fff;
            border-radius: 12px;
            overflow: hidden;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: flex;
            flex-direction: column;
            min-height: 380px; /* Set a minimum height for consistency, but allow content to expand */
        }

        .card-base:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
        }

        .card-image-base {
            max-width: 100%;
            object-fit: contain;
            margin-bottom: 15px;
            border-radius: 8px;
            /* Removed aspect-ratio: 1/1 to allow more flexible sizing */
            height: auto; /* Allow height to adjust */
        }

        /* Media query for tablet and desktop image sizing */
        @media (min-width: 769px) {
            .card-image-base {
                max-width: 250px; /* Limit image width on larger screens */
                max-height: 250px; /* Limit image height on larger screens */
                width: auto; /* Allow width to adjust based on aspect ratio */
                height: auto; /* Allow height to adjust based on aspect ratio */
                object-fit: contain; /* Ensure image fits without cropping */
            }
        }

        #products-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 60px;
            padding: 60px;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        .product-card {
            @extend .card-base;
            justify-content: space-between;
            width: 100%;
        }

        .product-image {
            @extend .card-image-base;
        }
        .product-name {
            font-family: 'Montserrat', sans-serif;
            font-size: 1.3em; /* Slightly larger font size */
            margin: 10px 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #333;
            font-weight: 600; /* Medium bold */
        }
        .product-price {
            font-family: 'Lato', sans-serif;
            font-size: 1.2em; /* Slightly larger price font */
            color: #555; /* Neutral color for price */
            margin-bottom: 20px; /* More space above button */
            font-weight: 700; /* Bold price */
        }
        .add-to-cart-btn {
            background-color: #4a4a4a; /* Darker, more premium button color */
            color: white;
            border: none;
            padding: 12px 20px; /* More padding for a larger button */
            cursor: pointer;
            border-radius: 8px; /* More rounded button corners */
            width: 100%;
            align-self: flex-end;
            transition: background-color 0.2s ease, transform 0.1s ease;
            font-size: 1em;
            font-weight: 600;
        }
        .add-to-cart-btn:hover {
            background-color: #333; /* Slightly darker on hover */
            transform: translateY(-2px); /* Subtle lift on hover */
        }
        .add-to-cart-btn:active {
            transform: scale(0.98); /* Slight scale-down on click */
            transition: transform 0.1s ease;
        }
        /* Cart Icon and Modal Styles */
        #cart-icon-container {
            position: fixed;
            top: 20px;
            right: 20px;
            background-color: #fff; /* White background for a clean look */
            color: #333; /* Dark text */
            padding: 10px 15px;
            border-radius: 50px; /* Pill shape */
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Softer shadow */
            z-index: 1000;
            transition: all 0.3s ease;
        }

        #cart-icon-container:hover {
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
            transform: translateY(-2px);
        }

        #cart-item-count {
            background-color: #4a4a4a; /* Muted, dark background */
            color: #fff; /* White text */
            border-radius: 50%;
            padding: 5px 9px;
            font-size: 0.9em;
            font-weight: 600;
            line-height: 1; /* Ensure text is centered */
        }

        .modal, .product-detail-modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1001; /* Sit on top */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: auto; /* Enable scroll if needed */
            background-color: rgba(0,0,0,0.6); /* Darker, more prominent overlay */
            backdrop-filter: blur(5px); /* Subtle blur for aesthetic */
            justify-content: center;
            align-items: center;
        }

        .modal-content, .product-detail-content {
            background-color: #ffffff; /* Pure white for a clean look */
            margin: auto;
            padding: 30px; /* More padding */
            border: none; /* Remove border */
            width: 90%; /* Wider modal content */
            max-width: 500px; /* Adjusted max-width for cart modal for a minimal feel */
            border-radius: 15px; /* More rounded corners */
            box-shadow: 0 10px 30px rgba(0,0,0,0.15); /* Softer, larger shadow */
            position: relative;
            animation: fadeIn 0.3s ease-out; /* Add fade-in animation */
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .product-detail-content {
            text-align: center;
            border-radius: 15px; /* Added for consistency with cart modal */
        }

        .product-detail-image {
            max-width: 100%;
            height: auto;
            max-height: 700px; /* Increased for more vertical image space */
            object-fit: contain;
            margin-bottom: 20px;
            border-radius: 8px;
        }

        .product-detail-name {
            font-family: 'Montserrat', sans-serif;
            font-size: 2em;
            margin: 15px 0 10px;
            color: #333;
            font-weight: 700;
        }

        .product-detail-price {
            font-family: 'Lato', sans-serif;
            font-size: 1.5em;
            color: #555;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .product-detail-description {
            font-family: 'Lato', sans-serif;
            font-size: 1em;
            color: #666;
            margin-bottom: 20px;
            line-height: 1.6;
            text-align: left;
        }

        .close-button {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close-button:hover,
        .close-button:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        .cart-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #eee;
            transition: background-color 0.2s ease;
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .cart-item:hover {
            background-color: #f9f9f9;
        }

        .cart-item img {
            width: 60px; /* Larger image */
            height: 60px; /* Larger image */
            object-fit: cover;
            border-radius: 8px; /* More rounded corners for images */
            margin-right: 15px;
        }

        .cart-item span {
            font-size: 1em;
            color: #333;
        }

        .cart-item .item-details {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .cart-item .item-name {
            font-weight: 600;
            margin-bottom: 5px;
        }

        .cart-item .item-price {
            font-weight: 400;
            color: #666;
        }

        .cart-item .quantity-controls {
            display: flex;
            align-items: center;
            margin-left: auto; /* Push to the right */
        }
        
        .cart-item .quantity-controls button {
            background-color: #f0f0f0; /* Light background for quantity buttons */
            color: #555;
            border: 1px solid #ddd;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
            font-weight: 600;
            transition: background-color 0.2s ease;
            margin-right: 5px;
        }

        .cart-item .quantity-controls button:last-child {
            margin-right: 10px; /* Spacing next to the '+' button */
        }

        .cart-item .quantity-controls button:hover {
            background-color: #e0e0e0;
        }

        .cart-item .quantity-controls span {
            margin: 0 10px;
            font-weight: 700;
            color: #333;
        }

        /* Mobile-first adjustments */
        @media (max-width: 768px) {
            .main-header {
                flex-direction: column; /* Stack logo and title vertically */
                justify-content: center;
                align-items: center;
                padding: 15px 20px; /* Adjust padding for mobile */
            }

            .header-logo {
                height: 100px; /* Adjust logo size for mobile */
                margin-bottom: 10px; /* Space between logo and title */
            }

            h1 {
                font-size: 2em;
                margin-top: 10px;
                margin-bottom: 10px;
            }

            #products-container {
                grid-template-columns: 1fr; /* Single column for mobile */
                gap: 20px;
                padding: 20px;
            }

            .product-card {
                width: 100%; /* Fill screen width up to max-width */
                margin: 0 auto; /* Center the card */
                height: auto; /* Allow height to adjust based on content */
                max-width: 350px; /* Max width for slightly larger mobile devices */
            }

            .product-image {
                height: 180px; /* Fixed height for consistency on mobile */
                width: 100%; /* Fill available width */
                object-fit: contain; /* Ensure image fits without cropping */
            }

            .product-name {
                font-size: 1.1em;
            }

            .product-price {
                font-size: 1em;
            }

            .add-to-cart-btn {
                padding: 10px 15px;
                font-size: 0.9em;
            }

            #cart-icon-container {
                top: 10px;
                right: 10px;
                padding: 8px 12px;
                gap: 5px;
            }

            #cart-item-count {
                padding: 4px 7px;
                font-size: 0.8em;
            }

            .modal-content {
                width: 95%; /* Wider modal content for mobile */
                padding: 15px;
            }

            .product-detail-modal {
                width: 100vw;
                height: 100vh;
                top: 0;
                left: 0;
                margin: 0; /* Remove any default margins */
                /* Removed align-items: center for better mobile scroll */
            }

            .product-detail-content {
                width: 90%;
                max-height: 90vh; /* Set max-height to 90% of viewport height */
                margin: 0; /* Override margin: auto for full screen */
                border-radius: 15px; /* Restore rounded corners for full screen */
                padding: 15px; /* Keep padding */
                overflow-y: auto; /* Enable scrolling for content if needed */
                /* Removed align-items:center for better content flow */
            }

            .product-detail-image {
                max-height: 80%; /* Ensure image fits within the popup's height */
                width: auto; /* Maintain aspect ratio */
            }

            .product-detail-name {
                font-size: 1.5em;
            }

            .product-detail-price {
                font-size: 1.2em;
            }

            .product-detail-description {
                font-size: 0.9em;
            }
        }

        .category-section {
            margin-bottom: 40px;
            padding: 0 60px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .category-section h2 {
            font-family: 'Montserrat', sans-serif;
            color: #222;
            font-weight: 700;
            font-size: 2em;
            margin-bottom: 20px;
            text-align: left;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }

        .catalog-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
            justify-content: center;
        }

        .catalog-card {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-decoration: none;
            color: inherit;
            display: block;
        }

        .catalog-card:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .catalog-card-image-wrapper {
            width: 100%;
            padding-top: 100%; /* 1:1 Aspect Ratio */
            position: relative;
        }
        
        .catalog-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .catalog-card-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            text-align: center;
            height: 100%;
            box-sizing: border-box;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .catalog-card:hover .catalog-card-overlay {
            opacity: 1;
        }

        .catalog-name {
            font-family: 'Montserrat', sans-serif;
            color: #fff;
            font-size: 1.2em;
            font-weight: 600;
            margin: 0 0 10px 0;
        }

        .view-catalog-btn {
            font-family: 'Lato', sans-serif;
            background-color: #00CC99; /* Accent color */
            color: #fff;
            border: none;
            padding: 8px 15px;
            border-radius: 5px;
            cursor: pointer;
            text-transform: uppercase;
            font-weight: 700;
            font-size: 0.8em;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .catalog-card:hover .view-catalog-btn {
            opacity: 1;
        }
        @media (min-width: 769px) {
            .catalog-cards-container {
                grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
                justify-content: center; /* Center the grid items */
            }

            .catalog-card {
                max-width: 320px; /* Fixed width for desktop */
                box-shadow: 0 10px 20px rgba(0,0,0,0.1), 0 6px 6px rgba(0,0,0,0.12); /* Floating effect */
            }

            .catalog-card:hover {
                transform: translateY(-5px) scale(1.03); /* Lift and slightly zoom */
                box-shadow: 0 15px 30px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.1);
            }
        }

        @media (max-width: 768px) {
            .category-section {
                padding: 0 20px;
            }

            .category-section h2 {
                font-size: 1.8em;
                text-align: center;
            }

            .catalog-cards-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
        }