/* VELVO PWA RESPONSIVE — mobile/tablet/pc */
:root{
  --velvo-bg:#070b12;
  --velvo-panel:#101722;
  --velvo-border:#263246;
  --velvo-gold:#d6aa3d;
  --velvo-text:#ffffff;
  --velvo-muted:#9fb0c8;
}

html,body{
  max-width:100%;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

body{
  background:var(--velvo-bg);
}

button,a,input,select,textarea{
  touch-action:manipulation;
}

img{
  max-width:100%;
}

@media(max-width:900px){
  .wrap{padding:12px!important}
  .header,.topbar{
    position:sticky!important;
    top:0!important;
    z-index:50!important;
  }

  .grid,.pos-layout,.admin-app,.admin-grid,.delivery-columns{
    grid-template-columns:1fr!important;
  }

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

  .product{
    border-radius:18px!important;
    padding:11px!important;
    min-height:170px!important;
  }

  .img,.product-img{
    height:90px!important;
    border-radius:14px!important;
  }

  .name,.product-name{
    font-size:15px!important;
    line-height:1.2!important;
  }

  .price,.product-price{
    font-size:20px!important;
  }

  .cats,.channel-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    gap:8px!important;
    padding-bottom:6px!important;
    scrollbar-width:none;
  }

  .cats::-webkit-scrollbar,.channel-tabs::-webkit-scrollbar{display:none}

  .cat,.tab{
    flex:0 0 auto!important;
    padding:10px 14px!important;
    border-radius:999px!important;
  }

  aside.panel{
    position:relative!important;
  }

  .btn,.gold-btn,.dark-btn{
    min-height:48px!important;
    border-radius:16px!important;
  }

  input,select,textarea,.input{
    min-height:46px!important;
    font-size:16px!important;
  }

  .hero,.hero-panel{
    border-radius:22px!important;
    padding:18px!important;
  }

  .hero h1,.hero-panel h1{
    font-size:28px!important;
  }

  .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .metric-card b{
    font-size:24px!important;
  }

  .order-row{
    grid-template-columns:1fr!important;
  }
}

@media(min-width:901px) and (max-width:1250px){
  .products{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(display-mode:standalone){
  body:before{
    content:'';
    display:block;
    height:env(safe-area-inset-top);
    background:#070b12;
  }
}