:root{
  --green:#40714E;
  --green-dark:#2C5137;
  --green-soft:#EAF1EC;
  --ink:#182220;
  --muted:#7A8A82;
  --surface:#F5F7F6;
  --card:#FFFFFF;
  --border:#E7ECEA;
  --white:#fff;
  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:20px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(18,33,26,.05);
  --shadow-md:0 6px 20px -10px rgba(18,33,26,.25);
  --shadow-lg:0 -8px 30px -12px rgba(18,33,26,.3);
  --overlay:rgba(10,20,15,.45);
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:var(--font-body);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--surface);
  font-family:var(--font-body);
  color:var(--ink);
  padding-bottom:110px;
  -webkit-font-smoothing:antialiased;
}
svg{display:block;}
.container{max-width:520px;margin:0 auto;padding:0 16px;scroll-margin-top:64px;}

/* ===== header ===== */
.site-nav{
  position:sticky;top:0;z-index:40;
  background:var(--green);
  color:var(--white);
}
.site-nav-inner{
  max-width:520px;margin:0 auto;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.site-nav-brand{
  font-size:19px;font-weight:700;letter-spacing:-.01em;
  display:flex;align-items:center;gap:8px;color:var(--white);
}
.icon-btn{
  position:relative;border:0;background:rgba(255,255,255,.16);color:var(--white);
  width:40px;height:40px;border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.icon-btn svg{width:20px;height:20px;}
.icon-badge{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  background:var(--ink);color:var(--white);border-radius:var(--radius-pill);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}

/* ===== sticky search + categories ===== */
.stickyhead{
  position:sticky;z-index:30;top:64px;
  background:var(--surface);
  padding:12px 0 6px;
  margin:0 -16px;
}
.searchbar{padding:0 16px;}
.search-wrap{position:relative;}
.search-icon{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--muted);
}
.search{
  width:100%;border:1px solid var(--border);background:var(--card);
  border-radius:var(--radius-pill);padding:13px 16px 13px 42px;
  font-family:inherit;font-size:14px;color:var(--ink);
  box-shadow:var(--shadow-sm);outline:none;
}
.search:focus{border-color:var(--green);}
.search::placeholder{color:var(--muted);}

.cat-rail-wrap{overflow:hidden;margin-top:12px;}
.cat-rail{
  display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;
  scrollbar-width:none;
}
.cat-rail::-webkit-scrollbar{display:none;}
.cat-item{
  flex:0 0 auto;border:1px solid var(--border);background:var(--card);
  color:var(--ink);border-radius:var(--radius-pill);padding:9px 14px;
  font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:7px;
}
.cat-item .cat-circle{display:flex;align-items:center;justify-content:center;color:var(--green);}
.cat-item .cat-circle svg{width:17px;height:17px;}
.cat-item.active{background:var(--green);border-color:var(--green);color:var(--white);}
.cat-item.active .cat-circle{color:var(--white);}
.cat-label{line-height:1;}

/* ===== list ===== */
.list{padding-top:6px;}
.cat{margin-bottom:22px;}
.cat-title{
  font-family:var(--font-heading);font-size:15px;font-weight:700;
  margin:6px 0 10px;letter-spacing:-.01em;
}
.card{
  display:flex;align-items:center;gap:12px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px;margin-bottom:10px;box-shadow:var(--shadow-sm);
  transition:transform .12s ease, box-shadow .12s ease;
}
.card.configurable{cursor:pointer;}
.card:active{transform:scale(.995);}
.card-avatar{
  flex:0 0 auto;width:46px;height:46px;border-radius:var(--radius-md);
  background:var(--green-soft);color:var(--green-dark);
  display:flex;align-items:center;justify-content:center;
}
.card-avatar svg{width:24px;height:24px;}
.card-body{flex:1;min-width:0;}
.card-name{font-size:14.5px;font-weight:600;line-height:1.35;}
.card-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.card-price{font-size:13px;font-weight:700;color:var(--green-dark);margin-top:4px;}
.card-price.free{color:var(--muted);}
.card-chevron{color:var(--muted);flex:0 0 auto;width:18px;height:18px;}
.card-chevron svg{width:18px;height:18px;}
.add-btn{
  flex:0 0 auto;width:34px;height:34px;border:0;border-radius:var(--radius-pill);
  background:var(--green);color:var(--white);font-size:20px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.add-btn:active{background:var(--green-dark);}
.stepper{display:flex;align-items:center;gap:8px;}
.stepper button{
  width:30px;height:30px;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--card);color:var(--ink);font-size:16px;cursor:pointer;
}
.stepper .value{min-width:16px;text-align:center;font-weight:700;font-size:14px;}
.empty{display:none;text-align:center;color:var(--muted);font-size:14px;padding:30px 0;}
.set-summary{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;}

/* ===== footer ===== */
.site-footer{background:var(--ink);color:var(--white);margin-top:10px;}
.site-footer-inner{
  max-width:520px;margin:0 auto;padding:26px 16px 32px;text-align:center;
}
.site-footer h3{font-size:16px;margin:0 0 6px;}
.site-footer p{margin:2px 0;font-size:13px;opacity:.7;}
.footer-wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  background:var(--green);color:var(--white);text-decoration:none;
  padding:10px 16px;border-radius:var(--radius-pill);font-size:14px;font-weight:600;
}
.footer-wa svg{width:18px;height:18px;}

