/* ==========================================================================
   FarmHub Food Market — catalog & order design system
   Scoped to .fh-app so it never fights the Greenola theme.
   ========================================================================== */

.fh-app{
  /* Brand — inherited from Greenola, unchanged */
  --fh-green:#2A7D2E; --fh-green-deep:#17511A; --fh-green-light:#94D96B;
  --fh-green-tint:#E4F3E2; --fh-green-tint-2:#E7F8F0; --fh-link:#0B3D2C;

  /* Ground & ink */
  --fh-paper:#FBFAF7; --fh-surface:#FFFFFF; --fh-ink:#1E2227;
  --fh-text:#565C63; --fh-muted:#646A72; --fh-rule:#E6E3DC; --fh-border:#888F96;

  /* Status — darkened from theme values that fail AA on white */
  --fh-danger:#C0392B; --fh-danger-tint:#FDF2F0;
  --fh-warn:#8A6100; --fh-warn-tint:#FEF7E4; --fh-warn-line:#E8C877;

  /* Scale */
  --fh-1:4px; --fh-2:8px; --fh-3:12px; --fh-4:16px; --fh-5:24px;
  --fh-6:32px; --fh-7:48px; --fh-8:64px;
  --fh-r-sm:6px; --fh-r:10px; --fh-r-lg:16px; --fh-r-pill:999px;

  --fh-shadow-sm:0 1px 2px rgba(30,34,39,.06), 0 2px 8px rgba(30,34,39,.05);
  --fh-shadow:0 4px 12px rgba(30,34,39,.07), 0 12px 32px rgba(30,34,39,.07);
  --fh-shadow-lg:0 8px 24px rgba(30,34,39,.10), 0 32px 64px rgba(23,81,26,.14);

  --fh-serif:'Tenor Sans', Georgia, serif;
  --fh-sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fh-ease:cubic-bezier(.16,1,.3,1);

  font-family:var(--fh-sans);
  color:var(--fh-ink);
  background:var(--fh-paper);
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.fh-app *, .fh-app *::before, .fh-app *::after{ box-sizing:border-box; }
.fh-app ::selection{ background:var(--fh-green-tint); color:var(--fh-green-deep); }
.fh-app{ caret-color:var(--fh-green); }
.fh-app :focus-visible{
  outline:2px solid var(--fh-green); outline-offset:2px; border-radius:var(--fh-r-sm);
}
.fh-app :focus:not(:focus-visible){ outline:none; }

.fh-app h1, .fh-app h2, .fh-app h3, .fh-app h4, .fh-app p, .fh-app ul, .fh-app ol, .fh-app figure{
  margin:0; padding:0;
}
.fh-app ul, .fh-app ol{ list-style:none; }
.fh-app button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.fh-app input, .fh-app select, .fh-app textarea{ font:inherit; color:inherit; }
.fh-app svg{ display:block; flex:none; }
.fh-app [hidden]{ display:none !important; }
.fh-app a{ color:var(--fh-link); text-underline-offset:3px; text-decoration-thickness:1px; }

.fh-app .fh-num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

.fh-app /* Scrollbars inside our own scroll containers */
.fh-scroll{ scrollbar-width:thin; scrollbar-color:var(--fh-border) transparent; }
.fh-app .fh-scroll::-webkit-scrollbar{ height:6px; width:6px; }
.fh-app .fh-scroll::-webkit-scrollbar-thumb{ background:var(--fh-border); border-radius:var(--fh-r-pill); }
.fh-app .fh-scroll::-webkit-scrollbar-track{ background:transparent; }

.fh-app .fh-sr{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.fh-app /* ---------- Layout ---------- */
.fh-wrap{ width:100%; max-width:1080px; margin:0 auto; padding:0 var(--fh-5); }
.fh-app .fh-page{ padding-block:var(--fh-7) var(--fh-8); }
@media (max-width:640px){ .fh-app .fh-wrap{ padding:0 var(--fh-4);} .fh-app .fh-page{ padding-block:var(--fh-5) var(--fh-8);} }

.fh-app /* ---------- Masthead ---------- */
.fh-masthead{ margin-bottom:var(--fh-6); }
.fh-app .fh-masthead h1{
  font-family:var(--fh-serif); font-weight:400; letter-spacing:-.01em;
  font-size:clamp(30px,4.6vw,44px); line-height:1.12; color:var(--fh-green-deep);
}
.fh-app .fh-masthead .fh-lede{
  margin-top:var(--fh-3); max-width:62ch; color:var(--fh-text); font-size:16px;
}
.fh-app .fh-metaline{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--fh-2) var(--fh-4);
  margin-top:var(--fh-4); font-size:13px; color:var(--fh-muted);
}
.fh-app .fh-metaline > span{ display:inline-flex; align-items:center; gap:6px; }
.fh-app .fh-dot{ width:5px; height:5px; border-radius:50%; background:var(--fh-green-light); }

.fh-app /* ---------- Buttons ---------- */
.fh-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--fh-2);
  padding:12px var(--fh-5); border-radius:var(--fh-r); font-size:15px; font-weight:600;
  line-height:1.2; border:1px solid transparent; white-space:nowrap; text-decoration:none;
  transition:background .16s ease-out, border-color .16s ease-out, color .16s ease-out, transform .16s var(--fh-ease);
}
.fh-app .fh-btn:active{ transform:translateY(1px); }
.fh-app .fh-btn--primary{ background:var(--fh-green); color:#fff; }
.fh-app .fh-btn--primary:hover{ background:var(--fh-green-deep); }
.fh-app .fh-btn--ghost{ border-color:var(--fh-border); background:var(--fh-surface); color:var(--fh-ink); }
.fh-app .fh-btn--ghost:hover{ border-color:var(--fh-green); color:var(--fh-green-deep); background:var(--fh-green-tint-2); }
.fh-app .fh-btn--quiet{ color:var(--fh-text); padding:12px var(--fh-3); }
.fh-app .fh-btn--quiet:hover{ color:var(--fh-green-deep); }
.fh-app .fh-btn--sm{ padding:8px var(--fh-3); font-size:13px; }
.fh-app .fh-btn--block{ width:100%; }
.fh-app .fh-btn--lg{ padding:16px var(--fh-6); font-size:16px; }
.fh-app .fh-btn[disabled]{ opacity:.45; cursor:not-allowed; }
.fh-app .fh-btn[disabled]:active{ transform:none; }

.fh-app /* ---------- Search + filter bar ---------- */
.fh-controls{
  position:sticky; top:0; z-index:30; background:var(--fh-paper);
  padding:var(--fh-4) 0 var(--fh-3);
  box-shadow:0 1px 0 var(--fh-rule);
}
.fh-app .fh-controls.is-stuck{ box-shadow:0 1px 0 var(--fh-rule), 0 8px 20px -12px rgba(30,34,39,.25); }
.fh-app .fh-search{ position:relative; display:flex; align-items:center; }
.fh-app .fh-search > svg:first-child{
  position:absolute; left:16px; color:var(--fh-muted); pointer-events:none;
}
.fh-app .fh-search input{
  width:100%; padding:15px 46px 15px 48px; font-size:16px;
  background:var(--fh-surface); border:1px solid var(--fh-border);
  border-radius:var(--fh-r); transition:border-color .16s, box-shadow .16s;
}
.fh-app .fh-search input::placeholder{ color:var(--fh-muted); }
.fh-app .fh-search input:focus{
  border-color:var(--fh-green);
  box-shadow:0 0 0 3px rgba(42,125,46,.22);
}
.fh-app .fh-search-clear{
  position:absolute; right:10px; display:grid; place-items:center;
  width:30px; height:30px; border-radius:50%; color:var(--fh-muted);
}
.fh-app .fh-search-clear:hover{ background:var(--fh-green-tint-2); color:var(--fh-green-deep); }

.fh-app .fh-chips-rail{ position:relative; }
.fh-app .fh-chips-rail::after{
  content:''; position:absolute; right:0; top:0; bottom:8px; width:52px; pointer-events:none;
  background:linear-gradient(90deg, rgba(251,250,247,0), var(--fh-paper) 78%);
  opacity:0; transition:opacity .2s ease-out;
}
.fh-app .fh-chips-rail.has-more::after{ opacity:1; }
.fh-app .fh-chips{
  display:flex; gap:var(--fh-2); margin-top:var(--fh-3);
  overflow-x:auto; padding-bottom:var(--fh-2); scroll-snap-type:x proximity;
}
.fh-app .fh-chip{
  display:inline-flex; align-items:center; gap:6px; flex:none; scroll-snap-align:start;
  padding:7px 14px; border-radius:var(--fh-r-pill); font-size:13px; font-weight:500;
  border:1px solid var(--fh-border); background:var(--fh-surface); color:var(--fh-text);
  transition:border-color .16s, background .16s, color .16s;
}
.fh-app .fh-chip:hover{ border-color:var(--fh-green-light); color:var(--fh-green-deep); }
.fh-app .fh-chip[aria-pressed="true"]{
  background:var(--fh-green-deep); border-color:var(--fh-green-deep); color:#fff; font-weight:600;
}
.fh-app .fh-chip .fh-chip-n{ font-size:11px; color:var(--fh-muted); }
.fh-app .fh-chip[aria-pressed="true"] .fh-chip-n{ color:rgba(255,255,255,.85); }

.fh-app .fh-resultline{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--fh-4);
  margin-top:var(--fh-4); font-size:13px; color:var(--fh-muted);
}

