/* The Great British Shop — wholesale ordering portal.
   Standalone design system: warm food-shop light. Oat paper, dark-roast ink,
   postbox-red accent with one job (the primary action). Serif carries names and
   greetings; Jakarta carries the working parts with tabular figures. Radius is
   12px everywhere it rounds, except the stepper buttons which are true circles.
   One soft shadow token, used only on the sticky total bar. Phone first: no tap
   target under 44px, no field under 16px, no sideways scroll. */

@font-face{font-family:'Jakarta';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Jakarta';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2')}

:root{
  --paper:#f7f2e8;          /* oat */
  --paper-2:#efe7d6;        /* tint: bands, pressed states */
  --paper-3:#e6d9c0;        /* deep tint: rarely, for emphasis fields */
  --ink:#241d15;            /* dark roast */
  --ink-2:rgba(36,29,21,.64);
  --ink-3:rgba(36,29,21,.40);
  --line:rgba(36,29,21,.16);      /* hairlines */
  --line-strong:rgba(36,29,21,.42);
  --accent:#b02e20;         /* postbox red: primary actions and the selected state, nothing else */
  --accent-down:#8f251a;
  --accent-wash:rgba(176,46,32,.08);
  --ok:#2f6b39;             /* the saved tick and the receipt stamp only */
  --ok-wash:rgba(47,107,57,.10);
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:'Jakarta',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r:12px;
  --bar-shadow:0 -6px 24px rgba(36,29,21,.10);   /* the one shadow, the one job */
  --fast:150ms;--base:250ms;--ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.55 var(--sans);
  font-feature-settings:'tnum' 1;
  overflow-x:hidden;min-height:100dvh;
}
::selection{background:rgba(176,46,32,.18)}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid rgba(176,46,32,.55);outline-offset:2px;border-radius:4px}
h1,h2,h3{margin:0;font-weight:600}

.wrap{max-width:680px;margin-inline:auto;padding-inline:20px}
@media(min-width:900px){.wrap{max-width:720px}}
@media(max-width:374px){.wrap{padding-inline:14px}}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-head{border-bottom:1px solid var(--line);padding:14px 0 0;background:var(--paper)}
.masthead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wordmark{font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.01em;text-decoration:none;white-space:nowrap}
.wordmark small{display:block;font-family:var(--sans);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-top:1px}
.acct-plain{font-size:14.5px;color:var(--ink-2);text-align:right;line-height:1.3;
  max-width:46%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px 0}
.acct-switch{position:relative;max-width:52%}
.acct-switch summary{list-style:none;display:flex;align-items:center;justify-content:flex-end;gap:6px;
  min-height:44px;padding:0 2px;font-size:14.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  white-space:nowrap;overflow:hidden}
.acct-switch summary::-webkit-details-marker{display:none}
.acct-switch summary::after{content:'';width:8px;height:8px;flex:0 0 8px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg) translateY(-2px)}
.acct-switch[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.acct-panel{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:230px;
  background:var(--paper);border:1px solid var(--line-strong);border-radius:var(--r);
  padding:6px;display:grid;gap:2px}
.acct-panel button{display:block;width:100%;text-align:left;background:none;border:0;
  border-radius:8px;min-height:46px;padding:10px 12px;font-size:16px;font-weight:600}
.acct-panel button[disabled]{color:var(--accent);cursor:default;background:var(--accent-wash)}
.acct-panel button:not([disabled]):hover{background:var(--paper-2)}

.tabs{display:flex;gap:2px;margin-top:6px}
.tabs a{flex:0 0 auto;display:flex;align-items:center;min-height:46px;padding:0 14px;
  font-size:15.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
  border-bottom:3px solid transparent}
.tabs a[aria-current='page']{color:var(--ink);border-bottom-color:var(--ink)}
.tabs a:first-child{margin-left:-14px}

/* ── type + shared bits ──────────────────────────────────────────────────── */
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.display{font-family:var(--serif);font-weight:600;font-size:clamp(1.9rem,7.5vw,3rem);
  line-height:1.06;letter-spacing:-.01em;text-wrap:balance}
.lede{font-size:17px;color:var(--ink-2);margin:10px 0 0}
.section-rule{border:0;border-top:1px solid var(--line);margin:0}

.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  min-height:56px;padding:14px 20px;background:var(--accent);color:var(--paper);
  border:0;border-radius:var(--r);font-size:18px;font-weight:700;text-decoration:none;
  transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
.btn-primary:active{background:var(--accent-down);transform:translateY(1px)}
.btn-primary[disabled]{background:var(--ink-3);cursor:not-allowed}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:10px 18px;background:none;border:1.5px solid var(--line-strong);
  border-radius:var(--r);font-size:16px;font-weight:600;text-decoration:none;color:var(--ink);
  transition:background var(--fast) var(--ease)}
