/* ==========================================================
   BRAHMIN GROCERY
   MODERN UI
========================================================== */

:root{

--primary:#1F5E3B;
--primary-light:#2F7D50;
--secondary:#F8F9FA;
--accent:#F59E0B;
--dark:#222;
--gray:#777;
--border:#E5E7EB;
--white:#fff;

--radius:12px;

--shadow:
0 8px 30px rgba(0,0,0,.08);

--transition:.3s ease;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;
background:#fafafa;
color:#222;

}

a{

text-decoration:none;
transition:.3s;

}

img{

max-width:100%;
display:block;

}

.container{

width:92%;
max-width:1400px;
margin:auto;

}






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

.top-bar{

background:var(--primary);
color:#fff;

font-size:14px;

padding:10px 0;

}

.top-bar .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.top-left{

font-weight:500;

}

.top-right{

display:flex;

align-items:center;

gap:20px;

}

.top-right a{

color:#fff;

font-weight:500;

}

.top-right a:hover{

opacity:.8;

}

.welcome{

font-weight:600;

}




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

.navbar-modern{

background:#fff;

box-shadow:var(--shadow);

position:sticky;

top:0;

z-index:999;

}

.navbar-modern .container{

display:flex;

align-items:center;

justify-content:space-between;

padding:18px 0;

gap:30px;

}




/* =====================================
LOGO
===================================== */

.logo img{

height:58px;

width:auto;

}




/* =====================================
SEARCH
===================================== */

.search-box{

flex:1;

max-width:600px;

}

.search-box form{

display:flex;

background:#F5F5F5;

border-radius:50px;

overflow:hidden;

border:2px solid transparent;

transition:.3s;

}

.search-box form:focus-within{

border-color:var(--primary);

background:#fff;

}

.search-box input{

flex:1;

border:none;

background:none;

padding:16px 22px;

font-size:15px;

outline:none;

}

.search-box button{

width:60px;

background:var(--primary);

border:none;

color:#fff;

cursor:pointer;

transition:.3s;

}

.search-box button:hover{

background:var(--primary-light);

}




/* =====================================
MENU
===================================== */

.desktop-menu{

display:flex;

align-items:center;

gap:30px;

}

.desktop-menu a{

color:#333;

font-weight:600;

position:relative;

}

.desktop-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.desktop-menu a:hover::after{

width:100%;

}

.desktop-menu a:hover{

color:var(--primary);

}




/* =====================================
ICONS
===================================== */

.header-icons{

display:flex;

align-items:center;

gap:18px;

}

.header-icons a{

width:48px;

height:48px;

background:#F4F4F4;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

position:relative;

font-size:20px;

color:#333;

transition:.3s;

}

.header-icons a:hover{

background:var(--primary);

color:#fff;

transform:translateY(-2px);

}

.cart-count{

position:absolute;

top:-6px;

right:-6px;

background:#ff4444;

color:#fff;

font-size:11px;

font-weight:700;

width:22px;

height:22px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

}




/* =====================================
STICKY EFFECT
===================================== */

.navbar-modern{

transition:.3s;

}




/* =====================================
RESPONSIVE
===================================== */

@media(max-width:992px){

.desktop-menu{

display:none;

}

.search-box{

max-width:none;

}

.navbar-modern .container{

flex-wrap:wrap;

}

}




@media(max-width:768px){

.top-bar{

display:none;

}

.logo{

width:100%;

display:flex;

justify-content:center;

margin-bottom:15px;

}

.search-box{

width:100%;

order:3;

}

.header-icons{

margin-left:auto;

}

}