.fh-app /* ---------- The index ---------- */
.fh-index{ margin-top:var(--fh-2); }
.fh-app .fh-cat{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:baseline; gap:var(--fh-3);
  padding:var(--fh-5) 0 var(--fh-2);
  background:linear-gradient(var(--fh-paper) 72%, transparent);
}
.fh-app .fh-cat h2{
  font-family:var(--fh-serif); font-weight:400; font-size:21px; color:var(--fh-green-deep);
}
.fh-app .fh-cat span{ font-size:12px; color:var(--fh-muted); }
.fh-app .fh-cat::after{ content:''; flex:1; height:1px; background:var(--fh-rule); }

.fh-app .fh-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--fh-3) var(--fh-5);
  align-items:start; padding:var(--fh-4) 0; border-bottom:1px solid var(--fh-rule);
}
.fh-app .fh-row:hover{ background:linear-gradient(90deg, var(--fh-green-tint-2), transparent 70%); }
.fh-app .fh-row.is-out .fh-row-name{ color:var(--fh-text); font-weight:400; }
.fh-app .fh-row.is-out .fh-unit{ background:var(--fh-paper); border-style:dashed; }
.fh-app .fh-row.is-out .fh-unit-price{ color:var(--fh-text); }
.fh-app .fh-row-name{
  font-size:16px; font-weight:500; color:var(--fh-ink); line-height:1.35;
  display:flex; align-items:baseline; gap:var(--fh-2); flex-wrap:wrap;
}
.fh-app .fh-badge{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:3px 7px; border-radius:var(--fh-r-sm); white-space:nowrap;
  background:var(--fh-green-tint); color:var(--fh-green-deep);
}
.fh-app .fh-badge--out{ background:#F1EFEA; color:var(--fh-text); }
.fh-app .fh-row-note{ margin-top:2px; font-size:13px; color:var(--fh-muted); }
.fh-app .fh-row-units{ display:flex; flex-wrap:wrap; gap:var(--fh-2); justify-content:flex-end; }

.fh-app /* A unit chip = label + price + add. One control, three jobs. */
.fh-unit{
  display:inline-flex; align-items:stretch; border:1px solid var(--fh-border);
  border-radius:var(--fh-r); background:var(--fh-surface); overflow:hidden;
  transition:border-color .16s ease-out, box-shadow .16s ease-out;
}
.fh-app .fh-unit:hover{ border-color:var(--fh-green-light); }
.fh-app .fh-unit:focus-within{ border-color:var(--fh-green); box-shadow:0 0 0 3px rgba(42,125,46,.22); }
.fh-app .fh-unit.is-in{ border-color:var(--fh-green); background:var(--fh-green-tint-2); }
.fh-app .fh-unit-info{
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:7px var(--fh-3); min-width:92px;
}
.fh-app .fh-unit-label{
  font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--fh-muted);
}
.fh-app .fh-unit-price{ font-size:15px; font-weight:600; color:var(--fh-green-deep); }
.fh-app .fh-unit-add{
  display:grid; place-items:center; width:40px;
  border-left:1px solid var(--fh-border); color:var(--fh-green-deep);
  transition:background .16s ease-out, color .16s ease-out;
}
.fh-app .fh-unit-add:hover{ background:var(--fh-green); color:#fff; }
.fh-app .fh-unit.is-in .fh-unit-add{ border-left-color:var(--fh-green-light); }
.fh-app .fh-unit-qty{
  display:flex; align-items:center; border-left:1px solid var(--fh-green-light);
}
.fh-app .fh-unit-qty button{
  width:32px; align-self:stretch; display:grid; place-items:center; color:var(--fh-green-deep);
}
.fh-app .fh-unit-qty button:hover{ background:var(--fh-green); color:#fff; }
.fh-app .fh-unit-qty output{
  min-width:26px; text-align:center; font-size:14px; font-weight:700;
  color:var(--fh-green-deep); font-variant-numeric:tabular-nums;
}

@media (max-width:720px){
  .fh-app .fh-row{ grid-template-columns:1fr; }
  .fh-app .fh-row-units{ justify-content:flex-start; }
  .fh-app .fh-unit-info{ min-width:0; }
  .fh-app /* Thumb-sized controls and legible micro-labels on a phone. */
  .fh-unit-add{ width:46px; }
  .fh-app .fh-unit-qty button{ width:38px; }
  .fh-app .fh-unit-label{ font-size:12px; }
  .fh-app .fh-chip{ min-height:44px; padding-block:0; }
  .fh-app .fh-chip .fh-chip-n{ font-size:12px; }
  .fh-app .fh-btn--sm{ min-height:44px; }
}

.fh-app /* ---------- Empty state ---------- */
.fh-empty{ padding:var(--fh-8) var(--fh-5); text-align:center; }
.fh-app .fh-empty svg{ margin:0 auto var(--fh-4); color:var(--fh-green-light); }
.fh-app .fh-empty h3{ font-family:var(--fh-serif); font-weight:400; font-size:22px; color:var(--fh-ink); }
.fh-app .fh-empty p{ margin-top:var(--fh-2); color:var(--fh-text); font-size:15px; }
.fh-app .fh-empty .fh-btn{ margin-top:var(--fh-5); }

.fh-app /* ---------- Order bar (the authored moment) ---------- */
.fh-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  transform:translateY(105%); transition:transform .42s var(--fh-ease);
  background:var(--fh-green-deep); color:#fff;
  box-shadow:0 -8px 32px rgba(23,81,26,.28);
  padding-bottom:env(safe-area-inset-bottom);
}
.fh-app .fh-bar.is-up{ transform:translateY(0); }
.fh-app .fh-bar-inner{
  max-width:1080px; margin:0 auto; padding:var(--fh-3) var(--fh-5);
  display:flex; align-items:center; gap:var(--fh-4);
}
.fh-app .fh-bar-count{
  display:grid; place-items:center; min-width:34px; height:34px; padding:0 8px;
  border-radius:var(--fh-r-pill); background:rgba(255,255,255,.16);
  font-weight:700; font-size:14px; font-variant-numeric:tabular-nums;
}
.fh-app .fh-bar-count.is-bump{ animation:fh-bump .34s var(--fh-ease); }
@keyframes fh-bump { 0%{transform:scale(1)} 38%{transform:scale(1.22)} 100%{transform:scale(1)} }
.fh-app .fh-bar-text{ flex:1; min-width:0; line-height:1.25; }
.fh-app .fh-bar-text b{ display:block; font-size:15px; font-weight:600; }
.fh-app .fh-bar-text > span{ font-size:12.5px; color:rgba(255,255,255,.72); }
.fh-app .fh-bar .fh-btn--primary{ background:#fff; color:var(--fh-green-deep); }
.fh-app .fh-bar .fh-btn--primary:hover{ background:var(--fh-green-tint); }
.fh-app .fh-bar-clear{ color:rgba(255,255,255,.72); font-size:13px; padding:8px; }
.fh-app .fh-bar-clear:hover{ color:#fff; text-decoration:underline; }
.fh-app.has-bar{ padding-bottom:76px; }
@media (max-width:560px){
  .fh-app .fh-bar-inner{ padding:var(--fh-3) var(--fh-4); gap:var(--fh-3); }
  .fh-app .fh-bar-text > span{ display:none; }
  .fh-app .fh-bar-clear{ display:none; }
}

.fh-app /* ---------- Fields ---------- */
.fh-field{ margin-bottom:var(--fh-4); }
.fh-app .fh-field > label, .fh-app .fh-legend{
  display:block; margin-bottom:6px; font-size:12px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--fh-text);
}
.fh-app .fh-req{ color:var(--fh-green); margin-left:2px; }
.fh-app .fh-opt{ color:var(--fh-muted); font-weight:400; text-transform:none; letter-spacing:0; font-size:12px; }
.fh-app .fh-input, .fh-app .fh-select, .fh-app .fh-textarea{
  width:100%; padding:12px 14px; font-size:16px; background:var(--fh-surface);
  border:1px solid var(--fh-border); border-radius:var(--fh-r);
  transition:border-color .16s, box-shadow .16s;
}
.fh-app .fh-textarea{ min-height:96px; resize:vertical; line-height:1.55; }
.fh-app .fh-input:focus, .fh-app .fh-select:focus, .fh-app .fh-textarea:focus{
  border-color:var(--fh-green); box-shadow:0 0 0 3px rgba(42,125,46,.22);
}
.fh-app .fh-input::placeholder, .fh-app .fh-textarea::placeholder{ color:var(--fh-muted); }

/* The theme sets `color:#fff` on every focused input, select and textarea
   (`input[type="text"]:focus, … {color:#fff}`) because its own forms sit on dark
   sections. Ours sit on white cards, so a focused field painted white-on-white:
   the text was in the input the whole time, just invisible until blur returned the
   inherited colour. That selector is (0,2,1), so restating our ink colour needs to
   beat it in both states — not only on :focus, or the base loses the same way. */
.fh-app .fh-input, .fh-app .fh-select, .fh-app .fh-textarea,
.fh-app .fh-search input, .fh-app .fh-stepper input,
.fh-app .fh-input:focus, .fh-app .fh-select:focus, .fh-app .fh-textarea:focus,
.fh-app .fh-search input:focus, .fh-app .fh-stepper input:focus{
  color:var(--fh-ink);
}
.fh-app .fh-select{
  appearance:none; padding-right:40px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23565C63' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.fh-app .fh-hint{ margin-top:6px; font-size:12.5px; color:var(--fh-muted); line-height:1.5; }
.fh-app .fh-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:var(--fh-3); }
@media (max-width:560px){ .fh-app .fh-grid2{ grid-template-columns:1fr; } }

.fh-app .fh-field.is-err .fh-input, .fh-app .fh-field.is-err .fh-select, .fh-app .fh-field.is-err .fh-textarea{
  border-color:var(--fh-danger); background:var(--fh-danger-tint);
}
.fh-app .fh-err{
  display:none; align-items:center; gap:6px; margin-top:6px;
  font-size:13px; font-weight:500; color:var(--fh-danger);
}
.fh-app .fh-field.is-err .fh-err{ display:flex; }

.fh-app /* ---------- Choice cards (zone, priority, payment) ---------- */
.fh-choices{ display:grid; gap:var(--fh-3); }
.fh-app .fh-choices--2{ grid-template-columns:1fr 1fr; }
.fh-app .fh-choices--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:860px){ .fh-app .fh-choices--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .fh-app .fh-choices--2, .fh-app .fh-choices--3{ grid-template-columns:1fr; } }
.fh-app .fh-choice{ position:relative; }
.fh-app .fh-choice input{ position:absolute; opacity:0; width:0; height:0; }
.fh-app .fh-choice label{
  display:flex; gap:var(--fh-3); align-items:flex-start; height:100%;
  padding:var(--fh-4); border:1px solid var(--fh-border); border-radius:var(--fh-r);
  background:var(--fh-surface); cursor:pointer;
  transition:border-color .16s ease-out, background .16s ease-out, box-shadow .16s ease-out;
}
.fh-app .fh-choice label:hover{ border-color:var(--fh-green-light); background:var(--fh-green-tint-2); }
.fh-app .fh-choice input:checked + label{
  border-color:var(--fh-green); background:var(--fh-green-tint-2);
  box-shadow:0 0 0 1px var(--fh-green);
}
.fh-app .fh-choice input:focus-visible + label{ outline:2px solid var(--fh-green); outline-offset:2px; }
.fh-app .fh-choice-ico{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border-radius:var(--fh-r-sm); background:var(--fh-green-tint); color:var(--fh-green-deep);
}
.fh-app .fh-choice input:checked + label .fh-choice-ico{ background:var(--fh-green); color:#fff; }
.fh-app .fh-choice-t{ display:block; font-size:15px; font-weight:600; color:var(--fh-ink); }
.fh-app .fh-choice-s{ display:block; margin-top:2px; font-size:13px; color:var(--fh-text); line-height:1.45; }
.fh-app .fh-choice-p{ display:block; margin-top:6px; font-size:13px; font-weight:600; color:var(--fh-green-deep); }

.fh-app /* ---------- Notices ---------- */
.fh-note{
  display:flex; gap:var(--fh-3); padding:var(--fh-4);
  border:1px solid var(--fh-rule); border-radius:var(--fh-r);
  background:var(--fh-surface); font-size:13.5px; line-height:1.6; color:var(--fh-text);
}
.fh-app .fh-note svg{ color:var(--fh-green); margin-top:2px; }
.fh-app .fh-note b{ display:block; color:var(--fh-ink); font-size:14px; margin-bottom:3px; }
.fh-app .fh-note--action{ align-items:center; padding:var(--fh-3) var(--fh-4); }
.fh-app .fh-note--action p{ flex:1; min-width:0; }
.fh-app .fh-note--warn{ background:var(--fh-warn-tint); border-color:var(--fh-warn-line); color:#6B4E08; }
.fh-app .fh-note--warn svg{ color:var(--fh-warn); }
.fh-app .fh-note--warn b{ color:var(--fh-warn); }

.fh-app /* ---------- Modal ---------- */
.fh-modal{
  /* The theme's fixed header is z-index 999 and its overlays go higher still, so a
     modal at 100 renders underneath them: on mobile the site logo lands across this
     modal's own title. A modal must cover page chrome, so sit above the header —
     while staying below the theme's login modal (1000000000) so that still works. */
  position:fixed; inset:0; z-index:100000; display:none;
  align-items:center; justify-content:center; padding:var(--fh-5);
  background:rgba(23,81,26,.42); backdrop-filter:blur(3px);
}
.fh-app .fh-modal.is-open{ display:flex; animation:fh-fade .18s ease-out; }
@keyframes fh-fade { from{opacity:0} to{opacity:1} }
.fh-app .fh-modal-box{
  display:flex; flex-direction:column; width:100%; max-width:820px; max-height:88vh;
  background:var(--fh-surface); border-radius:var(--fh-r-lg); overflow:hidden;
  box-shadow:var(--fh-shadow-lg); animation:fh-rise .3s var(--fh-ease);
}
@keyframes fh-rise { from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
.fh-app .fh-modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--fh-4);
  padding:var(--fh-4) var(--fh-5); border-bottom:1px solid var(--fh-rule);
}
.fh-app .fh-modal-head h2{ font-family:var(--fh-serif); font-weight:400; font-size:22px; color:var(--fh-green-deep); }
.fh-app .fh-modal-head p{ font-size:12.5px; color:var(--fh-muted); margin-top:2px; }
.fh-app .fh-modal-close{
  display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; color:var(--fh-text); transition:background .16s, color .16s;
}
.fh-app .fh-modal-close:hover{ background:var(--fh-green-tint-2); color:var(--fh-green-deep); }
.fh-app .fh-modal-body{ overflow-y:auto; padding:0 var(--fh-5) var(--fh-5); }
@media (max-width:560px){
  .fh-app .fh-modal{ padding:0; align-items:flex-end; }
  .fh-app .fh-modal-box{ max-height:92vh; border-radius:var(--fh-r-lg) var(--fh-r-lg) 0 0; }
  /* dvh accounts for the phone browser's own collapsing chrome; vh above is the fallback. */
  @supports (height:100dvh){ .fh-app .fh-modal-box{ max-height:92dvh; } }
}

.fh-app /* Price table inside the modal */
.fh-ptable{ width:100%; border-collapse:collapse; font-size:14px; }
.fh-app .fh-ptable th{
  position:sticky; top:0; z-index:1; text-align:left; padding:10px var(--fh-3);
  background:var(--fh-surface); border-bottom:1px solid var(--fh-rule);
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fh-muted);
}
.fh-app .fh-ptable th:last-child, .fh-app .fh-ptable td:last-child{ text-align:right; }
.fh-app .fh-ptable td{ padding:9px var(--fh-3); border-bottom:1px solid var(--fh-rule); color:var(--fh-text); }
.fh-app .fh-ptable tr:hover td{ background:var(--fh-green-tint-2); }
.fh-app .fh-ptable .fh-pt-name{ color:var(--fh-ink); font-weight:500; }
.fh-app .fh-ptable .fh-pt-price{ color:var(--fh-green-deep); font-weight:600; }
.fh-app .fh-ptable .fh-pt-cat td{
  background:var(--fh-paper); font-family:var(--fh-serif); font-size:15px;
  color:var(--fh-green-deep); padding-top:14px; text-align:left;
}

.fh-app /* ---------- Order page ---------- */
.fh-order{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:var(--fh-6); align-items:start; }
@media (max-width:980px){ .fh-app .fh-order{ grid-template-columns:minmax(0,1fr); gap:var(--fh-5); } }

.fh-app .fh-steps-label{ display:none; }
.fh-app .fh-steps{ display:flex; gap:var(--fh-1); margin-bottom:var(--fh-5); }
.fh-app .fh-step-pip{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:7px;
  text-align:left; padding-block:8px; }
.fh-app .fh-step-pip .fh-track{ height:3px; border-radius:2px; background:var(--fh-rule); transition:background .3s var(--fh-ease); }
.fh-app .fh-step-pip span{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--fh-muted); transition:color .3s; }
.fh-app .fh-step-pip.is-done .fh-track{ background:var(--fh-green-light); }
.fh-app .fh-step-pip.is-done span{ color:var(--fh-text); }
.fh-app .fh-step-pip.is-now .fh-track{ background:var(--fh-green); }
.fh-app .fh-step-pip.is-now span{ color:var(--fh-green-deep); }
.fh-app .fh-step-pip:disabled{ cursor:default; }
@media (max-width:640px){
  .fh-app .fh-step-pip span:last-child{ display:none; }
  .fh-app /* The visible track is 3px; without padding the button itself is a 5px tap target. */
  .fh-step-pip{ padding:18px 0; justify-content:center; }
  .fh-app .fh-steps{ gap:6px; margin:calc(var(--fh-4) * -1) 0 var(--fh-2); }
  .fh-app .fh-steps-label{
    display:flex; align-items:baseline; gap:var(--fh-2); margin-bottom:var(--fh-2);
    font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
    color:var(--fh-muted);
  }
  .fh-app .fh-steps-label .fh-steps-name{ color:var(--fh-green-deep); }
}

