*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#111;color:#111}
a{text-decoration:none;color:inherit}
.topbar{
  position:sticky;top:0;z-index:20;
  background:linear-gradient(120deg,#c8102e,#ff6a00);
  color:#fff;padding:10px 14px;
  box-shadow:0 2px 6px rgba(0,0,0,.35);
}
.brand{display:flex;align-items:center;gap:10px;max-width:480px;margin:0 auto;}
.brand-mark{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:999px;background:rgba(0,0,0,.25);font-size:20px}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{font-weight:800;font-size:18px;letter-spacing:.02em}
.brand-phone{font-size:12px;opacity:.9}
.page{max-width:480px;margin:0 auto;background:#fafafa;min-height:100vh;padding-bottom:96px;}
.section{padding:12px 10px 80px;}
.section-title{font-size:20px;font-weight:700;margin:6px 4px 10px;color:#222}
.card{
  background:#fff;border-radius:18px;margin:10px 0;
  overflow:hidden;box-shadow:0 1px 6px rgba(0,0,0,.08);
  border:1px solid #eee;
}
.card-img{width:100%;height:190px;object-fit:cover;}
.card-body{padding:10px 12px 12px;}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.card-title{font-size:16px;font-weight:700;}
.card-price{font-weight:700;color:#222;font-size:14px;}
.card-desc{font-size:13px;color:#555;margin-bottom:8px;}
.card-field{margin-bottom:8px;}
.card-field.inline{display:flex;align-items:center;gap:10px;}
.field-label{font-size:12px;color:#777;margin-bottom:3px;display:block;}
.field-input{
  width:100%;padding:9px 11px;border-radius:999px;border:1px solid #ddd;
  font-size:14px;background:#fdfdfd;
}
.qty-input{width:80px;padding:8px 10px;border-radius:999px;border:1px solid #ddd;font-size:14px;}
.pill-row{display:flex;flex-wrap:wrap;gap:6px;}
.pill{
  padding:5px 10px;border-radius:999px;border:1px solid #ddd;
  font-size:12px;color:#444;background:#fff;cursor:pointer;
}
.pill.selected{background:#ffe6e6;border-color:#c8102e;color:#c8102e;font-weight:600;}
.btn{
  border:none;border-radius:999px;padding:10px 14px;font-size:14px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.btn.full{width:100%;margin-top:4px;}
.btn.primary{background:#c8102e;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);}
.btn.primary:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(0,0,0,.3);}
.btn.secondary{background:#fff;color:#c8102e;border:1px solid #c8102e;}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.7);}
.btn.small{font-size:12px;padding:6px 10px;}
.cart-sheet{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  max-width:480px;margin:0 auto;
}
.cart-summary{
  background:#222;color:#fff;padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
  border-radius:14px 14px 0 0;
}
.cart-summary-title{font-size:14px;font-weight:600;}
.cart-summary-sub{font-size:12px;opacity:.85;margin-top:1px;}
.cart-details{
  background:#fff;max-height:0;overflow:hidden;
  transition:max-height .25s ease-out,border-top .2s;
  border-top:0 solid #ddd;
}
.cart-details.open{
  max-height:420px;border-top:1px solid #eee;
  box-shadow:0 -2px 8px rgba(0,0,0,.12);
}
#cartList{max-height:200px;overflow-y:auto;padding:8px 12px 4px;}
.cart-item{display:flex;justify-content:space-between;align-items:flex-start;padding:5px 0;border-bottom:1px solid #f1f1f1;font-size:13px;}
.cart-item-main{flex:1;margin-right:10px;}
.cart-item-title{font-weight:600;}
.cart-item-extra{font-size:11px;color:#666;margin-top:1px;}
.cart-item-meta{font-size:12px;color:#555;}
.cart-form{padding:6px 12px 10px;border-top:1px solid #f3f3f3;}
.cart-form h3{font-size:14px;margin:4px 0 6px;}
.cart-form .field-input{margin-bottom:6px;}
.small-note{font-size:11px;color:#777;margin-top:4px;}
@media (min-width:768px){
  .page{border-radius:18px;box-shadow:0 4px 30px rgba(0,0,0,.35);margin-top:10px;margin-bottom:10px;}
}