/* ===== cart bar ===== */
.cartbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:none;
}
.cartbar.show{display:block;}
.cartbar-inner{
  max-width:488px;margin:0 auto;background:var(--green);color:var(--white);
  border-radius:var(--radius-lg);padding:12px 16px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:var(--shadow-lg);
}
.cartbar-info{display:flex;align-items:center;gap:10px;}
.cartbar-info svg{width:22px;height:22px;}
.cartbar-info .cnt{font-size:12px;opacity:.85;}
.cartbar-info .amt{font-size:16px;font-weight:700;}
.cartbar-cta{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;}
.cartbar-cta svg{width:16px;height:16px;}

/* ===== sheets ===== */
.sheet-overlay{
  position:fixed;inset:0;background:var(--overlay);z-index:60;
  display:none;align-items:flex-end;justify-content:center;
}
.sheet-overlay.show{display:flex;}
.sheet{
  width:100%;max-width:520px;background:var(--card);
  border-radius:24px 24px 0 0;
  padding:10px 18px calc(22px + env(safe-area-inset-bottom));
  max-height:90vh;overflow-y:auto;
}
.sheet-handle{width:44px;height:4px;border-radius:var(--radius-pill);background:var(--border);margin:0 auto 14px;}
.sheet-title{font-family:var(--font-heading);font-size:20px;font-weight:800;margin:0;letter-spacing:-.02em;}
.sheet-sub{margin:3px 0 0;font-size:12.5px;color:var(--muted);}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.sheet-close{
  border:1px solid var(--border);background:var(--card);color:var(--muted);
  width:34px;height:34px;border-radius:var(--radius-pill);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.sheet-close svg{width:16px;height:16px;}

.order-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  background:var(--green-soft);border:1px solid color-mix(in srgb,var(--green) 20%,transparent);
  border-radius:var(--radius-md);padding:12px 14px;
  font-size:12.5px;color:var(--green-dark);margin-bottom:16px;
}
.order-meta .code{font-weight:800;font-size:14px;letter-spacing:.02em;}
.order-meta .datetime{opacity:.75;}
.order-meta .name{width:100%;font-weight:600;color:var(--ink);font-size:13px;}

.sheet-block{margin-bottom:16px;}
.field-label{font-size:11.5px;font-weight:700;color:var(--muted);margin:0 0 8px;text-transform:uppercase;letter-spacing:.06em;}
.field-label .req{color:#D6482F;}
.field-label .opt{font-weight:600;text-transform:none;letter-spacing:0;opacity:.8;}
.name-field,.sheet-notes{
  width:100%;border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px 14px;font-family:inherit;font-size:14px;color:var(--ink);outline:none;background:var(--surface);
  transition:border-color .15s ease, background .15s ease;
}
.name-field:focus,.sheet-notes:focus{border-color:var(--green);background:var(--card);}
.name-field.field-error{border-color:#D6482F;}
.sheet-notes{min-height:76px;resize:vertical;line-height:1.5;}
.sheet-notes-label{font-size:11.5px;font-weight:700;color:var(--muted);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.06em;}

.sheet-items{display:flex;flex-direction:column;gap:10px;}
.sheet-empty{
  text-align:center;color:var(--muted);font-size:13.5px;padding:26px 0;
  border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--surface);
}
.sheet-row{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:12px 13px;
}
.sheet-row-main{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.sheet-row-info{flex:1;min-width:0;}
.sheet-row-name{font-size:14.5px;font-weight:700;line-height:1.35;}
.sheet-row-parts{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.45;}
.sheet-row-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto;}
.sheet-row-price{font-size:14px;font-weight:800;color:var(--green-dark);}
.sheet-row-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--border);
}
.line-note-toggle{
  display:flex;align-items:center;gap:6px;flex:1;min-width:0;
  border:0;background:transparent;color:var(--muted);
  font-family:inherit;font-size:12px;text-align:left;cursor:pointer;padding:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.line-note-toggle svg{width:13px;height:13px;flex:0 0 auto;color:var(--green);}
.line-trash{
  border:1px solid var(--border);background:var(--card);border-radius:var(--radius-pill);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);flex:0 0 auto;
}
.line-trash svg{width:15px;height:15px;}
.line-trash:active{color:#D6482F;border-color:#D6482F;}
.line-note-input{
  width:100%;margin-top:8px;border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:9px 11px;font-family:inherit;font-size:13px;outline:none;background:var(--card);
}
.line-note-input:focus{border-color:var(--green);}

.stepper{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-pill);padding:3px;}
.stepper button{
  width:26px;height:26px;border-radius:var(--radius-pill);border:0;
  background:transparent;color:var(--green-dark);font-size:16px;line-height:1;cursor:pointer;
}
.stepper button:active{background:var(--green-soft);}
.stepper .value{min-width:16px;text-align:center;font-weight:700;font-size:13.5px;}

