@media (max-width: 720px){
  html, body{
    font-size:16px;
    -webkit-text-size-adjust:100%;
  }

  body{
    line-height:1.35;
  }

  .wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .card{
    padding:14px;
  }

  h1{ font-size:20px; line-height:1.15; }
  h2{ font-size:16px; line-height:1.2; }
  h3{ font-size:15px; line-height:1.2; }

  .muted{
    font-size:14px;
  }

  button, .btn, select, input, textarea{
    font-size:16px;
    min-height:44px;
  }

  input[type="checkbox"]{
    width:20px;
    height:20px;
  }

  input, select, textarea{
    max-width:100%;
  }

  .chip, .pill, .tag{
    font-size:13px;
    min-height:36px;
    padding:8px 10px;
  }

  .row, .rowline{
    gap:10px;
  }

  .grid, .twoCol, .threeCol, .cols{
    grid-template-columns:1fr;
  }

  .right, .actions, .btnRow{
    flex-wrap:wrap;
    gap:10px;
  }

  .sectionTitle, .categoryTitle, .categoryRow{
    font-size:15px;
  }

  .emptyState{
    font-size:14px;
  }

  .compareOnly{
    display:none;
  }

  /* ===== MOBILE TABLE STACKING (no sideways overflow) ===== */
  table.mobileStack thead{
    display:none;
  }

  table.mobileStack{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:14px;
  }

  table.mobileStack tbody{
    display:block;
    width:100%;
  }

  table.mobileStack tr{
    display:block;
    width:100%;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    margin:10px 0;
  }

  table.mobileStack td{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 0;
    border:0;
  }

  table.mobileStack td::before{
    content:attr(data-label);
    color:var(--muted);
    font-weight:600;
    font-size:13px;
    line-height:1.1;
    flex:1;
    padding-right:10px;
  }

  table.mobileStack td > *{
    flex:1;
    max-width:58%;
  }

  table.mobileStack td:first-child{
    font-weight:700;
    font-size:15px;
  }

  table.mobileStack td[data-label="Remove"] > *{
    max-width:none;
  }

  /* ===== EMPTY STATES (centered and clean) ===== */
  table.mobileStack tr.emptyRow{
    padding:16px 12px;
    text-align:center;
  }

  table.mobileStack tr.emptyRow td{
    display:block;
    width:100%;
    padding:0;
  }

  table.mobileStack tr.emptyRow td::before{
    display:none;
    content:"";
  }

  table.mobileStack tr.emptyRow .emptyState{
    margin:0 auto;
    max-width:320px;
    text-align:center;
    line-height:1.45;
  }

  table.mobileStack tr.emptyRow .emptyState strong{
    display:block;
    margin-bottom:6px;
  }

  table.mobileStack tr.emptyRow .emptyState a{
    font-weight:800;
    text-decoration:underline;
  }

  /* ===== CATEGORY HEADER (groupRow) ===== */
  table.mobileStack tr.groupRow{
    border:2px solid #1F2937;
    background:rgba(31,41,55,0.04);
    padding:12px 12px;
  }

  table.mobileStack tr.groupRow td:first-child::before{
    display:none;
    content:"";
  }

  table.mobileStack tr.groupRow td:first-child{
    padding-top:2px;
    padding-bottom:10px;
  }

  table.mobileStack tr.groupRow input[type="text"]{
    font-weight:900;
    letter-spacing:-0.01em;
  }

  table.mobileStack tr.groupRow .toggleBtn{
    min-height:38px;
    min-width:38px;
  }

  /* ===== SUB ITEMS (indent) ===== */
  table.mobileStack td.indent{
    position:relative;
    padding-left:16px;
  }

  table.mobileStack td.indent::after{
    content:"";
    position:absolute;
    left:0;
    top:10px;
    bottom:10px;
    width:3px;
    border-radius:3px;
    background:rgba(31,41,55,0.22);
  }

  table.mobileStack td.indent input{
    font-weight:650;
  }

  /* If you previously used tableWrap, ensure it doesn't force overflow */
  .tableWrap{
    overflow:visible;
  }
}
/* Mobile: compare is allowed to exist, but hidden by default via compareHidden */
th.compareOnly, td.compareOnly{
  display:table-cell;
}

.pill.compareOnly{
  display:flex;
}

.compareHidden{
  display:none !important;
}