.fh-app .fh-panel{ display:none; }
.fh-app .fh-panel.is-active{ display:block; animation:fh-in .3s var(--fh-ease); }
@keyframes fh-in { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.fh-app .fh-panel-head{ margin-bottom:var(--fh-5); }
.fh-app .fh-panel-head h2{
  font-family:var(--fh-serif); font-weight:400; font-size:26px; color:var(--fh-green-deep); line-height:1.2;
}
.fh-app .fh-panel-head p{ margin-top:6px; font-size:14.5px; color:var(--fh-text); max-width:56ch; }
.fh-app .fh-block{ margin-bottom:var(--fh-5); }
.fh-app .fh-nav{ display:flex; gap:var(--fh-3); align-items:center; margin-top:var(--fh-6); }
.fh-app .fh-nav .fh-btn--primary{ margin-left:auto; }

.fh-app /* Line items in the order form */
.fh-lines{ display:flex; flex-direction:column; gap:var(--fh-3); }
.fh-app .fh-line{
  display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:var(--fh-3);
  grid-template-areas:"product del" "controls controls";
  padding:var(--fh-4); border:1px solid var(--fh-rule); border-radius:var(--fh-r);
  background:var(--fh-surface);
}
.fh-app .fh-line:focus-within{ border-color:var(--fh-green); }
.fh-app .fh-line .fh-field{ margin:0; min-width:0; }
.fh-app .fh-line-product{ grid-area:product; }
.fh-app .fh-line-del{
  grid-area:del; align-self:end; justify-self:end;
  display:grid; place-items:center; width:44px; height:46px;
  border-radius:var(--fh-r-sm); color:var(--fh-muted);
  transition:background .16s, color .16s;
}
.fh-app .fh-line-del:hover{ background:var(--fh-danger-tint); color:var(--fh-danger); }

/* Size, quantity and money get their own row so none of them can crowd the others. */
.fh-app .fh-line-controls{
  grid-area:controls; display:grid; gap:var(--fh-3);
  grid-template-columns:minmax(0,1fr) 136px minmax(96px,auto);
  align-items:end;
}
.fh-app .fh-line-total{
  display:flex; flex-direction:column; gap:2px; text-align:right;
  padding-bottom:12px; white-space:nowrap;
}
.fh-app .fh-lt-l{
  font-size:11px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fh-muted);
}
.fh-app .fh-lt-v{ font-size:17px; font-weight:600; color:var(--fh-green-deep); }

