:root{
  --cream:#FCF8EE;
  --cream-2:#F3F6EA;
  --green:#4F7A3A;
  --green-soft:#8FB772;
  --green-line:#CFE0BC;
  --pink:#F4838C;
  --pink-soft:#FBDDE0;
  --ink:#2F4A26;
  --muted:#7C8B72;
  --white:#fff;
  --radius:20px;
  --shadow:0 6px 22px rgba(79,122,58,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px;margin:0 auto;padding:20px 16px 60px}

/* ---------- hero ---------- */
.hero{text-align:center;padding:18px 0 26px}
.logo-circle{
  width:112px;height:112px;margin:0 auto 12px;
  border-radius:50%;
  background:var(--white);
  border:4px solid var(--green-soft);
  display:flex;align-items:center;justify-content:center;
  font-size:30px;letter-spacing:-4px;
  box-shadow:var(--shadow);
}
.hero h1{font-size:44px;font-weight:900;color:var(--green);margin:0;letter-spacing:1px}
.tagline{margin:2px 0 0;color:var(--muted);font-weight:500;letter-spacing:4px;font-size:14px}
.slogan{
  display:inline-block;margin:16px 0 0;padding:9px 22px;
  background:var(--green-soft);color:#fff;font-weight:700;
  border-radius:999px;box-shadow:var(--shadow);
}

/* ---------- cards ---------- */
.card{
  background:var(--white);
  border:2px solid var(--green-line);
  border-radius:var(--radius);
  padding:20px;margin:0 0 16px;
  box-shadow:var(--shadow);
}
.card h2{margin:0 0 4px;font-size:20px;color:var(--green);font-weight:900}
.hint{margin:0 0 14px;color:var(--muted);font-size:14px}

/* ---------- products ---------- */
.products{display:grid;gap:12px}
.product{
  display:grid;
  grid-template-columns:52px 1fr auto;
  align-items:center;gap:12px;
  padding:12px;border-radius:16px;
  background:var(--cream-2);
  border:2px solid transparent;
  transition:border-color .15s ease, background .15s ease;
}
.product.active{border-color:var(--green-soft);background:#fff}
.product .emoji{font-size:34px;text-align:center;line-height:1}
.product .name{font-weight:700;margin:0}
.product .price{margin:0;font-size:13px;color:var(--muted)}
.product .price b{color:var(--pink)}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{
  width:36px;height:36px;border-radius:50%;
  border:2px solid var(--green-line);background:#fff;color:var(--green);
  font-size:20px;font-weight:700;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s ease, background .15s ease;
}
.stepper button:hover{background:var(--cream-2)}
.stepper button:active{transform:scale(.92)}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper .qty{
  min-width:34px;text-align:center;font-weight:900;font-size:18px;
  color:var(--green);
}
.line-total{
  grid-column:1 / -1;
  margin:0;padding-top:8px;border-top:1px dashed var(--green-line);
  font-size:14px;font-weight:700;color:var(--green);
}
.line-total .save{color:var(--pink);font-weight:700}

/* ---------- fields ---------- */
.field{display:block;margin:0 0 14px}
.field > span{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
.field > span b{color:var(--pink)}
input[type=text],input[type=tel],textarea{
  width:100%;padding:12px 14px;
  border:2px solid var(--green-line);border-radius:14px;
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--cream-2);
  transition:border-color .15s ease, background .15s ease;
}
input:focus,textarea:focus{outline:none;border-color:var(--green-soft);background:#fff}
input.invalid,textarea.invalid{border-color:var(--pink);background:#fff6f7}
textarea{resize:vertical}
.err{display:block;color:var(--pink);font-size:13px;font-style:normal;min-height:0;margin-top:4px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- choice ---------- */
.choice-group{display:grid;gap:10px;margin-bottom:6px}
.choice{display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice-body{
  display:block;padding:14px 16px;border-radius:16px;
  background:var(--cream-2);border:2px solid transparent;
  transition:all .15s ease;
}
.choice-body b{display:block;font-size:16px}
.choice-body small{color:var(--muted)}
.choice input:checked + .choice-body{
  border-color:var(--green-soft);background:#fff;
  box-shadow:0 3px 12px rgba(79,122,58,.12);
}
.choice input:focus-visible + .choice-body{outline:3px solid var(--pink-soft)}
.address{
  margin-top:14px;padding-top:16px;
  border-top:2px dashed var(--green-line);
}

/* ---------- summary ---------- */
.summary{background:linear-gradient(180deg,#fff, var(--cream-2))}
.summary-lines{list-style:none;margin:6px 0 12px;padding:0}
.summary-lines li{
  display:flex;justify-content:space-between;gap:10px;
  padding:7px 0;border-bottom:1px dashed var(--green-line);font-size:15px;
}
.summary-lines li.empty{color:var(--muted);justify-content:center;border:none}
.total-row{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:10px;font-size:18px;font-weight:700;
}
.total-row strong{
  background:var(--pink);color:#fff;padding:6px 16px;border-radius:999px;font-size:20px;
}

/* ---------- actions ---------- */
.actions{text-align:center}
.submit{
  width:100%;padding:16px;border:none;border-radius:999px;
  background:var(--green);color:#fff;font-family:inherit;
  font-size:19px;font-weight:900;cursor:pointer;
  box-shadow:0 6px 18px rgba(79,122,58,.28);
  transition:transform .1s ease, opacity .15s ease;
}
.submit:hover{opacity:.94}
.submit:active{transform:scale(.985)}
.submit:disabled{opacity:.55;cursor:default}
.submit.ghost{background:#fff;color:var(--green);border:2px solid var(--green-soft);box-shadow:none}
.status{margin:12px 0 0;font-weight:700;min-height:22px}
.status.error{color:var(--pink)}
.status.ok{color:var(--green)}

/* ---------- done ---------- */
.done{
  text-align:center;background:#fff;border:2px solid var(--green-line);
  border-radius:var(--radius);padding:36px 22px;box-shadow:var(--shadow);
}
.done-emoji{font-size:56px}
.done h2{color:var(--green);margin:8px 0}
.done .submit{margin-top:18px;max-width:260px}

/* ---------- footer ---------- */
.foot{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-top:28px;color:var(--muted);font-size:14px;font-weight:500;
}

@media (max-width:420px){
  .hero h1{font-size:36px}
  .product{grid-template-columns:44px 1fr;grid-template-areas:"emoji info" "step step"}
  .product .emoji{grid-area:emoji}
  .product .info{grid-area:info}
  .stepper{grid-area:step;justify-content:flex-end}
}

/* מספרים + ₪ תמיד בסדר נכון גם בתוך משפט בעברית */
bdi{direction:ltr;unicode-bidi:isolate}

/* ---------- תשלום בפייבוקס ---------- */
.pay{
  margin-top:16px;padding:16px;
  border:2px dashed var(--pink);border-radius:16px;
  background:var(--pink-soft);text-align:center;
}
.pay-title{margin:0 0 4px;font-weight:900;color:#B4444F;font-size:16px}
.pay-sub{margin:6px 0 0;font-size:13px;color:#8A5A5F}
.pay-btn{
  display:block;margin-top:10px;padding:14px 18px;
  background:var(--pink);color:#fff;text-decoration:none;
  border-radius:999px;font-weight:900;font-size:17px;
  box-shadow:0 5px 16px rgba(244,131,140,.35);
  transition:transform .1s ease, opacity .15s ease;
}
.pay-btn:hover{opacity:.94}
.pay-btn:active{transform:scale(.985)}
.pay-done{margin-top:22px;background:#fff;border-style:solid}

/* ---------- באנר מועד החלוקה ---------- */
.pickup-banner{
  margin:14px auto 0;max-width:420px;padding:12px 16px;
  background:#fff;border:2px solid var(--green-soft);border-radius:16px;
  box-shadow:var(--shadow);
}
.pickup-banner b{display:block;color:var(--green);font-size:16px}
.pickup-banner span{display:block;color:var(--muted);font-size:14px;margin-top:2px}

/* ---------- מחוון מלאי ---------- */
.stock-badge{margin:4px 0 0;font-size:13px;font-weight:700;color:var(--green-soft)}
.stock-badge:empty{display:none}
.stock-badge.low{color:#C8791F}
.stock-badge.out{color:var(--pink)}
.product.sold-out{opacity:.55}
.product.sold-out .emoji{filter:grayscale(1)}