*{
        margin: 0px;
        padding: 0px;
        font-family: Arial bold, Helvetica, sans-serif;
        box-sizing: border-box; 
       }

       html, body {
        width: 100%;
        overflow-x: hidden;
       }

       #pre-nav{
        width: 100%; /* Fix: Was 100vw, which causes horizontal scroll */
        height: 6vh;
        background-color: #FB6900;
        color: white;
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: 1em;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 0 5px;
       } 

       .i1{
        cursor: pointer;
        height: auto;
        width: auto;
       }

       #main-ad{
        min-height: 50vh;
        width: 85vw;
        margin: auto;
       }

       .main-nav {
            width: 100%; /* Fix: Was 85vw, made it 100% of its parent (#main-ad) */
            background-color: #fff;
            border-bottom: 1px solid #D9D9D9;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 70px;
        }
        .nav-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .nav-logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #000;
            text-decoration: none;
        }
        .nav-links {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .nav-link {
            padding: 0 15px;
            font-size: 0.9rem;
            font-weight: 500;
            color: #333;
            text-decoration: none;
            cursor: pointer;
        }

        .nav-link a{
            text-decoration: none;
            color: #333;
        }
        
        .nav-link:hover {
            color: #000;
        }

        .nav-link a:hover {
            color: #000;
        }

        .nav-icons {
            display: flex;
            align-items: center;
        }
        
        .nav-icon {
            width: 24px;
            height: 24px;
            margin-left: 20px;
            cursor: pointer;
        }
        
        .hamburger-menu {
            display: none;
            font-size: 24px;
            font-weight: bold;
        }
       .ads img{
        width: 100%; 
        height: auto; 
       }

       #best-sellers p{
        margin: 3%  7%;
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 500;
       }

       #best-sellers-prod{
        width: 85vw;
        margin: 0%  7%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; 
       }

       .prod {
        width: 24%; 
        min-width: 250px; 
        margin-bottom: 20px; 
        display: flex;
        flex-direction: column;
       }

       .prod .i2{
        height: auto;
        width: 100%;
       }

       .prod-details {
        display: flex;
        flex-direction: column;
        flex-grow: 1; 
       }

       .prod-details p{
        font-family: Arial bold, Helvetica, sans-serif;
       }

       .prod-details .p1{
        font-size: large;
        font-weight: bold;
        flex-grow: 1; 
       }

       .prod-details .p2{
        font-weight: bold;
       }

       .prod-details button{
        color: white;
        background-color: black;
        height: 7vh;
        width: 100%; 
        border: black;
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: medium;
        margin-top: auto;
        cursor: pointer;
       }

       .prod-footer{
        height: 10vh;
        width: 85vw;
        margin: 3%  7%;
        display: flex;
        justify-content: center;
        align-items: center;
       }

       .prod-footer button{
        background-color: white;
        height: 8vh;
        width: 15vw;
        min-width: 200px;
        font-size: medium;
        cursor: pointer;
       }

       .ad-1{
        margin: 3%  7%;
        width: 85vw;
       }
       
       .ad-1 img {
        width: 100%;
        height: auto;
       }

       #shop-by-category{
        margin: 3%  7%;
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 500;
       }

       #category{
        width: 85vw;
        margin: 0%  7%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; 
       }

       .i3{
        width: 100%; 
        height: auto;
       }

       .cate-prod{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 24%;
        min-width: 200px;
        margin-bottom: 20px;
       }

       .cate-prod p{
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: medium;
        margin-top: 10px;
       }

       #shop-by-concern{
        margin: 3%  7%;
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 500;
       }

       #concern{
        width: 85vw;
        margin: 0%  7%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
       }

       .con-prod{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 24%;
        min-width: 200px;
        margin-bottom: 20px;
       }

       .con-prod p{
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: medium;
        margin-top: 10px;
       }

       #new p{
        margin: 3%  7%;
        font-family: Arial bold, Helvetica, sans-serif;
        font-size: 2em;
        font-weight: 500;
       }

       #new-prod{
        width: 85vw;
        margin: 0%  7%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; 
       }

       .features-section {
            width: 100%; 
            text-align: center;
            padding: 20px 0; 
        }

        .features-header {
            max-width: 85vw; 
            margin: 0 auto; 
            margin-bottom: 50px;
        }

        .features-header h2 {
            font-size: 2.2rem; 
            font-weight: 600;
            color: #000;
            margin-bottom: 15px;
        }

        .features-header p {
            font-size: 1rem;
            color: #555;
            line-height: 1.6;
        }

        .features-container {
            display: flex;
            flex-wrap: wrap; 
            justify-content: center; 
            margin: 0 auto;
            max-width: 85vw;
        }

        .feature-item {
            flex-basis: 220px;
            margin: 20px; 
        }

        .feature-icon {
            height: 60px;
            margin-bottom: 25px;
        }

        .feature-icon img {
            width: 60px;
            height: 60px;
        }

        .feature-item h3 {
            font-size: 1.1rem;
            font-weight: 600;
            color: #000;
            margin-bottom: 10px;
        }

        .feature-item p {
            font-size: 0.9rem;
            color: #555;
            line-height: 1.5;
        }

        .testimonials-section {
            width: 100%; 
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        .section-title {
            font-size: 1.8rem; 
            font-weight: 600;
            color: #000;
            margin-bottom: 25px;
            padding-left: 10px;
        }

        .slider-container {
            position: relative;
        }

        .slider-wrapper {
            overflow-x: auto;
            -ms-overflow-style: none; 
            scrollbar-width: none; 
        }

        .slider-track {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 20px; 
        }

        .review-card {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 360px;
            border: 1px solid #e9e9e9;
            border-radius: 12px;
            padding: 24px;
            background: #fff;
            margin-right: 20px;
            display: flex;
            flex-direction: column;
            min-height: 320px; 
        }
        
        .review-card:first-child {
            margin-left: 5px;
        }
        .review-card:last-child {
            margin-right: 5px;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .user-name {
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        .user-name span {
            color: #555;
            font-weight: 500;
            font-size: 0.85rem;
            margin-left: 4px;
        }

        .review-date {
            font-size: 0.8rem;
            color: #777;
        }

        .review-stars {
            color: #000;
            font-size: 1.1rem;
            margin-bottom: 12px;
            letter-spacing: 2px;
        }

        .review-title {
            font-weight: 600;
            font-size: 1.1rem;
            color: #000;
            margin-bottom: 8px;
        }

        .review-body {
            font-size: 0.9rem;
            color: #333;
            line-height: 1.6;
            flex-grow: 1; 
        }

        .review-body span { 
            font-weight: 600;
            color: #000;
            cursor: pointer;
        }

        .product-snippet {
            display: flex;
            align-items: center;
            border-top: 1px solid #f0f0f0;
            padding-top: 15px;
            margin-top: 20px; 
        }

        .product-image {
            width: 40px;
            height: 40px;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .product-image img {
            width: 100%;
            height: 100%;
            border: 1px solid #eee;
            border-radius: 4px;
        }

        .product-name {
            font-size: 0.85rem;
            color: #555;
            line-height: 1.4;
        }

        .slider-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            background-color: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            font-weight: 300;
            color: #333;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        #pre-footer{
            width: 85vw;
            display: flex;
            justify-content: space-between;
            margin: 3% 7%;
            flex-wrap: wrap;
        }

        .pf{
            border: 1px solid #D9D7D4;
            width: 49%; 
            min-width: 300px;
            margin-bottom: 20px;
        }

        .i4{
            width: 100%;
            height: auto;
        }

        .pf-con{
            display: flex;
            flex-wrap: wrap;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .pf-con-head{
            font-size: 2rem;
            text-align: center;
        }

        .pf-con-body{
            color: #777;
            text-align: center;
        }

        .pf-con-btn button{
            background-color: white;
            height: 8vh;
            width: 15vw;
            min-width: 200px;
            font-size: medium;
            cursor: pointer;
        }

        .footer-section {
            background-color: #1a1a1a; 
            color: #a0a0a0;
            padding: 60px 40px 0 40px; 
            width: 100%; 
        }

        .footer-main {
            display: flex;
            flex-wrap: wrap; 
            justify-content: space-between;
            padding-bottom: 40px;
            border-bottom: 1px solid #333; 
        }
        
        .footer-column {
            flex: 1; 
            min-width: 260px; 
            padding: 0 15px; 
            margin-bottom: 30px;
        }
        
        .footer-title {
            font-weight: 600;
            font-size: 0.9rem;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .footer-link {
            display: block;
            color: #a0a0a0;
            text-decoration: none;
            margin-bottom: 12px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: color 0.2s ease;
        }

        .footer-link:hover {
            color: #ffffff;
        }
        
        .footer-text {
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 4px;
        }

        .footer-contact .footer-text-block {
            margin-bottom: 20px;
        }

        .footer-contact .email-link {
            color: #ffffff;
            font-weight: 500;
            display: inline-block; 
        }

        .social-icons {
            display: flex;
            margin-top: 20px;
        }

        .icon {
            width: 32px;
            height: 32px;
            /* border: 1px solid #555; */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #a0a0a0;
            margin-right: 12px;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .icon img{
            width: 24px;
            height: 24px;
        }

        .icon:hover {
            background-color: #333;
            color: #ffffff;
        }

        .footer-bottom {
            padding: 25px 15px; 
            display: flex;
            align-items: center;
        }

        .copyright-text {
            font-size: 0.85rem;
            color: #a0a0a0;
        }

        .underlined-text {
            display: inline;
            text-decoration: underline;
            cursor: pointer;
        }

        .trust-button {
            position: fixed;
            bottom: 80px; 
            left: 20px;
            background-color: #2b2b2b;
            color: #ffffff;
            padding: 10px 15px;
            border-radius: 20px; 
            font-size: 0.9rem;
            font-weight: 500;
            display: flex;
            align-items: center;
            cursor: pointer;
            z-index: 100;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        @media (max-width: 1024px) {
            #main-ad, #best-sellers-prod, #category, #concern, #new-prod, #pre-footer, .ad-1, .features-header, .features-container {
                width: 90vw;
                margin-left: 5vw;
                margin-right: 5vw;
            }

            /* This query was missing the .main-nav update */
            .main-nav {
                width: 100%; /* Ensures it fits the new 90vw parent */
            }

            #navbar {
                width: 90vw;
                justify-content: space-around;
            }

            #logo {
                width: 25vw;
                min-width: 180px;
            }

            #categories {
                width: 100%; 
                order: 3;
                justify-content: center;
                margin-top: 10px;
            }

            #your {
                width: 25vw;
                min-width: 140px;
                order: 2; 
            }

            .prod, .cate-prod, .con-prod {
                width: 48%; 
                min-width: 200px;
            }

            .prod-details button {
                width: 100%;
            }

            .prod-footer button {
                width: 30vw;
                min-width: 180px;
            }

            .pf {
                width: 100%;
            }

             .pf-con-btn button {
                width: 30vw;
                min-width: 180px;
             }

             .review-card {
                flex-basis: 300px;
             }
        }

        @media (max-width: 768px) {
            .footer-main {
                flex-direction: column;
            }
            
            .footer-column {
                min-width: 100%; 
                padding: 0;
            }
            
            .footer-section {
                padding: 40px 20px 0 20px; 
            }

            #pre-nav {
                font-size: 0.8em;
                height: auto;
                padding: 10px 5px;
                flex-direction: column;
                text-align: center;
            }

            #pre-nav .i1 {
                display: none;
            }

            #logo {
                width: 100%;
                justify-content: center;
                font-size: 2em;
                text-align: center;
                margin-bottom: 10px;
            }

            #categories {
                font-size: 0.8em;
            }

            #your {
                width: 100%;
                justify-content: space-around;
                order: 2;
                margin-top: 10px;
            }

            .your-section img {
                height: 30px;
                min-height: 30px;
            }

            #main-ad, #best-sellers-prod, #category, #concern, #new-prod, #pre-footer, .ad-1, .features-header, .features-container {
                width: 94vw;
                margin-left: 3vw;
                margin-right: 3vw;
            }

            #best-sellers p, #shop-by-category, #shop-by-concern, #new p, .features-header h2, .section-title {
                font-size: 1.5em;
            }

            .prod, .cate-prod, .con-prod {
                width: 100%; 
                max-width: 400px; 
                margin-left: auto;
                margin-right: auto;
            }

            .prod-details button {
                width: 100%;
            }

            .prod-footer button {
                width: 60vw;
            }

            .pf-con-btn button {
                width: 60vw;
            }

             .review-card {
                flex-basis: 280px; 
             }

            .trust-button {
                bottom: 20px; 
                font-size: 0.8rem;
            }
        }

        @media (max-width: 480px) {
            #categories {
                font-size: 0.7em;
                justify-content: center;
                flex-wrap: wrap;
            }

            .categories-con {
                padding: 3px 5px;
            }

            .prod-footer button, .pf-con-btn button {
                width: 80vw; 
            }

            .features-header h2, .section-title {
                font-size: 1.3em;
            }

            .features-header p {
                font-size: 0.9rem;
            }

            .footer-section {
                padding: 30px 15px 0 15px;
            }
        }

        @media (min-width: 300px) and (max-width: 900px) {
            .nav-links {
                display: none; 
            }
            .hamburger-menu {
                display: block; 
                margin-left: 20px;
            }
            .nav-content {
                justify-content: space-between;
            }
            .nav-logo {
                flex-grow: 1;
                text-align: center;
            }
            .nav-icons {
                flex-basis: 50px;
                justify-content: flex-end;
            }
             .nav-logo-wrapper {
                 flex-basis: 50px;
             }
        }
        
        @media (min-width: 300px) and (max-width: 600px) {
            .promo-bar {
                font-size: 0.75rem;
                padding: 10px 15px;
            }
            .promo-arrow {
                display: none;
            }
            
            .container {
                width: 95%;
            }
            
            .nav-logo {
                text-align: left;
                font-size: 1.5rem;
            }
            
            .footer-main {
                flex-direction: column; 
            }
            
            .footer-column {
                min-width: 100%; 
                padding: 0;
            }
            
            .footer-section {
                padding: 40px 0 0 0;
            }
        }


