/* Custom Font and Global Styles */
        @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

        body {
            font-family: 'Inter', sans-serif;
            /* Changed to Public Sans */
            color: #111827;
            /* Dark text for the light sections */
            background-color: #ffffff;
            position: relative;
        }

        /* Hero Text Style Matching the Image */
        .hero-title {
            font-family: 'Inter', sans-serif;
            /* Keep Inter for the hero text */
            font-size: clamp(2.5rem, 5vw, 5.5rem);
            line-height: 1.1;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 10px;
            color: #ffffff;
            text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            /* Subtle shadow for readability */
        }

        /* Custom Hover Effect for Category Cards */
        .category-card {
            transition: transform 0.3s ease;
            /* Keep only transform for scaling */
            /* Removed filter: grayscale(0.1); and box-shadow */
        }

        .category-card:hover {
            transform: scale(1.02);
            /* Removed filter: grayscale(0); and box-shadow */
        }

        /* Style for the Trending Categories Heading */
        .categories-heading {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            /* Bold weight for the serif heading */
        }

        /* New Style for the Category Card Text */
        .category-name {
            font-family: 'Playfair Display', serif;
            font-weight: 600;
            /* Semi-bold weight for readability on the image */
        }

        /* Custom gradient for a smoother fade at the bottom of the hero section */
        .hero-fade {
            /* Fade from fully transparent to white over 50% of the height */
            height: 50%;
            background: linear-gradient(to top,
                    rgb(0, 0, 0) 0%,
                    /* Solid white at the bottom */
                    rgba(0, 0, 0, 0.5) 40%,
                    /* Semi-transparent in the middle */
                    rgba(0, 0, 0, 0) 100%
                    /* Fully transparent at the top */
                );
        }

        /* Custom gradient for the top fade-out (to highlight the navbar) */
        .navbar-fade {
            height: 15%;
            /* Only fade in the top 15% of the hero section */
            background: linear-gradient(to bottom,
                    rgba(0, 0, 0, 0.5) 0%,
                    /* Dark/Black at the very top */
                    rgba(0, 0, 0, 0.1) 60%,
                    /* Slightly transparent */
                    rgba(0, 0, 0, 0) 100%
                    /* Fully transparent below the navbar */
                );
        }


        .form-control {
            font-family: 'Inter', sans-serif;
        }

        .content-container {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            max-width: 1440px;
            padding-left: 1.5rem;
            padding-right: 1.5rem;
        }

        .mini-container {
            margin-left: auto;
            margin-right: auto;
            width: 100%;
            max-width: 1170px;
            padding-left: 1rem;
            padding-right: 1rem;
        }


        /* Product Card Styling (Retained from previous step) */
        .product-card {}

        .product-card-image {
            background-color: white;
            border-radius: 16px;
            /* border: 1px solid #e4e4e7;  */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
            transition: box-shadow 0.2s ease, transform 0.2s ease;
        }

        .product-card-image:hover {
            box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
            transform: translateY(-4px);
        }

        .product-card-image-sml {
            background-color: white;
            border-radius: 8px;
            border: 1px solid #e4e4e7;
        }


        /* Styling for the Add to Cart Button to be solid blue (Retained) */
        .add-to-cart-btn {
            background-color: #ef4444;
            /* Bright blue color */
            color: white;
            font-weight: 500;
            font-size: 14px;
            height: 40px;
            padding: 0 16px;
            border-radius: 0.5rem;
            transition: background-color 0.2s;
        }

        .add-to-cart-btn:hover {
            background-color: #111827;
        }

        .accordian-outer {
            border: 1px solid #e4e4e7;
            padding: 6px 16px;
        }

        /* Custom style for the dark footer (Retained) */
        .footer-bg {
            background-color: #111827;
        }

        /* Initial state of the heart icon (Retained) */
        .heart-icon {
            color: #9ca3af;
            transition: color 0.2s;
        }

        /* Active state for the filled heart (Retained) */
        .heart-icon.active {
            color: #ef4444;
        }

        /* --- FILTER STYLING (Retained) --- */
        .filter-section-title {
            color: #111827;
            font-weight: 600;
            font-size: 1rem;
            padding: 0.5rem 0;
            /* margin-bottom: 0.5rem;  */
        }

        /* Custom Checkbox Appearance (Retained) */
        .filter-checkbox {
            appearance: none;
            width: 1.125rem;
            height: 1.125rem;
            border: 1px solid #d1d5db;
            border-radius: 0.25rem;
            cursor: pointer;
            position: relative;
            background-color: white;
            flex-shrink: 0;
            transition: border-color 0.2s, background-color 0.2s;
        }

        .filter-checkbox:checked {
            background-color: #0085DB;
            border-color: #0085DB;
        }

        /* Custom checkmark using pseudo-element (Retained) */
        .filter-checkbox:checked::after {
            content: "\f00c";
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: white;
            font-size: 0.7rem;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* --- DUAL SLIDER STYLES (Retained) --- */
        .slider-wrapper {
            position: relative;
            height: 10px;
            margin: 0 5px;
        }

        /* Background Track */
        .slider-track {
            position: absolute;
            width: 100%;
            height: 6px;
            background: #e5e7eb;
            /* Light gray background track */
            border-radius: 3px;
            top: 50%;
            transform: translateY(-50%);
        }

        /* Filled Range */
        .slider-range-fill {
            position: absolute;
            height: 4px;
            background: #0085DB;
            /* Blue fill color */
            border-radius: 3px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 1;
        }

        /* Base style for range inputs (overlay) */
        .range-input {
            position: absolute;
            width: 100%;
            height: 100%;
            background: none;
            pointer-events: none;
            -webkit-appearance: none;
            appearance: none;
            margin: 0;
            padding: 0;
            top: -8px;
            left: 0;
            z-index: 2;
        }

        .range-input::-webkit-slider-runnable-track {
            background: none;
            height: 0;
        }

        .range-input::-moz-range-track {
            background: none;
            height: 0;
        }

        /* Style the Thumb (Handle) */
        .range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #0085DB;
            /* Blue thumb */
            cursor: pointer;
            border: 3px solid white;
            /* White ring */
            pointer-events: all;
            box-shadow: 0 0 0 1px #0085DB;
            /* Subtle ring for contrast */
        }

        .range-input::-moz-range-thumb {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #0085DB;
            cursor: pointer;
            border: 3px solid white;
            pointer-events: all;
            box-shadow: 0 0 0 1px #0085DB;
        }



        /* Custom scrollbar for related products (Webkit only) */
        .related-products-scroll::-webkit-scrollbar {
            height: 6px;
        }

        .related-products-scroll::-webkit-scrollbar-thumb {
            background-color: #d1d5db;
            /* Gray-300 */
            border-radius: 3px;
        }

        .related-products-scroll::-webkit-scrollbar-thumb:hover {
            background-color: #9ca3af;
            /* Gray-400 */
        }

        /* Custom Color Swatch Ring */
        .color-swatch-selected {
            outline: 2px solid #000000;
            /* Black ring for selection */
            outline-offset: 1px;
        }

        /* --- QUANTITY INPUT STYLING --- */
        .custom-quantity-container {
            display: flex;
            border: 1px solid #d1d5db;
            /* Light gray border */
            border-radius: 8px;
            /* Rounded corners for the whole group */
            overflow: hidden;
            /* Important to keep borders neat */
        }

        /* Input field itself */
        .custom-quantity-input-field {
            width: 50px;
            /* Fixed width for the number area */
            text-align: center;
            border: none;
            padding: 8px 0;
            font-size: 1.125rem;
            /* text-lg */
            font-weight: 500;
            /* medium */
            color: #111827;
            outline: none;
        }

        /* Container for the up/down buttons */
        .custom-quantity-controls {
            display: flex;
            flex-direction: column;
            border-left: 1px solid #d1d5db;
            /* Separator line */
        }

        /* Individual control button */
        .custom-quantity-button {
            width: 28px;
            /* Fixed width for buttons */
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;
            border: none;
            cursor: pointer;
            transition: background-color 0.1s;
        }

        /* Separator for the two buttons */
        .custom-quantity-button:first-child {
            border-bottom: 1px solid #d1d5db;
        }

        .custom-quantity-button:hover {
            background-color: #f3ff4f6;
            /* Very light gray on hover */
        }

        /* Style for the horizontal list items in the related section */
        .related-list-item {
            flex-shrink: 0;
            width: 320px;
            /* Fixed width for each item for consistent horizontal scroll */
            padding-bottom: 8px;
            /* Space for horizontal scrolling indicators */
        }

        .related-list-container {
            border-top: 1px solid #e5e7eb;
            /* Light gray separator line */
            padding-top: 16px;
        }


        /* --- RIGHT PANEL STYLING (4 SEPARATE CARDS) --- */
        .summary-card {
            background-color: white;
            border: 1px solid #e4e4e7;
            border-radius: 8px;
            padding: 16px;
        }

        /* Cart Items Box Style (Left Column) */
        /* .cart-items-box {
            background-color: white;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            padding: 15px;
        } */

        /* Promo Code Input/Button Group Styling */
        .promo-input-group {
            display: flex;
            align-items: stretch;
            gap: 0;
            width: 100%;
        }

        .promo-input {
            padding: 12px;
            flex-grow: 1;
            min-width: 0;
            border: 1px solid #d1d5db;
            border-right: none;
            border-radius: 8px 0 0 8px;
            font-size: 1rem;
            color: #111827;
            outline: none;
        }

        .promo-apply-btn {
            background-color: #030712;
            color: white;
            padding: 12px 20px;
            font-weight: 500;
            flex-shrink: 0;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
            transition: background-color 0.2s;
            line-height: 1.25rem;
            font-size: 1rem;
        }

        /* Checkout Button Card Specifics */
        .checkout-card {
            padding: 0 !important;
            border: 1px solid #F0F0F0;
            border-radius: 8px;
            overflow: hidden;
        }

        .checkout-btn {
            background-color: #007bff;
            color: white;
            font-weight: 600;
            padding: 16px;
            text-align: center;
            cursor: pointer;
            transition: background-color 0.2s;
            display: block;
            width: 100%;
        }

        .checkout-btn:hover {
            background-color: #0056b3;
        }

        /* --- LEFT PANEL & UTILITIES --- */

        /* Quantity Group: Controls the outer vertical borders and rounding. */
        .quantity-group {
            display: flex;
            align-items: stretch;
            /* Only keeps the outer vertical borders */
            border: 1px solid #e5e7eb;
            border-top: none;
            /* Removed horizontal line across buttons */
            border-bottom: none;
            /* Removed horizontal line across buttons */
            border-radius: 4px;
            overflow: hidden;
            width: 100px;
            height: 36px;
            background-color: white;
        }

        /* Quantity Buttons: Fully borderless, only for icon display */
        .quantity-btn {
            width: 30px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
            color: #111827;
            transition: color 0.1s;
            border: none;
            /* Ensures no border on the button itself */
            cursor: pointer;
            line-height: 1;
            padding: 0;
            flex-shrink: 0;
        }

        .quantity-btn i {
            font-weight: 900;
            font-size: 0.875rem;
        }

        /* Quantity Input: Adds the internal vertical dividers AND the external top/bottom border for the number box */
        .quantity-input {
            flex-grow: 1;
            text-align: center;
            background-color: white;

            /* Apply borders to make the number field a full box (4 sides) */
            border: none;
            border-top: 1px solid #e5e7eb;
            border-bottom: 1px solid #e5e7eb;

            /* Keep left and right borders as internal dividers */
            border-left: 1px solid #e5e7eb;
            border-right: 1px solid #e5e7eb;

            font-size: 0.875rem;
            font-weight: 500;
            color: #111827;
            outline: none;
            height: 100%;
            width: 40px;
        }


        .item-row {
            border-bottom: 1px solid #e4e4e7;
            padding: 0 0 20px 0;
            margin-bottom: 20px;
        }

        .item-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .line-item-row {
            padding: 8px 0;
        }

        #mobile-menu-button .fa-times {
            color: #ffffff;
        }

        /* .nav-dropdown-mobile { }
        .nav-dropdown-mobile button { padding: 12px 0; width: 100%; text-align: left;}
        .nav-dropdown-mobile-inner { position: static;} */


        /* ----**** [ back-to-top button ] ****---- */

        .back-to-top {
            position: fixed;
            right: 24px;
            bottom: 24px;
            z-index: 0;
            background: rgba(223, 65, 75, 1);
            width: 40px;
            height: 40px;
            visibility: hidden;
            opacity: 0;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            border-radius: 6px;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -ms-transition: all 0.4s;
            transition: all 0.4s;
        }

        .back-to-top svg {
            font-size: 28px;
            color: #ffffff;
            line-height: 0;
        }

        .back-to-top:hover {
            background: rgba(223, 65, 75, 0.5);
        }

        .back-to-top:hover i {
            color: #FFFFFF;
        }

        .back-to-top.active {
            visibility: visible;
            opacity: 1;
        }


        /*** 24 April 2024 ***/
        .check-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .footer-row {
            display: flex;
            flex-wrap: wrap;
            gap: 30px;
            margin-bottom: 30px;
        }

        .footer-row-logo {
            width: calc(30% - 15px);
        }

        .footer-row-widgets {
            width: calc(100% - 15px);
            display: flex;
            justify-content: space-between;
            gap: 100px;
        }
        .footer-widget{
            flex: 1;
        }
        nav a.active{
            border-bottom: 2px solid rgb(204, 0, 0);
        }
        /*----------------------------------
    MOBILE LAYOUT: 320px
-----------------------------------*/

        @media only screen and (max-width: 767px) {

            .content-container {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .check-list {
                flex-wrap: nowrap;
            }

            .banner-sec {
                min-height: 1px !important;
            }

            .banner-container.min-h-screen {
                padding-top: 0px;
                padding-bottom: 0;
            }

            .checlist-card {
                padding: 10px !important;
            }

            .checlist-card .checlist-card-container {
                flex-wrap: wrap;
            }

            footer #logoWhite {
                margin: 0 auto;
            }

            footer .leading-relaxed {
                text-align: center;
            }

            .footer-row {
                flex-direction: column;
            }

            .footer-row-logo {
                width: calc(100% - 15px);
            }

            .footer-row-widgets {
                width: calc(100% - 16px);
                display: flex;
                justify-content: start;
                gap: 16px;
                flex-wrap: wrap;
            }

            .business-card{
                display: flex;
                justify-content: center;
            }
            body{
                overflow-x: hidden;
            }
            .banner-sec{
                background-image: url('images/mobile-bg.webp') !important;
            }
            footer .footer-widget{
                flex: auto;
                text-align: center;
            }
            .login-buttons{
                justify-content: center;
                text-align: center;
                margin-bottom: 30px;
            }
        }