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

@media (max-width:768px){

  /* container padding */
  .container{
    padding-left:16px;
    padding-right:16px;
  }

  /* HEADER */
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:70px;
    gap:8px;
  }

  .brand-logo{
    height:28px;
  }

  .nav-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .header-actions{
    display:flex;
    gap:8px;
  }

  /* HERO */
  .hero-content h1{
    font-size:32px;
  }

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

  .hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:20px;
  }

  .hero-actions .btn{
    min-width:140px;
  }

  /* SHOP GRID */
  .card-grid,
  #productGrid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }

  .product-body{
    padding:12px;
  }

  .product-title{
    font-size:14px;
    line-height:1.3;
  }

  .price{
    font-size:16px;
    font-weight:600;
  }

  /* PRODUCT PAGE */
  .product-layout{
    grid-template-columns:1fr;
  }

  .product-info{
    padding-left:0;
    margin-top:20px;
  }

  /* FOOTER */
  .footer-links{
    grid-template-columns:1fr 1fr;
    gap:20px;
  }

  .footer-newsletter{
    flex-direction:column;
    gap:14px;
  }

  .whatsapp{
    bottom:20px;
    right:20px;
  }

  /* MOBILE SLIDE MENU */
  .nav-links{
    position:fixed;
    top:0;
    left:-100%;
    width:85%;
    max-width:320px;
    height:100vh;
    background:#0b0d10;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    padding:90px 30px;
    transition:left .3s ease;
    z-index:3000;
  }

  .nav-links.open{
    left:0;
  }

  .nav-links li{
    list-style:none;
    width:100%;
  }

  .nav-links a{
    display:block;
    width:100%;
    padding:18px 0;
    font-size:20px;
    font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.08);
    color:#e6e6e6;
    background:none !important;
    border-radius:0 !important;
  }

  .nav-links a.active{
    color:#a7ff25;
    background:none !important;
    border-radius:0 !important;
  }

  .menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:1500;
    pointer-events:none;
  }

  .menu-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }


}


@media (max-width:768px){

#featuredGrid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

#featuredGrid .product-card{
  display:flex;
  flex-direction:column;
}

/* IMAGE CONTAINER */
#featuredGrid .product-media{
  width:100%;
  aspect-ratio:1/1;
  background:#eee;
  overflow:hidden;
}

/* IMAGE STYLE (same as shop page) */
#featuredGrid .product-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#featuredGrid .product-body{
  padding:12px;
}

}


