/*==================================
  GOOGLE FONT
===================================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--green:#16341E;
--green2:#214B2B;
--gold:#C5A15A;
--cream:#F8F5EE;
--white:#fff;
--text:#333;
--shadow:0 15px 40px rgba(0,0,0,.12);
--radius:18px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

body{
background:#f7f7f7;
color:var(--text);
overflow-x:hidden;
line-height:1.7;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

.container{
width:90%;
max-width:1280px;
margin:auto;
}

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

.header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:999;

background:rgba(22,52,30,.90);

backdrop-filter:blur(12px);

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

}

 .nav{

    display:flex;
    justify-content:space-between;
    align-items:center;

    height:120px; /* increased to accommodate much larger logo */
    padding:0;

}

.logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0; /* remove extra clickable padding */
    margin:0;
    height:100%;
    align-self:stretch;
}

.logo-img{
    height:100%; /* always fills the topbar height exactly, no matter the screen size */
    max-height:100%;
    width:auto;
    padding:0;
    margin:0;
    display:block;
    object-fit:contain;
}

.logo-mark{
    width:80px;
    height:80px;
    flex:none;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(197,161,90,.18);
    border:1px solid rgba(197,161,90,.45);
    color:var(--gold);
    font-size:28px;
}

/* Emphasize the image alone: hide text to make logo clearer */
.logo-text{ display:none; }

/* Responsive: scale header down on small screens (logo-img fills 100% of .nav height automatically) */
@media (max-width:600px){
    .nav{ height:90px; padding:0; }
    .logo-mark{ width:60px; height:60px; font-size:20px; }
}

@media (max-width:400px){
    .nav{ height:78px; padding:0; }
}

.logo-text h2{
    color:#fff;
    font-size:18px;
    line-height:1;
}

.logo-text p{
    color:#d7d7d7;
    font-size:12px;
    margin-top:3px;
}

.menu{

display:flex;
gap:35px;

}

.menu a{

color:#fff;
font-weight:500;
transition:.3s;

}

.menu a:hover{

color:var(--gold);

}

.hamburger{

display:none;

font-size:34px;

color:#fff;

cursor:pointer;

}

/*====================
BUTTONS
=====================*/

.btn{

display:inline-block;

padding:14px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.primary{

background:var(--gold);

color:#fff;

}

.primary:hover{

background:#aa8748;

transform:translateY(-3px);

}

.secondary{

border:2px solid #fff;

color:#fff;

margin-right:12px;

}

.secondary:hover{

background:#fff;

color:var(--green);

}

/*====================
HERO
=====================*/
.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        rgba(13,35,20,.65),
        rgba(13,35,20,.65)
    ),
    url("../images/hh.png");

    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:scroll;
}
.hero-content{

max-width:720px;

margin:0 auto;

text-align:center;

z-index:5;

}

.hero h1{

font-size:46px;

color:#fff;

line-height:1.4;

margin-bottom:20px;

font-weight:700;
margin-top: 50px;

}

.hero p{

font-size:17px;

color:#ececec;

margin:0 auto 35px;

max-width:560px;

line-height:1.9;

}

.hero-btns{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

.hero-image{

text-align:center;

}

.hero-image img{

width:100%;

max-width:540px;

animation:float 4s ease-in-out infinite;

filter:drop-shadow(0 30px 45px rgba(0,0,0,.45));

}

/*====================
SECTION
=====================*/

section{

padding:100px 0;

}

.section-title{

font-size:40px;

text-align:center;

color:var(--green);

margin-bottom:60px;

position:relative;

}

.section-title::after{

content:"";

width:80px;

height:4px;

background:var(--gold);

display:block;

margin:15px auto;

border-radius:50px;

}/*==================================
PRODUCTS
==================================*/

.products{
    background:#f8f5ee;
}

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.35s;
    text-align:center;
    padding-bottom:25px;
}

.card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(0,0,0,.15);
}

.card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.card h3{
    margin-top:20px;
    color:var(--green);
    font-size:24px;
}

.card p{
    margin:10px 20px;
    color:#666;
}

.card span{
    display:block;
    margin:15px 0;
    font-size:22px;
    color:var(--gold);
    font-weight:700;
}

.card .btn{
    margin-top:10px;
}

