:root {
  /* ===== Fresh Mandi theme tokens (shared across every page) ===== */
  --forest:#1F6B4A;
  --forest-dark:#154E36;
  --cream:#FAF7F0;
  --sage:#E9F1E4;
  --mango:#E8873C;
  --mango-dark:#C96A24;
  --ink:#22291F;
  --ink-soft:#6b6f60;
  --sun:#F4C542;
  --line:#E4DFD2;
  --radius:16px;
  --surface:#ffffff;
  --bg-card:#E9F1E4;

  /* legacy variable names kept so existing rules pick up the new palette */
  --secondary-main:#1F6B4A;
  --price-color:#1F6B4A;
  --header-notice-bg:#E9F1E4;
  --header-notice-text:#154E36;
  --footer-bg:#154E36;
  --footer-text:#EFEAD9;
  --border-light:#E4DFD2;
  --violet-1:#1F6B4A;
  --violet-2:#154E36;
  --sunset-1:#E8873C;
  --sunset-2:#C96A24;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--cream);
  font-family: "Noto Sans", "Poppins", "Inter", sans-serif;
  margin: 0;
  color: var(--ink);
}

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

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


/* ================= GLOBAL DESKTOP HEADER ================= */

.main-header{
position:sticky;
top:0;
width:100%;
z-index:99999;
background:#fff;
border-bottom:1px solid #edf2f7;
box-shadow:0 2px 15px rgba(0,0,0,.04);
}

.main-header *{
box-sizing:border-box;
}

.main-header .container-fluid{
max-width:1400px;
margin:auto;
padding:0 20px;
}

.main-header .header-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
min-height:78px;
}

/* LOGO */

.main-header .logo-wrap{
flex-shrink:0;
}

.main-header .logo-link{
display:flex;
align-items:center;
text-decoration:none;
}

.main-header .logo-link img{
width:auto;
height:52px;
object-fit:contain;
}

.main-header .logo-text{
margin-left:12px;
}

.main-header .logo-text h1{
margin:0;
font-size:18px;
font-weight:700;
color:var(--ink);
}

.main-header .logo-text p{
margin:2px 0 0;
font-size:12px;
color:#6b7280;
}

/* SEARCH */

.main-header .search-wrapper{
flex:1;
max-width:650px;
}

.main-header .header-search{
display:flex;
align-items:center;
width:100%;
height:48px;
padding:0 16px;
border:1px solid #e5e7eb;
border-radius:14px;
background:#f9fafb;
transition:.3s;
}

.main-header .header-search:focus-within{
border-color:#1F6B4A;
background:#fff;
box-shadow:0 0 0 4px rgba(41,165,108,.08);
}

.main-header .header-search input{
flex:1;
border:none;
outline:none;
background:none;
font-size:14px;
}

/* ACTIONS */

.main-header .header-actions{
display:flex;
align-items:center;
gap:12px;
}

.main-header .header-icon{
position:relative;
width:42px;
height:42px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:#374151;
transition:.25s;
}

.main-header .header-icon:hover{
background:#f3f4f6;
color:#1F6B4A;
}

.main-header .cart-badge{
position:absolute;
top:-2px;
right:-2px;
min-width:18px;
height:18px;
border-radius:50px;
background:#1F6B4A;
color:#fff;
font-size:10px;
font-weight:700;
display:flex;
align-items:center;
justify-content:center;
}

/* NOTICE */

.notice{
background:#E9F1E4;
color:#1F6B4A;
text-align:center;
padding:8px 12px;
font-size:13px;
font-weight:600;
}

/* MENU */

.menu-bottom{
display:flex;
align-items:center;
overflow-x:auto;
white-space:nowrap;
gap:0;
height:44px;
background:white;
max-width:100%;
margin:auto;
padding:0 10px;
}

.menu-bottom::-webkit-scrollbar{
display:none;
}

.nav-link-item{
display:flex;
align-items:center;
height:100%;
padding:0 16px;
color:#fff;
text-decoration:none;
font-size:13.5px;
font-weight:500;
opacity:.92;
border-bottom:2px solid transparent;
transition:.25s;
}

.nav-link-item:hover,
.nav-link-item.active{
opacity:1;
text-decoration:underline;
}

/* MOBILE */

@media(max-width:768px){

.main-header{
    display:none;
}
}
/* Categories */
.cat-card-link,
.cat-item {
  cursor: pointer;
}

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

.cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 999px;
  background: #fff;
}

.cat-card-img-root {
  position: relative;
  padding-bottom: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #f6f6f6;
}

.cat-card-img-root img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.cat-card:hover .cat-card-img-root img {
  transform: scale(1.06);
}

.cat-card-title {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 500;
}


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

.product-section{
padding:20px 0;
background:#fff;
}

.product-section + .product-section{
margin-top:8px;
}

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

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


.category-header h2{
margin:0;
font-size:22px;
font-weight:700;
color:var(--ink);
}


.category-header p{
margin:4px 0 0;
font-size:13px;
color:#6b7280;
}


.view-all{
flex-shrink:0;
}

.view-all a{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 18px;
border:1px solid #1F6B4A;
border-radius:999px;
background:#fff;
color:#1F6B4A;
font-size:14px;
font-weight:600;
text-decoration:none;
transition:.25s ease;
}

.view-all a:hover{
background:#1F6B4A;
color:#fff;
}

/* MOBILE */

@media(max-width:768px){

.category-header{
    flex-direction:column;
    align-items:flex-start;
}

.view-all{
    width:100%;
    margin-top:8px;
}

.view-all a{
    width:100%;
    text-align:center;
}

}



/* DESKTOP */

@media(min-width:769px){

.view-all-btn{

    padding:6px 14px;

    border-radius:8px;

}


.view-all-btn:hover{

    background:#E9F1E4;

    color:#154E36;

}

}
/* ================= GRID ================= */

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
gap:20px;
}

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

.product-card{
background:#fff;
border:1px solid #edf0f2;
border-radius:18px;
overflow:hidden;
transition:.3s ease;
box-shadow:0 2px 10px rgba(0,0,0,.04);
cursor:pointer;
}

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



/* ================= TABLET ================= */

@media(max-width:991px){

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

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

@media(max-width:768px){

.product-section{
    padding:15px 0;
}

.category-header{
    margin-bottom:12px;
}

.category-header h2{
    font-size:18px;
}

.category-header p{
    display:none;
}

.product-grid{
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.product-card{
    border-radius:14px;
}

.pr-card-content{
    padding:10px;
}

.pr-title{
    font-size:13px;
    min-height:36px;
}

.variant-price{
    font-size:17px;
}

.pr-var-btn{
    height:36px;
    font-size:12px;
}

.pr-add-btn{
    height:38px;
    font-size:13px;
    background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
}
}

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

.hero{
  margin:15px;
  border-radius:20px;
  overflow:hidden;
  position:relative;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
}

#heroSlider{
  position:relative;
  height:280px;
}

.hero__slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .6s ease;
  pointer-events:none;
}

.hero__slide.active{
  opacity:1;
  pointer-events:auto;
}

.hero-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* DOTS */

.hero-dots{
  position:absolute;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:5;
}

.hero-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  opacity:.5;
  cursor:pointer;
  transition:.3s;
}

.hero-dots span.active{
  width:24px;
  border-radius:20px;
  background:#29A56C;
  opacity:1;
}

/* MOBILE */

@media(max-width:768px){

  .hero{
      margin:12px;
      border-radius:16px;
  }

  #heroSlider{
      height:180px;
  }

  .hero-image{
      object-fit:cover;
  }

  .hero-dots{
      bottom:10px;
  }

}

/* TABLET */

@media(min-width:769px) and (max-width:1024px){

  #heroSlider{
      height:240px;
  }

}

/* DESKTOP */

@media(min-width:1025px){

  #heroSlider{
      height:420px;
  }

}

/* =========================
 APP STYLE FOOTER / WIDGET
========================= */

.home-widget-section{

padding:40px 15px 90px;

background:var(--forest-dark);

color:#EFEAD9;

}

.footer-inner-wrap{
max-width:1200px;
margin:0 auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:40px;
padding:0 5px 30px;
}

.footer-brand h3{
color:#fff;
font-size:20px;
margin:0 0 8px;
}

.footer-brand p{
font-size:13px;
opacity:.75;
max-width:300px;
margin:0;
}

.footer-cols{
display:flex;
gap:50px;
flex-wrap:wrap;
}

.footer-cols h4{
font-size:12.5px;
text-transform:uppercase;
letter-spacing:.05em;
color:var(--sun);
margin:0 0 12px;
}

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

.footer-cols li{
margin-bottom:8px;
}

.footer-cols a{
font-size:13px;
opacity:.85;
color:#EFEAD9;
text-decoration:none;
}

.footer-cols a:hover{
opacity:1;
text-decoration:underline;
}



.widget-container{

width:100%;

max-width:500px;

margin:auto;

display:flex;

flex-direction:column;

align-items:center;

gap:20px;

}



/* BUTTONS */

.widget-left{

width:100%;

display:flex;

flex-direction:column;

gap:12px;

}



.widget-btn{

width:100%;

height:52px;

border-radius:12px;

display:flex;

align-items:center;

justify-content:center;

text-decoration:none;

font-size:15px;

font-weight:600;

transition:.3s;

}



.widget-btn:hover{

transform:translateY(-2px);

}



/* BUTTON COLORS */

.widget-primary{

background:#1F6B4A;

color:#fff;

}



.widget-outline{

background:#fff;

color:#1F6B4A;

border:1px solid #1F6B4A;

}



.widget-blog{

background:#fff;

color:#E8873C;

border:1px solid #E8873C;

}



.widget-dark{

background:#222;

color:#fff;

}




/* REVIEW CARD */

.widget-review-card{

width:100%;

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

border:1px solid rgba(255,255,255,.12);

border-radius:18px;

padding:22px;

text-align:center;

}



.widget-review-card h3{

margin:0 0 15px;

font-size:16px;

font-weight:700;

color:#fff;

}



.review-item{

display:none;

}



.review-item.active{

display:block;

}



