/* Serve by SK store. Tokens taken from the marketing site, see CLAUDE.md
   "Design tokens". The mockup uses inline styles on every element; this
   stylesheet renders the same result. */

:root {
  --sage:        #005d33;
  --sage-hover:  #004526;
  --sage-pale:   #cde5d8;
  --text:        #2a2d2b;
  --muted:       #525756;
  --faint:       #949a93;
  --dim:         #7c827c;
  --page:        #fbfbf9;
  --outer:       #eceee7;
  --panel:       #f0f2ec;
  --line:        #e2e5dd;
  --field:       #dde0d8;
  --link:        #005d33;
  --link-hover:  #007a44;
  --disabled:    #b6bfae;
  --column:      460px;
}

html, body { margin: 0; padding: 0; background: var(--outer); }
body {
  font-family: "Source Sans 3", system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
input, select, textarea { font-family: inherit; font-size: 15.5px; color: var(--text); }
input::placeholder { color: #a8ada6; }
::selection { background: #d8e9df; }
:focus-visible { outline: 2px solid var(--sage); outline-offset: 2px; }

.shell { min-height: 100vh; display: flex; justify-content: center; background: var(--outer); }
.column {
  width: 100%; max-width: var(--column); background: var(--page);
  min-height: 100vh; position: relative;
  box-shadow: 0 0 40px rgba(46, 43, 37, 0.14);
}
/* The pay bar is fixed and overlays the last 85px of the page. The order page
   has no footer, so this clearance sits on the column and shows the same
   background the bar itself uses, which reads as continuous. */
.column.has-bar { padding-bottom: 96px; }

.head {
  background: var(--sage); padding: 16px 24px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.head a { color: #fff; text-decoration: none; }
.head a:hover { color: var(--sage-pale); }
.head .back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; margin-left: -4px;
}
.head img { width: 120px; height: auto; display: block; margin-right: -2px; }

.hero {
  width: 100%; aspect-ratio: 16 / 9; background: var(--panel);
  display: flex; align-items: center; justify-content: center;
  filter: saturate(0.85) contrast(0.96);
}
.hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The 16/9 slot crops a 5/4 master vertically. Anchor to the top so the
   kitchen logo in the corner survives and the crop comes off the bottom. */
.hero-top img { object-position: top; }
.hero .placeholder { font-size: 13px; color: var(--faint); letter-spacing: 0.04em; }

.section { padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.section.ruled { border-top: 1px solid var(--line); }
/* Tighter rhythm on the order form only. The hero plus two sections must
   leave the first address field visible above the fixed paybar. */
.order-form .section { padding: 20px 24px; gap: 12px; }
.eyebrow {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
h1.product {
  margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600;
  letter-spacing: -0.01em; max-width: 11em; text-wrap: pretty;
}
.price { font-size: 19px; font-weight: 600; white-space: nowrap; }
p.blurb { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

.qty-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; }
.qty-label { font-size: 14px; font-weight: 600; color: var(--muted); }
.qty-left { margin-left: 7px; font-size: 13px; font-weight: 500; color: var(--faint); }
.stepper {
  display: flex; align-items: center; gap: 4px;
  border: 1.5px solid var(--field); border-radius: 999px; padding: 4px;
}
.stepper button {
  width: 38px; height: 38px; border-radius: 999px; border: none; background: transparent;
  color: #3d413e; font-size: 20px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.stepper button:hover:not(:disabled) { background: #eef0ea; }
.stepper button:disabled { color: #c3c8c1; cursor: not-allowed; }
.stepper .value {
  min-width: 32px; text-align: center; font-size: 16px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fields { display: flex; flex-direction: column; gap: 11px; }
.field input, .field select {
  height: 50px; padding: 0 15px; border-radius: 10px;
  border: 1.5px solid var(--field); background: #fff; width: 100%;
}
.field select { padding: 0 12px; appearance: none; }
.field.pair { display: flex; gap: 11px; }
.field.pair .postcode { width: 130px; flex: 0 0 auto; }
.field.pair .city { flex: 1; min-width: 0; }
.field .error { display: block; font-size: 12.5px; color: #a2412f; margin-top: 5px; line-height: 1.5; }
.field input.invalid, .field select.invalid { border-color: #c9836f; }

.summary-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.summary-row span:first-child { color: var(--muted); }
.summary-row .num { font-variant-numeric: tabular-nums; }
.summary-total {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 18px; font-weight: 600; padding-top: 12px; border-top: 1px solid var(--line);
}
p.note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--faint); text-wrap: pretty; }

.paybar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: center; pointer-events: none;
}
.paybar .inner {
  width: 100%; max-width: var(--column); background: var(--page);
  border-top: 1px solid var(--line); padding: 14px 24px 18px;
  display: flex; align-items: center; gap: 14px; pointer-events: auto;
}
.paybar .stack { display: flex; flex-direction: column; gap: 2px; }
.paybar .cap {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.paybar .amount { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.paybar button {
  flex: 1; height: 52px; border-radius: 999px; border: none; background: var(--sage);
  color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.paybar button:hover:not(:disabled) { background: var(--sage-hover); }
.paybar button:disabled { background: var(--disabled); cursor: not-allowed; opacity: 0.75; }

.soldout {
  background: var(--panel); border-radius: 10px; padding: 18px 20px;
  font-size: 14.5px; line-height: 1.6; color: var(--muted);
}
.badge {
  display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 9px;
  border-radius: 999px; background: var(--panel); color: var(--muted);
}

.tick {
  width: 56px; height: 56px; border-radius: 999px; background: #e0ede6;
  display: flex; align-items: center; justify-content: center;
}
h1.done { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 600; letter-spacing: -0.01em; }
.card {
  background: var(--panel); border-radius: 10px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 11px;
}
.card .row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.card .row span:first-child { color: var(--dim); }
.card .row span:last-child { font-weight: 600; text-align: right; }

.pill {
  align-self: flex-start; padding: 13px 22px; border-radius: 999px; border: none;
  background: var(--sage); color: #fff; font-family: inherit; font-size: 15px;
  font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center;
}
.pill:hover { background: var(--sage-hover); color: #fff; }
.pill.ghost { background: transparent; border: 1.5px solid var(--field); color: var(--muted); }
.pill.ghost:hover { background: #eef0ea; color: #3d413e; }

.foot {
  padding: 24px; border-top: 1px solid var(--line); background: #f4f5f0;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.foot span { font-size: 12.5px; color: var(--faint); }
.foot a { font-size: 13px; font-weight: 600; text-decoration: none; }

/* ---------- site header, landing and menu pages ---------- */

.head-site { flex-direction: column; align-items: stretch; gap: 16px; }
.head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.icons { display: flex; gap: 4px; margin-left: -9px; }
.icons a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 44px; color: #fff; text-decoration: none;
}
.icons a:hover { color: var(--sage-pale); }

.hours { background: rgba(255,255,255,0.15); border-radius: 10px; }
.hours summary {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 13px 18px; list-style: none; color: #fff; font-size: 13.5px; font-weight: 600;
}
.hours summary::-webkit-details-marker { display: none; }
.hours summary .dot { width: 9px; height: 9px; border-radius: 999px; flex: 0 0 auto; }
.hours summary .chev { margin-left: auto; transition: transform 0.15s ease; }
.hours[open] summary .chev { transform: rotate(180deg); }
.hours-panel {
  padding: 4px 18px 16px; display: flex; flex-direction: column; gap: 10px;
}
.hours-row { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; }
.hours-row .days { color: #eef2e6; font-weight: 600; }
.hours-row .time { color: #fff; text-align: right; }
.hours-addr {
  font-size: 12.5px; color: #e9efdf; line-height: 1.5;
  padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.28);
}

/* ---------- landing ---------- */

.hero-4x3 { aspect-ratio: 4 / 3; }
.section-lead { padding: 34px 24px 30px; gap: 16px; }
h1.lead {
  margin: 0; font-size: 38px; line-height: 1.05; font-weight: 600;
  letter-spacing: -0.01em; color: var(--text);
}
.cta-row { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 6px; }
.pill.dark { background: var(--muted); gap: 8px; }
.pill.dark:hover { background: #3d413e; }
.chip {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.2);
}

.photo-grid { padding: 0 24px 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  aspect-ratio: 3 / 4; background: var(--panel); border-radius: 8px; overflow: hidden;
  filter: saturate(0.85) contrast(0.96);
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.band { background: var(--sage); padding: 32px 24px; gap: 18px; }
.eyebrow.pale { color: var(--sage-pale); }
.band-rows { display: flex; flex-direction: column; gap: 11px; }
.band-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.band-row .days { color: #eef2e6; font-weight: 600; }
.band-row .time { color: #fff; text-align: right; }

.section-find { padding: 34px 24px 44px; gap: 22px; }
.section-find .stack { display: flex; flex-direction: column; gap: 7px; }
.addr { font-size: 16px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
a.underlined {
  align-self: flex-start; font-size: 15px; font-weight: 600; text-decoration: none;
  border-bottom: 1.5px solid #b9c8a4; padding-bottom: 2px;
}
a.plain { font-size: 16px; text-decoration: none; color: var(--text); }
a.plain:hover { color: var(--link); }

.foot-site { flex-direction: column; align-items: stretch; gap: 14px; padding: 34px 24px 46px; }
.foot-site .thanks { font-weight: 600; font-size: 19px; color: var(--text); }
.foot-site .note-line { font-size: 13px; line-height: 1.6; color: var(--dim); }
.foot-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.foot-actions .pill { padding: 10px 16px; font-size: 13.5px; }

/* ---------- menu ---------- */

.chips {
  position: sticky; top: 0; z-index: 20; background: var(--page);
  padding: 10px 0 12px; border-bottom: 1px solid var(--line);
}
.chips-scroll { display: flex; gap: 8px; overflow-x: auto; padding: 0 24px; scrollbar-width: none; }
.chips-scroll::-webkit-scrollbar { display: none; }
.chip-link {
  flex: 0 0 auto; padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--field); background: transparent; color: var(--muted);
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
}
.chip-link:hover { background: #eef0ea; color: #3d413e; }
.chip-link:target, .menu-section:target { scroll-margin-top: 70px; }

.menu { padding: 0 24px 60px; display: flex; flex-direction: column; gap: 46px; }
.menu-section { scroll-margin-top: 70px; display: flex; flex-direction: column; gap: 18px; padding-top: 34px; }
.menu-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.menu-head h2 {
  margin: 0; font-weight: 400; letter-spacing: 0.01em;
  font-size: 25px; line-height: 1.1; color: var(--text);
}
.tag-featured {
  padding: 5px 12px; border-radius: 999px; background: var(--sage); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
}
.tag-plain {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; text-align: right;
}

.rows { display: flex; flex-direction: column; }
.row-dual {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #e6e8e1;
}
.row-dual .nm { flex: 1; font-size: 15.5px; font-weight: 500; color: var(--text); text-wrap: pretty; }
.row-dual .pr {
  width: 52px; text-align: right; font-size: 15px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.rows-list { display: flex; flex-direction: column; gap: 22px; }
.row-list { display: flex; gap: 14px; align-items: flex-start; }
.thumb {
  flex: 0 0 auto; width: 74px; height: 74px; border-radius: 8px; overflow: hidden;
  background: var(--panel); filter: saturate(0.82) contrast(0.95);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.row-body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.row-title { display: flex; align-items: baseline; gap: 12px; }
.row-title .nm { flex: 1; font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.3; text-wrap: pretty; }
.row-title .pr { font-size: 15.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-tag {
  align-self: flex-start; padding: 3px 10px; border-radius: 999px;
  background: #e0ede6; color: var(--link);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.desc { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--dim); text-wrap: pretty; }

/* An item marked N/A stays on the page, greyed, with N/A printed where a
   price was. Hidden items never render at all, see Menu::visibleSections(). */
.row-na .nm, .row-na .pr, .row-na .desc { color: var(--faint); }
.row-na .item-tag { background: var(--panel); color: var(--faint); }
.row-na .thumb { filter: saturate(0.15) contrast(0.95); opacity: 0.7; }

.addons {
  background: var(--panel); border-radius: 24px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 11px; margin-top: 6px;
}
.addons-head {
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--dim); font-weight: 700;
}
.addon-row { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.addon-row span:first-child { color: #3d413e; }
.addon-row .pr { color: var(--muted); font-variant-numeric: tabular-nums; }

/* The logo anchor is inline, so its line box adds descender space under the
   image and pads the header. line-height 0 removes it. */
.head .logo { display: block; line-height: 0; }

/* Every header row sits at the logo's natural height, 29.55px, so the logo
   lands in the same place on every page. The icon anchors keep a 44px tap
   target and pull it back with a negative block margin, which would otherwise
   inflate the row to 44px and push the order page header 14px taller than the
   mockup. */
.head-top, .head:not(.head-site) { min-height: 30px; }
.icons a { margin-block: -7px; }

/* ---------- admin ---------- */

/* An operations screen rather than a storefront, so the column widens past
   the 460px the shop pages hold to. Tokens stay the same. */
.column.wide { max-width: 940px; }

.admin { padding: 24px; display: flex; flex-direction: column; gap: 20px; }

.notice {
  background: #e0ede6; color: var(--link); border-radius: 10px;
  padding: 12px 16px; font-size: 14px; font-weight: 600;
}

.stock-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px; background: var(--panel); border-radius: 10px; padding: 16px 20px;
}
.stock-now { display: flex; align-items: baseline; gap: 10px; }
.stock-now .cap {
  font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.stock-value { font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stock-value.zero { color: #a2412f; }
.stock-hint { font-size: 13px; color: var(--dim); }
.stock-set { display: flex; align-items: center; gap: 10px; }
.stock-set label { font-size: 13px; color: var(--muted); font-weight: 600; }
.stock-set input {
  width: 90px; height: 42px; padding: 0 12px; border-radius: 10px;
  border: 1.5px solid var(--field); background: #fff;
  font-variant-numeric: tabular-nums;
}
.stock-set button, .bulk button {
  height: 42px; padding: 0 20px; border-radius: 999px; border: none;
  background: var(--sage); color: #fff; font-family: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.stock-set button:hover, .bulk button:hover { background: var(--sage-hover); }

.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--field);
  color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none;
}
.tab:hover { background: #eef0ea; color: #3d413e; }
.tab.on { background: var(--sage); border-color: var(--sage); color: #fff; }
.tab.on:hover { background: var(--sage-hover); color: #fff; }
.tab .n { font-variant-numeric: tabular-nums; opacity: 0.75; }

.orders { width: 100%; border-collapse: collapse; font-size: 14px; }
.orders th {
  text-align: left; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 0 10px 10px; border-bottom: 1px solid var(--line);
}
.orders td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.orders .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.orders .pick { width: 34px; }
.orders .ref { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.orders .when { display: block; font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.orders .who { display: block; font-weight: 600; }
.orders .tel { display: block; font-size: 12.5px; margin-top: 2px; text-decoration: none; }
.orders .addr { color: var(--muted); line-height: 1.5; max-width: 22em; }

.pillstatus {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--panel); color: var(--muted);
}
.pillstatus.s-paid      { background: #e0ede6; color: var(--link); }
.pillstatus.s-pending   { background: #f2efe4; color: #8a7a3f; }
.pillstatus.s-packed    { background: #e4ebef; color: #3f6070; }
.pillstatus.s-booked    { background: #e6e3ef; color: #574a80; }
.pillstatus.s-failed    { background: #f2e4e0; color: #a2412f; }

.bulk { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 16px; }
.bulk-hint { font-size: 12.5px; color: var(--faint); }
.empty { color: var(--faint); font-size: 14.5px; margin: 0; }

@media (max-width: 720px) {
  .orders .addr { display: none; }
  .admin { padding: 16px; }
}

.admin-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 4px;
}
.admin-who { font-size: 12.5px; color: var(--faint); }
.linkish {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--link);
}
.linkish:hover { color: var(--sage-hover); text-decoration: underline; }
.signin-error {
  background: #f2e4e0; color: #a2412f; border-radius: 10px;
  padding: 12px 16px; font-size: 14px; font-weight: 600;
}
.signin-button {
  height: 50px; border-radius: 999px; border: none; background: var(--sage);
  color: #fff; font-family: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
.signin-button:hover { background: var(--sage-hover); }

/* EasyParcel link status on the admin list */
.ep-link{display:flex;align-items:baseline;gap:10px;padding:10px 14px;margin-bottom:14px;
  background:#f0f2ec;border-radius:8px;font-size:14px}
.ep-link .ep-on{color:var(--link);font-weight:600}
.ep-link .ep-off{color:#a8503f;font-weight:600}
.ep-link a{margin-left:auto;color:var(--link)}

/* Wallet balance under the link strip. Sits on its own row so the operator
   reads credit and top-up together, and turns amber under ten parcels. */
.ep-wallet{display:flex;align-items:baseline;gap:10px;padding:10px 14px;margin:-8px 0 14px;
  background:#f0f2ec;border-radius:8px;font-size:14px}
.ep-wallet[hidden]{display:none}
.ep-wallet .bal{color:var(--link);font-weight:600;font-variant-numeric:tabular-nums}
.ep-wallet a{margin-left:auto;color:var(--link)}
.ep-wallet.warn{background:#f7efe6}
.ep-wallet.warn .bal{color:#a8503f}

/* Waybill number against a booked order */
.orders .awb{display:block;margin-top:4px;font-size:12px;color:var(--link);
  font-variant-numeric:tabular-nums;word-break:break-all}
.bulk button[disabled]{opacity:.45;cursor:not-allowed}

/* Cancel is destructive and unremarkable at the same time, so it reads as a
   secondary action rather than borrowing the sage of pack and book. */
.bulk button.quiet{background:transparent;color:#a8503f;border:1px solid #d8c3bc}
.bulk button.quiet:hover{background:#f7efe6;border-color:#a8503f}

/* ---- Customer order status page, D18. Scoped under .ostatus so nothing
   here reaches the menu page, which already owns a different .chip. ---- */
.ostatus .state {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 11px 4px 9px; border-radius: 999px; background: var(--panel);
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.ostatus .state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ostatus .state.wait { color: #a87a3a; }
.ostatus .state.go   { color: var(--sage); }
.ostatus .state.stop { color: #a8503f; }

.ostatus .rail { display: grid; grid-template-columns: repeat(4, 1fr); margin: 4px 0 2px; }
.ostatus .rail-step { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; }
.ostatus .rail-step::before {
  content: ""; position: absolute; top: 5px; left: -50%; width: 100%; height: 2px;
  background: var(--line);
}
.ostatus .rail-step:first-child::before { display: none; }
.ostatus .rail-step.done::before, .ostatus .rail-step.now::before { background: var(--sage); }
.ostatus .rail-dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--line);
  position: relative; z-index: 1;
}
.ostatus .rail-step.done .rail-dot { background: var(--sage); }
.ostatus .rail-step.now .rail-dot { background: var(--page); border: 3px solid var(--sage); }
.ostatus .rail-step label { font-size: 10px; color: var(--faint); letter-spacing: 0.03em; }
.ostatus .rail-step.done label, .ostatus .rail-step.now label { color: var(--muted); font-weight: 600; }

.ostatus .foot-note { margin: 2px 0 0; font-size: 12px; color: var(--faint); text-align: center; }
.ostatus .foot-note a { color: var(--link); }

/* ---- Menu editor, /admin/menu, D29. One form over the whole file. ---- */
.admin-nav { display: flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; }
.admin-nav a { text-decoration: none; }
.admin-nav a:hover { text-decoration: underline; }
.admin-nav .on { color: var(--text); }
.admin-nav .admin-who { margin-left: 8px; }

.menu-help { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.menu-help b { color: var(--text); font-weight: 600; }
.signin-error ul { margin: 6px 0 0 18px; padding: 0; font-weight: 400; }

.menu-edit form { display: flex; flex-direction: column; gap: 18px; }
.menu-edit input, .menu-edit select {
  height: 36px; padding: 0 10px; border-radius: 8px; font-size: 14px;
  border: 1.5px solid var(--field); background: #fff; width: 100%; min-width: 0;
}
.menu-edit input:focus, .menu-edit select:focus { outline: none; border-color: var(--sage); }

.ms { margin: 0; padding: 14px 16px 12px; border: none; border-radius: 10px; background: var(--panel); }
.ms-hidden { background: #f2efe4; }
.ms-head { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.menu-edit .ms-title { font-weight: 600; font-size: 15px; }
.ms-switch { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.ms-switch input { width: 16px; height: 16px; margin: 0; }
.ms-hidden .ms-switch { color: #8a7a3f; font-weight: 600; }

.ms-cols, .mi { display: grid; gap: 6px; align-items: center; }
.ms-cols-dual, .mi-dual  { grid-template-columns: 1fr 86px 86px 104px 84px; }
.ms-cols-list, .mi-list  { grid-template-columns: 1fr 86px 110px 140px 104px 84px; }
.mi-addon { grid-template-columns: 1fr 86px 84px; }
.ms-cols span {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 0 10px 4px;
}
.ms-rows { display: flex; flex-direction: column; gap: 6px; }
.mi-list .mi-desc { grid-column: 1 / 6; }
.mi-list .mi-ctl  { grid-column: 6; grid-row: 1; }
.mi-price { font-variant-numeric: tabular-nums; text-align: right; }
.mi-status:has(option:checked:not([value=""])) { color: #8a7a3f; font-weight: 600; }
.mi-spare input, .mi-spare select { background: #fbfbf9; border-style: dashed; }
.mi-spare .mi-ctl { visibility: hidden; }

.mi-ctl { display: none; gap: 2px; justify-content: flex-end; }
.menu-edit form.js .mi-ctl { display: flex; }
.mi-ctl button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--field);
  background: #fff; color: var(--muted); font-family: inherit; font-size: 13px; cursor: pointer; padding: 0;
}
.mi-ctl button:hover { background: #eef0ea; color: var(--text); }
.mi-ctl button[data-del]:hover { background: #f2e4e0; color: #a2412f; border-color: #e4c9c2; }

/* ---------- photo manager, D30 ---------- */
.photo-upload { display: flex; gap: 10px; align-items: center; }
.photo-upload input[type="file"] {
  flex: 1; min-width: 0; padding: 7px 10px; border: 1.5px dashed var(--field);
  border-radius: 8px; background: #fff; font-size: 14px;
}
.photo-upload button {
  padding: 9px 18px; border: none; border-radius: 8px; background: var(--sage);
  color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.photo-upload button:hover { background: var(--sage-hover); }
.photo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px; align-items: start;
}
.photo-card {
  margin: 0; padding: 10px; border-radius: 10px; background: var(--panel);
  display: flex; flex-direction: column; gap: 8px;
}
.photo-card .photo-img { width: 100%; height: auto; border-radius: 8px; display: block; }
.photo-card figcaption { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.photo-card b { font-size: 13px; word-break: break-all; }
.photo-used { color: var(--muted); }
.photo-free { color: var(--faint); }
.photo-del {
  align-self: flex-start; padding: 4px 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--field); background: #fff; color: var(--muted);
  font-family: inherit; font-size: 12.5px;
}
.photo-del:hover { background: #f2e4e0; color: #a2412f; border-color: #e4c9c2; }
.photo-grid-builtin .photo-card { opacity: 0.75; }
.photo-none { margin: 0; font-size: 14px; color: var(--faint); }

.ms-add {
  display: none; margin-top: 8px; padding: 0 12px; height: 30px; border-radius: 999px;
  border: 1.5px solid var(--field); background: #fff; color: var(--link);
  font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.menu-edit form.js .ms-add { display: inline-block; }
.ms-add:hover { background: #eef0ea; }
.ms-sub {
  margin: 16px 0 6px; padding-left: 10px; font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint); font-weight: 600;
}
.menu-save { padding-top: 4px; }

@media (max-width: 720px) {
  .ms-head { grid-template-columns: 1fr; }
  .ms-cols { display: none; }
  .mi-dual, .mi-list, .mi-addon { grid-template-columns: 1fr 1fr; }
  .mi .mi-name, .mi-list .mi-desc, .mi-list .mi-photo { grid-column: 1 / -1; }
  .mi-list .mi-ctl, .mi .mi-ctl { grid-column: 1 / -1; grid-row: auto; justify-content: flex-start; }
  .mi { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .mi-spare { border-bottom: none; }
}