.center{
    text-align:center;
    margin-top:55px;
}


/*==================================
ONLINE CONSULTATION
==================================*/

.consultation{
    background:#fff;
}

.split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

.consultation img{
    width:100%;
    max-width:500px;
    margin:auto;
}

.consultation h2{
    color:var(--green);
    font-size:44px;
    margin-bottom:20px;
}

.consultation p{
    color:#666;
    font-size:18px;
    margin-bottom:25px;
}

.consultation ul{
    margin-bottom:35px;
}

.consultation li{
    margin:14px 0;
    color:#444;
    font-size:18px;
}


/*==================================
ABOUT
==================================*/

.about{
    background:#f8f5ee;
}

.about img{
    width:100%;
    border-radius:20px;
    box-shadow:var(--shadow);
}

.about h2{
    font-size:42px;
    color:var(--green);
    margin-bottom:25px;
}

.about p{
    color:#555;
    font-size:18px;
    line-height:1.9;
    margin-bottom:35px;
}


/*==================================
FEATURES (Optional)
==================================*/

.features{
    background:#fff;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.feature-box{
    background:#fff;
    padding:40px 25px;
    text-align:center;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    transition:.35s;
}

.feature-box:hover{
    transform:translateY(-8px);
}

.feature-box i{
    font-size:45px;
    color:var(--gold);
    margin-bottom:20px;
}

.feature-box h3{
    color:var(--green);
    margin-bottom:12px;
}

.feature-box p{
    color:#666;
    font-size:15px;
    line-height:1.7;
}/*==================================
REVIEWS
==================================*/

.reviews{
    background:#fff;
    overflow:hidden;
    padding:70px 0;
}

.reviews-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:20px;
}

.review-nav{
    display:flex;
    gap:10px;
}

.review-nav-bottom{
    display:none;
    justify-content:center;
    margin-top:14px;
}

.review-btn{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--green);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    cursor:pointer;
    transition:.3s;
}

.review-btn:hover:not(:disabled){
    background:#1f4c2b;
}

.review-btn:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.review-slider{
    width:100%;
    overflow:hidden;
    position:relative;
    padding:10px 0;
    direction:ltr;
    touch-action: pan-y;
    user-select: none;
}

.review-track{
    display:flex;
    gap:24px;
    transition:transform .35s ease;
    will-change:transform;
    align-items:stretch;
    direction:ltr;
}

.review-card{
    box-sizing:border-box;
    flex:0 0 auto;
    background:#fff;
    border-radius:18px;
    padding:30px;
    text-align:center;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.review-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.15);
}

.review-card img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    margin:auto;
    border:4px solid var(--gold);
}

.review-card h4{
    margin-top:18px;
    color:var(--green);
    font-size:22px;
}

.review-card span{
    display:block;
    color:#ffb400;
    margin:10px 0;
    font-size:20px;
}

.review-card p{
    color:#666;
    line-height:1.8;
    font-size:15px;
}

@media (max-width:600px){
    .reviews{
        padding:50px 0;
    }

    .reviews-head{
        flex-direction:column;
        align-items:flex-start;
    }

    .review-nav{
        display:none;
    }

    .review-nav-bottom{
        display:flex;
    }

    .review-slider{
        padding:8px 0;
    }

    .review-track{
        gap:16px;
    }

    .review-card{
        flex:0 0 100%;
        max-width:100%;
        padding:22px 18px;
    }
}


/*==================================
SHOP CTA
==================================*/

.shop-cta{
    background:linear-gradient(rgba(22,52,30,.92),rgba(22,52,30,.92)),
    url("../images/h1.png");
    background-size:cover;
    background-position:center;
    text-align:center;
    color:#fff;
}

.shop-cta h2{
    font-size:48px;
    margin-bottom:25px;
    font-weight:700;
}

.shop-cta p{
    max-width:700px;
    margin:auto;
    font-size:18px;
    opacity:.9;
    margin-bottom:40px;
}


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

footer{
    background:#102917;
    color:#ddd;
    padding-top:70px;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:50px;
}

.footer-grid h3,
.footer-grid h4{
    color:#fff;
    margin-bottom:20px;
}

.footer-grid p{
    line-height:1.9;
    color:#bbb;
}

