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

body {
     font-family: Arial, sans-serif; line-height: 1.5; background: #f7f7f7; color: #222; 
    }

.site-header, .site-footer {
     background: #fff; border-bottom: 1px solid #ddd; padding: 12px 16px;
}

.site-footer {
     border-top: 1px solid #ddd; border-bottom: 0; margin-top: 24px; 
}

.controls {
     display: flex; gap: 8px; align-items: center; margin-top: 8px; 
    }

main {
     padding: 16px; 
    }

.products-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-top: 12px;
}

.card {
  background: #fff; border: 1px solid #ddd; border-radius: 6px; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}

.card img {
  width: 100%; height: 120px; object-fit: cover; border: 1px solid #eee;
}

.card h3 {
     font-size: 1rem; 
    }
.card p { 
    font-size: 0.9rem; color: #444; 
}
.card .price { 
    font-weight: bold; 
}
.card button {
  padding: 6px 8px; border: 1px solid #333; background: #eee; cursor: pointer;
}

.table-wrap {
     overflow-x: auto; background: #fff; border: 1px solid #ddd; border-radius: 6px; 
    }
.cart-table {
     width: 100%; border-collapse: collapse;
     }
.cart-table th, .cart-table td {
  border-bottom: 1px solid #eee; padding: 8px; text-align: left;
}
.cart-actions {
  display: flex; justify-content: space-between; align-items: center; margin-top: 10px;
}
button {
     cursor: pointer;
     }
input[type="number"] { width: 64px; padding: 4px; }

@media (max-width: 600px) {
  .controls { flex-wrap: wrap; }
}

/* Dark mode */
body.dark {
     background: #111; color: #eee; 
    }

body.dark .site-header, body.dark .site-footer, body.dark .card, body.dark .table-wrap {
 background: #222; border-color: #444;
}

body.dark .cart-table th, body.dark .cart-table td {
     border-bottom-color: #333; 
     
    }
body.dark button { 
    background: #333; color: #eee; border-color: #777; 
}