/* ---------- sane defaults ---------- */
* { box-sizing: border-box; }
:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin:0; background:#fff; color:#111; }
a { color: inherit; }

/* ---------- layout ---------- */
.container { max-width: 1100px; margin: 0 auto; padding: 16px; }

/* ---------- top bar ---------- */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid #eee;
  position:sticky; top:0; background:#fff; z-index:10;
}
.brand{ display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; }
.logo-img{ width:34px; height:34px; object-fit:contain; display:block; }
.brandtext .name{ font-weight:700; }
.brandtext .sub{ font-size:12px; color:#666; }
.nav a{ margin-left:12px; text-decoration:none; }
.cartbtn{ font-weight:700; }

/* ---------- filters ---------- */
.filters { margin: 10px 0 16px; }
.filterrow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.filterrow input, .filterrow select{
  padding:10px; border:1px solid #ddd; border-radius:10px;
}
.filterrow button{
  padding:10px 14px; border-radius:10px; border:1px solid #111;
  background:#111; color:#fff; cursor:pointer;
}
.link{ text-decoration:underline; }

/* ---------- menu grid/cards ---------- */
.grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
@media (max-width: 900px){ .grid{ grid-template-columns:repeat(2, 1fr); } }

.card{
  border:1px solid #eee; border-radius:16px; overflow:hidden;
  box-shadow:0 1px 10px rgba(0,0,0,0.04);
}
.imgwrap{
  background:#fafafa; aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center;
}
@media (max-width: 600px){ .imgwrap{ aspect-ratio:1/1; } }

.imgwrap img{ width:100%; height:100%; object-fit:cover; }
.imgplaceholder{ color:#999; }

.cardbody{ padding:12px; }
@media (max-width: 600px){ .cardbody{ padding:8px; } }

.title{ font-weight:800; font-size:16px; }
@media (max-width: 600px){ .title{ font-size:14px; } }

.meta{ color:#666; font-size:12px; margin-top:2px; }
.desc{ margin-top:8px; color:#333; font-size:13px; min-height:34px; }
@media (max-width: 600px){
  .desc{ font-size:12px; line-height:1.3; }
}
.card, .cardbody { min-width: 0; }
.qtybtn, .addbtn { cursor:pointer; -webkit-appearance:none; appearance:none; }
.bottomrow{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:12px; gap:10px;
}
.price{ font-weight:800; white-space:nowrap; }

/* ===== MENU ADD TO CART (CLEAN RESET) ===== */

.addform {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .qtywrap {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .qtybtn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }
  
  .qty-menu {
    width: 44px;
    height: 36px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 0;
  }
  
  .addbtn {
    height: 36px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    font-weight: 600;
  }
  
  /* prevent Safari weird shrinking */
  .addform * {
    flex-shrink: 0;
  }

/* on phones: stack price then controls, but keep Add visible */
@media (max-width: 600px){
    .bottomrow{
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
    }
  
    .addform{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
  
    .qtywrap{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  
    .addbtn{
      width: 100%;
      height: 40px;
    }
  } 

/* ---------- cart table ---------- */
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ border-bottom:1px solid #eee; padding:10px; }
.r{ text-align:right; }
.qty{ width:70px; padding:8px; border:1px solid #ddd; border-radius:10px; }

/* ---------- forms (cart quotation) ---------- */
.form input, .form select, .form textarea{
  width:100%;
  padding:10px;
  border:1px solid #ddd;
  border-radius:12px;
}
.field{ width:100%; margin-bottom:12px; }
.form label{ display:block; margin:0 0 6px; font-size:12px; color:#666; }

/* iOS Safari datetime-local: make it behave */
input[type="datetime-local"]{
  width:100%;
  min-height:44px;
  display:block;
  -webkit-appearance:none;
  appearance:none;
  background:#fff;
}

.cart-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
}

.subtotal-inline{
  display:flex;
  align-items:baseline;
  gap:10px;
  font-weight:800;
}

th {
  font-weight: 600;
  text-align: left;
}

th.r {
  text-align: right;
}

h2 {
  margin-top: 0;
}

.reward{
  padding:14px 0;
  border-top:1px solid #eee;
  border-bottom:1px solid #eee;
  margin:14px 0;
}

.reward h3{ margin:0 0 10px; }

.reward-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.subtotal-inline .label{ color:#111; }
.subtotal-inline .value{ min-width:110px; text-align:right; }

/* ---------- flash + footer ---------- */
.flash { margin: 10px 0; }
.flash-item{
  background:#fff7d6; border:1px solid #ffe08a;
  padding:10px; border-radius:10px; margin-bottom:8px;
}
.footer{ border-top:1px solid #eee; padding:16px; text-align:center; color:#666; font-size:12px; }
.smallnote{ font-size:12px; color:#666; margin-top:8px; }

.btn {
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid #111;
    background: #111;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
  }
  
  .btn:visited { color: #fff; }