:root{
            --primary:#0e733d;
            --primary-dark:#095a2f;
            --secondary:#f6a800;
            --light-green:#f1f8f4;
            --border:#e7e7e7;
            --text:#222;
            --muted:#777;
        }

        *{
            box-sizing:border-box;
        }

        body{
            font-family:'Inter',sans-serif;
            color:var(--text);
            background:#fff;
        }

        a{
            text-decoration:none;
            color:inherit;
        }

        img{
            max-width:100%;
        }

        /* ================= TOP BAR ================= */

        .topbar{
            background:#f7f7f7;
            border-bottom:1px solid #eee;
            font-size:13px;
            color:#666;
        }

        .topbar a:hover{
            color:var(--primary);
        }

        /* ================= HEADER ================= */

        .main-header{
            background:#fff;
            padding:18px 0;
            position:relative;
            z-index:100;
        }

        .brand-logo{
            display:flex;
            align-items:center;
            gap:10px;
            font-weight:800;
            font-size:26px;
            color:var(--primary);
        }

        .brand-icon{
            width:46px;
            height:46px;
            border-radius:50%;
            background:var(--primary);
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:21px;
        }

        .search-box{
            border:2px solid var(--primary);
            border-radius:7px;
            overflow:hidden;
            display:flex;
            height:48px;
        }

        .search-box input{
            border:0;
            outline:0;
            box-shadow:none!important;
            flex:1;
            padding:0 18px;
        }

        .search-box button{
            width:58px;
            border:0;
            background:var(--primary);
            color:#fff;
            font-size:18px;
        }

        .header-action{
            display:flex;
            align-items:center;
            gap:10px;
            cursor:pointer;
        }

        .header-action .icon{
            width:42px;
            height:42px;
            border:1px solid #ddd;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:18px;
            position:relative;
            color:#444;
        }

        .header-action:hover .icon{
            border-color:var(--primary);
            color:var(--primary);
        }

        .cart-count{
            position:absolute;
            width:19px;
            height:19px;
            border-radius:50%;
            background:#e82f2f;
            color:#fff;
            font-size:10px;
            right:-5px;
            top:-5px;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .action-label small{
            display:block;
            color:#888;
            font-size:11px;
        }

        .action-label strong{
            font-size:13px;
            font-weight:600;
        }

        /* ================= NAVBAR ================= */

        .main-nav{
            background:var(--primary);
        }

        .main-nav .navbar-nav .nav-link{
            color:#fff;
            font-size:14px;
            font-weight:500;
            padding:15px 16px;
        }

        .main-nav .navbar-nav .nav-link:hover{
            background:rgba(255,255,255,.1);
        }

        .category-btn{
            background:var(--primary-dark);
            color:#fff!important;
            border:0;
            border-radius:0;
            min-width:240px;
            padding:14px 20px;
            font-weight:600;
        }

        /* ================= HERO ================= */

        .hero-area{
            padding:22px 0;
            background:#fafafa;
        }

        .category-menu{
            background:#fff;
            border:1px solid var(--border);
            border-radius:8px;
            overflow:hidden;
            height:100%;
        }

        .category-menu a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:12px 17px;
            border-bottom:1px solid #f1f1f1;
            font-size:14px;
            transition:.2s;
        }

        .category-menu a:last-child{
            border-bottom:0;
        }

        .category-menu a:hover{
            color:var(--primary);
            padding-left:22px;
            background:var(--light-green);
        }

        .hero-slider,
        .hero-slider .carousel-inner,
        .hero-slider .carousel-item{
            height:100%;
        }

        .hero-slide{
            min-height:430px;
            border-radius:10px;
            overflow:hidden;
            background-size:cover;
            background-position:center;
            position:relative;
        }

        .hero-slide:before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.05));
        }

        .hero-content{
            position:relative;
            z-index:2;
            max-width:550px;
            padding:80px 55px;
            color:#fff;
        }

        .hero-content small{
            background:var(--secondary);
            color:#111;
            border-radius:30px;
            padding:7px 15px;
            font-weight:700;
        }

        .hero-content h1{
            font-size:48px;
            font-weight:800;
            margin:20px 0 12px;
            line-height:1.1;
        }

        .hero-content p{
            font-size:16px;
            color:#f3f3f3;
        }

        .shop-btn{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:10px;
            padding:12px 22px;
            border-radius:6px;
            background:#fff;
            color:var(--primary);
            font-weight:700;
        }

        .shop-btn:hover{
            background:var(--secondary);
            color:#111;
        }

        /* ================= SERVICE ================= */

        .service-area{
            border:1px solid var(--border);
            border-radius:8px;
            margin-top:20px;
            background:#fff;
        }

        .service-item{
            padding:20px;
            display:flex;
            align-items:center;
            gap:14px;
        }

        .service-icon{
            font-size:29px;
            color:var(--primary);
        }

        .service-item h6{
            margin:0 0 3px;
            font-size:14px;
            font-weight:700;
        }

        .service-item span{
            font-size:12px;
            color:#888;
        }

        /* ================= SECTIONS ================= */

        .section{
            padding:45px 0;
        }

        .section-light{
            background:#f8faf9;
        }

        .section-heading{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:25px;
        }

        .section-heading h2{
            font-size:25px;
            margin:0;
            font-weight:700;
        }

        .section-heading h2:after{
            content:"";
            display:block;
            width:48px;
            height:3px;
            background:var(--primary);
            margin-top:9px;
            border-radius:10px;
        }

        .view-all{
            color:var(--primary);
            font-weight:600;
            font-size:14px;
        }

        /* ================= CATEGORIES ================= */

        .category-card{
            text-align:center;
            background:#fff;
            border:1px solid var(--border);
            border-radius:10px;
            padding:17px 10px;
            transition:.25s;
            height:100%;
        }

        .category-card:hover{
            transform:translateY(-4px);
            border-color:#b7d7c3;
            box-shadow:0 8px 25px rgba(0,0,0,.07);
        }

        .category-image{
            height:100px;
            display:flex;
            align-items:center;
            justify-content:center;
            margin-bottom:12px;
        }

        .category-image img{
            max-height:90px;
            object-fit:contain;
        }

        .category-card h6{
            font-size:14px;
            font-weight:600;
            margin:0;
        }

        /* ================= PRODUCT CARD ================= */

        .product-card{
            background:#fff;
            border:1px solid var(--border);
            border-radius:9px;
            overflow:hidden;
            position:relative;
            height:100%;
            transition:.25s;
        }

        .product-card:hover{
            box-shadow:0 10px 30px rgba(0,0,0,.08);
            transform:translateY(-3px);
        }

        .product-img{
            height:225px;
            position:relative;
            overflow:hidden;
            background:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:15px;
        }

        .product-img img{
            max-height:195px;
            width:100%;
            object-fit:contain;
            transition:.4s;
        }

        .product-card:hover .product-img img{
            transform:scale(1.05);
        }

        .badge-sale{
            position:absolute;
            top:12px;
            left:12px;
            z-index:5;
            background:#e33131;
            color:#fff;
            border-radius:3px;
            padding:4px 8px;
            font-size:10px;
            font-weight:700;
        }

        .badge-new{
            background:var(--primary);
        }

        .wishlist{
            position:absolute;
            right:12px;
            top:12px;
            width:34px;
            height:34px;
            border-radius:50%;
            border:1px solid #eee;
            background:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
            color:#555;
            opacity:0;
            transition:.2s;
        }

        .product-card:hover .wishlist{
            opacity:1;
        }

        .wishlist:hover{
            color:#e33131;
        }

        .product-body{
            padding:15px;
        }

        .product-category{
            font-size:11px;
            color:#999;
            text-transform:uppercase;
            margin-bottom:6px;
        }

        .product-title{
            font-size:14px;
            font-weight:600;
            line-height:1.5;
            min-height:42px;
            margin-bottom:7px;
        }

        .stars{
            color:#ffb300;
            font-size:11px;
            margin-bottom:7px;
        }

        .price{
            font-size:17px;
            font-weight:700;
            color:var(--primary);
        }

        .old-price{
            font-size:12px;
            text-decoration:line-through;
            color:#aaa;
            margin-left:5px;
        }

        .cart-btn{
            margin-top:12px;
            display:flex;
            width:100%;
            align-items:center;
            justify-content:center;
            gap:8px;
            height:39px;
            border:1px solid var(--primary);
            color:var(--primary);
            background:#fff;
            border-radius:5px;
            font-size:13px;
            font-weight:600;
            transition:.2s;
        }

        .cart-btn:hover{
            background:var(--primary);
            color:#fff;
        }

        /* ================= PROMO ================= */

        .promo-box{
            min-height:245px;
            border-radius:12px;
            overflow:hidden;
            position:relative;
            background-size:cover;
            background-position:center;
            padding:45px;
        }

        .promo-box:before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.08));
        }

        .promo-content{
            position:relative;
            z-index:2;
            color:#fff;
            max-width:380px;
        }

        .promo-content h3{
            font-size:30px;
            font-weight:800;
        }

        .promo-content p{
            color:#eee;
        }

        /* ================= BRANDS ================= */

        .brand-card{
            height:95px;
            border:1px solid var(--border);
            border-radius:8px;
            display:flex;
            align-items:center;
            justify-content:center;
            background:#fff;
            font-size:18px;
            font-weight:700;
            color:#777;
            transition:.2s;
        }

        .brand-card:hover{
            border-color:var(--primary);
            color:var(--primary);
        }

        /* ================= TESTIMONIAL ================= */

        .testimonial{
            background:#fff;
            border:1px solid var(--border);
            border-radius:10px;
            padding:25px;
            height:100%;
        }

        .testimonial .quote{
            color:var(--primary);
            font-size:30px;
            margin-bottom:12px;
        }

        .testimonial p{
            color:#666;
            line-height:1.8;
            font-size:14px;
        }

        .customer{
            display:flex;
            align-items:center;
            gap:12px;
            margin-top:18px;
        }

        .customer img{
            width:50px;
            height:50px;
            border-radius:50%;
            object-fit:cover;
        }

        .customer h6{
            margin:0;
            font-weight:700;
            font-size:14px;
        }

        .customer small{
            color:#999;
        }

        /* ================= NEWSLETTER ================= */

        .newsletter{
            background:var(--primary);
            padding:38px 0;
            color:#fff;
        }

        .newsletter h3{
            font-size:24px;
            font-weight:700;
        }

        .newsletter p{
            margin:0;
            opacity:.8;
        }

        .subscribe-box{
            display:flex;
            background:#fff;
            border-radius:6px;
            overflow:hidden;
            height:50px;
        }

        .subscribe-box input{
            flex:1;
            border:0;
            outline:0;
            padding:0 18px;
        }

        .subscribe-box button{
            border:0;
            background:var(--secondary);
            font-weight:700;
            padding:0 25px;
        }

        /* ================= FOOTER ================= */

        footer{
            background:#1d2420;
            color:#bbb;
            padding:55px 0 25px;
        }

        footer .footer-logo{
            color:#fff;
            font-weight:800;
            font-size:25px;
            margin-bottom:17px;
            display:inline-block;
        }

        footer h5{
            color:#fff;
            font-size:15px;
            font-weight:700;
            margin-bottom:20px;
        }

        footer ul{
            list-style:none;
            margin:0;
            padding:0;
        }

        footer ul li{
            margin-bottom:10px;
        }

        footer ul a{
            color:#bbb;
            font-size:13px;
        }

        footer ul a:hover{
            color:#fff;
        }

        .contact-line{
            display:flex;
            gap:10px;
            font-size:13px;
            margin-bottom:12px;
        }

        .contact-line i{
            color:var(--secondary);
            margin-top:4px;
        }

        .social-links{
            display:flex;
            gap:8px;
            margin-top:20px;
        }

        .social-links a{
            width:36px;
            height:36px;
            border-radius:50%;
            background:#2e3933;
            color:#fff;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        .social-links a:hover{
            background:var(--primary);
        }

        .footer-bottom{
            border-top:1px solid rgba(255,255,255,.08);
            padding-top:22px;
            margin-top:40px;
            font-size:12px;
        }

        /* ================= MOBILE BOTTOM ================= */

        .mobile-bottom-nav{
            display:none;
        }

        @media(max-width:991px){

            .desktop-actions{
                display:none!important;
            }

            .category-menu{
                display:none;
            }

            .hero-slide{
                min-height:380px;
            }

            .hero-content{
                padding:65px 30px;
            }

            .hero-content h1{
                font-size:37px;
            }

            .main-nav .navbar-toggler{
                color:#fff;
                border-color:rgba(255,255,255,.3);
            }

            .category-btn{
                min-width:auto;
            }
        }

        @media(max-width:767px){

            body{
                padding-bottom:65px;
            }

            .topbar{
                display:none;
            }

            .main-header{
                padding:12px 0;
            }

            .brand-logo{
                font-size:20px;
            }

            .brand-icon{
                width:38px;
                height:38px;
                font-size:17px;
            }

            .search-wrapper{
                order:3;
                width:100%;
                margin-top:12px;
            }

            .hero-slide{
                min-height:320px;
            }

            .hero-content{
                padding:45px 25px;
            }

            .hero-content h1{
                font-size:30px;
            }

            .hero-content p{
                font-size:14px;
            }

            .section{
                padding:35px 0;
            }

            .section-heading h2{
                font-size:20px;
            }

            .product-img{
                height:180px;
            }

            .product-img img{
                max-height:155px;
            }

            .promo-box{
                padding:32px 25px;
                min-height:220px;
            }

            .promo-content h3{
                font-size:25px;
            }

            .mobile-bottom-nav{
                display:flex;
                position:fixed;
                bottom:0;
                left:0;
                right:0;
                background:#fff;
                border-top:1px solid #ddd;
                z-index:9999;
                justify-content:space-around;
                padding:8px 0 6px;
            }

            .mobile-bottom-nav a{
                text-align:center;
                color:#555;
                font-size:10px;
            }

            .mobile-bottom-nav i{
                display:block;
                font-size:19px;
                margin-bottom:4px;
            }

            .mobile-bottom-nav a.active{
                color:var(--primary);
            }
        }