.review-item p{

margin:0;

color:#EFEAD9;

opacity:.85;

font-style:italic;

font-size:13.5px;

line-height:1.6;

}



.review-item span{

display:block;

margin-top:12px;

color:var(--sun);

font-weight:700;

font-size:12.5px;

}




/* SOCIAL ICONS */

.widget-social{

display:flex;

justify-content:center;

gap:15px;

margin-top:20px;

}



.widget-social a{

width:36px;

height:36px;

border-radius:50%;

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

display:flex;

align-items:center;

justify-content:center;

color:#fff;

text-decoration:none;

}




.widget-copy{

text-align:center;

margin-top:18px;

padding-top:14px;

border-top:1px solid rgba(255,255,255,.12);

color:#EFEAD9;

opacity:.6;

font-size:12px;

}





/* =========================
DESKTOP SAME AS MOBILE
========================= */


@media(min-width:769px){

.home-widget-section{

    padding-bottom:40px;

}


.widget-container{

    max-width:500px;

}


.widget-btn{

    min-width:100%;

}


.widget-review-card{

    max-width:500px;

}

}
/* Bottom Navigation */
.bottom-nav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:64px;
background:var(--secondary-main);
display:flex;
justify-content:space-around;
align-items:center;
z-index:999;
border-top:1px solid rgba(255,255,255,.1);
box-shadow:0 -2px 12px rgba(0,0,0,.08);
}

.bottom-nav-btn{
flex:1;
height:100%;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-decoration:none;
color:rgba(255,255,255,.65);
transition:.3s ease;
}

.bottom-nav-btn.active{
color:#fff;
}

.bottom-nav-icon{
width:26px;
height:26px;
stroke:currentColor;
fill:none;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
margin-bottom:4px;
}

.bottom-nav-label{
font-size:11px;
font-weight:500;
}

.bottom-nav-btn.active .bottom-nav-label{
font-weight:600;
}

@media (min-width:768px){
.bottom-nav{
    display:none;
}
}
.category-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
}

@media(min-width:768px){
.category-grid{
    grid-template-columns:repeat(4,1fr);
}
}

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

.cat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.cat{
  text-decoration:none;
  text-align:center;
  transition:.3s ease;
}

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

.cat__badge{
  background:#f8f9fa;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:1/1;

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

  box-shadow:0 2px 10px rgba(0,0,0,.05);
  transition:.3s ease;
}

.cat__badge img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.3s ease;
}

.cat:hover .cat__badge{
  box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.cat:hover .cat__badge img{
  transform:scale(1.05);
}

.cat__name{
  margin-top:10px;
  font-size:14px;
  font-weight:600;
  color:#222;
  line-height:1.4;
}

/* =========================
 TABLET
========================= */

@media(max-width:991px){

  .cat-row{
      grid-template-columns:repeat(4,1fr);
      gap:15px;
  }

}

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

@media(max-width:768px){

  .cat-row{
      grid-template-columns:repeat(3,1fr);
      gap:12px;
  }

  .cat__badge{
      border-radius:14px;
  }

  .cat__name{
      font-size:12px;
      margin-top:8px;
  }

}


@media(max-width:768px){

  .app-bar-main{
    background:#fff;
    padding:12px 16px;
    border-bottom:1px solid #eee;
}

.mobile-top-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/* Menu */

.site-burger{
    width:36px;
    height:36px;
    border:none;
    background:transparent;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#2e7d32;
    flex-shrink:0;
}

/* Logo + Name */

.mobile-brand{
    flex:1;
    display:flex;
    align-items:center;
    text-decoration:none;
    color:inherit;
    overflow:hidden;
}

.mobile-brand img{
    width:52px;
    height:52px;
    object-fit:contain;
    flex-shrink:0;
}

/* Text */

.brand-content{
    margin-left:10px;
    overflow:hidden;
}

.brand-content h6{
    margin:0;
    font-size:16px;
    font-weight:700;
    line-height:1.1;
    color:#111;
    white-space:nowrap;
}

.brand-content span{
    display:block;
    margin-top:2px;
    font-size:11px;
    color:#666;
    white-space:nowrap;
}

/* Whatsapp */

.mobile-whatsapp{
    width:20px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#25D366;
    font-size:24px;
    flex-shrink:0;
}

/* Search */

.mobile-search-box{
    margin-top:12px;
    height:44px;
    background:#f6f7f8;
    border-radius:12px;
    display:flex;
    align-items:center;
    padding:0 14px;
    gap:10px;
}

.mobile-search-box svg{
    color:#777;
    flex-shrink:0;
}

.mobile-search-box input{
    border:none;
    background:none;
    width:100%;
    outline:none;
    font-size:14px;
}

}


.menu-bottom{
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
gap:25px;
width:100%;
}

.menu-bottom .links{
color:#000;
text-decoration:none;
font-size:14px;
white-space:nowrap;
}
.search-wrapper{
width:100%;
}


.header-search{
height:46px;
width:100%;
max-width:620px;
display:flex;
align-items:center;
background:#fff;
border:1px solid #e5e5e5;
border-radius:12px;
padding:0 14px;
box-shadow:0 2px 8px rgba(0,0,0,.04);
transition:.3s ease;
}


.header-search:focus-within{
border-color:#1F6B4A;
box-shadow:0 0 0 3px rgba(41,165,108,.12);
}


.search-icon{
display:flex;
align-items:center;
justify-content:center;
color:#6b7280;
margin-right:12px;
}


.search-field{
flex:1;
}


.search-field input{
width:100%;
border:0;
outline:none;
background:transparent;
font-size:14px;
color:#333;
font-family:inherit;
}


.search-field input::placeholder{
color:#999;
}


.search-clear{
border:0;
background:none;
cursor:pointer;
font-size:22px;
color:#777;
padding:0;
margin-left:10px;
}


/* Header Icons */

.header-actions{
display:flex;
align-items:center;
}


.header-icon{
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
color:var(--primary-dark);
font-size:22px;
position:relative;
transition:.3s ease;
}


.header-icon:hover{
background:var(--primary-light);
color:var(--primary);
}


/* Cart Badge */

.cart-badge{

position:absolute;
top:-4px;
right:-5px;

min-width:18px;
height:18px;

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

font-size:11px;
font-weight:600;

border-radius:50%;

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

}


/* WhatsApp */

.whatsapp-icon i{
color:#25D366;
}


@media(max-width:768px){

.header-actions{
    gap:8px;
}

.header-icon{
    width:34px;
    height:34px;
    font-size:20px;
}

}

/* HEADER */

.mobile-app-header{

height:64px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 15px;

background:#fff;

position:sticky;

top:0;

z-index:1000;

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

}


.back-btn{

border:0;

background:none;

font-size:28px;

}



.app-logo{

font-size:20px;

font-weight:700;

color:#1F6B4A;

text-decoration:none;

}



.header-actions{

display:flex;

gap:18px;

align-items:center;

}


.cart-icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:40px;
  color:#070707;
  text-decoration:none;
}


.cart-svg{

  width:24px;
  height:24px;

  display:block;

  fill:none;

  stroke:currentColor;

}


/* SEARCH */


.mobile-search-box{

padding:12px 16px;

}


.mobile-search{

width:100%;

height:42px;

border-radius:25px;

border:1px solid #ddd;

padding:0 18px;

}





.product-count{

padding:0 16px;

font-weight:600;

margin-bottom:10px;

}




/* =====================================================================
   UNIFIED PRODUCT CARD — final rules (paste at the VERY END of style.css)
   Home page aur Products listing page (mobile + desktop) ab is EK hi
   .card component ko use karte hain, isliye ye rules yahi final/winning
   honi chahiye — file ke sabse aakhri hisse mein paste karein.
   ===================================================================== */

   .grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  
  .card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:90%;
    cursor:pointer;
    text-decoration:none;
    color:inherit;
    transition:.25s ease;
  }
  
  .card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
  
  .card__img{
    position:relative;
    aspect-ratio:1/1;
    background:var(--bg-card);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  
  .card__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.35s ease;
  }
  
  .card:hover .card__img img{
    transform:scale(1.05);
  }
  
  /* Discount tag on card image */
  .card__badge{
    position:absolute;
    top:10px;
    left:10px;
    background:var(--mango);
    color:#fff;
    font-size:11px;
    font-weight:700;
    padding:3px 9px;
    border-radius:999px;
    z-index:2;
  }
  
  .card__body{
    padding:12px 14px 14px;
    display:flex;
    flex-direction:column;
    flex:1;
  }
  
  .card__name{
    font-size:13.5px;
    font-weight:600;
    line-height:1.35;
    color:var(--ink);
    min-height:37px;
  
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  
  .card__price{
    display:flex;
    align-items:baseline;
    gap:6px;
    min-height:20px;
  }
  
  .card__price b{
    font-size:15px;
    font-weight:700;
    color:var(--forest-dark);
  }
  
  .card__price s{
    font-size:12px;
    color:var(--ink-soft);
  }
  
  .variant-select{
    width:100%;
    height:38px;
    border:1px solid var(--line);
    border-radius:10px;
    padding:0 10px;
    font-size:12.5px;
    color:var(--ink);
    background:#fff;
    margin-top:auto;
  }
  
  .card__add{
    background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
    width:100%;
    height:38px;
    margin-top:8px;
    border:1.5px solid var(--forest);
    color:var(--forest);
    background:#fff;
    font-size:12.5px;
    font-weight:700;
    border-radius:10px;
    text-align:center;
    transition:.15s ease;
  }
  
  .card__add:hover{
    background:var(--forest);
    color:#fff;
  }
  
  /* ---- Tablet ---- */
  @media (min-width:769px) and (max-width:1024px){
    .grid{
      grid-template-columns:repeat(3,1fr);
    }
  }
  
  /* ---- Mobile ---- */
  @media (max-width:768px){
    .grid{
      grid-template-columns:repeat(2,1fr);
      gap:12px;
    }
    .card__name{
      font-size:13px;
      min-height:34px;
    }
    .card__price b{
      font-size:14px;
    }
    .variant-select,
    .card__add{
      height:34px;
      font-size:12px;
      background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
    }
  }
  




/* FILTER SORT */


.mobile-filter-bar{


position:fixed;

bottom:0;

left:0;

right:0;


height:60px;


display:flex;


background:#fff;


box-shadow:0 -3px 15px rgba(0,0,0,.12);


z-index:2000;


}



.mobile-filter-bar button{

width:50%;

border:0;

background:white;

font-size:14px;

font-weight:600;

display:flex;

justify-content:center;

gap:8px;

align-items:center;

}






/* FILTER SHEET */


.sheet-overlay{

display:none;

position:fixed;

inset:0;

background:rgba(0,0,0,.4);

z-index:2500;

}



.filter-sheet{

position:fixed;

bottom:-100%;

left:0;

right:0;

background:white;

border-radius:22px 22px 0 0;

padding:20px;

z-index:3000;

transition:.3s;

}



.filter-sheet.active{

bottom:0;

}



.filter-head{

display:flex;

justify-content:space-between;

align-items:center;

}



.chips{

display:flex;

gap:8px;

flex-wrap:wrap;

margin-top:10px;

}


.chips label{

border:1px solid #ddd;

padding:8px 12px;

border-radius:20px;

}



.price-input{

display:flex;

gap:10px;

margin-top:10px;

}



.price-input input{

width:50%;

height:40px;

border:1px solid #ddd;

border-radius:8px;

padding:8px;

}



.apply-btn{

width:100%;

margin-top:20px;

height:45px;

border:0;

border-radius:10px;

background:#1F6B4A;

color:white;

font-weight:600;

}


/* product detailes */

.product-details-wrap{
  max-width:1400px;
  margin:auto;
  padding:30px 20px;
}

.product-details-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
}