.footer-grid a{
    display:block;
    color:#bbb;
    margin:12px 0;
    transition:.3s;
}

.footer-grid a:hover{
    color:var(--gold);
    padding-right:8px;
}

.copyright{
    text-align:center;
    padding:25px 0;
    margin-top:60px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#999;
    font-size:14px;
}


/*==================================
WHATSAPP BUTTON
==================================*/

.whatsapp,
.cart-float{
    position:fixed;
    bottom:25px;
    left:25px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:#25D366;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:28px;
    box-shadow:0 10px 25px rgba(0,0,0,.25);
    z-index:999;
    transition:.3s;
}

.cart-float{
    background:linear-gradient(135deg, var(--green), #1f4c2b);
}

.whatsapp:hover,
.cart-float:hover{
    transform:scale(1.1);
}

.hero h3{

font-size:22px;

color:white;
margin-top:35px;
margin-bottom:20px;
}


/*==================================
SCROLL TOP
==================================*/

.scroll-top{
    position:fixed;
    right:25px;
    bottom:25px;
    width:55px;
    height:55px;
    background:var(--gold);
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:22px;
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
}

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

.scroll-top:hover{
    transform:translateY(-5px);
}


/*==================================
ANIMATIONS
==================================*/

@keyframes float{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-15px);
}

100%{
transform:translateY(0);
}

}

@keyframes scrollReviews{
    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

.fade-up{
    opacity:0;
    transform:translateY(50px);
    transition:1s;
}

.fade-up.show{
    opacity:1;
    transform:translateY(0);
}

.shadow{
    box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.rounded{
    border-radius:20px;
}/*==================================
RESPONSIVE
==================================*/

@media(max-width:1200px){

.hero-text h1{
font-size:52px;
}

.product-grid{
grid-template-columns:repeat(2,1fr);
}

.feature-grid{
grid-template-columns:repeat(2,1fr);
}

.footer-grid{
grid-template-columns:repeat(2,1fr);
gap:40px;
}

}


@media(max-width:991px){

section{
padding:80px 0;
}

.nav{
height:90px;
}

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

.menu{

position:fixed;

top:90px;

right:-100%;

width:280px;

height:calc(100vh - 90px);

background:var(--green);

display:flex;

flex-direction:column;

align-items:center;

justify-content:flex-start;

padding-top:40px;

gap:30px;

transition:.4s;

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

}

.menu.active{
right:0;
}

.menu li{
width:100%;
text-align:center;
}

.menu a{
display:block;
padding:10px;
font-size:18px;
}

.hamburger{
display:block;
}

.hero{

margin-top:90px;

padding-top:50px;

min-height:auto;

padding-bottom:80px;

}

.hero-grid{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.hero-text{

order:2;

}

.hero-image{

order:1;

}

.hero-text p{

margin:auto auto 35px;

}

.hero-btns{

justify-content:center;

}

.split{

grid-template-columns:1fr;

text-align:center;

}

.about img,
.consultation img{

max-width:500px;

margin:auto;

}

.review-card{

width:300px;
min-width:300px;

}

.shop-cta h2{

font-size:38px;

}

}


@media(max-width:768px){

.container{

width:92%;

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

.hero{

background-position:80% center;

margin-top:90px;

padding:50px 25px 80px;

text-align:center;

}

.hero-content{

max-width:100%;

}
.badge{
    margin-top:25px;
}

.hero h3{

font-size:22px;

color:white;
margin-top:35px;
margin-bottom:20px;
}

.hero p{

font-size:17px;

}

}

.section-title{

font-size:34px;

}

.product-grid{

grid-template-columns:1fr;

}

.feature-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.card img{

height:240px;

}

.btn{

padding:13px 28px;

font-size:15px;

}

.review-card{

width:280px;

min-width:280px;

padding:25px;

}

.shop-cta h2{

font-size:32px;

}

.shop-cta p{

font-size:16px;

}

}


@media(max-width:576px){

.hero{

padding-top:40px;

}

.hero h1{

font-size:30px;

line-height:1.5;

}

.hero p{

font-size:15.5px;

}

.hero-btns{

flex-direction:column;

align-items:center;

}

.hero-btns .btn{

width:100%;

max-width:280px;

text-align:center;

}

.section-title{

font-size:28px;

}

.about h2,
.consultation h2{

font-size:30px;

}

.review-card{

width:260px;

min-width:260px;

}

.logo h2{

font-size:18px;

}

.logo p{

display:none;

}

.whatsapp{

left:18px;
bottom:18px;
width:55px;
height:55px;

}

.scroll-top{

right:18px;
bottom:18px;
width:50px;
height:50px;

}

}


/*==================================
UTILITY CLASSES
==================================*/

.text-center{
text-align:center;
}

.mt-20{
margin-top:20px;
}

.mt-40{
margin-top:40px;
}

.mt-60{
margin-top:60px;
}

.mb-20{
margin-bottom:20px;
}

.mb-40{
margin-bottom:40px;
}

.mb-60{
margin-bottom:60px;
}

.py{
padding:100px 0;
}

.bg-green{
background:var(--green);
color:#fff;
}

.bg-light{
background:var(--cream);
}

.radius{
border-radius:20px;
}

.shadow-lg{
box-shadow:0 20px 45px rgba(0,0,0,.12);
}

.transition{
transition:.35s;
}

.hide{
display:none;
}

.show{
display:block;
}
/* Keep hero flush with the topbar on very small phones, matching the 78px header height */
@media(max-width:400px){
    .hero{ margin-top:78px; }
}

/*==================================
CART & HEADER ICONS (cart page, add-to-cart, checkout modal)
==================================*/

.header-icons{
    display:flex;
    align-items:center;
    gap:18px;
}

.icon-btn{
    position:relative;
    color:#fff;
    font-size:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    transition:.3s;
}

.icon-btn:hover{
    color:var(--gold);
}

.cart-count{
    position:absolute;
    top:-2px;
    left:-2px;
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:50px;
    background:var(--gold);
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:none;
    align-items:center;
    justify-content:center;
}

/* -------- product card add-to-cart -------- */
.card-actions{
    display:flex;
    gap:10px;
    justify-content:center;
    margin-top:10px;
 padding:0 16px 0px 16px;
 
    flex-wrap:wrap;
}

.add-cart-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--green);
    color:#fff;
    border:none;
    padding:14px 26px;
    border-radius:50px;
    font-weight:600;
    font-family:inherit;
    font-size:15px;
    cursor:pointer;
    transition:.3s;
}

.add-cart-btn:hover{
    background:var(--green2);
    transform:translateY(-3px);
}

/* -------- cart page shell -------- */
.cart-page{
    padding:160px 0 110px;
    min-height:60vh;
}

.page-title-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:45px;
}

