* {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 body {
     font-family: Inter, system-ui, Arial, sans-serif;
     background: #2a2a2b;
     color: #f3f1f1
 }

 header {
     background: #049b0c;
     color: #fff;
     padding: 1rem 1.25rem;
     display: flex;
     align-items: center;
     justify-content: space-between
 }

 header h1 {
     font-size: clamp(1rem, 2vw, 1.3rem);
 }

 .container {
     padding: 1rem;
     max-width: 1100px;
     margin: 0 auto
 }

 .grid {
     display: grid;
     grid-template-columns: 1fr 380px;
     gap: 1rem
 }

 .card {
     background: #585858;
     border-radius: 10px;
     padding: 0.75rem;
     box-shadow: 2px white;

 }

 .product-list {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
     gap: 0.75rem
 }


 .product {
     border: 2px solid;
     border-radius: 8px;
     padding: 10px;
     margin: 10px;
     display: inline-block;
     width: 150px;
     text-align: center;
     gap: 0.5rem;
     cursor: pointer;
     box-shadow: 0 0 10px #049b0c;

 }

 .product-image {
     width: 100%;
     height: 100px;
     object-fit: cover;
     margin-bottom: 5px;
 }

 .product .name {
     font-weight: 600
 }

 .product .price {
     font-weight: 700
 }

 .product button {
     margin-top: auto;
     padding: 0.5rem;
     border-radius: 8px;
     border: 0;
     background: #10b981;
     color: #fff;
     cursor: pointer
 }


 .cart-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 0.5rem
 }

 .cart-items {
     max-height: 44vh;
     overflow: auto;
     padding-right: 6px
 }

 .cart-row {
     display: flex;
     gap: 0.5rem;
     align-items: center;
     padding: 0.5rem;
     border-bottom: 1px solid #f0f2f5
 }

 .cart-row .q {
     width: 48px
 }

 .cart-row button {
     padding: 0.25rem 0.4rem;
     border-radius: 6px;
     border: 0;
     background: #ef4444;
     color: #fff;
     cursor: pointer
 }

 form.row {
     display: flex;
     gap: 0.5rem;
     margin-bottom: 0.5rem
 }

 input,
 select {
     padding: 0.5rem;
     border-radius: 8px;
     border: 1px solid #e2e8f0
 }

 .list {
     display: grid;
     gap: 0.5rem
 }

 .list-item {
     background: #fff;
     padding: 0.5rem;
     border-radius: 8px;
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 .btn {
     padding: 0.4rem 0.6rem;
     border-radius: 8px;
     border: 0;
     cursor: pointer;
     background: #049b0c;
     color: white;
 }

 .btn1 {
     padding: 0.4rem 0.6rem;
     border-radius: 8px;
     border: 0;
     cursor: pointer;
     background: #ffffff;
     color: rgb(0, 0, 0);
 }

 .btn.secondary {
     background: rgb(231, 53, 53);
     color: #fff
 }

 .btn.danger {
     background: rgb(231, 53, 53);
     color: #fff
 }

 .btn.edit {
     background: #3b82f6;
     color: #fff
 }

 .btn.delete {
     background: #ef4444;
     color: #fff
 }

 /* Footer totals */
 .totals {
     margin-top: 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.4rem
 }

 .totals .row {
     display: flex;
     justify-content: space-between
 }

 @media (max-width:900px) {
     .grid {
         grid-template-columns: 1fr;
     }

     .product-list {
         grid-template-columns: repeat(auto-fill, minmax(140px, 1fr))
     }
 }

 @media (max-width: 1024px) {
     .grid {
         grid-template-columns: 1fr;
     }

     .cart-items {
         max-height: 30vh;
     }
 }

 @media (max-width: 768px) {
     .product-list {
         grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
     }

     .product-image {
         height: 90px;
     }
 }

 @media (max-width: 480px) {
     header h1 {
         font-size: 0.95rem;
     }

     .product-list {
         grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     }

     .product {
         padding: 8px;
     }

     .product-image {
         height: 75px;
     }

     form.row {
         flex-direction: column;
         gap: 0.8rem;
     }

     .btn,
     .btn1 {
         width: 100%;
     }
 }

 .product.selected {
     border: 3px solid #ff0000;
     border-radius: 10px;
     background: rgba(0, 255, 98, 0.15);
 }

 .qty-mark {
     background-color: #ff0000;
     ;
 }