/* FOLKHAAT mobile/responsive override - keep after theme.css */
:root{--mobile-gap:12px}
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%}
button,input,select,textarea{font:inherit}
.container{width:100%;max-width:1500px;margin:0 auto;padding-left:20px;padding-right:20px}

/* Header / logo */
.brand{width:clamp(170px,21vw,315px);flex:0 1 clamp(170px,21vw,315px);min-width:0}
.brand img{display:block;width:100%;height:auto;max-height:82px;object-fit:contain;object-position:left center}
.headerin{min-width:0;flex-wrap:nowrap}
.search{min-width:0;flex:1 1 520px}
.search input{min-width:0}
.mobile-menu-toggle{display:none}

/* Main nav */
.navin{min-width:0;overflow:visible}
.mega{max-width:calc(100vw - 40px)}

/* Hero: keep the entire wide banner visible */
.hero{padding:10px 0 0}
.hero .container{padding-left:0;padding-right:0}
.hero-slider{position:relative;width:100%;aspect-ratio:1920/620;overflow:hidden;background:#f6f1ea}
.hero-slide{position:absolute;inset:0;display:none;width:100%;height:100%}
.hero-slide.active{display:block}
.hero-slide img{width:100%;height:100%;min-height:0;max-height:none;object-fit:contain;object-position:center;background:#f6f1ea}
.hero-prev,.hero-next{z-index:5}
.hero-dots{z-index:6}

/* Service strip */
.servicegrid{min-width:0}
.servicegrid>div{min-width:0}
.servicegrid b,.servicegrid small{overflow-wrap:anywhere}

/* Cards / grids */
.categorygrid,.products{min-width:0}
.categorytile,.card{min-width:0}
.categorytile img,.card img{display:block;width:100%}
.categorytile strong,.categorytile small,.card h3,.sku,.bulkprice{overflow-wrap:anywhere}
.card h3{line-height:1.25}
.cardbody{min-width:0}

/* Promo */
.promogrid{min-width:0}
.promo{min-width:0}
.promo img{display:block}

/* Tables on small screens */
.table-wrap,.carttable-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.carttable,.table{min-width:680px}

/* Footer */
.footgrid{min-width:0}
.footlogo{max-width:100%;height:auto}

@media (max-width: 1200px){
  .brand{width:clamp(160px,22vw,260px);flex-basis:clamp(160px,22vw,260px)}
  .brand img{max-height:68px}
  .headerin{gap:14px}
  .headlink span{max-width:120px}
  .categorygrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .products{grid-template-columns:repeat(4,minmax(0,1fr))}
  .servicegrid{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media (max-width: 980px){
  .container{padding-left:16px;padding-right:16px}
  .topin{flex-wrap:wrap;white-space:normal;gap:8px 12px;padding-top:6px;padding-bottom:6px}
  .topin .grow{display:none}
  .headerin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px;padding-top:10px;padding-bottom:10px}
  .brand{width:min(100%,250px);flex-basis:auto}
  .brand img{max-height:60px}
  .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid #d9cfc7;background:#fff;color:var(--brand,#7a321f);border-radius:8px;padding:9px 11px;font-weight:700;cursor:pointer}
  .search{grid-column:1 / -1;grid-row:2;max-width:none;min-width:0;width:100%}
  .headlink{display:none}
  .cartlink{justify-self:end;align-self:center}

  .nav{position:sticky;top:0;z-index:1000}
  .navin{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;box-shadow:0 18px 36px rgba(0,0,0,.16);border-top:1px solid var(--line);padding:10px 12px 14px;max-height:calc(100vh - 56px);overflow:auto;flex-direction:column;align-items:stretch;gap:3px}
  .nav.mobile-open .navin{display:flex}
  .navin>a,.mega-trigger{width:100%;min-height:44px;padding:11px 12px!important;border-radius:7px;font-size:14px!important}
  .navin>a:hover,.mega-trigger:hover{background:#faf4ef}
  .allcat{display:flex!important;justify-content:flex-start;border-radius:7px!important}
  .bulkbtn{margin-left:0!important;justify-content:center;background:#d92323!important;color:#fff!important;margin-top:5px}
  .mega-wrap{width:100%}
  .mega-wrap .mega{position:static;width:100%;max-width:none;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px;padding:8px;background:#fbf8f4;border:1px solid var(--line);border-radius:10px;box-shadow:none}
  .mega a{padding:7px;border:1px solid #eee;background:#fff}
  .mega .mega-img{width:48px;height:48px}
  .mega a span{font-size:12px}
  html.menu-open,html.menu-open body{overflow:hidden}

  .categorygrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .products{grid-template-columns:repeat(3,minmax(0,1fr))}
  .servicegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .promogrid{grid-template-columns:1fr}
  .custom{min-height:220px}
  .productdetail,.grid2{grid-template-columns:1fr}
}

@media (max-width: 768px){
  .topin span:nth-child(1){width:100%}
  .topin span:nth-child(2),.topin span:nth-child(4),.topin span:nth-child(5){display:none}
  .topin{font-size:10px}
  .headerin{padding-left:12px;padding-right:12px}
  .brand{width:min(100%,210px)}
  .brand img{max-height:52px}
  .mobile-menu-toggle{padding:8px 10px}
  .mobile-menu-toggle span{display:none}
  .search{height:44px}
  .search input{font-size:13px;padding-left:12px;padding-right:10px}
  .search button{width:48px}

  .hero{padding-top:6px}
  .hero-slider{aspect-ratio:1920/700;border-radius:0}
  .hero-slide img{border-radius:0}
  .hero-prev,.hero-next{width:34px;height:34px;font-size:23px}
  .hero-prev{left:8px}.hero-next{right:8px}
  .hero-dots{bottom:8px}

  .servicegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .servicegrid>div{min-height:66px;padding:10px 8px;font-size:11px}
  .servicegrid b{font-size:11px}.servicegrid small{font-size:9px}
  .section{padding:22px 0}
  .sectionhead{flex-direction:column;align-items:flex-start;gap:10px}
  .section h2{font-size:23px}
  .categorygrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .categorytile strong{font-size:12px}.categorytile small{font-size:10px}
  .products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cardbody{padding:9px}
  .card h3{font-size:13px;min-height:0}
  .sku,.bulkprice{font-size:9px}
  .price{font-size:17px}
  .mrp{font-size:11px}
  .add,.primary{padding:10px 11px;font-size:12px}
  .promo-copy{left:16px;top:16px;max-width:58%}
  .promo-copy h3{font-size:21px}
  .promo-copy p{font-size:11px}
  .custom{padding:16px}
  .custom img{width:38%;max-height:150px}
  .notice{margin:10px 0}
  .footgrid{grid-template-columns:1fr!important;gap:18px}
  .footlogo{width:min(220px,100%)}
  .category-head{grid-template-columns:1fr}
  .category-head img{height:auto;aspect-ratio:16/7}
  .category-head-copy{padding:18px}
  .category-head-copy h1{font-size:27px}
  .detail h1{font-size:28px}
  .detail .price{font-size:28px}
  .formgrid,.meta{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width: 480px){
  .container{padding-left:10px;padding-right:10px}
  .brand{width:min(100%,180px)}
  .brand img{max-height:45px}
  .mobile-menu-toggle{padding:7px 9px;font-size:18px}
  .cartlink{font-size:16px;min-width:48px}
  .hero-slider{aspect-ratio:16/7}
  .servicegrid{grid-template-columns:1fr 1fr}
  .mega-wrap .mega{grid-template-columns:1fr 1fr}
  .mega .mega-img{width:40px;height:40px}
  .categorytile img{aspect-ratio:1/1}
  .products{grid-template-columns:1fr 1fr}
  .card img{aspect-ratio:1/1}
  .custom img{display:none}
  .promo-copy{max-width:72%}
  .promo-copy h3{font-size:19px}
  .promo-copy p{font-size:10px}
  .outline{padding:8px 11px;font-size:12px}
}


/* =========================================================
   MOBILE BOTTOM APP NAVIGATION
   ========================================================= */
.mobile-bottom-nav{display:none}

@media (max-width: 768px){
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom));}
  .mobile-bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:5000;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    height:68px;
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(255,255,255,.97);
    border-top:1px solid #e5ddd6;
    box-shadow:0 -8px 24px rgba(0,0,0,.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .mobile-nav-item{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    min-width:0;
    color:#5f4638;
    text-decoration:none;
    font-size:10px;
    font-weight:600;
    line-height:1;
    transition:color .18s ease, background .18s ease;
  }
  .mobile-nav-item:active{background:#f7f1eb}
  .mobile-nav-icon{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    font-size:23px;
    line-height:1;
  }
  .mobile-nav-item.active{
    color:#7a321f;
  }
  .mobile-nav-item.active .mobile-nav-icon::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-7px;
    width:22px;
    height:3px;
    border-radius:8px;
    background:#7a321f;
    transform:translateX(-50%);
  }
  .mobile-cart-badge{
    position:absolute;
    top:-6px;
    right:-11px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    background:#d92323;
    color:#fff;
    font-size:9px;
    font-weight:700;
    border:2px solid #fff;
  }
  /* Make the existing mobile menu start below the header and above bottom nav. */
  .navin{max-height:calc(100vh - 140px)!important}
}