.page-title-row h1{
    color:var(--green);
    font-size:36px;
}

.breadcrumb{
    color:#888;
    font-size:14px;
    margin-top:8px;
}

.breadcrumb a{ color:#888; }
.breadcrumb a:hover{ color:var(--gold); }
.breadcrumb .sep{ margin:0 8px; }
.breadcrumb .current{ color:var(--green); font-weight:600; }

.btn.secondary-outline{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:2px solid var(--green);
    color:var(--green);
    background:none;
    padding:12px 26px;
    border-radius:50px;
    font-weight:600;
    transition:.3s;
    cursor:pointer;
    font-family:inherit;
    font-size:15px;
}

.btn.secondary-outline:hover{
    background:var(--green);
    color:#fff;
}

/* -------- empty cart -------- */
.empty-cart{
    text-align:center;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:80px 30px;
}

.empty-cart i{
    font-size:50px;
    color:var(--gold);
    margin-bottom:20px;
}

.empty-cart h3{
    color:var(--green);
    font-size:24px;
    margin-bottom:10px;
}

.empty-cart p{
    color:#888;
    margin-bottom:30px;
}

/* -------- layout -------- */
.cart-layout{
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:35px;
    align-items:start;
}

.cart-items{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.cart-row{
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    padding:20px;
    display:grid;
    grid-template-columns:80px 1fr auto auto;
    align-items:center;
    gap:20px;
}

.cart-thumb{
    width:80px;
    height:80px;
    border-radius:12px;
    overflow:hidden;
    background:var(--cream);
    display:flex;
    align-items:center;
    justify-content:center;
}

.cart-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.cart-thumb-fallback{
    color:var(--gold);
    font-size:24px;
}

.cart-item-info h3{
    color:var(--green);
    font-size:18px;
    margin-bottom:6px;
}

.variant-tags{
    display:inline-block;
    background:var(--cream);
    color:var(--gold-deep,var(--gold));
    font-size:12px;
    padding:3px 10px;
    border-radius:50px;
    margin-bottom:6px;
}

.cart-item-info .price{
    color:var(--gold);
    font-weight:700;
    font-size:16px;
}

.qty-control{
    display:flex;
    align-items:center;
    border:1.5px solid #eee;
    border-radius:50px;
    overflow:hidden;
}

.qty-control button{
    width:34px;
    height:34px;
    border:none;
    background:var(--cream);
    color:var(--green);
    font-size:18px;
    font-weight:700;
    cursor:pointer;
    transition:.25s;
}

.qty-control button:hover{
    background:var(--gold);
    color:#fff;
}

.qty-control input{
    width:40px;
    text-align:center;
    border:none;
    font-size:15px;
    font-weight:600;
    color:var(--text);
    background:transparent;
}

.remove-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:none;
    background:#fbeaea;
    color:#c0392b;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s;
}

.remove-btn:hover{
    background:#c0392b;
    color:#fff;
}

/* -------- promo -------- */
.promo-row{
    display:flex;
    align-items:center;
    gap:12px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    padding:18px 22px;
    margin-top:22px;
    flex-wrap:wrap;
}

.promo-row i{
    color:var(--gold);
    font-size:18px;
}

.promo-label{
    font-weight:600;
    font-size:14.5px;
    color:var(--green);
    white-space:nowrap;
}

.promo-row input{
    flex:1;
    min-width:160px;
    border:1.5px solid #eee;
    border-radius:12px;
    padding:12px 16px;
    font-family:inherit;
    font-size:14.5px;
}

.promo-row input:focus{
    outline:none;
    border-color:var(--gold);
}

/* -------- order summary -------- */
.order-summary{
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:32px;
}

.order-summary h3{
    color:var(--green);
    font-size:22px;
    margin-bottom:22px;
}

.delivery-option-box{
    margin-bottom:20px;
    padding:16px 18px;
    border:1px solid #eee;
    border-radius:14px;
    background:var(--cream);
}

.dob-title{
    font-weight:700;
    color:var(--green);
    margin-bottom:12px;
}

.dob-radio{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
    font-weight:600;
    font-size:14.5px;
    color:var(--text);
    cursor:pointer;
}

.dob-branch{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:10px;
}

.dob-branch label{
    font-size:13.5px;
    font-weight:600;
    color:var(--green);
}

.dob-branch select{
    padding:11px 14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-family:inherit;
}

.summary-line{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    color:#666;
    font-size:15px;
    border-bottom:1px dashed #eee;
}

.summary-line.discount{
    color:#1d8a4a;
}

.summary-total{
    display:flex;
    justify-content:space-between;
    padding:18px 0 6px;
    font-size:20px;
    font-weight:700;
    color:var(--green);
}

.btn.primary.btn-block{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    width:100%;
    margin-top:18px;
    border:none;
    cursor:pointer;
    font-size:16px;
}

.trust-mini{
    margin-top:22px;
    background:#fff;
    border-radius:18px;
    box-shadow:var(--shadow);
    padding:26px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.feature-item{
    display:flex;
    align-items:center;
    gap:14px;
}

.feature-item i{
    width:42px;
    height:42px;
    border-radius:50%;
    background:var(--cream);
    color:var(--gold);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    flex:none;
}

.feature-item b{
    display:block;
    color:var(--green);
    font-size:14.5px;
}

.feature-item span{
    color:#888;
    font-size:13px;
}

/* -------- checkout modal -------- */
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(13,35,20,.6);
    z-index:2000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modal-content{
    background:#fff;
    border-radius:20px;
    max-width:480px;
    width:100%;
    max-height:90vh;
    overflow-y:auto;
    padding:32px;
    box-shadow:0 40px 80px rgba(0,0,0,.3);
}

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

.modal-header h2{
    color:var(--green);
    font-size:24px;
}

.modal-close{
    background:none;
    border:none;
    font-size:26px;
    color:#999;
    cursor:pointer;
    line-height:1;
}

.modal-close:hover{ color:var(--green); }

#checkout-form .form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

#checkout-form label{
    font-size:14.5px;
    font-weight:600;
    color:var(--green);
}

#checkout-form input,
#checkout-form textarea{
    border:1.5px solid #e6e6e6;
    border-radius:12px;
    padding:13px 16px;
    font-family:inherit;
    font-size:15px;
    background:#fafafa;
}

