/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1100px){
  .cart-line{grid-template-columns:1fr 82px 118px 118px 118px auto}
  .var-row{grid-template-columns:repeat(var(--vdims,2),minmax(0,1fr)) 96px 112px 112px 38px}
}
@media (max-width:900px){
  #sidebar{
    position:fixed; inset-inline-start:0; top:0; transform:translateX(105%);
    height:100vh;
    height:100dvh;
    transition:transform .26s cubic-bezier(.2,.8,.3,1); z-index:99; width:270px; flex-basis:270px;
  }
  #sidebar.open{transform:none}
  #topbar{display:flex}
  /* منوی پایین با env(safe-area-inset-bottom) بلندتر می‌شود، پس فضای
     خالی زیر صفحه هم باید همان‌قدر بیشتر شود وگرنه ردیف آخر جدول
     زیر منو گم می‌شود */
  #view{padding:var(--sp4) var(--sp4) calc(92px + env(safe-area-inset-bottom))}
  #mobNav{display:block}
  .page-head h1{font-size:1.32rem}
  .stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--sp3)}
  .stat{padding:var(--sp3) var(--sp4)}
  .stat .val{font-size:1.24rem}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .prd{padding:var(--sp4)}
  .prd-now{margin-inline-start:0; order:3}
  .prd-custom{grid-template-columns:1fr; gap:var(--sp3)}
  .card{padding:var(--sp4); border-radius:var(--r-md)}
  .modal{border-radius:var(--r-lg); max-height:96vh; max-height:96dvh}
  .modal-body{padding:var(--sp4)}
  .modal-head,.modal-foot{padding:var(--sp3) var(--sp4)}
  .modal-foot{padding-bottom:calc(var(--sp3) + env(safe-area-inset-bottom))}
  .modal-foot .btn{flex:1 1 auto}
  #toasts{inset-inline:14px; bottom:calc(76px + env(safe-area-inset-bottom))}
  .toast{max-width:none}
  .cart-line{grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp3) var(--sp2); padding:var(--sp3)}
  .cart-line .ln-name{grid-column:1/-1}
  .cart-line .ln-total{grid-column:1/3; text-align:right; align-self:center}
  .cart-line .ln-del{grid-column:3; justify-self:end}
  .var-row{grid-template-columns:1fr 1fr; gap:var(--sp2)}
  .var-row .v-del{grid-column:2; justify-self:end}
  table.tbl{min-width:560px; font-size:.82rem}
  table.tbl th,table.tbl td{padding:9px 10px}
}
@media (max-width:520px){
  body{font-size:14.5px}
  #view{padding:var(--sp3) var(--sp3) 92px}
  .page-head{margin-bottom:var(--sp4)}
  .page-head h1{font-size:1.18rem}
  .head-actions{width:100%}
  .head-actions .btn{flex:1}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat .val{font-size:1.08rem}
  .stat{padding:var(--sp3)}
  .seg{width:100%}
  .seg button{flex:1; padding:7px 8px; font-size:.78rem}
  .prd .seg{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px}
  .prd .seg button{flex:none}
  .cart-line{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-line .ln-total{grid-column:1}
  .cart-line .ln-del{grid-column:2}
}

@media print{
  #sidebar,#topbar,#mobNav,#toasts,.head-actions,.no-print{display:none !important}
  body{background:#fff !important}
  body::before{display:none}
  #view{padding:0; max-width:none}
}