.product-gallery{
  background:#fff;
}

.main-image{
  height:520px;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  border:1px solid #eee;
}

.main-image img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.thumb-gallery{
  display:flex;
  gap:12px;
  margin-top:15px;
}

.thumb-item{
  width:75px;
  height:75px;
  border:2px solid #eee;
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

.thumb-item.active{
  border-color:#1F6B4A;
}

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

.product-category{
  color:#1F6B4A;
  font-weight:700;
}

.product-title{
  font-size:34px;
  margin:10px 0;
}

.product-rating{
  color:#f7b500;
  margin-bottom:15px;
}

.product-rating span{
  color:#666;
  margin-left:10px;
}

.product-price{
  font-size:40px;
  font-weight:800;
  color:#111;
}

.stock-badge{
  display:inline-block;
  margin-top:10px;
  padding:8px 14px;
  border-radius:10px;
  background:#E9F1E4;
  color:#1F6B4A;
  font-weight:600;
}

.detail-section{
  margin-top:25px;
}

.detail-section h4{
  margin-bottom:12px;
}

.variant-list{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.variant-box{
  border:1px solid #ddd;
  border-radius:12px;
  padding:12px 16px;
  cursor:pointer;
  display:flex;
  gap:10px;
  align-items:center;
}

.variant-box input{
  accent-color:#1F6B4A;
}

/* =========================
   QUANTITY BOX
========================= */

.qty-box{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:74px;

  height:28px;

  background:#E8FFF1;

  border:1px solid #29A56C;

  border-radius:8px;

  overflow:hidden;

}



.qty-box button{

  width:24px;

  height:100%;

  border:none;

  background:transparent;

  color:#1F9D62;

  font-size:18px;

  font-weight:700;

  line-height:1;

  cursor:pointer;

}



.qty-box button:hover{

  background:#29A56C;

  color:#fff;

}



.qty-box input{

  width:25px;

  height:100%;

  border:none;

  background:transparent;

  text-align:center;

  font-size:13px;

  font-weight:700;

  color:#111827;

  outline:none;

}



/* =========================
   QUANTITY BOX
========================= */

.qty-box{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:74px;

  height:28px;

  background:#E8FFF1;

  border:1px solid #29A56C;

  border-radius:8px;

  overflow:hidden;

}



.qty-box button{

  width:24px;

  height:100%;

  border:none;

  background:transparent;

  color:#1F9D62;

  font-size:18px;

  font-weight:700;

  line-height:1;

  cursor:pointer;

}



.qty-box button:hover{

  background:#29A56C;

  color:#fff;

}



.qty-box input{

  width:25px;

  height:100%;

  border:none;

  background:transparent;

  text-align:center;

  font-size:13px;

  font-weight:700;

  color:#111827;

  outline:none;

}



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

.action-buttons{

  display:flex;

  align-items:center;

  justify-content:space-between;

  width:100%;

  margin-top:15px;

  gap:10px;

}


.add-cart-btn,
.buy-now-btn{
  flex:1;
  height:52px;
  border:none;
  border-radius:12px;
  font-weight:700;
}

.add-cart-btn{
  background:#E9F1E4;
  color:#1F6B4A;
}

.buy-now-btn{
  background:#1F6B4A;
  color:#fff;
}

.product-description{
  color:#666;
  line-height:1.8;
}

@media(max-width:768px){

.product-details-grid{
  grid-template-columns:1fr;
}

.main-image{
  height:280px;
}

.product-title{
  font-size:24px;
}

.product-price{
  font-size:30px;
}

.action-buttons{
  position:fixed;
  bottom:65px;
  left:0;
  right:0;
  background:#fff;
  padding:12px;
  z-index:999;
}

.product-details-wrap{
  padding-bottom:120px;
}

}

/* ================= RELATED PRODUCTS ================= */

.related-products-section{
max-width:1400px;
margin:60px auto 0;
padding:0 20px 40px;
}

.related-products-section .category-header{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:24px;
}

.related-products-section h2{
margin:0;
font-size:28px;
font-weight:700;
color:var(--ink);
}

.related-products-section p{
margin:4px 0 0;
color:#6b7280;
font-size:14px;
}

.related-products-section .view-all a{
display:inline-flex;
align-items:center;
justify-content:center;
height:42px;
padding:0 18px;
border-radius:999px;
background:#1F6B4A;
color:#fff;
text-decoration:none;
font-size:14px;
font-weight:600;
transition:.25s;
}

.related-products-section .view-all a:hover{
background:#154E36;
transform:translateY(-2px);
}

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

/* Tablet */

@media (max-width:992px){

.related-products-section .product-grid{
grid-template-columns:repeat(3,1fr);
}

}

/* Mobile */

@media (max-width:768px){

.related-products-section{
padding:0 12px 100px;
margin-top:40px;
}

.related-products-section .category-header{
flex-direction:column;
align-items:flex-start;
gap:10px;
}

.related-products-section h2{
font-size:22px;
}

.related-products-section .view-all{
width:100%;
}

.related-products-section .view-all a{
width:100%;
}

.related-products-section .product-grid{
grid-template-columns:repeat(2,1fr);
gap:12px;
}

}



/* ================= MOBILE PRODUCT APP ================= */

.phone{
width:100%;
max-width:430px;
margin:auto;
background:#fff;
min-height:100vh;
position:relative;
padding-bottom:75px;
}


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

/* ================= MOBILE APP HEADER ================= */

.mobile-app-header{

height:64px;

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

padding:0 16px;

background:#fff;

position:fixed;   /* change */

top:0;
left:0;
right:0;

z-index:9999;

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

}


/* header ke niche content space */

.phone{

padding-top:64px;

}



/* BACK BUTTON */

.back-btn{

border:0;

background:transparent;

font-size:26px;

width:40px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

cursor:pointer;

}



/* TITLE */

.app-logo{

flex:1;

margin-left:8px;

font-size:18px;

font-weight:600;

color:#111;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}



/* CART */

.header-actions{

display:flex;

align-items:center;

}



.cart-icon{

position:relative;

font-size:22px;

text-decoration:none;

}



.cart-icon small{

position:absolute;

right:-5px;

background:#1F6B4A;

color:#fff;

width:18px;

height:18px;

border-radius:50%;

font-size:11px;

display:flex;

align-items:center;

justify-content:center;

}



/* ================= PRODUCT COUNT ================= */


.product-count{



font-size:16px;

font-weight:600;

}




/* ================= GRID ================= */


.product-grid{

display:grid;

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

gap:10px;

padding:0 12px;

}




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


.pr-list-card{

background:#fff;

border-radius:14px;

overflow:hidden;

position:relative;

border:1px solid #eeeeee;

min-height:330px;

}



.pr-image-ctn{


width:100%;

aspect-ratio:1/1;

background:#f7f7f7;

display:flex;

align-items:center;

justify-content:center;

}



.pr-image{


width:100%;

height:100%;


}





/* ================= CONTENT ================= */


.pr-list-card-content{

padding:10px;

position:relative;

min-height:155px;

}



.product-row{


display:flex;

justify-content:space-between;

gap:5px;

}


.pr-title{


font-size:14px;

font-weight:600;

line-height:18px;

margin:0;

color:#222;

height:36px;

overflow:hidden;

}

/* ================= PRICE ================= */


.price-row{

display:flex;

align-items:center;

justify-content:space-between;

margin-top:8px;

}



.price-box{

display:flex;

align-items:center;

gap:6px;

}



.pr-sale-price{

font-size:16px;

font-weight:700;

color:#111;

}


.pr-mrp-price{

font-size:12px;

color:#999;

}



.pr-list-discount{


background:#E9F1E4;

color:#154E36;

padding:3px 6px;

border-radius:5px;

font-size:11px;

font-weight:600;

}





/* ================= VARIANT ================= */


.pr-var-btn,
select.pr-var-btn{


width:100%;

height:34px;

margin-top:10px;

border-radius:8px;

border:1px solid #ddd;

background:#fff;

padding:0 10px;

font-size:13px;


}




/* ================= ADD BUTTON ================= */


.pr-add-btn{


width:100%;

height:38px;


margin-top:10px;


background:#fff;


border:1px solid #1F6B4A;


color:#1F6B4A;


border-radius:8px;


font-size:14px;

font-weight:600;
background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;

}





.pr-add-btn:hover{

background:#1F6B4A;

color:#fff;

}






/* ================= FILTER SORT ================= */


.mobile-filter-bar{


position:fixed;

bottom:0;

left:0;

right:0;

height:58px;


background:#fff;


display:flex;


border-top:1px solid #eee;


z-index:2000;


}



.mobile-filter-bar button{


flex:1;

border:0;

background:#fff;


font-size:14px;

font-weight:600;


display:flex;

justify-content:center;

align-items:center;

gap:8px;


}



.mobile-filter-bar button:first-child{

border-right:1px solid #eee;

}





/* ================= TABLET ================= */


@media(min-width:768px){


.phone{

max-width:100%;

}



.product-grid{

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

padding:20px;

}



.mobile-filter-bar{

display:none;

}


}

/* =====================================================================
 CART PAGE — DESKTOP/TABLET (".site" layout)
 ===================================================================== */
.cart-page-wrap{
display:flex;
gap:32px;
max-width:1200px;
padding:28px 24px 60px;
align-items:flex-start;
}

.cart-left{
flex:0 0 58%;
display:flex;
flex-direction:column;
gap:20px;
}

.cart-right{
flex:0 0 42%;
display:flex;
flex-direction:column;
gap:20px;
position:sticky;
top:90px;
}

.cart-heading{
font-size:24px;
font-weight:800;
color:var(--ink);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
margin:0;
}

.cart-heading span{
font-size:12.5px;
font-weight:700;
color:var(--forest);
background:var(--sage);
padding:6px 14px;
border-radius:999px;
}

.custom-card{
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
padding:22px;
box-shadow:0 2px 12px rgba(34,41,31,.04);
}

.custom-card h3{
font-size:15px;
font-weight:700;
color:var(--ink);
margin:0 0 14px;
}

/* ---- Customer details ---- */
.customer-details{
display:flex;
flex-direction:column;
gap:10px;
}

.customer-details div{
display:flex;
align-items:center;
gap:10px;
font-size:13.5px;
color:var(--ink);
}

.customer-details strong{
font-weight:700;
}

/* ---- Address ---- */
.address-head{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:4px;
}

.address-head a{
font-size:12.5px;
font-weight:700;
color:var(--forest);
}

.text-muted{
color:var(--ink-soft);
font-size:12.5px;
margin:0 0 14px;
}

.address-form input,
.address-form textarea,
.address-form select{
width:100%;
border:1.5px solid var(--line);
border-radius:12px;
padding:12px 14px;
font-size:13.5px;
color:var(--ink);
background:#fff;
font-family:inherit;
}

.address-form input:focus,
.address-form textarea:focus,
.address-form select:focus{
outline:none;
border-color:var(--forest);
}

.address-form textarea{
resize:vertical;
margin-bottom:16px;
}

.grid-2{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:16px;
margin:0 0 16px;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
margin-top:0;
}

/* ---- Coupon ---- */
.coupon-card{
padding:16px 22px;
}

.coupon-head{
display:flex;
align-items:center;
justify-content:space-between;
}

.coupon-head h3{
margin:0;
}

.coupon-head button{
border:1.5px solid var(--forest);
background:#fff;
color:var(--forest);
font-size:12.5px;
font-weight:700;
padding:8px 16px;
border-radius:999px;
}

.coupon-head button:hover{
background:var(--forest);
color:#fff;
}

/* ---- Items ---- */
.cart-items{
display:flex;
flex-direction:column;
}

.cart-item{
display:flex;
gap:14px;
padding:14px 0;
border-bottom:1px solid var(--line);
}

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

.cart-item img,
.cart-image img{
width:72px;
height:72px;
object-fit:cover;
border-radius:12px;
background:var(--sage);
flex:none;
}

.cart-image{
width:72px;
height:72px;
border-radius:12px;
overflow:hidden;
background:var(--sage);
flex:none;
}

.cart-item-info{
flex:1;
display:flex;
flex-direction:column;
gap:4px;
}

.cart-item-info b{
font-size:13.5px;
color:var(--ink);
}

.cart-item-info p{
font-size:12px;
color:var(--ink-soft);
margin:0;
}

.cart-item-info span,
.bill-row span:last-child{
font-weight:700;
color:var(--forest-dark);
}

.qty-control{
margin-top:6px;
}

.qty-control form{
display:inline-flex;
align-items:center;
gap:0;
border:1.5px solid var(--line);
border-radius:10px;
overflow:hidden;
}

.qty-control button{
width:32px;
height:32px;
border:none;
background:var(--sage);
color:var(--forest-dark);
font-size:16px;
font-weight:700;
}

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

.qty-control strong{
min-width:32px;
text-align:center;
font-size:13.5px;
font-weight:700;
}

/* ---- Bill / totals ---- */
.bill-row{
display:flex;
justify-content:space-between;
padding:8px 0;
font-size:13.5px;
color:var(--ink);
}

.bill-row.total{
font-size:15px;
font-weight:800;
padding-top:12px;
}

.bill-row.total span:last-child{
color:var(--forest-dark);
}

/* ---- Savings / delivery info ---- */
.saving-box{
display:flex;
align-items:center;
gap:10px;
background:var(--sage);
color:var(--forest-dark);
border-radius:12px;
padding:12px 16px;
font-size:13px;
font-weight:600;
}

.delivery-box{
background:var(--cream);
border:1px solid var(--line);
border-radius:14px;
padding:16px 18px;
font-size:12.5px;
line-height:1.7;
color:var(--ink-soft);
}

/* ---- Checkout button ---- */
.checkout-sticky{
position:sticky;
bottom:16px;
background:transparent;
padding-top:10px;
}

.continue-btn{
width:100%;
height:48px;
border:none;
border-radius:12px;
background:var(--forest);
color:#fff;
font-weight:700;
font-size:14.5px;
box-shadow:0 12px 24px rgba(31,107,74,.25);
}

.continue-btn:hover{
background:var(--forest-dark);
}

@media (max-width: 991px){
.cart-page-wrap{
    flex-direction:column;
    padding:20px 18px 40px;
}
.cart-left,
.cart-right{
    flex:1 1 100%;
    position:static;
}
.grid-3{
    grid-template-columns:1fr 1fr;
}
}

@media (max-width: 560px){
.grid-2,
.grid-3{
    grid-template-columns:1fr;
}
.cart-heading{
    font-size:19px;
}
}


.hero{
max-width:1200px;
margin:20px auto;
padding:0 20px;
}


.hero-slider{
border-radius:24px;
overflow:hidden;
}


.hero-image{
width:100%;
height:280px;
object-fit:cover;
}



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

.section{
  max-width:1400px;
  margin:0 auto;
  padding:25px 20px;
}


.section__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}


.section__head h2{
  margin:0;
  font-size:28px;
  font-weight:700;
  color:var(--ink);
}


.section__head a{
  text-decoration:none;
  color:#1F6B4A;
  font-size:15px;
  font-weight:600;
}


/* =========================
 PRODUCT GRID
========================= */

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


/* =========================
 TABLET
========================= */

@media(max-width:991px){

.section{
  padding:20px 16px;
}

.section__head h2{
  font-size:24px;
}

.grid{
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

}


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

@media(max-width:768px){

.section{
  padding:18px 12px;
}

.section__head{
  margin-bottom:14px;
}

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

.section__head a{
  font-size:13px;
}

}
/* =========================
   PRODUCT CARD MOBILE FIX
========================= */

.card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #eee;

  display:flex;
  flex-direction:column;
  height:100%;
}

.card__body{
  padding:10px;
  display:flex;
  flex-direction:column;
  flex:1;
}

.card__name{
  font-size:14px;
  font-weight:600;
  line-height:1.35;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  min-height:38px;
  margin:0;
}

.variant-unit{
  font-size:12px;
  color:#666;
  margin:0;
}

.card__price{
  margin:0;
  min-height:auto;
}

.variant-price{
  font-size:18px;
  font-weight:700;
  color:#111;
}

.variant-select{
  width:100%;
  height:36px;
  border:1px solid #ddd;
  border-radius:8px;
  padding:0 10px;
  font-size:13px;

  margin-top:4px; /* auto hata diya */
}

.card__add{
  width:100%;
  height:38px;
  margin-top:6px;

  border-radius:10px;
  border:1px solid #1F6B4A;
  background:#fff;
  color:#1F6B4A;
  font-weight:700;
  background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
}

@media(max-width:768px){

  .card__body{
      padding:8px;
      gap:3px;
  }

  .card__name{
      font-size:13px;
      min-height:34px;
  }

  .variant-price{
      font-size:16px;
  }

  .variant-select{
      height:34px;
      font-size:12px;
  }

  .card__add{
      height:34px;
      font-size:13px;
      background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
  }
}



.cat-row{
display:flex;
gap:22px;
overflow-x:auto;
}



.cat{
width:96px;
text-align:center;
}



.cat__badge{
width:84px;
height:84px;
border-radius:50%;
background:#E9F1E4;
overflow:hidden;
margin:auto;
}



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





.card{
background:#fff;
border-radius:16px;
overflow:hidden;
border:1px solid #eee;
}



.card__img{
height:200px;
background:#E9F1E4;
}



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


.card__add{
margin-top:10px;
width:100%;
padding:10px;
border-radius:10px;
border:1px solid #1F6B4A;
background:white;
color:#1F6B4A;
font-weight:700;
background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
}



@media(max-width:768px){

  .grid{
      grid-template-columns:repeat(2,1fr);
      gap:10px;
  }
  
  .card{
      border-radius:12px;
  }
  
  .card__img{
      height:120px;   /* pehle 200px tha */
  }
  
  .card__body{
      padding:8px;
  }
  
  .card__name{
      font-size:12px;
      min-height:32px;
  }
  
  .card__unit{
      font-size:11px;
  }
  
  .card__price{
      font-size:13px;
      min-height:auto;
  }
  
  .variant-select{
      height:32px;
      font-size:11px;
  }
  
  .card__add{
      height:32px;
      font-size:12px;
      padding:0;
      background-color: #e8fff1;
    border: 1px solid #29A56C;
    border-radius: 6px;
    color: #29A56C;
  }
  
  }



.cart-header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  padding:14px 30px;
  display:flex;
  align-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.cart-brand{
  display:flex;
  align-items:center;
  gap:14px;
  text-decoration:none;
}

.cart-brand img{
  height:60px;
  width:60px;
  object-fit:cover;
  border-radius:12px;
}

.brand-content h2{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:#166534;
  line-height:1.2;
}

.brand-content span{
  display:block;
  margin-top:2px;
  font-size:13px;
  color:#6b7280;
}

@media(max-width:768px){

  .cart-header{
      padding:12px 16px;
  }

  .cart-brand img{
      height:45px;
      width:45px;
  }

  .brand-content h2{
      font-size:18px;
  }

  .brand-content span{
      font-size:11px;
  }
}

.header-back{
  height:60px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:12px;
  border-bottom:1px solid #eee;
  position:sticky;
  top:0;
  z-index:100;
}

.back-btn{
  border:none;
  background:none;
  font-size:22px;
}

.header-back h2{
  margin:0;
  font-size:18px;
  font-weight:700;
}

.order-list{
  padding:12px;
}

.order-card{
  background:#fff;
  border-radius:16px;
  padding:12px;
  margin-bottom:12px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.order-body{
  display:flex;
  gap:12px;
}

.img{
  width:80px;
  height:80px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  background:#f3f4f6;
}

.order-info{
  flex:1;
}

.order-info b{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.order-info small{
  display:block;
  color:#777;
  margin-bottom:6px;
}

.item-price-row{
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:#666;
}

.price{
  margin-top:6px;
  font-size:18px;
  font-weight:700;
  color:#16a34a;
}

.order-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:12px;
}

.qty-form{
  display:flex;
  align-items:center;
  gap:10px;
}

.qty-btn{
  width:32px;
  height:32px;
  border:none;
  border-radius:50%;
  background:#16a34a;
  color:#fff;
  font-size:18px;
}

.qty-count{
  font-weight:700;
}

.mobile-bill-card{
  background:#fff;
  margin:12px;
  padding:16px;
  border-radius:16px;
}

.bill-line{
  display:flex;
  justify-content:space-between;
  margin-bottom:12px;
}

.bill-line.total{
  border-top:1px solid #eee;
  padding-top:12px;
  font-size:18px;
  font-weight:700;
}

.mobile-checkout-bar{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  background:#fff;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 -4px 20px rgba(0,0,0,.08);
  z-index:999;
}

.checkout-price{
  display:flex;
  flex-direction:column;
}

.checkout-price small{
  color:#777;
}

.checkout-price strong{
  font-size:18px;
}

.checkout-btn{
  background:#16a34a;
  color:#fff;
  text-decoration:none;
  padding:12px 24px;
  border-radius:12px;
  font-weight:600;
}

.empty-cart{
  text-align:center;
  padding:40px 20px;
}

.empty-cart a{
  display:inline-block;
  margin-top:10px;
  color:#16a34a;
  font-weight:600;
  text-decoration:none;
}

/* =========================
   DEFAULT
========================= */

.phone{
  display:none;
}

.site{
  display:block;
}

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

@media (max-width:991px){

  .phone{
      display:block;
      padding-bottom:90px;
      background:#f5f6f8;
      min-height:100vh;
  }

  .site{
      display:none !important;
  }
}

/* =========================
 DESKTOP
========================= */

@media (min-width:992px){

  .phone{
      display:none !important;
  }

  .site{
      display:block;
  }
}



/* =========================
   MOBILE DRAWER MENU
========================= */

.drawer{
  position:fixed;
  top:0;
  left:0;
  width:300px;
  max-width:85%;
  height:100vh;
  background:#fff;
  z-index:9999;
  transform:translateX(-100%);
  transition:all .3s ease;
  display:flex;
  flex-direction:column;
  box-shadow:8px 0 30px rgba(0,0,0,.12);
}

.drawer.open{
  transform:translateX(0);
}

.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:9998;
}

.drawer-overlay.open{
  opacity:1;
  visibility:visible;
}

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

.drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px;
  border-bottom:1px solid #f1f5f9;
  background:#f8fafc;
}

.drawer-logo{
  display:flex;
  align-items:center;
  gap:12px;
}

.drawer-logo img{
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
  border:2px solid #e5e7eb;
}

.drawer-logo span{
  font-size:17px;
  font-weight:700;
  color:#166534;
}

.drawer__close{
  width:36px;
  height:36px;
  border:none;
  background:#f3f4f6;
  border-radius:50%;
  cursor:pointer;
  font-size:18px;
}

/* =========================
 NAVIGATION
========================= */

.drawer__links{
  flex:1;
  overflow-y:auto;
  padding:10px 0;
}

.drawer__links a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  color:#1f2937;
  text-decoration:none;
  font-size:15px;
  font-weight:500;
  transition:.2s;
  border-left:3px solid transparent;
}