#checkout-form input:focus,
#checkout-form textarea:focus{
    outline:none;
    border-color:var(--gold);
    background:#fff;
}

#checkout-form textarea{
    resize:vertical;
    min-height:90px;
}

.form-actions{
    display:flex;
    gap:14px;
    margin-top:10px;
}

.form-actions .btn{
    flex:1;
    text-align:center;
    border:none;
    cursor:pointer;
    font-size:15px;
}

/* -------- toast -------- */
.toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:var(--green);
    color:#fff;
    padding:14px 24px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14.5px;
    font-weight:600;
    box-shadow:0 20px 40px rgba(0,0,0,.25);
    opacity:0;
    pointer-events:none;
    transition:.35s;
    z-index:3000;
}

.toast svg,
.toast i{
    width:18px;
    font-size:16px;
    color:var(--gold);
}

.toast.show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* -------- responsive -------- */
@media(max-width:900px){
    .cart-layout{ grid-template-columns:1fr; }
}

@media(max-width:600px){
    .cart-row{
        grid-template-columns:60px 1fr;
        grid-template-areas:
            "thumb info"
            "qty remove";
    }
    .cart-thumb{ grid-area:thumb; width:60px; height:60px; }
    .cart-item-info{ grid-area:info; }
    .cart-qty-col{ grid-area:qty; }
    .remove-btn{ grid-area:remove; justify-self:start; }
    .cart-page{ padding:150px 0 80px; }
    .page-title-row h1{ font-size:28px; }
}
/*==================================================
PRODUCTS LISTING PAGE (2.html) — merged from inline styles
==================================================*/
        /*==================================
        PRODUCTS PAGE HEADER
        (logo centered, hamburger on the left — desktop & mobile)
        ==================================*/

        .shop-header .nav{
            position:relative;
            display:grid;
            grid-template-columns:60px 1fr 60px;
            align-items:center;
            height:100px;
            padding:0;
        }

        .shop-header .hamburger{
            display:flex;
            align-items:center;
            justify-content:flex-start;
            grid-column:1;
            font-size:28px;
            color:#fff;
            cursor:pointer;
            width:44px;
            height:44px;
        }

        .shop-header .logo{
            grid-column:2;
            justify-self:center;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:0;
            margin:0;
            height:100%;
        }

        .shop-header .logo-img{
            height:100px;
            width:auto;
            max-width:none;
            display:block;
            object-fit:contain;
            padding:0;
        }

        .shop-header .nav-spacer{
            grid-column:3;
        }

        /* off-canvas side menu, opens from the right, works identically on desktop & mobile */
        .shop-header .menu{
            position:fixed;
            top:0;
            right:-320px;
            width:300px;
            height:100vh;
            background:var(--green);
            display:flex;
            flex-direction:column;
            align-items:stretch;
            justify-content:flex-start;
            padding:110px 30px 30px;
            gap:8px;
            transition:.4s;
            box-shadow:-15px 0 40px rgba(0,0,0,.25);
            z-index:1000;
        }

        .shop-header .menu.active{
            right:0;
        }

        .shop-header .menu li{
            width:100%;
            border-bottom:1px solid rgba(255,255,255,.08);
        }

        .shop-header .menu a{
            display:block;
            padding:16px 6px;
            font-size:18px;
        }

        .menu-close-btn{
            margin:0 0 12px auto;
            border:none;
            background:transparent;
            color:#fff;
            font-size:24px;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:center;
            width:40px;
            height:40px;
            border-radius:50%;
        }

        .menu-close-btn:hover{
            background:rgba(255,255,255,.12);
        }

        .menu-overlay{
            position:fixed;
            inset:0;
            background:rgba(0,0,0,.5);
            opacity:0;
            visibility:hidden;
            transition:.35s;
            z-index:900;
        }

        .menu-overlay.active{
            opacity:1;
            visibility:visible;
        }

        @media (max-width:600px){
            .shop-header .nav{ height:78px; }
            .shop-header .logo-img{ height:78px; }
        }

        /*==================================
        PAGE BANNER
        ==================================*/

        .shop-banner{
            padding:170px 0 70px;
            text-align:center;
            background:
                linear-gradient(rgba(13,35,20,.72),rgba(13,35,20,.72)),
                url("../images/hh.png");
            background-size:cover;
            background-position:center;
        }

        .shop-banner h1{
            color:#fff;
            font-size:44px;
            margin-bottom:14px;
        }

        .shop-banner p{
            color:#ececec;
            font-size:17px;
        }

        .breadcrumb{
            display:inline-flex;
            gap:10px;
            margin-top:20px;
            color:var(--gold);
            font-size:15px;
        }

        .breadcrumb a{ color:#e7dcbe; }
        .breadcrumb a:hover{ color:var(--gold); }

        /*==================================
        FILTER BAR
        ==================================*/

        .filter-bar{
            background:#fff;
            box-shadow:0 6px 20px rgba(0,0,0,.06);
            position:sticky;
            top:100px;
            z-index:50;
        }

        .filter-bar .container{
            display:flex;
            align-items:center;
            justify-content:space-between;
            flex-wrap:wrap;
            gap:16px;
            padding:18px 0;
        }

        .filter-tabs{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        .filter-tabs button{
            border:1px solid #ddd;
            background:#fff;
            padding:9px 22px;
            border-radius:50px;
            font-weight:500;
            color:var(--text);
            cursor:pointer;
            transition:.3s;
            font-family:inherit;
        }

        .filter-tabs button:hover{
            border-color:var(--gold);
            color:var(--gold);
        }

        .filter-tabs button.active{
            background:var(--green);
            border-color:var(--green);
            color:#fff;
        }

        .result-count{
            color:#777;
            font-size:14px;
            white-space:nowrap;
        }

        @media (max-width:600px){
            .filter-bar{ top:78px; }
            .filter-bar .container{ justify-content:center; text-align:center; }
        }

        /*==================================
        SHOP PRODUCT GRID (20 items)
        ==================================*/

        .shop-products{
            background:#f8f5ee;
            padding-top:60px;
        }

        .shop-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:30px;
        }

        .shop-grid .card{
            position:relative;
            display:block;
            cursor:pointer;
            color:inherit;
        }

        /* Fix: the nested old-price and the "تفصیل دیکھیں" span were being
           caught by the site-wide ".card span" rule (display:block, gold,
           bold), which collapsed the price line. Restore their intended look. */
        .shop-grid .card .old-price{
            display:inline;
            font-size:15px;
            color:#aaa;
            font-weight:500;
            margin-inline-start:8px;
        }

        .shop-grid .card .btn{
            display:inline-block;
            font-size:15px;
            font-weight:600;
            color:#fff;
            background:var(--gold);
            padding:10px 26px;
            border-radius:50px;
            margin:10px 0 0;
        }

        .shop-grid .card .btn:hover{
            background:#aa8748;
        }

        .shop-grid .card .card-actions{
            display:flex;
            gap:10px;
            margin-top:10px;
        }

        .shop-grid .card .card-actions .btn{
            flex:1;
            text-align:center;
            margin:0;
        }

        .shop-grid .card .cart-btn{
            background:transparent;
            border:2px solid var(--green);
            color:var(--green);
        }

        .shop-grid .card .cart-btn:hover{
            background:var(--green);
            color:#fff;
        }

        .badge{
            position:absolute;
            top:16px;
            right:16px;
            background:var(--green);
            color:#fff;
            font-size:12px;
            font-weight:600;
            padding:5px 14px;
            border-radius:50px;
            z-index:2;
        }

        .badge.sale{
            background:#a63b3b;
        }

        .card-img-wrap{
            position:relative;
            overflow:hidden;
        }

        .card-img-wrap img{
            height:230px;
            width:100%;
            object-fit:cover;
            transition:.5s;
        }

        .card:hover .card-img-wrap img{
            transform:scale(1.08);
        }

        .card .cat{
            display:block;
            margin-top:18px;
            font-size:13px;
            letter-spacing:.5px;
            color:var(--gold);
            font-weight:600;
        }

        .card h3{
            margin-top:6px;
            font-size:21px;
        }

        .old-price{
            text-decoration:line-through;
            color:#aaa;
            font-size:15px;
            margin-inline-start:8px;
        }

        .pagination{
            display:flex;
            justify-content:center;
            gap:10px;
            margin-top:60px;
        }

        .pagination a{
            width:44px;
            height:44px;
            display:flex;
            align-items:center;
            justify-content:center;
            border-radius:50%;
            background:#fff;
            color:var(--green);
            font-weight:600;
            box-shadow:0 6px 18px rgba(0,0,0,.08);
            transition:.3s;
        }

        .pagination a.active,
        .pagination a:hover{
            background:var(--green);
            color:#fff;
        }

        /* Keep card buttons in separate stacked rows on computer/laptop screens */
        @media(min-width:601px){
            .shop-grid .card .card-actions{
                display:flex !important;
                flex-direction:column !important;
                gap:10px !important;
                align-items:stretch !important;
            }

            .shop-grid .card .card-actions .btn{
                flex:0 0 auto !important;
                width:100% !important;
                margin:0 !important;
                text-align:center !important;
                display:inline-flex !important;
                align-items:center !important;
                justify-content:center !important;
                white-space:nowrap !important;
            }
        }

        @media(max-width:1200px){
            .shop-grid{ grid-template-columns:repeat(3,1fr); }
        }

        @media(max-width:768px){
            .shop-grid{ grid-template-columns:repeat(2,1fr); }
            .shop-banner{ padding:140px 0 55px; }
            .shop-banner h1{ font-size:32px; }
        }

        @media(max-width:480px){
            .shop-grid{ grid-template-columns:1fr; }
        }

        /*==================================
        MOBILE: horizontal product card
        (square image on the right, name/detail/
        price/add-to-cart stacked beside it)
        ==================================*/
        @media(max-width:600px){
            .shop-grid{
                grid-template-columns:1fr;
                gap:14px;
            }

            .shop-products{
                padding-top:30px;
                padding-bottom:40px;
            }

            .shop-grid .card{
                display:grid;
                grid-template-columns:112px 1fr;
                align-items:center;
                gap:10px 18px;
                padding:16px;
                border-radius:18px;
                text-align:right;
            }

            .shop-grid .card:hover{
                transform:none;
            }

            /* column 1 sits on the right in RTL — that's where the image goes */
            .shop-grid .card-img-wrap{
                grid-column:1;
                grid-row:1 / span 4;
                width:112px;
                height:112px;
                align-self:center;
                border-radius:14px;
            }

            .shop-grid .card-img-wrap img{
                width:112px;
                height:112px;
                object-fit:cover;
                border-radius:14px;
            }

            .shop-grid .card .badge{
                top:5px;
                right:5px;
                font-size:9px;
                padding:3px 8px;
            }

            .shop-grid .card .cat{
                grid-column:2;
                grid-row:1;
                margin:0;
                font-size:11.5px;
            }

            .shop-grid .card h3{
                grid-column:2;
                grid-row:2;
                margin:0;
                font-size:16.5px;
                line-height:1.35;
            }

            .shop-grid .card p{
                grid-column:2;
                grid-row:3;
                margin:0;
                font-size:12.5px;
                color:#777;
                display:-webkit-box;
                -webkit-line-clamp:1;
                -webkit-box-orient:vertical;
                overflow:hidden;
            }

            .shop-grid .card > span{
                grid-column:2;
                grid-row:4;
                margin:0;
                font-size:16px;
                justify-self:start;
            }

            .shop-grid .card .old-price{
                font-size:12px;
            }

            /* full-width button row below the image + details */
            .shop-grid .card .card-actions{
                grid-column:1 / -1;
                grid-row:5;
                display:flex;
                gap:12px;
                margin-top:6px;
            }

            .shop-grid .card .card-actions .btn{
                flex:1;
                text-align:center;
                margin:0;
                padding:11px 0;
                font-size:13px;
                border-radius:50px;
            }

            .shop-grid .card .cart-btn{
                border:2px solid var(--green);
                color:var(--green);
                background:transparent;
            }
        }