.sheet-total{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;margin-bottom:12px;
  background:var(--green-soft);border-radius:var(--radius-md);
}
.sheet-total .label{font-size:13px;font-weight:600;color:var(--green-dark);}
.sheet-total .value{font-size:20px;font-weight:800;color:var(--green-dark);}
.sheet-actions{display:flex;gap:10px;}
.btn{
  flex:1;border:0;border-radius:var(--radius-pill);padding:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn svg{width:17px;height:17px;}
.btn-copy{flex:0 0 auto;padding:14px 20px;background:var(--green-soft);color:var(--green-dark);}
.btn-wa{background:var(--green);color:var(--white);box-shadow:var(--shadow-md);}
.btn-wa:active{background:var(--green-dark);}

/* ===== config sheet ===== */
.cfg-section{margin-bottom:16px;}
.cfg-label-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.cfg-step-num{
  width:20px;height:20px;border-radius:var(--radius-pill);background:var(--green);color:var(--white);
  font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.cfg-label{font-size:14px;font-weight:700;}
.cfg-hint{font-size:12px;color:var(--muted);}
.cfg-set-includes{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:12px;}
.cfg-progress{display:flex;gap:5px;margin-bottom:12px;}
.cfg-progress-dot{width:22px;height:4px;border-radius:var(--radius-pill);background:var(--border);}
.cfg-progress-dot.done{background:var(--green);}
.opt-row{
  display:flex;align-items:center;gap:10px;border:1px solid var(--border);
  background:var(--card);border-radius:var(--radius-md);padding:11px 12px;margin-bottom:8px;cursor:pointer;
}
.opt-row.selected{border-color:var(--green);background:var(--green-soft);}
.opt-row.disabled{opacity:.45;pointer-events:none;}
.opt-row-box,.opt-check{
  width:20px;height:20px;border-radius:var(--radius-pill);border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;color:transparent;
}
.opt-row.selected .opt-row-box,.opt-row.selected .opt-check{background:var(--green);border-color:var(--green);color:var(--white);}
.opt-check svg,.opt-row-box svg{width:12px;height:12px;}
.opt-row-name{flex:1;font-size:14px;}
.opt-row-price{font-size:13px;font-weight:700;color:var(--green-dark);}
.opt-row-price.free{color:var(--muted);font-weight:600;}
.cfg-footer{border-top:1px solid var(--border);padding-top:12px;margin-top:6px;}
.cfg-total{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
.cfg-total .label{font-size:14px;color:var(--muted);}
.cfg-total .value{font-size:18px;font-weight:700;color:var(--green-dark);}
.cfg-qty{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:12px;}
.cfg-qty button{
  width:36px;height:36px;border-radius:var(--radius-pill);border:1px solid var(--border);
  background:var(--card);font-size:18px;cursor:pointer;color:var(--ink);
}
.cfg-qty span{font-size:16px;font-weight:700;min-width:20px;text-align:center;}
.btn-add-cfg{
  width:100%;border:0;border-radius:var(--radius-pill);background:var(--green);color:var(--white);
  padding:14px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
.btn-add-cfg:disabled{background:var(--border);color:var(--muted);cursor:not-allowed;}

/* ===== toast ===== */
.toast{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%) translateY(10px);
  background:var(--ink);color:var(--white);padding:10px 18px;border-radius:var(--radius-pill);
  font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:80;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}