/* Quantity stepper — tapping beats typing on a phone. */
.fh-app .fh-stepper{
  display:flex; align-items:stretch; overflow:hidden;
  border:1px solid var(--fh-border); border-radius:var(--fh-r); background:var(--fh-surface);
  transition:border-color .16s, box-shadow .16s;
}
.fh-app .fh-stepper:focus-within{
  border-color:var(--fh-green); box-shadow:0 0 0 3px rgba(42,125,46,.22);
}
.fh-app .fh-stepper button{
  flex:none; width:42px; display:grid; place-items:center;
  color:var(--fh-green-deep); background:var(--fh-paper);
  transition:background .16s, color .16s;
}
.fh-app .fh-stepper button:hover:not(:disabled){ background:var(--fh-green); color:#fff; }
.fh-app .fh-stepper button:disabled{ color:var(--fh-muted); cursor:not-allowed; opacity:.6; }
.fh-app .fh-stepper input{
  flex:1; min-width:0; width:100%; border:0; outline:0; background:transparent;
  text-align:center; font-size:16px; font-weight:600; color:var(--fh-ink);
  padding:12px 2px; font-variant-numeric:tabular-nums;
}
.fh-app .fh-stepper input::-webkit-outer-spin-button,
.fh-app .fh-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

@media (max-width:620px){
  .fh-app .fh-line-controls{
    grid-template-columns:minmax(0,1fr) 136px;
    grid-template-areas:"size qty" "total total";
  }
  .fh-app .fh-line-size{ grid-area:size; }
  .fh-app .fh-line-qty{ grid-area:qty; }
  .fh-app .fh-line-total{
    grid-area:total; flex-direction:row; align-items:baseline;
    justify-content:space-between; text-align:left; padding:var(--fh-2) 0 0;
    border-top:1px solid var(--fh-rule); margin-top:var(--fh-1);
  }
}
.fh-app .fh-addline{
  width:100%; margin-top:var(--fh-3); padding:12px; border-radius:var(--fh-r);
  border:1px dashed var(--fh-green); color:var(--fh-green-deep);
  font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .16s, border-color .16s;
}
.fh-app .fh-addline:hover{ background:var(--fh-green-tint-2); border-color:var(--fh-green); }

.fh-app /* Summary rail */
.fh-summary{
  position:sticky; top:var(--fh-4);
  border:1px solid var(--fh-rule); border-radius:var(--fh-r-lg);
  background:var(--fh-surface); box-shadow:var(--fh-shadow-sm); overflow:hidden;
}
.fh-app .fh-summary-head{ padding:var(--fh-4) var(--fh-4) var(--fh-3); border-bottom:1px solid var(--fh-rule); }
.fh-app .fh-summary-head h3{ font-family:var(--fh-serif); font-weight:400; font-size:18px; color:var(--fh-green-deep); }
.fh-app .fh-summary-body{ padding:var(--fh-4); }
.fh-app .fh-sum-items{ display:flex; flex-direction:column; gap:10px; margin-bottom:var(--fh-4); }
.fh-app .fh-sum-item{ display:flex; justify-content:space-between; gap:var(--fh-3); font-size:13.5px; }
.fh-app .fh-sum-item .fh-si-n{ color:var(--fh-text); min-width:0; }
.fh-app .fh-sum-item .fh-si-n em{ display:block; font-style:normal; font-size:12px; color:var(--fh-muted); }
.fh-app .fh-sum-item .fh-si-v{ font-weight:600; color:var(--fh-ink); white-space:nowrap; }
.fh-app .fh-sum-row{
  display:flex; justify-content:space-between; gap:var(--fh-3);
  padding:7px 0; font-size:14px; color:var(--fh-text);
}
.fh-app .fh-sum-row.fh-total{
  margin-top:var(--fh-2); padding-top:var(--fh-3); border-top:1px solid var(--fh-rule);
  font-size:18px; font-weight:700; color:var(--fh-green-deep);
}
.fh-app .fh-sum-fee{ margin-top:var(--fh-3); padding:var(--fh-3); border-radius:var(--fh-r-sm); background:var(--fh-paper); }
.fh-app .fh-sum-fee .fh-sum-row{ padding:2px 0; font-size:13px; }
.fh-app .fh-sum-fee p{ margin-top:4px; font-size:12px; color:var(--fh-muted); line-height:1.5; }
.fh-app .fh-sum-empty{ padding:var(--fh-4) 0; text-align:center; font-size:13.5px; color:var(--fh-muted); }

@media (max-width:980px){
  .fh-app .fh-summary{ position:fixed; left:0; right:0; bottom:0; top:auto; z-index:55;
    border-radius:var(--fh-r-lg) var(--fh-r-lg) 0 0; border-bottom:0;
    box-shadow:0 -6px 28px rgba(30,34,39,.16); }
  .fh-app .fh-summary-head{ display:flex; align-items:center; justify-content:space-between;
    gap:var(--fh-3); cursor:pointer; padding-bottom:var(--fh-4); }
  .fh-app .fh-summary-body{ display:none; max-height:52vh; overflow-y:auto; }
  .fh-app .fh-summary.is-open .fh-summary-body{ display:block; }
  .fh-app .fh-summary-toggle{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--fh-green-deep); }
  .fh-app .fh-summary.is-open .fh-summary-toggle svg{ transform:rotate(180deg); }
  .fh-app .fh-summary-toggle svg{ transition:transform .25s var(--fh-ease); }
  .fh-app .fh-order{ padding-bottom:96px; }
}
@media (min-width:981px){ .fh-app .fh-summary-toggle svg{ display:none; } }