.btn-ghost:active{background:var(--paper-2)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

.chip{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:2px 9px;border:1px solid var(--line-strong);border-radius:var(--r);
  color:var(--ink-2);vertical-align:2px}
.chip-state{border-color:transparent;background:var(--paper-3);color:var(--ink)}

/* ── home ────────────────────────────────────────────────────────────────── */
.hero{padding:30px 0 26px;border-bottom:1px solid var(--line)}
.hero .display{margin-top:6px}
.hero form{margin:20px 0 0}
.hero .btn-ghost{margin-top:12px;width:100%}
.hero-meta{margin:10px 0 0;color:var(--ink-2);font-size:16px}
.hero-meta strong{font-weight:700;color:var(--ink)}

.home-list{list-style:none;margin:0;padding:0}
.home-list li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;
  padding:14px 0;border-bottom:1px solid var(--line)}
.home-list .o-when{font-weight:600;font-size:16.5px}
.home-list .o-sub{grid-column:1;font-size:14px;color:var(--ink-2)}
.home-list .o-amt{grid-row:1;grid-column:2;font-weight:700;font-size:16.5px;text-align:right}
.home-list .o-act{grid-column:1 / -1;display:flex;gap:8px;margin-top:6px}
.home-list .o-act .btn-ghost{min-height:44px;padding:8px 14px;font-size:15px}
.list-head{display:flex;align-items:baseline;justify-content:space-between;margin:26px 0 2px}
.list-head a{font-size:15px;font-weight:600;color:var(--ink-2)}

/* ── order form ──────────────────────────────────────────────────────────── */
.order-head{padding:18px 0 12px}
.findbox{position:relative;margin-top:12px}
.findbox input{width:100%;min-height:48px;padding:10px 14px;font-size:16px;
  background:rgba(255,252,245,.6);border:1.5px solid var(--line-strong);border-radius:var(--r);color:var(--ink)}
.findbox input::placeholder{color:var(--ink-3)}

.plist{list-style:none;margin:0;padding:0 0 110px}   /* room for the sticky bar */
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line)}
.prow.frozen-row .pname{padding-left:14px}
.pname{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.25;margin:0}
.pmeta{font-size:14px;color:var(--ink-2);display:flex;gap:8px;align-items:center;min-height:19px}
.save-note{font-size:12.5px;font-weight:600;opacity:0;transition:opacity var(--base) var(--ease)}
.save-note.saving{opacity:1;color:var(--ink-3)}
.save-note.saved{opacity:1;color:var(--ok)}
.save-note.failed{opacity:1;color:var(--accent)}

.step{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:7px}
.sbtn{width:48px;height:48px;flex:0 0 48px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:none;color:var(--ink);
  font-size:26px;font-weight:500;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease);
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.sbtn:active{background:var(--paper-2)}
.qty{width:58px;min-height:48px;text-align:center;font-size:20px;font-weight:700;
  font-family:var(--sans);font-feature-settings:'tnum' 1;color:var(--ink);
  background:none;border:1.5px solid transparent;border-radius:var(--r);padding:4px 2px;
  -moz-appearance:textfield;appearance:textfield}
.qty::-webkit-outer-spin-button,.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.prow.has-qty .qty{background:var(--accent-wash);border-color:transparent;color:var(--accent)}
.prow.has-qty .pname::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-left:8px;vertical-align:3px}

/* case-or-unit: one tap takes a whole case; the note reads the units back honestly */
.caserow{grid-column:1 / -1;display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
.cbtn{display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:44px;padding:8px 14px;border:1.5px solid var(--line-strong);
  border-radius:999px;background:none;font-size:14.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;transition:background var(--fast) var(--ease);
  -webkit-user-select:none;user-select:none;touch-action:manipulation}
.cbtn:active{background:var(--paper-2)}
.cbtn[disabled]{opacity:.35;cursor:default}
.cbtn .cprice{font-weight:600;color:var(--ink-2)}
.case-note{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.prow.has-qty .case-note{color:var(--accent)}
.case-inline{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}

.rest-divider{padding:22px 0 8px;border-bottom:1px solid var(--line)}
.rest-divider span{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

.orderbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--paper);
  border-top:1px solid var(--line-strong);box-shadow:var(--bar-shadow);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom))}
.orderbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px}
.ob-totals{line-height:1.25;min-width:0}
.ob-units{font-size:13.5px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.ob-money{font-size:20px;font-weight:800;white-space:nowrap}
.orderbar .btn-primary{width:auto;min-height:52px;padding:12px 18px;font-size:16.5px;flex:0 0 auto}

/* ── review + receipt ────────────────────────────────────────────────────── */
.rcpt{list-style:none;margin:14px 0 0;padding:0}
.rcpt-line{display:flex;align-items:baseline;gap:8px;padding:7px 0;font-size:16.5px}
.rcpt-line .qn{font-weight:700;white-space:nowrap}
.rcpt-line .nm{font-family:var(--serif);font-weight:600;min-width:0}
.rcpt-line .dots{flex:1 1 12px;border-bottom:2px dotted var(--ink-3);transform:translateY(-4px);min-width:12px}
.rcpt-line .amt{font-weight:600;white-space:nowrap}
.rcpt-line .each{display:block;font-size:12.5px;color:var(--ink-3);font-weight:500;text-align:right}
.rcpt-total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:1.5px solid var(--ink);margin-top:10px;padding-top:12px;font-size:20px;font-weight:800}
.rcpt-total small{font-size:13.5px;font-weight:600;color:var(--ink-2)}

.datepick{display:grid;gap:10px;margin:14px 0 0}
.datebtn{position:relative;display:flex;align-items:center;min-height:58px;padding:14px 52px 14px 16px;
  border:1.5px solid var(--line-strong);border-radius:var(--r);font-size:17px;font-weight:600;cursor:pointer;
  transition:border-color var(--fast) var(--ease),background var(--fast) var(--ease)}
.datebtn input{position:absolute;opacity:0;pointer-events:none}
.datebtn:has(input:checked){border-color:var(--accent);background:var(--accent-wash);color:var(--accent)}
.datebtn:has(input:checked)::after{content:'';position:absolute;right:18px;top:50%;
  width:14px;height:8px;border-left:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(-45deg)}
.cutoff-note{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}
.form-error{margin:16px 0 0;padding:12px 14px;border:1.5px solid var(--accent);
  border-radius:var(--r);background:var(--accent-wash);color:var(--accent);font-weight:600;font-size:15.5px}
.review-actions{margin:22px 0 40px;display:grid;gap:10px}

.stamp{display:inline-block;border:2.5px solid var(--ok);color:var(--ok);background:var(--ok-wash);
  padding:8px 16px;border-radius:var(--r);font-size:14px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;transform:rotate(-2deg)}
.receipt-head{padding:26px 0 4px}
.receipt-head .display{margin-top:12px}
.receipt-meta{margin:8px 0 0;color:var(--ink-2);font-size:16px}
.receipt-meta strong{color:var(--ink)}
.receipt-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--ink-2)}

/* ── history ─────────────────────────────────────────────────────────────── */
.page-head{padding:22px 0 8px}
.empty-note{padding:28px 0;color:var(--ink-2);font-size:16.5px}

/* ── login ───────────────────────────────────────────────────────────────── */
.login-shell{min-height:100dvh;display:grid;place-items:center;padding:24px 20px}
.login-card{width:100%;max-width:390px}
.login-card .wordmark{font-size:26px}
.login-card h1{font-family:var(--serif);font-size:clamp(1.6rem,6vw,2.1rem);margin:26px 0 4px}
.login-sub{color:var(--ink-2);margin:0 0 22px;font-size:16px}
.field{display:block;margin:0 0 14px}
.field span{display:block;font-size:13.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:6px}
.field input{width:100%;min-height:52px;padding:12px 14px;font-size:17px;color:var(--ink);
  background:rgba(255,252,245,.65);border:1.5px solid var(--line-strong);border-radius:var(--r)}
.field input:focus{border-color:var(--ink);outline:none}
.login-card .btn-primary{margin-top:6px}
.login-help{margin:20px 0 0;font-size:14.5px;color:var(--ink-2)}

/* ── footer, toast, misc ─────────────────────────────────────────────────── */
.site-foot{margin-top:56px;border-top:1px solid var(--line);padding:22px 0 44px;
  color:var(--ink-2);font-size:14.5px}
.site-foot .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.signout-btn{background:none;border:0;padding:10px 0;min-height:44px;font-size:14.5px;
  font-weight:600;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}

.toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));z-index:60;
  transform:translate(-50%,16px);max-width:min(92vw,420px);background:var(--ink);color:var(--paper);
  padding:12px 18px;border-radius:var(--r);font-size:15px;font-weight:600;opacity:0;
  pointer-events:none;transition:opacity var(--base) var(--ease),transform var(--base) var(--ease)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:374px){
  .pname{font-size:16.5px}
  .sbtn{width:44px;height:44px;flex-basis:44px;font-size:23px}
  .qty{width:50px}
  .ob-money{font-size:18px}
  .cbtn{font-size:13.5px;padding:8px 11px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}