/* =========================
   Base / Reset
========================= */
* { box-sizing: border-box; }
:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
body { margin:0; background:#fff; color:#111; }
a { color: inherit; }
img { max-width: 100%; display:block; }

/* =========================
   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;
}
.logo-img{ width:34px; height:34px; object-fit:contain; }
.brandtext .name{ font-weight:800; }
.brandtext .sub{ font-size:12px; color:#666; }
.nav a{ margin-left:12px; text-decoration:none; }
.cartbtn{ font-weight:800; }

/* =========================
   Buttons / Helpers
========================= */
.btn, .addbtn{
  border:1px solid #111;
  background:#111;
  color:#fff;
  font-weight:700;
  border-radius:12px;
  padding:10px 14px;
  text-decoration:none;
  display:inline-block;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.btn:visited{ color:#fff; }

.smallnote{ font-size:12px; color:#666; margin-top:6px; }

/* =========================
   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;
  min-width:140px;
}
.filterrow button{
  padding:10px 14px;
  border-radius:10px;
  border:1px solid #111;
  background:#111;
  color:#fff;
  cursor:pointer;
}

/* =========================
   Category Sections + Scroller
========================= */
.catsection{ margin:18px 0 26px; }
.cathead{ margin:8px 2px 10px; }
.catlink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-decoration:none;
}
.cattitle{
  font-size:20px;
  font-weight:900;
  margin:0;
  line-height:1.1;
}
.carrow{ font-size:28px; line-height:1; opacity:.7; }

.scroller{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:6px 2px 14px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling: touch;
}
.scroller::before,
.scroller::after{ content:""; flex:0 0 8px; }
.scroller::-webkit-scrollbar{ height:8px; }
.scroller::-webkit-scrollbar-thumb{ background:#ddd; border-radius:10px; }

.scroller .card{
  flex:0 0 260px;
  scroll-snap-align:start;
}

@media (max-width:600px){
  .cattitle{ font-size:18px; }
  .scroller{ gap:10px; }
  .scroller .card{
    flex:0 0 calc((100% - 20px) / 3);
  }
}

/* =========================
   Card (Menu)
========================= */
.card{
  border:1px solid #eee;
  border-radius:16px;
  box-shadow:0 1px 10px rgba(0,0,0,0.04);
  overflow:hidden;
  background:#fff;
}
.cardlink{
  display:flex;
  flex-direction:column;
  text-decoration:none;
  color:inherit;
  height:100%;
}
.imgwrap{
  background:#fafafa;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.imgwrap img{ width:100%; height:100%; object-fit:cover; }
.imgplaceholder{ color:#999; padding:20px; text-align:center; }

.cardbody{
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
  min-height:0;
}
.title{ font-weight:900; font-size:14px; line-height:1.15; }
.desc{
  color:#333;
  font-size:12px;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
.price{
  margin-top:auto;
  font-weight:900;
  white-space:nowrap;
}

/* =========================
   Product Detail Page
========================= */
.pd-top{ margin-bottom:10px; }
.backlink{
  text-decoration:none;
  font-weight:700;
  display:inline-block;
  padding:6px 0;
}

.pwrap{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
@media (max-width:800px){
  .pwrap{ grid-template-columns:1fr; }
}

.pimg{
  border:1px solid #eee;
  border-radius:16px;
  overflow:hidden;
  background:#fafafa;
}
.pimg img{ width:100%; height:auto; display:block; }

.pmeta{ color:#666; font-size:12px; margin-top:6px; }
.pdesc{ color:#333; margin:10px 0; }
.pprice{ font-weight:900; font-size:18px; margin:10px 0 14px; }

/* product form */
.pd-buy{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* option groups */
.optgroup{
  padding:12px;
  border:1px solid #eee;
  border-radius:12px;
  margin:10px 0;
}
.opt-title{ margin-bottom:8px; text-align:left; }
.optrow{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 0;
}
.optprice{ margin-left:auto; color:#666; }

/* actions row: qty + add button */
.pd-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.pd-qty{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.qtybtn{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid #ddd;
  background:#f5f5f5;
  font-size:18px;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.qty-menu{
  width:56px;
  height:40px;
  text-align:center;
  border:1px solid #ddd;
  border-radius:12px;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
}
.addbtn{
  flex:1 1 auto;
  height:40px;
  padding:0 14px;
  min-width:0;
}

/* keep qty + button in ONE row on phones */
@media (max-width:600px){
  .pd-actions{ flex-wrap:nowrap; }
  .pd-qty{ flex:0 0 auto; }
}

/* =========================
   Cart
========================= */
h2{ margin-top:0; }

.table{ width:100%; border-collapse:collapse; }
.table th, .table td{
  border-bottom:1px solid #eee;
  padding:10px;
  vertical-align:middle;
}
.r{ text-align:right; }

/* cart qty control */
.qtywrap{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.qtywrap .qtybtn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #ddd;
  background:#f5f5f5;
  font-size:18px;
  line-height:1;
  padding:0;
  cursor:pointer;
}
.qtywrap .qty-menu{
  width:58px;
  height:34px;
  text-align:center;
  border:1px solid #ddd;
  border-radius:12px;
  padding:0;
  -webkit-appearance:none;
  appearance:none;
}

/* bottom row */
.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:900;
}
.subtotal-inline .label{ color:#666; font-weight:700; }
.subtotal-inline .value{
  min-width:110px;
  text-align:right;
}

/* cart mobile */
@media (max-width:600px){
  .table th, .table td{ padding:8px 6px; }
  .table th:nth-child(2),
  .table td:nth-child(2),
  .table th:nth-child(4),
  .table td:nth-child(4){
    white-space:nowrap;
  }

  .cart-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .cart-actions .btn{ width:100%; text-align:center; }
  .subtotal-inline{
    width:100%;
    justify-content:space-between;
  }
}

/* =========================
   Reward section
========================= */
.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;
}

/* =========================
   Forms
========================= */
.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; }

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

/* =========================
   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;
}