.fh-app /* Bank box */
.fh-bank{ border:1px solid var(--fh-green); border-radius:var(--fh-r); background:var(--fh-green-tint-2); padding:var(--fh-4); }
.fh-app .fh-bank-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--fh-3); padding:9px 0; border-bottom:1px solid rgba(42,125,46,.16); }
.fh-app .fh-bank-row:last-child{ border-bottom:0; padding-bottom:0; }
.fh-app .fh-bank-row:first-child{ padding-top:0; }
.fh-app .fh-bank-l{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--fh-text); }
.fh-app .fh-bank-v{ font-size:15px; font-weight:600; color:var(--fh-green-deep); }
.fh-app .fh-copy{ display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:var(--fh-r-sm); border:1px solid var(--fh-green); color:var(--fh-green-deep); font-size:12px; font-weight:600; }
.fh-app .fh-copy:hover{ background:var(--fh-green); color:#fff; }
.fh-app .fh-bank-row--wrap{ flex-wrap:wrap; align-items:flex-start; }
.fh-app .fh-bank-row--wrap .fh-bank-l{ width:100%; }
.fh-app .fh-wallet{
  flex:1 1 100%; min-width:0; font-size:13px; line-height:1.5;
  word-break:break-all; overflow-wrap:anywhere;
}
.fh-app .fh-bank-row--wrap .fh-copy{ margin-top:var(--fh-2); }

.fh-app /* File drop */
.fh-file{ position:relative; }
.fh-app .fh-file input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.fh-app .fh-file-face{
  display:flex; align-items:center; gap:var(--fh-3); padding:var(--fh-4);
  border:1px dashed var(--fh-border); border-radius:var(--fh-r); background:var(--fh-surface);
  transition:border-color .16s, background .16s;
}
.fh-app .fh-file:hover .fh-file-face{ border-color:var(--fh-green); background:var(--fh-green-tint-2); }
.fh-app .fh-file input:focus-visible + .fh-file-face{ outline:2px solid var(--fh-green); outline-offset:2px; }
.fh-app .fh-file.is-set .fh-file-face{ border-style:solid; border-color:var(--fh-green); background:var(--fh-green-tint-2); }
.fh-app .fh-file-face svg{ color:var(--fh-green-deep); }
.fh-app .fh-file-t{ font-size:14px; font-weight:600; color:var(--fh-ink); }
.fh-app .fh-file-s{ font-size:12.5px; color:var(--fh-muted); margin-top:1px; }

.fh-app /* Review */
.fh-review{ border:1px solid var(--fh-rule); border-radius:var(--fh-r); overflow:hidden; background:var(--fh-surface); }
.fh-app .fh-rev-sec{ padding:var(--fh-4); border-bottom:1px solid var(--fh-rule); }
.fh-app .fh-rev-sec:last-child{ border-bottom:0; }
.fh-app .fh-rev-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--fh-3); margin-bottom:var(--fh-3); }
.fh-app .fh-rev-head h3{ font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--fh-muted); }
.fh-app .fh-rev-edit{ font-size:13px; font-weight:600; color:var(--fh-green); }
.fh-app .fh-rev-edit:hover{ color:var(--fh-green-deep); text-decoration:underline; }
.fh-app .fh-rev-dl{ display:grid; grid-template-columns:auto 1fr; gap:6px var(--fh-4); font-size:14px; }
.fh-app .fh-rev-dl dt{ color:var(--fh-muted); }
.fh-app .fh-rev-dl dd{ color:var(--fh-ink); margin:0; }

