/* === site-fix: desktop + mobile layout for static restore === */
html,body{overflow-x:hidden;max-width:100%;background:#fff}
#loading-view,.spinner,#btnOffCanvas{display:none!important}
img{max-width:100%;height:auto}
#header{height:auto!important;min-height:0;overflow:visible;position:relative!important;border-bottom:1px solid #eee}
#header:has(.headerMeta){
  display:grid!important;
  grid-template-columns:auto 1fr;
  grid-template-areas:"logo meta" "nav nav";
  align-items:center;
  gap:8px 20px;
  padding:12px 16px 10px;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
  width:100%;
}
#header:has(.headerMeta) #logo{grid-area:logo;padding:0;text-align:left;width:auto!important}
#header:has(.headerMeta) .headerMeta{grid-area:meta;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
#header:has(.headerMeta) .mobileView{grid-area:nav;width:100%!important;position:static!important;float:none!important;padding:0!important;margin:0}
#companyLogoImg{position:static!important;left:auto!important;top:auto!important;display:block;height:56px!important;width:auto!important;max-width:160px;margin:0!important}
#user{position:static!important;float:none!important;width:auto!important;min-width:0!important}
#wrapper,#col1{max-width:1100px;box-sizing:border-box;margin-left:auto;margin-right:auto}
.prodItemPicDiv,.prodItemPicDiv a,.prodItemName{height:auto!important;min-height:0!important}
.cycle-slideshow{display:none!important}

/* -------- Desktop -------- */
@media (min-width:768px){
  #header:has(.headerMeta){padding:12px 20px 8px;gap:6px 24px}
  #header:has(.headerMeta) #companyLogoImg{height:60px!important;max-width:170px}
  #header:has(.headerMeta) .nav>li>a{padding:9px 14px!important}
  .headerMeta > [class*="col-"]{
    display:flex!important;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-end;
    gap:12px 16px;
    width:100%!important;
    float:none!important;
    padding:0!important;
  }
  #user{text-align:right;margin:0;font-size:13px;color:#555;flex:0 1 auto;white-space:nowrap}
  #search{
    display:block!important;
    position:static!important;
    float:none!important;
    width:auto!important;
    max-width:300px;
    height:auto!important;
    margin:0!important;
    background:transparent!important;
  }
  #search .form{display:flex;align-items:center;gap:6px;background:#272c37;border-radius:3px;padding:4px 6px}
  #search .textbox{height:30px!important;flex:1;min-width:120px;border:0;border-radius:2px;padding:4px 8px;font-size:13px!important}
  .navbar{min-height:0!important;margin:0!important;border:0;background:transparent}
  .navbar-header{display:none!important}
  .navbar-toggle{display:none!important}
  .navbar-collapse,
  .navbar-collapse.collapse{
    display:block!important;
    height:auto!important;
    overflow:visible!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    position:static!important;
    float:none!important;
    width:100%!important;
    box-shadow:none!important;
    border:0!important;
  }
  .nav{
    display:flex!important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:2px;
    width:auto!important;
    max-width:100%;
    position:static!important;
    left:auto!important;
    top:auto!important;
    margin:0 auto!important;
    float:none!important;
    text-align:center!important;
  }
  .nav>li{float:none!important;display:block}
  .nav>li>a{
    display:block!important;
    color:#222!important;
    background:transparent!important;
    padding:10px 12px!important;
    font-weight:700;
    text-transform:uppercase;
    font-size:13px;
    border-radius:2px;
  }
  .nav>li>a:hover,.nav>li>a:focus{background:#222!important;color:#fff!important}
  .nav>li>a.viewCartIcon{background:none!important}
  .nav>li>a.viewCartIcon>span{margin-left:0!important}
  .navSearchMobile{display:none!important}
  .featuredProductsGrid{width:100%!important;border-spacing:12px!important}
  .featuredProductsGrid td{
    width:23%!important;
    vertical-align:top;
    padding:12px 10px!important;
  }
  .featuredProductsGrid td .prodItemName{
    font-size:13px!important;
    line-height:1.35!important;
    margin:10px 0 6px!important;
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
  }
  .featuredProductsHeaderText h1{font-size:30px!important}
  #footer .container,#bottom .container{max-width:1100px;margin:0 auto;padding:0 16px;box-sizing:border-box}
}