.drawer__links a:hover{
  background:#f0fdf4;
  color:#166534;
  border-left:3px solid #16a34a;
}

.drawer__links a.active{
  background:#ecfdf5;
  color:#166534;
  border-left:3px solid #16a34a;
}

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

.drawer__foot{
  border-top:1px solid #e5e7eb;
  padding:8px 0;
  background:#fff;
}

.drawer__foot a,
.drawer__foot .item,
.drawer__foot button{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  color:#1f2937;
  text-decoration:none;
  background:none;
  border:none;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:.2s;
}

.drawer__foot a:hover,
.drawer__foot .item:hover,
.drawer__foot button:hover{
  background:#f0fdf4;
  color:#166534;
}

.drawer__foot .icon{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#ecfdf5;
  color:#16a34a;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:15px;
}

/* =========================
 SCROLLBAR
========================= */

.drawer__links::-webkit-scrollbar{
  width:4px;
}

.drawer__links::-webkit-scrollbar-thumb{
  background:#d1d5db;
  border-radius:20px;
}


/* =========================
   CHECKOUT PAGE
========================= */

.checkout-address-page{
  padding:15px;
  padding-bottom:100px;
}

/* Address Card */

.address-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  margin-bottom:15px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.address-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}

.address-head h3{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#222;
}

