@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root{
  --cream:#FBF7EF;
  --paper:#FFFFFF;
  --ink:#3B2E22;
  --ink-soft:#7A6C58;
  --tan:#C9A66B;
  --tan-deep:#A9803F;
  --sage:#7C9070;
  --sage-deep:#5F7355;
  --line:#E8DFCC;
  --danger:#B5451D;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Noto Sans SC', sans-serif;
  line-height:1.6;
  padding-bottom:88px; /* space for sticky cart bar */
}

/* ---------- Header ---------- */
.topbar{
  background:linear-gradient(135deg, var(--tan) 0%, #D8BE8C 100%);
  padding:22px 16px 26px;
}
.topbar-inner{
  max-width:640px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:14px;
}
.brand-mark{
  flex-shrink:0;
  width:52px;height:52px;
  border-radius:50%;
  background:var(--paper);
  object-fit:cover;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
}
.topbar h1{
  font-family:'Noto Serif SC', serif;
  font-size:20px;
  margin:0 0 2px;
  color:#332616;
}
.tagline{
  margin:0;
  font-size:13px;
  color:#5A4626;
}

/* ---------- About blurb ---------- */
.about-blurb{
  max-width:640px;
  margin:16px auto 0;
  padding:0 16px;
}
.about-headline{
  font-family:'Noto Serif SC', serif;
  font-size:17px;
  color:var(--tan-deep);
  text-align:center;
  margin:0 0 10px;
}
.about-blurb p{
  background:var(--paper);
  border:1px solid var(--line);
  border-left:3px solid var(--sage);
  border-radius:8px;
  padding:10px 14px;
  font-size:13px;
  color:var(--ink);
  margin:0 0 8px;
}

/* ---------- Section nav ---------- */
.section-nav{
  max-width:640px;
  margin:14px auto 0;
  display:flex;
  gap:8px;
  padding:0 16px;
  overflow-x:auto;
}
.nav-btn{
  flex:1;
  white-space:nowrap;
  background:var(--paper);
  border:1px solid var(--line);
  color:var(--ink-soft);
  padding:10px 12px;
  border-radius:10px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
}
.nav-btn.active{
  background:var(--sage);
  border-color:var(--sage);
  color:#fff;
}

/* ---------- Main / catalog ---------- */
main{max-width:640px; margin:0 auto; padding:16px;}
.catalog-section{display:none;}
.catalog-section.active{display:block;}
.section-hint{
  font-size:13px;
  color:var(--ink-soft);
  margin:4px 0 16px;
}

.baby-badge{
  display:block;
  max-width:220px;
  width:100%;
  margin:0 auto 10px;
  border-radius:14px;
}

.tier-block{margin-bottom:22px;}
.tier-title{
  font-family:'Noto Serif SC', serif;
  font-size:17px;
  color:var(--tan-deep);
  border-bottom:2px solid var(--tan);
  padding-bottom:6px;
  margin:0 0 10px;
}
.tier-note{
  font-size:12px;
  color:var(--danger);
  margin:0 0 8px;
}

.item-list{list-style:none; margin:0; padding:0;}
.item-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  margin-bottom:8px;
}
.item-name{font-size:14px; display:flex; flex-direction:column; gap:2px;}
.item-price{font-size:12px; color:var(--sage-deep); font-weight:500;}