@media(max-width:576px){

.logo img{

height:48px;

}

.search-box input{

padding:14px 18px;

}

.search-box button{

width:52px;

}

.header-icons a{

width:42px;

height:42px;

font-size:18px;

}

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

.hero-section{

padding:70px 0;

background:

linear-gradient(

180deg,

#F8FFF9,

#FFFFFF

);

}

.hero-grid{

display:grid;

grid-template-columns:2fr 1fr;

gap:30px;

align-items:center;

}

.hero-main{

background:white;

padding:70px;

border-radius:25px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.hero-badge{

display:inline-block;

background:#E7F8EC;

color:#1F5E3B;

padding:8px 18px;

border-radius:30px;

font-weight:600;

margin-bottom:25px;

}

.hero-main h1{

font-size:54px;

line-height:1.2;

font-weight:700;

margin-bottom:20px;

}

.hero-main h1 span{

color:#1F5E3B;

}

.hero-main p{

font-size:18px;

color:#666;

line-height:1.8;

max-width:520px;

margin-bottom:35px;

}

.hero-buttons{

display:flex;

gap:20px;

}

.btn-shop{

background:#1F5E3B;

color:#fff;

padding:16px 35px;

border-radius:50px;

font-weight:600;

}

.btn-shop:hover{

background:#2E7D50;

color:#fff;

}

.btn-offer{

background:#fff;

border:2px solid #1F5E3B;

color:#1F5E3B;

padding:16px 35px;

border-radius:50px;

font-weight:600;

}

.btn-offer:hover{

background:#1F5E3B;

color:#fff;

}

.hero-right{

display:flex;

flex-direction:column;

gap:20px;

}

.offer-card{

padding:35px;

border-radius:20px;

color:#fff;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.offer-card:hover{

transform:translateY(-6px);

}

.green{

background:#38A169;

}

.orange{

background:#F59E0B;

}

.dark{

background:#2D3748;

}

.offer-card h3{

font-size:24px;

margin-bottom:10px;

}

.offer-card p{

font-size:16px;

opacity:.9;

}

@media(max-width:991px){

.hero-grid{

grid-template-columns:1fr;

}

.hero-main{

padding:45px;

}

.hero-main h1{

font-size:40px;

}

}
.hero-section{

margin-top:20px;

}
.featured-products{

padding:80px 0;

background:#fafafa;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

display:inline-block;

padding:8px 18px;

background:#EAF7EF;

color:#1F5E3B;

border-radius:30px;

font-weight:600;

margin-bottom:15px;

}

.section-title h2{

font-size:42px;

margin-bottom:15px;

font-weight:700;

}

.section-title p{

font-size:18px;

color:#777;

max-width:650px;

margin:auto;

line-height:1.8;

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

/* PRODUCT CARD */
.product-card{
background:#fff;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
display:flex;
flex-direction:column;
height:100%;
}
.product-card:hover{
transform:translateY(-6px);
box-shadow:0 16px 35px rgba(0,0,0,.12);
}
.product-content{
padding:20px;
display:flex;
flex-direction:column;
flex:1;
}
.product-price{
font-size:26px;
font-weight:700;
color:#1F5E3B;
margin-bottom:18px;
}
/* BUTTONS */
.product-buttons{
display:flex;
flex-direction:column;
gap:12px;
margin-top:auto;
}
.view-btn,.cart-btn{
width:100%;
height:52px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
font-size:16px;
font-weight:600;
text-decoration:none;
transition:.25s;
}
.view-btn{
border:2px solid #1F5E3B;
background:#fff;
color:#1F5E3B;
}
.view-btn:hover{
background:#1F5E3B;
color:#fff;
}
.cart-btn{
background:#1F5E3B;
color:#fff;
}
.cart-btn:hover{
background:#2F7D50;
}
/*==================================
CATEGORY SECTION
==================================*/

.category-section{

padding:80px 0;

background:#fff;

}

.category-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:25px;

margin-top:50px;

}

.category-card{

background:#fff;

border-radius:18px;

padding:30px 20px;

text-align:center;

box-shadow:0 8px 20px rgba(0,0,0,.05);

transition:.35s;

border:1px solid #f0f0f0;

}

.category-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 30px rgba(0,0,0,.10);

border-color:#1F5E3B;

}

.category-icon{

font-size:52px;

margin-bottom:20px;

}

.category-card h4{

font-size:18px;

font-weight:600;

color:#333;

margin:0;

}
@media(max-width:992px){

.category-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:576px){

.category-grid{

grid-template-columns:repeat(2,1fr);

gap:15px;

}

.category-card{

padding:20px 10px;

}

.category-icon{

font-size:40px;

}

.category-card h4{

font-size:15px;

}

}
/* ==========================================
   MODERN FOOTER
========================================== */

.page-footer{

background:#0F172A;

margin-top:80px;

color:#fff;

}

.page-footer .banners{

padding:50px 0;

background:#1E293B;

}

.page-footer .banners .container{

display:flex;

justify-content:space-between;

align-items:center;

gap:40px;

flex-wrap:wrap;

}

.banner-award{

flex:1;

min-width:280px;

font-size:34px;

font-weight:700;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

padding:40px;

border-radius:20px;

background:linear-gradient(135deg,#1F5E3B,#38A169);

}

.banner-award span{

display:block;

line-height:1.3;

}

.banner-social{

flex:1;

min-width:280px;

display:flex;

justify-content:center;

align-items:center;

gap:20px;

padding:40px;

border-radius:20px;

background:#243447;

}

.banner-social__link{

width:55px;

height:55px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:rgba(255,255,255,.08);

color:#fff;

font-size:22px;

transition:.3s;

}

.banner-social__link:hover{

background:#38A169;

transform:translateY(-4px);

color:#fff;

}

.page-footer__subline{

padding:25px 0;

background:#0B1220;

}

.page-footer__subline .container{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.copyright,

.designby,

.developer{

color:#CBD5E1;

font-size:14px;

}

.designby li{

list-style:none;

margin:0;

padding:0;

}
.menu-toggle{

display:none;

width:48px;

height:48px;

border:none;

background:#1F5E3B;

color:#fff;

font-size:22px;

border-radius:10px;

cursor:pointer;

}
/* ==========================================
   QUICK ADD TO CART
========================================== */

.cart-action{

flex:1;

position:relative;

}

.add-btn{

width:100%;

height:46px;

border:none;

border-radius:12px;

background:#1F5E3B;

color:#fff;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.add-btn:hover{

background:#2E7D50;

}

/* QUANTITY */
.quantity-controller{
display:flex;
align-items:center;
width:100%;
height:54px;
background:#1F5E3B;
border-radius:14px;
overflow:hidden;
box-shadow:0 6px 16px rgba(31,94,59,.25);
}
.quantity-controller .qty-btn{
width:58px;
height:54px;
border:none;
background:transparent;
color:#fff;
font-size:30px;
font-weight:700;
cursor:pointer;
transition:.2s;
}
.quantity-controller .qty-btn:hover{
background:rgba(255,255,255,.15);
}
.quantity-controller .qty-btn:active{
transform:scale(.94);
}
.quantity-controller .qty-number{
flex:1;
text-align:center;
color:#fff;
font-size:22px;
font-weight:700;
}

/* MOBILE */
@media(max-width:768px){
.product-content{padding:16px;}
.view-btn,.cart-btn,.quantity-controller{height:50px;}
.quantity-controller .qty-btn{
width:54px;
height:50px;
font-size:28px;
}
.quantity-controller .qty-number{
font-size:20px;
}
}

.product-badge{
    position:absolute;
    top:15px;
    left:15px;
}

.badge-sale{
    background:#ff4d4f;
}

.badge-gift{
    background:#8e44ad;
}

.badge-new{
    background:#3498db;
}

.badge-organic{
    background:#27ae60;
}

.badge-hot{
    background:#ff6b00;
}
/* SHOP PAGE */

.shop-page{
    padding:40px 0 60px;
}

.shop-filters{
    background:#fff;
    border-radius:18px;
    padding:20px;
    margin-bottom:30px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.shop-products{
    width:100%;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:24px;
}

.pagination-wrap{
    margin-top:40px;
    display:flex;
    justify-content:center;
}
/* =====================================
   MODERN SHOP FILTERS
===================================== */

.shop-filters{

    background:#ffffff;

    border-radius:20px;

    padding:25px;

    margin-bottom:30px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/* Remove Bootstrap Panel */

.shop-filters .panel{

    border:none !important;

    box-shadow:none !important;

    background:transparent;

    margin-bottom:25px;

}

.shop-filters .panel-heading{

    background:none !important;

    border:none !important;

    padding:0 0 15px;

}

.shop-filters .panel-title{

    font-size:20px;

    font-weight:700;

    color:#222;

}

/* Hide Show */

.shop-filters .pull-right{

    float:right;

}

.shop-filters .hide-show{

    color:#28a745;

    font-size:14px;

    font-weight:600;

}

/* Search */

.shop-filters .input-group{

    margin-bottom:18px;

}

.shop-filters input.form-control{

    border-radius:12px;

    border:1px solid #e5e7eb;

    height:46px;

    box-shadow:none;

}

.shop-filters .input-group-addon{

    border-radius:0 12px 12px 0;

    background:#28a745;

    color:#fff;

    border:none;

}

/* Horizontal Layout */

.shop-filters .category-menu{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    padding:0;

    margin:0;

    list-style:none;

}

/* Remove old style */

.shop-filters .category-menu li{

    margin:0;

    background:none !important;

}

/* Filter Chips */

.shop-filters .category-menu label{

    display:flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    border:1px solid #dcdcdc;

    background:#fff;

    cursor:pointer;

    transition:.25s;

    font-size:14px;

    font-weight:500;

}

.shop-filters .category-menu label:hover{

    background:#28a745;

    color:#fff;

    border-color:#28a745;

}

/* Checkbox */

.shop-filters input[type=checkbox]{

    margin:0;

}

/* Images */

.shop-filters img{

    width:22px;

    height:22px;

    object-fit:contain;

}

/* Remove Scroll */

.shop-filters .scroll-menu{

    max-height:none !important;

    overflow:visible !important;

}
.shop-page{

padding:40px 0;

}

.modern-filters{

margin-bottom:40px;

}

.products-grid{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(260px,1fr));

gap:24px;

margin-top:30px;

}
/* ===========================
MODERN FILTERS
=========================== */

.modern-filters{

background:#fff;

padding:28px;

border-radius:20px;

margin-bottom:40px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.modern-filters h2{

font-size:28px;

margin-bottom:25px;

font-weight:700;

}

.filter-search input{

width:100%;

height:52px;

border:1px solid #ddd;

border-radius:14px;

padding:0 18px;

margin-bottom:30px;

}

.filter-block{

margin-bottom:30px;

}

.filter-block h4{

margin-bottom:15px;

font-size:18px;

font-weight:600;

}

.filter-chips{

display:flex;

flex-wrap:wrap;

gap:12px;

}

.filter-chip{

cursor:pointer;

}

.filter-chip input{

display:none;

}

.filter-chip span{

display:flex;

align-items:center;

padding:12px 20px;

background:#f4f5f7;

border-radius:50px;

transition:.25s;

font-size:15px;

font-weight:500;

}

.filter-chip input:checked+span{

background:#1f6f43;

color:#fff;

}

.filter-chip span:hover{

background:#1f6f43;

color:#fff;

}
.product-weight{
    font-size:14px;
    color:#666;
    font-weight:500;
    margin:5px 0 12px;
}
.product-price{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}

.product-price .retail-price{
    color:#999;
    font-size:14px;
    text-decoration:line-through;
}

.product-price .selling-price{
    color:#27ae60;
    font-size:20px;
    font-weight:700;
}