/* -------- Mobile -------- */
@media (max-width:767px){
  #header:has(.headerMeta){
    grid-template-columns:1fr auto;
    grid-template-areas:"logo toggle" "meta meta";
    gap:6px 10px;
    padding:10px 12px 12px;
    text-align:left!important;
  }
  #header:has(.headerMeta) #logo{grid-area:logo;padding:0;text-align:left;width:auto!important}
  #header:has(.headerMeta) #companyLogoImg{margin:0!important;height:48px!important;max-width:140px}
  .headerMeta{grid-area:meta;width:100%!important;max-width:none!important;padding:0!important;margin:0!important}
  .headerMeta > [class*="col-"]{padding:0!important;width:100%!important;float:none!important}
  #header:has(.headerMeta) #user{text-align:left;margin:0;font-size:12px;color:#666;white-space:normal}
  #header:has(.headerMeta) #search{display:none!important}
  #header:has(.headerMeta) .mobileView{
    grid-area:toggle;
    width:auto!important;
    min-width:44px;
    justify-self:end;
    float:none!important;
    padding:0!important;
    margin:0;
    position:static;
    z-index:20;
  }
  .mobileView.pull-right,.mobileView .pull-right,.navbar-toggle.pull-right{float:none!important}
  .navbar{min-height:0!important;margin:0!important}
  .navbar-header{float:none!important;margin:0}
  .navbar-toggle{
    display:block!important;
    float:none!important;
    margin:0!important;
    padding:9px 11px;
    background:#222!important;
    border:0!important;
    border-radius:4px!important;
  }
  .navbar-toggle .icon-bar{background:#fff!important;display:block;width:20px;height:2px;margin:4px 0;border-radius:1px}
  .navbar-collapse{
    position:absolute!important;
    top:100%;
    left:12px!important;
    right:12px!important;
    width:auto!important;
    margin:8px 0 0!important;
    padding:0!important;
    background:#222!important;
    border-radius:4px;
    float:none!important;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    z-index:1000;
  }
  .navbar-collapse.collapse:not(.in){display:none!important}
  .navbar-collapse.collapse.in,.navbar-collapse.collapsing{display:block!important;height:auto!important}
  .nav{
    display:block!important;
    width:100%!important;
    position:static!important;
    left:auto!important;
    top:auto!important;
    margin:0!important;
    float:none!important;
    text-align:left!important;
  }
  .nav>li{display:block!important;float:none!important;width:100%!important;border-bottom:1px solid rgba(255,255,255,.12)}
  .nav>li:last-child{border-bottom:0}
  .nav>li>a{display:block!important;color:#fff!important;padding:13px 14px!important;background:transparent!important}
  .nav>li>a:hover,.nav>li>a:focus{background:#111!important;color:#fff!important}
  .nav>li>a.viewCartIcon{background:none!important}
  .nav>li>a.viewCartIcon>span{margin-left:0!important}
  .nav>li form{padding:10px 12px 14px;margin:0}
  .nav>li .textbox{width:100%!important;height:40px!important;font-size:16px!important;box-sizing:border-box;border:0;border-radius:3px;padding:8px 10px}
  .featuredProductsGrid,.viewCatGrid,.newProductsGrid,.bestSellersGrid,.specialsGrid{width:100%!important;border-spacing:8px!important}
  .featuredProductsGrid td,.viewCatGrid td,.newProductsGrid td,.bestSellersGrid td,.specialsGrid td{
    width:48%!important;max-width:48%;box-sizing:border-box;padding:8px 6px!important;vertical-align:top;display:inline-block!important;float:none!important
  }
  .featuredProductsGrid td .prodItemName,.viewCatGrid td .prodItemName{
    font-size:12px!important;line-height:1.35!important;margin:8px 0!important;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical
  }
  .featuredProductsGrid td .prodItemPicDiv img,.viewCatGrid td .prodItemPic img{max-height:160px;margin:0 auto;object-fit:contain}
  #footer .col-sm-3,#footer .col-md-3,#footer .col-lg-3,#footer .col-xs-6{width:100%!important;float:none!important;margin-bottom:16px}
  #footer .container,#bottom .container{width:100%!important;padding-left:14px;padding-right:14px;box-sizing:border-box}
  .social-icon{float:none!important}
}

@media (max-width:480px){
  .featuredProductsGrid td,.viewCatGrid td,.newProductsGrid td,.bestSellersGrid td,.specialsGrid td{
    width:100%!important;max-width:100%;display:block!important;margin:0 0 12px!important
  }
  .featuredProductsHeaderText h1{font-size:22px!important}
}