.address-head a{
  text-decoration:none;
  color:#16a34a;
  font-size:14px;
  font-weight:600;
}

/* Form */

.form-group{
  margin-bottom:15px;
}

.form-group label{
  display:block;
  margin-bottom:6px;
  font-size:14px;
  font-weight:600;
  color:#444;
}

.form-group input,
.form-group textarea,
.form-group select{
  width:100%;
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  background:#fff;
  outline:none;
  transition:.3s;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.12);
}

.form-group textarea{
  resize:none;
}

/* Grid */

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

/* Bill Card */

.mobile-bill-card{
  background:#fff;
  border-radius:16px;
  padding:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.bill-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  font-size:15px;
}

.bill-line span{
  color:#666;
}

.bill-line strong{
  color:#111;
  font-weight:700;
}

.bill-line.total{
  margin-top:8px;
  padding-top:14px;
  border-top:1px dashed #dcdcdc;
}

.bill-line.total strong{
  color:#16a34a;
  font-size:20px;
}

/* Bottom Checkout Bar */

.mobile-checkout-bar{
  position:fixed;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:390px;
  background:#fff;
  padding:12px 15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 -3px 15px rgba(0,0,0,.08);
  z-index:100;
}

.checkout-price small{
  display:block;
  color:#666;
  font-size:12px;
}

.checkout-price strong{
  display:block;
  color:#111;
  font-size:20px;
  font-weight:700;
}