@media (max-width:768px){

.footer-newsletter-top{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.footer-left{
  max-width:100%;
  order:1;
}

.footer-newsletter-formwrap{
  width:100%;
  max-width:100%;
  order:2;
}

.newsletter-form{
  width:100%;
}

.footer-social{
  justify-content:flex-start;
  order:3;
  margin-top:20px; 
}

}

@media (max-width:768px){

/* hide left sidebar */
.legal-nav{
  display:none;
}

/* make layout single column */
.legal-layout{
  grid-template-columns:1fr;
}

/* make content full width */
.legal-content{
  width:100%;
}

}

@media (max-width:768px){

.about-split{
  grid-template-columns:1fr !important;
}

.split-image{
  order:2;
  margin-bottom: 40px;
  border-radius:16px;
  overflow:hidden;
}

.split-image img{
  width:100%;
  height:auto;
  display:block;
}

.split-text{
  order:1;
  margin-top: 50px;
}

}

@media (max-width:768px){

.values-grid{
  display:flex;
  overflow-x:auto;
  gap:16px;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
}

.value-card{
  min-width:220px;
  flex:0 0 auto;
  scroll-snap-align:start;
}

/* hide scrollbar */
.values-grid::-webkit-scrollbar{
  display:none;
}

}

@media (max-width:768px){

.reach-grid{
  display:flex;
  overflow-x:auto;
  gap:14px;
  scroll-snap-type:x mandatory;
  padding-bottom:10px;
  padding-left:4px;
}

/* cards */

.reach-item{
  min-width:70%;
  flex:0 0 auto;
  scroll-snap-align:start;
}

/* hide scrollbar */
.reach-grid::-webkit-scrollbar{
  display:none;
}

}

@media (max-width:768px){

/* fix container overflow */
.container{
  width:100%;
  max-width:100%;
  padding-left:16px;
  padding-right:16px;
  box-sizing:border-box;
}

/* force layout to single column */
.legal-layout{
  grid-template-columns:1fr !important;
}

/* card width fix */
.card{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* form layout */
.form-grid{
  grid-template-columns:1fr !important;
  width:100%;
}

/* form inputs */
.field input,
.field textarea{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}

/* prevent horizontal overflow anywhere */
body{
  overflow-x:hidden;
}

}

@media (max-width:768px){

/* remove wrapping inside */
.toolbar-left,
.toolbar-right{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
}

/* prevent text breaking */
.toolbar-left *,
.toolbar-right *{
  white-space:nowrap;
}

/*
.shop-toolbar{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;     /* keep swipe *
  overflow-y:hidden;   /* prevent layout break *
  gap:14px;
  position:relative;
  -webkit-overflow-scrolling:touch;

}


.toolbar-dd{
  position:relative;
}

.toolbar-dd .dd-menu{
  position:absolute;
  top:110%;
  left:0;
  z-index:9999;
/*  width:220px;*

}
.container{
  overflow:visible;
}
*/
}

/* Mobile */
@media (max-width:768px){

#similarProducts{
  grid-template-columns:repeat(2,1fr);
}

}


@media (max-width:768px){

  .shop-toolbar,
  .shop-toolbar--top{
    display:block !important;
    overflow:visible !important;
    position:relative !important;
    z-index:1000 !important;
  }

  .toolbar-left{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    padding:14px 16px 10px !important;
    white-space:nowrap !important;
    -webkit-overflow-scrolling:touch;
  }

  .toolbar-left::-webkit-scrollbar{
    display:none;
  }

  .toolbar-left > *{
    flex:0 0 auto !important;
  }

  .toolbar-right{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:14px !important;
    padding:0 16px 14px !important;
    overflow-x:auto !important;
  }

  .toolbar-right::-webkit-scrollbar{
    display:none;
  }

  .toolbar-right > *{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  .toolbar-dd{
    position:relative !important;
    z-index:5000 !important;
  }

  .toolbar-dd[open]{
    z-index:9000 !important;
  }

  .toolbar-dd .dd-menu{
    position:fixed !important;
    top:220px !important;
    left:24px !important;
    width:240px !important;
    max-height:300px !important;
    overflow-y:auto !important;
    z-index:99999 !important;
  }

  .shop-main,
  #productGrid,
  .product-card{
    position:relative !important;
    z-index:1 !important;
  }
}


/*NEW UPDATE*/

/* =========================================
   MOBILE SHOP TOOLBAR FIX
========================================= */

@media (max-width: 768px){

  /* toolbar container */
  .shop-toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:12px;
    align-items:center;
  }

  /* hide unnecessary desktop items */
  .toolbar-left,
  .sale-only,
  .vdiv{
    display:none !important;
  }

  /* make all controls align nicely */
  .top-filters{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .top-filters::-webkit-scrollbar{
    display:none;
  }

  /* search */
  .shop-search{
    flex:1;
    min-width:140px;
  }

  /* right section */
  .toolbar-right{
    width:100%;
    display:flex !important;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-left:0 !important;
  }

  /* smaller dropdown */
  .dd-small{
    width:150px;
  }

  /* smaller buttons */
  .iconbtn{
    width:34px;
    height:34px;
  }

  /* compact filter buttons */
  .filter-btn{
    font-size:13px;
    white-space:nowrap;
  }
}

@media (max-width:768px){

  .top-filters{
    display:none;
  }

}