/* --- FIXES START HERE --- */

/* 1. Remove the whitespace gap under the promo image on mobile */
@media (max-width: 900px) {
    #main-ad {
        min-height: auto; /* Fixes the rigid 50vh height causing gaps */
        height: auto;
        display: block; /* Ensures natural flow */
        padding-bottom: 20px;
    }
}

/* 2. Layout adjustments for 760px (4x4 Grid) and 390px (2x2 Grid) */

/* TABLET VIEW (Approx 760px): Force 4 items per row */
@media (max-width: 1024px) {
    .prod, .cate-prod, .con-prod {
        /* Override existing 48% setting to fit 4 items */
        width: 22% !important; 
        min-width: 140px !important; /* Reduce min-width so 4 items fit */
        margin: 10px 1% !important;
    }
    
    /* Ensure containers stretch enough to hold the row */
    #best-sellers-prod, #category, #concern, #new-prod {
        justify-content: center;
        gap: 10px;
    }
}

/* MOBILE VIEW (Approx 390px): Force 2 items per row */
@media (max-width: 600px) {
    .prod, .cate-prod, .con-prod {
        /* Set width to ~46% to allow 2 items side-by-side */
        width: 46% !important; 
        
        /* CRITICAL: Existing CSS has min-width: 250px. 
           We must lower this to allow 2 items on a 390px screen. */
        min-width: 130px !important; 
        
        margin: 10px 1% !important;
    }

    /* Adjust font sizes for the tighter layout */
    .prod-details .p1 {
        font-size: 0.9rem;
    }
    .prod-details button {
        font-size: 0.8rem;
        height: 40px;
    }
}