.qty-control{
  display:flex;
  align-items:center;
  gap:0;
  flex-shrink:0;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.qty-btn{
  width:30px;height:30px;
  border:none;
  background:var(--cream);
  color:var(--tan-deep);
  font-size:16px;
  cursor:pointer;
}
.qty-btn:active{background:var(--tan);color:#fff;}
.qty-input{
  width:38px;
  border:none;
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  text-align:center;
  font-size:14px;
  height:30px;
  -moz-appearance:textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

/* ---------- Sticky cart bar ---------- */
.cart-bar{
  position:fixed;
  left:0;right:0;bottom:0;
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -4px 14px rgba(0,0,0,0.06);
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:640px;
  margin:0 auto;
}
.cart-summary{font-size:14px; font-weight:500; color:var(--ink);}
.cart-cta{
  background:var(--sage);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:10px 20px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.cart-cta:disabled{background:#C9C2B4; cursor:not-allowed;}

/* ---------- Checkout overlay ---------- */
.checkout-overlay{
  display:none;
  position:fixed; inset:0;
  background:rgba(59,46,34,0.45);
  z-index:50;
  align-items:flex-end;
  justify-content:center;
}
.checkout-overlay.open{display:flex;}
.checkout-sheet{
  background:#fff;
  width:100%;
  max-width:640px;
  max-height:88vh;
  overflow-y:auto;
  border-radius:18px 18px 0 0;
  padding:20px;
  position:relative;
}
.sheet-close{
  position:absolute; top:12px; right:14px;
  background:none; border:none;
  font-size:24px; color:var(--ink-soft);
  cursor:pointer;
}
.checkout-sheet h2{
  font-family:'Noto Serif SC', serif;
  margin:0 0 14px;
  font-size:19px;
}
.cart-lines{margin-bottom:8px;}
.cart-line{
  display:flex; justify-content:space-between;
  font-size:13px; padding:4px 0;
  border-bottom:1px dashed var(--line);
}

.totals-block{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  margin:10px 0 16px;
}
.totals-row{
  display:flex; justify-content:space-between;
  font-size:13px; padding:3px 0; color:var(--ink-soft);
}
.totals-row.totals-final{
  font-size:16px; font-weight:700; color:var(--danger);
  border-top:1px dashed var(--line); margin-top:4px; padding-top:7px;
}
.shipping-hint{
  font-size:12px; color:var(--sage-deep); margin:6px 0 0;
}

.delivery-choice{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px 4px;
  margin-bottom:14px;
}
.delivery-choice legend{
  font-size:13px; font-weight:700; color:var(--ink); padding:0 4px;
}
.radio-line{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink); margin-bottom:10px;
}
.radio-line input{width:auto; margin:0;}

#orderForm label{
  display:block;
  font-size:13px;
  color:var(--ink-soft);
  margin-bottom:12px;
}
#orderForm input[type=text],
#orderForm input[type=tel],
#orderForm textarea,
#orderForm input[type=file]{
  display:block;
  width:100%;
  margin-top:5px;
  padding:9px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  font-size:14px;
  font-family:inherit;
  background:#FCFAF5;
}
.req{color:var(--danger);}

.bank-info{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  font-size:13px;
  margin-bottom:14px;
}
.bank-info p{margin:2px 0;}
.duitnow-qr{
  display:block;
  width:140px;
  margin:10px auto 2px;
  border-radius:10px;
  border:1px solid var(--line);
}

.submit-btn{
  width:100%;
  background:var(--danger);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:13px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  margin-top:6px;
}
.submit-btn:disabled{background:#C9C2B4; cursor:not-allowed;}

.order-result{
  margin-top:16px;
  padding:14px;
  border-radius:10px;
  font-size:14px;
}
.order-result.success{background:#EAF1E6; color:var(--sage-deep); border:1px solid var(--sage);}
.order-result.error{background:#FBEAE3; color:var(--danger); border:1px solid var(--danger);}

/* ---------- Order summary step ---------- */
.order-summary h2{
  font-family:'Noto Serif SC', serif;
  font-size:19px;
  margin:0 0 10px;
  color:var(--sage-deep);
}
.summary-order-no{font-size:14px; margin:0 0 12px;}
.summary-order-no strong{color:var(--tan-deep);}
.summary-details{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  font-size:13px;
  margin-bottom:14px;
}
.summary-details p{margin:4px 0;}
.summary-note{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}

@media (min-width:520px){
  .item-name{font-size:15px;}
}