.checkout-btn{
  border:none;
  background:#16a34a;
  color:#fff;
  padding:13px 24px;
  border-radius:30px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.checkout-btn:hover{
  background:#15803d;
}

/* Tablet */

@media (max-width:768px){

  .checkout-address-page{
      padding:12px;
      padding-bottom:100px;
  }

  .address-card,
  .mobile-bill-card{
      padding:15px;
  }

}

/* Mobile */

@media (max-width:480px){

  .grid-2{
      grid-template-columns:1fr;
      gap:0;
  }

  .address-head{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
  }

  .checkout-btn{
      padding:12px 18px;
      font-size:14px;
  }

  .checkout-price strong{
      font-size:18px;
  }

}

/* Very Small Devices */

@media (max-width:360px){

  .mobile-checkout-bar{
      padding:10px;
  }

  .checkout-btn{
      padding:10px 15px;
      font-size:13px;
  }

  .checkout-price strong{
      font-size:16px;
  }

}
/* =========================
   ORDERS PAGES
========================= */

.order-tabs{
  display:flex;
  gap:8px;
  padding:15px;
  overflow-x:auto;
  scrollbar-width:none;
}

.order-tabs::-webkit-scrollbar{
  display:none;
}

.order-tabs .tab{
  padding:10px 16px;
  border-radius:25px;
  background:#fff;
  color:#555;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  border:1px solid #e5e7eb;
  transition:.3s;
}

.order-tabs .tab.active{
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
}

/* =========================
 ORDER DETAILS PAGE
========================= */

.order-details-page{
  padding:15px;
}

.order-summary-card{
  background:#fff;
  border-radius:18px;
  padding:18px;
  margin-bottom:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.summary-price{
  font-size:30px;
  font-weight:700;
  color:#16a34a;
  margin-bottom:15px;
}

.summary-meta p{
  margin:8px 0;
  font-size:14px;
  color:#555;
}

.section-title{
  font-size:18px;
  font-weight:700;
  margin:0 0 15px;
}

/* =========================
 ORDER LIST
========================= */

.order-list{
  padding:0 15px;
}

.order-card{
  background:#fff;
  border-radius:18px;
  padding:15px;
  margin-bottom:15px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.order-card-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:15px;
}

.order-id{
  font-size:14px;
  font-weight:700;
  color:#222;
}

/* =========================
 STATUS BADGES
========================= */

.status-badge,
.status-chip{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:20px;
  font-size:12px;
  font-weight:700;
}

.status-badge.pending,
.status-chip.status-pending{
  background:#fff7ed;
  color:#ea580c;
}

.status-badge.completed,
.status-badge.delivered,
.status-chip.status-completed{
  background:#ecfdf5;
  color:#16a34a;
}

.status-badge.canceled,
.status-chip.status-canceled{
  background:#fef2f2;
  color:#dc2626;
}

/* =========================
 PRODUCT ROW
========================= */

.order-body{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.order-body .img{
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  background:#f5f5f5;
  flex-shrink:0;
}

.order-body .img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.order-info{
  flex:1;
}

.order-info b,
.order-info h4{
  display:block;
  margin:0 0 5px;
  font-size:15px;
  font-weight:600;
  color:#222;
}

.order-info p,
.order-info small{
  display:block;
  margin:0 0 6px;
  color:#777;
  font-size:12px;
  line-height:1.4;
}

.order-info .price,
.price{
  color:#16a34a;
  font-size:16px;
  font-weight:700;
}

/* =========================
 ACTIONS
========================= */

.order-actions{
  display:flex;
  gap:10px;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid #f1f1f1;
}

.order-actions form{
  margin:0;
}

.btn-reset,
.btn-apply{
  border:none;
  border-radius:25px;
  padding:10px 18px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.btn-reset{
  background:#f3f4f6;
  color:#333;
}

.btn-reset:hover{
  background:#e5e7eb;
}



.btn-apply:hover{
  background:#15803d;
}

/* =========================
 DESKTOP ORDER DETAILS
========================= */

.orders-wrap{
  max-width:1200px;
  margin:40px auto;
  padding:0 20px;
}

.desktop-order-summary{
  background:#fff;
  border-radius:18px;
  padding:24px;
  margin-bottom:24px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.desktop-meta{
  display:flex;
  gap:25px;
  flex-wrap:wrap;
  margin-top:10px;
}

.address-box{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid #eee;
}

.desktop-items{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.order-card-desk{
  display:grid;
  grid-template-columns:90px 1fr 120px 140px;
  gap:20px;
  align-items:center;
  background:#fff;
  padding:16px;
  border-radius:18px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}

.p-img{
  width:90px;
  height:90px;
  border-radius:14px;
  overflow:hidden;
  background:#f5f5f5;
}

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

.oc-price{
  font-size:18px;
  font-weight:700;
  color:#16a34a;
}

.oc-qty{
  font-weight:600;
}

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

.orders-count{
  width:30px;
  height:30px;
  border-radius:50%;
  background:rgb(249, 247, 247);
  color:rgb(24, 23, 23);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
}

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

@media(max-width:768px){

  .summary-price{
      font-size:26px;
  }

  .order-body .img{
      width:65px;
      height:65px;
  }

  .order-info b,
  .order-info h4{
      font-size:14px;
  }

  .order-card{
      padding:12px;
  }
}

@media(max-width:480px){

  /* .order-actions{
      flex-direction:column;
  } */

  .btn-reset,
  .btn-apply{
      width:100%;
  }
}






/* =========================
   CART ITEMS
========================= */

.cart-items{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-height:500px;
  overflow-y:auto;
  padding-right:4px;
}

.cart-item{
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  padding:14px;
}

.cart-item-top{
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.cart-image{
  width:72px;
  height:72px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  background:#f5f5f5;
}

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

.cart-content{
  flex:1;
  min-width:0;
}

.cart-product-name{
  display:block;
  text-decoration:none;
  color:var(--ink);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  margin-bottom:4px;
}

.cart-product-name:hover{
  color:var(--forest);
}

.cart-variant{
  font-size:12px;
  color:var(--ink-soft);
}

.cart-price{
  font-size:16px;
  font-weight:800;
  color:var(--forest-dark);
  white-space:nowrap;
}

.cart-item-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
}

.cart-count{
  position:absolute;
  right:-5px;
  background:red;
  color:#fff;
  min-width:18px;
  height:18px;
  border-radius:50%;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* =========================
   HEADER CART BADGE
========================= */
.cart-icon{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-cart-count{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:50px;
  background:#ff3b30;
  color:#fff;
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* QTY BOX */
.qty-form{
  display:flex;
  align-items:center;
  border:1px solid #dfe3e8;
  border-radius:8px;
  overflow:hidden;
  height:32px;
}

.qty-btn{
  width:32px;
  height:32px;
  border:none;
  background:#f8f9fa;
  color:#111827;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.qty-btn:hover{
  background:#eef2f7;
}

.qty-number{
  min-width:36px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600;
  color:#111827;
  border-left:1px solid #dfe3e8;
  border-right:1px solid #dfe3e8;
}
.cart-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  width:100%;
}

.cart-bottom form{
  margin:0;
}

.remove-btn{
    border:none;
    background:none;
    color:#6c757d;
    font-size:14px;
    font-weight:600;
    padding:4px 0;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.remove-btn:hover{
    color:#6c757d;
}
@media (min-width:768px){

  .remove-btn{
      padding:8px 12px;
      border:1px solid #e5e7eb;
      border-radius:6px;
      background:#fff;
  }

}

.qty-form{
  display:flex;
  align-items:center;
  border:1px solid #e5e7eb;
  border-radius:8px;
  overflow:hidden;
  background:#fff;
}

.qty-minus,
.qty-plus{
  width:30px;
  height:30px;
  border:none;
  background:#f5f5f5;
  font-size:18px;
  font-weight:700;
  cursor:pointer;
}

.qty-number{
  min-width:36px;
  text-align:center;
  font-size:14px;
  font-weight:600;
}

.drawer-btn{
  border:none;
  background:none;
  width:100%;
  text-align:left;
}

.drawer-contact-links{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid #ececec;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.drawer-contact-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 8px;
  border-radius:12px;
  background:#f8f8f8;
  text-decoration:none;
  color:#222;
  font-size:12px;
  font-weight:600;
  transition:.2s;
}

.drawer-contact-item i{
  font-size:20px;
}

.drawer-contact-item:hover{
  background:#eef7f1;
  color:#0d7a46;
}



/* Mobile */
@media (max-width:767px){
  .phone{display:block;}
  .site{display:none;}
}

/* Desktop */
@media (min-width:768px){
  .phone{display:none;}
  .site{display:block;}
}
.mp-products{
  padding:10px;
}

.mp-card{
  display:flex;
  gap:12px;
  background:#fff;
  border:1px solid #ececec;
  border-radius:14px;
  padding:10px;
  margin-bottom:12px;
}

.mp-image-wrap{
  width:110px;
  height:110px;
  position:relative;
  flex-shrink:0;
}

.mp-image{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}

.mp-badge{
  position:absolute;
  top:6px;
  left:6px;
  background:#e53935;
  color:#fff;
  font-size:11px;
  font-weight:600;
  padding:4px 7px;
  border-radius:5px;
}

.mp-content{
  flex:1;
  display:flex;
  flex-direction:column;
}

.mp-title{
  font-size:14px;
  font-weight:600;
  color:#111;
  margin:0 0 8px;
  line-height:1.4;
}

.mp-title-link{
  text-decoration:none;
}

.mp-price-row{
  display:flex;
  align-items:center;
  gap:8px;
}

.mp-price{
  font-size:18px;
  font-weight:700;
  color:#111827;
}

.mp-mrp{
  font-size:13px;
  text-decoration:line-through;
  color:#9ca3af;
}

.mp-save{
  color:#16a34a;
  font-size:12px;
  font-weight:600;
  margin-top:4px;
}

.mp-select{
  width:100%;
  height:38px;
  border:1px solid #dcdcdc;
  border-radius:8px;
  padding:0 10px;
  margin-top:10px;
  background:#fff;
}

.mp-add-btn{
  width:100%;
  height:40px;
  margin-top:8px;
  border:none;
  border-radius:8px;
  background:#16a34a;
  color:#fff;
  font-weight:700;
  font-size:14px;
}

.mp-empty{
  text-align:center;
  padding:40px 20px;
  color:#666;
}


/* mobile filter  */

.mp-filter-bar{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#fff;
  display:flex;
  z-index:999;
  border-top:1px solid #e5e7eb;
}

.mp-filter-bar button{
  flex:1;
  height:52px;
  border:none;
  background:#fff;
  font-size:14px;
  font-weight:600;
}

.mp-filter-bar span{
  margin-right:6px;
}

.mp-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  opacity:0;
  visibility:hidden;
  transition:.25s;
  z-index:1000;
}

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

.mp-sheet{
  position:fixed;
  left:0;
  bottom:-100%;
  width:100%;
  background:#fff;
  border-radius:20px 20px 0 0;
  padding:20px;
  z-index:1001;
  transition:.3s;
  max-height:80vh;
  overflow:auto;
}

.mp-sheet.active{
  bottom:0;
}

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

.mp-sheet-head h3{
  margin:0;
  font-size:18px;
}

.mp-sheet-head button{
  border:none;
  background:none;
  font-size:20px;
}

.mp-filter-group{
  margin-bottom:20px;
}

.mp-filter-group h4{
  margin-bottom:10px;
  font-size:15px;
}

.mp-chip-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.mp-chip{
  cursor:pointer;
}

.mp-chip input{
  display:none;
}

.mp-chip span{
  display:block;
  padding:8px 14px;
  border:1px solid #ddd;
  border-radius:50px;
  font-size:13px;
}

.mp-chip input:checked + span{
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
}

.mp-price-row{
  display:flex;
  gap:10px;
}

.mp-price-row input{
  flex:1;
  height:42px;
  border:1px solid #ddd;
  border-radius:8px;
  padding:0 12px;
}

.mp-sort-item{
  display:flex;
  gap:10px;
  padding:12px 0;
  border-bottom:1px solid #eee;
}

.mp-apply-btn{
  width:100%;
  height:46px;
  border:none;
  border-radius:10px;
  background:#16a34a;
  color:#fff;
  font-weight:600;
  margin-top:15px;
}


/* mobile profile */



.back-btn{
  border:none;
  background:none;
  font-size:22px;
}

.app-logo{
  font-size:17px;
  font-weight:700;
}

.profile-top-card{
  background:#fff;
  margin:12px;
  padding:16px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.profile-user-wrap{
  display:flex;
  align-items:center;
}

.profile-avatar{
  width:56px;
  height:56px;
  border-radius:50%;
  background:#f3f4f6;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:18px;
}

.profile-user-info{
  margin-left:12px;
}

.profile-user-info h3{
  margin:0;
  font-size:17px;
}

.profile-user-info p{
  margin:4px 0 0;
  color:#666;
  font-size:13px;
}

.profile-edit-btn{
  width:36px;
  height:36px;
  border-radius:50%;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.profile-menu-box{
  background:#fff;
  margin:12px;
  border-radius:14px;
  overflow:hidden;
}

.menu-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  text-decoration:none;
  color:#111;
  border-bottom:1px solid #f3f3f3;
}

.menu-item:last-child{
  border-bottom:none;
}

.logout-item{
  color:#e53935;
}

.profile-content{
  padding:0 16px 100px;
}

.profile-content h2{
  font-size:18px;
  margin:20px 0;
}



/* cart top  */

.cart-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.cart-product-image{
  flex-shrink:0;
}

.order-info{
  flex:1;
}

.cart-price{
  font-weight:600;
  white-space:nowrap;
}

.cart-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:10px;
}

.qty-form{
  display:flex;
  align-items:center;
  gap:10px;
}

/* payment method */
.payment-methods{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:10px;
}

.payment-option{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid #ddd;
  border-radius:10px;
  cursor:pointer;
}

.payment-option input{
  width:18px;
  height:18px;
}

.qr-payment-box{
  margin-top:20px;
  padding:20px;
  border:1px solid #e5e5e5;
  border-radius:12px;
  text-align:center;
  background:#fafafa;
}

.payment-qr{
  width:220px;
  max-width:100%;
  margin:15px auto;
  display:block;
}

.form-section{
  margin-top:20px;
}

.form-label{
  display:block;
  font-weight:600;
  margin-bottom:8px;
}

.form-section textarea{
  width:100%;
  border:1px solid #ddd;
  border-radius:10px;
  padding:12px;
  resize:vertical;
}


/* bottom cart nav */
.bottom-nav-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-decoration:none;
  position:relative;
}

.bottom-nav-badge-wrap{
  position:relative;
  display:inline-flex;
}

.bottom-nav-icon{
  width:24px;
  height:24px;
  stroke:currentColor;
}

.bottom-nav-cart-badge{
  position:absolute;
  right:-10px;

  min-width:18px;
  height:18px;

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

  padding:0 5px;

  background:#ff3b30;
  color:#fff;

  font-size:10px;
  font-weight:700;
  line-height:1;

  border-radius:20px;
  border:2px solid #fff;

  z-index:10;
}

.bottom-nav-label{
  font-size:11px;
  font-weight:500;
}

.bottom-nav-btn.active{
  color:#f6fbf6;
}


/* =========================
   AUTH FORM
========================= */

.auth-wrap{
  padding:20px;
}

.auth-card{
  background:#fff;
  border-radius:16px;
  padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.auth-logo{
  font-size:28px;
  font-weight:800;
  text-align:center;
  margin-bottom:10px;
}

.auth-logo span{
  color:#22c55e;
}

.auth-sub{
  text-align:center;
  color:#666;
  margin-bottom:24px;
  font-size:14px;
}

/* =========================
 FORM
========================= */

.form-group{
  margin-bottom:18px;
}

.form-group label{
  display:block;
  margin-bottom:8px;
  font-size:14px;
  font-weight:600;
  color:#222;
}

.form-group input{
  width:100%;
  height:48px;
  border:1px solid #dcdcdc;
  border-radius:10px;
  padding:0 14px;
  font-size:14px;
  outline:none;
  transition:.2s;
}

.form-group input:focus{
  border-color:#22c55e;
}

/* =========================
 PASSWORD FIELD
========================= */

.input-wrap{
  position:relative;
}

.input-wrap input{
  padding-right:50px;
}

.input-wrap button{
  position:absolute;
  right:12px;
  top:22px;
  transform:translateY(-50%);
  border:none;
  background:none;
  cursor:pointer;
  font-size:18px;
  color:#777;
  padding:0;
}

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

.auth-btn{
  width:100%;
  height:48px;
  border:none;
  border-radius:10px;
  background:#22c55e;
  color:#fff;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.auth-btn:hover{
  background:#16a34a;
}

/* =========================
 LOGIN LINK
========================= */

.auth-switch{
  text-align:center;
  margin-top:18px;
  font-size:14px;
  color:#666;
}

.auth-switch a{
  color:#22c55e;
  text-decoration:none;
  font-weight:600;
}

.auth-switch a:hover{
  text-decoration:underline;
}

/* =========================
 DESKTOP SPLIT
========================= */

.auth-split{
  display:flex;
  min-height:100vh;
}

.auth-brand-panel{
  flex:1;
  background:linear-gradient(135deg,#16a34a,#22c55e);
  color:#fff;
  padding:60px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.auth-brand-panel h2{
  font-size:42px;
  margin-bottom:16px;
}

.auth-brand-panel p{
  font-size:16px;
  line-height:1.7;
  opacity:.9;
}

.auth-form-panel{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f8fafc;
  padding:30px;
}

.auth-form-panel .auth-card{
  width:100%;
  max-width:450px;
}

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

@media(max-width:991px){

  .auth-split{
      display:none;
  }

  .phone.auth-wrap{
      display:block;
      min-height:100vh;
      background:#f8fafc;
      padding:20px;
  }
}

@media(min-width:992px){

  .phone.auth-wrap{
      display:none;
  }
}



/* notification  */
.notification-banner{
  margin:20px 0;
}

.notification-slide{
  position:relative;
  border-radius:16px;
  overflow:hidden;
}

.notification-image{
  width:100%;
  height:250px;
  object-fit:cover;
  display:block;
}

.notification-content{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:30px;
}

.notification-content h3{
  font-size:32px;
  font-weight:700;
  margin-bottom:10px;
}

.notification-content p{
  font-size:18px;
  margin:0;
}

@media(max-width:768px){

  .notification-image{
      height:180px;
  }

  .notification-content h3{
      font-size:22px;
  }

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

}

/* related product */

.rp-name{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  height:44px; /* 2 lines fix */
  line-height:22px;

  font-size:14px;
  font-weight:600;
  color:#222;
  margin-bottom:8px;
}

.rp-price{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--primary);
}


/* hero banner and notification */
.hero-banner{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  margin-bottom:30px;
}

.hero-slider{
  position:relative;
}

.hero-slide{
  display:none;
  position:relative;
}

.hero-slide.active{
  display:block;
  animation:fadeSlide .5s ease;
}

.hero-slide img{
  width:100%;
  height:420px;
  object-fit:cover;
  display:block;
}

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

.hero-content{
  position:absolute;
  top:50%;
  left:60px;
  transform:translateY(-50%);
  z-index:2;
  color:#fff;
  max-width:550px;
}

.hero-badge{
  display:inline-block;
  background:#29A56C;
  color:#fff;
  padding:8px 16px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
  margin-bottom:15px;
}

.hero-content h2{
  font-size:42px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:15px;
}

.hero-content p{
  font-size:16px;
  line-height:1.8;
  margin-bottom:25px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  padding:0 28px;
  border-radius:12px;
  background:#fff;
  color:#111;
  font-weight:600;
  text-decoration:none;
}

.hero-btn:hover{
  color:#111;
}

.hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:10;
  font-size:22px;
  font-weight:700;
  color:#222;
  transition:.25s;
  box-shadow:0 4px 15px rgba(0,0,0,.15);
}

.hero-nav:hover{
  transform:translateY(-50%) scale(1.08);
}

.hero-prev{
  left:20px;
}

.hero-next{
  right:20px;
}

.hero-dots{
  position:absolute;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  display:flex;
  gap:8px;
  z-index:10;
}

.hero-dots span{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  cursor:pointer;
}

.hero-dots span.active{
  background:#fff;
}

@keyframes fadeSlide{
  from{
      opacity:0;
  }
  to{
      opacity:1;
  }
}

@media(max-width:768px){

  .hero-slide img{
      height:240px;
  }

  .hero-content{
      left:20px;
      right:20px;
      max-width:none;
  }

  .hero-content h2{
      font-size:24px;
      margin-bottom:8px;
  }

  .hero-content p{
      font-size:13px;
      line-height:1.5;
      margin-bottom:12px;
  }

  .hero-badge{
      font-size:11px;
      padding:6px 10px;
      margin-bottom:10px;
  }

  .hero-btn{
      height:38px;
      padding:0 16px;
      font-size:13px;
  }

  .hero-nav{
      width:36px;
      height:36px;
      font-size:16px;
  }

  .hero-prev{
      left:10px;
  }

  .hero-next{
      right:10px;
  }
}



/* wishlist */
.product-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  margin-bottom:10px;
}

.product-header .product-title{
  flex:1;
  margin:0;
}

.wish-btn-detail{
  border:none;
  background:none;
  font-size:28px;
  cursor:pointer;
  color:#666;
  padding:0;
  line-height:1;
}

.wish-btn-detail:hover{
  color:#1F6B4A;
}

.product-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.product-title-row .product-title{
  flex:1;
  margin:0;
  font-size:24px;
  line-height:1.4;
}

.wish-mobile{
  border:none;
  background:none;
  font-size:28px;
  cursor:pointer;
  padding:0;
  min-width:40px;
  text-align:center;
}

@media(max-width:768px){

  .product-title-row{
      align-items:center;
  }

  .product-title-row .product-title{
      font-size:20px;
  }

  .wish-mobile{
      font-size:26px;
  }
}


/* popuped account */

.account-dropdown{
  position:relative;
}

.ac-popup-sheet{
  position:absolute;
  top:55px;
  right:0;
  width:260px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
  z-index:9999;
  visibility:hidden;
  opacity:0;
  transform:translateY(10px);
  transition:.25s;
}

.ac-popup-sheet.show{
  visibility:visible;
  opacity:1;
  transform:translateY(0);
}

.ac-popup-profile-card{
  padding:16px;
  border-bottom:1px solid #eee;
}

.ac-popup-my-account{
  font-size:16px;
  font-weight:700;
  color:#111;
}

.ac-popup-label{
  font-size:14px;
  color:#555;
}

.ac-popup-item{
  display:block;
  width:100%;
  text-decoration:none;
  padding:14px 16px;
  border-bottom:1px solid #f3f4f6;
  color:#222;
  background:#fff;
  text-align:left;
}

.ac-popup-item:hover{
  background:#f8f8f8;
}

.popup-logout{
  border:none;
  cursor:pointer;
}

.ac-popup-item:last-child{
  border-bottom:none;
}
.mk{
  color: red;
}


.card__img-wrap{
  position:relative;
}

.wishlist-overlay{
  position:absolute;
  top:10px;
  right:10px;
  z-index:5;
  margin:0;
}

.wishlist-btn{
  width:38px;
  height:38px;
  border:none;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  font-size:22px;
  color:#198754;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}

.wishlist-btn:hover{
  transform:scale(1.08);
}

.card__img img{
  width:100%;
  display:block;
}


/*---------------------
 account deactive message 
 ------------------------*/
.account-deactivated-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;

  padding: 15px 18px;
  margin-bottom: 20px;

  background: #fff3cd;
  border: 1px solid #ffda6a;

  border-radius: 10px;

  color: #664d03;
}

.deactivated-icon {
  font-size: 24px;
  line-height: 1;
}

.account-deactivated-message h4 {
  margin: 0 0 6px;

  font-size: 16px;
  font-weight: 700;
}

.account-deactivated-message p {
  margin: 3px 0;

  font-size: 14px;
  line-height: 1.5;
}



/* =========================================================
   RELATED PRODUCTS GRID
   ========================================================= */

   .related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}


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

.related-products-grid .product-card {
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.25s ease;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}


.related-products-grid .product-card:hover {
    transform: translateY(-3px);
    border-color: #d7d7d7;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}


/* =========================================================
   IMAGE
   ========================================================= */

.related-products-grid .pr-image-link {
    display: block;
    text-decoration: none;
}


.related-products-grid .pr-image-ctn {
    width: 100%;
    height: 190px;
    background: #f8f9f8;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
}


.related-products-grid .pr-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}


.related-products-grid .product-card:hover .pr-image {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
   ========================================================= */

.related-products-grid .pr-card-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.related-products-grid .pr-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
}


.related-products-grid .pr-title {
    margin: 0;
    font-size: 15px;
    line-height: 21px;
    font-weight: 600;
    color: #222;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;

    min-height: 42px;
}


/* =========================================================
   PRICE
   ========================================================= */

.related-products-grid .pr-price-row {
    margin-top: 8px;
    margin-bottom: 10px;
    min-height: 24px;
}


.related-products-grid .variant-price {
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: #1f9d62;
}


/* =========================================================
   BUY ROW
   ========================================================= */

.related-products-grid .pr-cart-form {
    width: 100%;
    margin: 0;
    padding: 0;
}


.related-products-grid .pr-buy-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
    width: 100%;
}


/* =========================================================
   SELECT
   ========================================================= */

.related-products-grid .pr-select-wrap {
    flex: 1;
    min-width: 0;
}


.related-products-grid .pr-var-select {
    width: 100%;
    height: 40px;
    padding: 0 28px 0 10px;

    border: 1px solid #dcdcdc;
    border-radius: 8px;

    background-color: #fff;
    color: #333;

    font-size: 12px;
    font-weight: 500;

    outline: none;
    cursor: pointer;

    box-sizing: border-box;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    appearance: auto;
}


.related-products-grid .pr-var-select:focus {
    border-color: #29a56c;
    box-shadow: 0 0 0 2px rgba(41, 165, 108, 0.10);
}


/* =========================================================
   ADD BUTTON
   ========================================================= */

.related-products-grid .pr-add-btn {
    height: 40px;
    min-width: 72px;

    border: 0;
    border-radius: 8px;

    background: #29a56c;
    color: #fff;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 0 11px;

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.15s ease;
}


.related-products-grid .pr-add-btn:hover {
    background: #1f9d62;
}


.related-products-grid .pr-add-btn:active {
    transform: scale(0.97);
}


.related-products-grid .pr-add-icon {
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
}


/* =========================================================
   NO VARIANT
   ========================================================= */

.related-products-grid .pr-no-variant {
    width: 100%;
    height: 40px;

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

    border-radius: 8px;

    background: #f5f5f5;
    color: #777;

    font-size: 12px;
    font-weight: 500;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .related-products-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .related-products-grid .pr-image-ctn {
        height: 175px;
    }

}


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

@media (max-width: 768px) {

    .related-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }


    .related-products-grid .product-card {
        border-radius: 11px;
    }


    .related-products-grid .pr-image-ctn {
        height: 145px;
        padding: 8px;
    }


    .related-products-grid .pr-card-content {
        padding: 9px;
    }


    .related-products-grid .pr-title {
        font-size: 13px;
        line-height: 18px;
        min-height: 36px;
    }


    .related-products-grid .pr-price-row {
        margin-top: 6px;
        margin-bottom: 8px;
    }


    .related-products-grid .variant-price {
        font-size: 15px;
        line-height: 20px;
    }


    .related-products-grid .pr-buy-row {
        gap: 5px;
    }


    .related-products-grid .pr-var-select {
        height: 36px;
        font-size: 10px;
        padding-left: 7px;
        padding-right: 20px;
    }


    .related-products-grid .pr-add-btn {
        height: 36px;
        min-width: 58px;
        padding: 0 7px;
        font-size: 11px;
        border-radius: 7px;
    }


    .related-products-grid .pr-add-icon {
        font-size: 15px;
    }


    .related-products-grid .pr-no-variant {
        height: 36px;
        font-size: 10px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .related-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }


    .related-products-grid .pr-image-ctn {
        height: 125px;
    }


    .related-products-grid .pr-card-content {
        padding: 8px;
    }


    .related-products-grid .pr-title {
        font-size: 12px;
        line-height: 17px;
        min-height: 34px;
    }


    .related-products-grid .variant-price {
        font-size: 14px;
    }


    .related-products-grid .pr-buy-row {
        flex-direction: column;
        gap: 5px;
    }


    .related-products-grid .pr-var-select {
        height: 34px;
        font-size: 10px;
    }


    .related-products-grid .pr-add-btn {
        width: 100%;
        height: 34px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 350px) {

    .related-products-grid {
        gap: 6px;
    }


    .related-products-grid .pr-image-ctn {
        height: 110px;
    }


    .related-products-grid .pr-card-content {
        padding: 7px;
    }


    .related-products-grid .pr-title {
        font-size: 11px;
        line-height: 16px;
    }

}


/* =========================================
   PRODUCT CARD QUANTITY CONTROL
========================================= */

.product-qty-control {
  width: 100%;
  height: 38px;

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

  background: #29A56C;
  border: 1px solid #29A56C;
  border-radius: 8px;

  overflow: hidden;

  box-sizing: border-box;
}


/* Minus / Plus buttons */

.product-qty-control .qty-minus,
.product-qty-control .qty-plus {

  width: 42px;
  height: 100%;

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

  border: 0;
  outline: none;

  background: transparent;
  color: #fff;

  font-size: 22px;
  font-weight: 700;

  cursor: pointer;

  padding: 0;
  margin: 0;

  transition: background 0.2s ease;
}


/* Hover */

.product-qty-control .qty-minus:hover,
.product-qty-control .qty-plus:hover {
  background: rgba(255, 255, 255, 0.15);
}


/* Quantity number */

.product-qty-control .qty-value {

  flex: 1;

  height: 100%;

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

  color: #fff;

  font-size: 16px;
  font-weight: 700;

  line-height: 1;

  user-select: none;
}


/* Mobile */

@media (max-width: 600px) {

  .product-qty-control {
      height: 40px;
      border-radius: 7px;
  }

  .product-qty-control .qty-minus,
  .product-qty-control .qty-plus {
      width: 38px;
      font-size: 20px;
  }

  .product-qty-control .qty-value {
      font-size: 15px;
  }

}

/* =========================================================
   PRODUCT QUANTITY CONTROL
   ========================================================= */

   .product-qty-control {
    width: 100%;
    height: 50px;

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

    background: #e8fff1;
    border: 1px solid #29a56c;
    border-radius: 5px;

    overflow: hidden;
    box-sizing: border-box;

    margin-top: 8px;
}


/* =========================================================
   MINUS / PLUS BUTTON
   ========================================================= */

.product-qty-control .qty-minus,
.product-qty-control .qty-plus {
    width: 50px;
    height: 100%;

    flex: 0 0 50px;

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

    border: 0;
    outline: none;

    background: transparent;
    color: #29a56c;

    font-size: 25px;
    font-weight: 400;

    line-height: 1;

    padding: 0;
    margin: 0;

    cursor: pointer;

    transition: background 0.2s ease;
}


/* Hover */

.product-qty-control .qty-minus:hover,
.product-qty-control .qty-plus:hover {
    background: rgba(41, 165, 108, 0.08);
}


/* Click */

.product-qty-control .qty-minus:active,
.product-qty-control .qty-plus:active {
    background: rgba(41, 165, 108, 0.15);
}


/* Disabled */

.product-qty-control .qty-minus:disabled,
.product-qty-control .qty-plus:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* =========================================================
   QUANTITY NUMBER
   ========================================================= */

.product-qty-control .qty-value {
    flex: 1;

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

    height: 100%;

    color: #29a56c;

    font-size: 18px;
    font-weight: 600;

    line-height: 1;

    text-align: center;

    user-select: none;
}


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

@media (max-width: 767px) {

    .product-qty-control {
        height: 38px;
        border-radius: 5px;
    }

    .product-qty-control .qty-minus,
    .product-qty-control .qty-plus {
        width: 48px;
        flex-basis: 48px;

        font-size: 24px;
    }

    .product-qty-control .qty-value {
        font-size: 17px;
    }

}

.account-dropdown {
  position: relative;
}

.ac-popup-sheet {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 99999;
}

.ac-popup-sheet.show {
  display: block;
}