/* style.css - mobile-first app look */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial;
  background:#fbfcfd; color:#0f1724; -webkit-font-smoothing:antialiased;
  line-height:1.4; padding-bottom:100px;
}
.app{max-width:480px; margin:0 auto; min-height:100vh; background:linear-gradient(#fdfcfc,#ffc4a2);}

/* Header */
.header{display:flex;justify-content:space-between;align-items:center;padding:12px;border-bottom:4px solid #fa0a0a;position:sticky;top:0;background:inherit;z-index:20}
.header .title{font-weight:800;font-size:18px}
.header a{color:#0b5cff;text-decoration:none;font-weight:700}

/* Container */
.container{padding:12px}

/* Product card */
.product{display:flex;gap:8px;background:#fff;padding:10px;border-radius:12px;margin-bottom:12px;box-shadow:0 2px 2px rgba(71, 114, 213, 0.04)}
.thumb{width:84px;height:84px;border-radius:12px;overflow:hidden;background:#ffffff;flex-shrink:0}
.thumb img{width:100%;height:100%;object-fit:cover}
.info{flex:1}
.name{font-weight:800;margin-bottom:4px}
.controls{display:flex;gap:4px;align-items:center;margin-bottom:4px}
.select,.qty{padding:6px;border-radius:10px;border:1px solid #b4b4b4;background:#fdfafa}
.price{color:#0b5cff;font-weight:800}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;border-radius:12px;border:0;cursor:pointer;font-weight:800}
.btn-primary{background:linear-gradient(90deg,#fa5204,#f15b00);color:#fffbfb}
.btn-ghost{background:transparent;border:1px solid #f9fafc;color:#f15b00}

/* Cart summary */
.cart-summary{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;width:calc(100% - 28px);max-width:480px;background:#f15b00;color:#fff;border-radius:14px;padding:12px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 18px 40px rgba(11,92,255,0.18);z-index:40}

/* Table */
.table{width:100%;border-collapse:collapse;margin-bottom:12px}
.table th,.table td{padding:6px;border-bottom:1px solid #747171;text-align:left}
.table th{background:#fc9453}

/* Form card */
.form-card{background:#fff;padding:12px;border-radius:12px;box-shadow:0 6px 8px rgba(15,23,42,0.04)}
.input{width:100%;padding:6px;border-radius:6px;border:1px solid #ffffff;margin-bottom:6px;background:#fbfdff}

/* Responsive */
@media(min-width:640px){.container{padding:8px}.thumb{width:96px;height:96px}}