@media (max-width: 576px){

  /* table wrapper */
  .table-responsive{
    overflow: visible;
  }

  /* hide header */
  table.table thead{
    display: none;
  }

  /* each row becomes a card */
  table.table tbody tr{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   remove"
      "qty    qty"
      "price  total";
    gap: .6rem .8rem;
    padding: .85rem;
    margin-bottom: .75rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.03);
  }

  table.table tbody td{
    padding: 0 !important;
    border: 0 !important;
  }

  /* map your columns by order (1..5) */
  table.table tbody td:nth-child(1){ grid-area: name; }
  table.table tbody td:nth-child(2){ grid-area: qty; }
  table.table tbody td:nth-child(3){ grid-area: price; text-align: left !important; }
  table.table tbody td:nth-child(4){ grid-area: total; text-align: right !important; }
  table.table tbody td:nth-child(5){ grid-area: remove; justify-self: end; }

  /* make qty controls comfortable */
  table.table tbody td:nth-child(2) .btn{
    min-width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  /* total row in tfoot -> separate card */
  table.table tfoot tr{
    display: block;
    padding: .85rem;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 14px;
    background: rgba(255,255,255,.04);
  }

  table.table tfoot th, table.table tfoot td{
    border: 0 !important;
  }
}

@media (max-width: 576px){
  table.table tbody td:nth-child(1) a{
    font-size: 1.05rem;
    font-weight: 700;
  }
}

.cart-thumb{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
}