.fh-app /* Confirmation */
.fh-done{ max-width:560px; margin:0 auto; text-align:center; padding:var(--fh-7) 0; }
.fh-app .fh-done-mark{
  display:grid; place-items:center; width:76px; height:76px; margin:0 auto var(--fh-5);
  border-radius:50%; background:var(--fh-green-tint); color:var(--fh-green-deep);
  animation:fh-pop .5s var(--fh-ease);
}
@keyframes fh-pop { from{opacity:0; transform:scale(.7)} to{opacity:1; transform:none} }
.fh-app .fh-done h1{ font-family:var(--fh-serif); font-weight:400; font-size:32px; color:var(--fh-green-deep); }
.fh-app .fh-done > p{ margin-top:var(--fh-3); color:var(--fh-text); font-size:15.5px; }
.fh-app .fh-ref{
  display:inline-block; margin:var(--fh-5) 0 var(--fh-2); padding:var(--fh-3) var(--fh-5);
  border:1px dashed var(--fh-green); border-radius:var(--fh-r); background:var(--fh-surface);
  font-size:26px; font-weight:700; letter-spacing:.04em; color:var(--fh-green-deep);
  font-variant-numeric:tabular-nums;
}
.fh-app .fh-done-next{ margin-top:var(--fh-6); text-align:left; }
.fh-app .fh-done-actions{ display:flex; flex-wrap:wrap; gap:var(--fh-3); justify-content:center; margin-top:var(--fh-5); }
.fh-app .fh-wa{ background:#25D366; color:#0B3D2C; border-color:#17A34A; }
.fh-app .fh-wa:hover{ background:#1FBA57; border-color:#128C4A; }

.fh-app /* Survey */
.fh-survey{ margin-top:var(--fh-7); padding-top:var(--fh-5); border-top:1px solid var(--fh-rule); text-align:left; }
.fh-app .fh-survey h3{ font-family:var(--fh-serif); font-weight:400; font-size:19px; color:var(--fh-ink); }
.fh-app .fh-survey p{ margin-top:4px; font-size:13.5px; color:var(--fh-muted); }
.fh-app .fh-survey-opts{ display:flex; flex-wrap:wrap; gap:var(--fh-2); margin-top:var(--fh-4); }
.fh-app .fh-survey-done{ margin-top:var(--fh-4); display:flex; align-items:center; gap:8px; font-size:14px; color:var(--fh-green-deep); font-weight:600; }

.fh-app /* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .fh-app *, .fh-app *::before, .fh-app *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .fh-app .fh-bar{ transition:none; }
}

.fh-app /* ---------- Mobile touch targets (last, so nothing above overrides them) ---------- */
@media (max-width:560px){
  .fh-app /* Text + button side by side squeezes the copy into four words a line at 320px. */
  .fh-note--action{ flex-wrap:wrap; }
  .fh-app .fh-note--action p{ flex:1 1 100%; }
  .fh-app .fh-note--action .fh-btn{ width:100%; }
  .fh-app .fh-metaline{ gap:var(--fh-3); }
  .fh-app .fh-metaline .fh-btn{ margin-left:0 !important; width:100%; }
}
@media (max-width:720px){
  .fh-app .fh-copy{ min-height:40px; padding-inline:14px; }
  .fh-app .fh-modal-close{ width:44px; height:44px; }
  .fh-app .fh-search-clear{ width:38px; height:38px; right:8px; }
  .fh-app .fh-rev-edit{ min-height:44px; min-width:56px; display:inline-flex; align-items:center; justify-content:flex-end; }
  .fh-app .fh-survey-opts .fh-chip{ min-height:44px; }
}

/* ---------- Floating chat widget ----------
   The site-wide Chaty button is fixed to the lower right, which is exactly where
   this page puts its unit chips and its own order bar. On a phone it lands on top
   of the "+" controls, and because it is fixed it covers a different row every time
   the list scrolls — so the primary action becomes untappable at random.

   It is also redundant here: on the price list the order bar does the same job, and
   on the order form the visitor is already ordering. Hidden on these two pages only.
   This stylesheet loads nowhere else, so the widget is untouched across the rest of
   the site. Delete this block to bring it back. */
.chaty-widget,
.chaty-main-widget,
[class*="chaty-widget-"],
#chaty-widget-0 {
  display: none !important;
}