/* ==========================================================================
   Guss Live Seafood — style.css

   One stylesheet for every page that links it: the public pages (/, /products/,
   /contact/), the buyer pages (/live-list/, /trade/, /orders/), the legal pages,
   404, and the desk pages (which load admin.css after this file and override
   parts of it under body.admin-app).

   Sections
     1. Tokens            approved public palette + the legacy token names the
                          app pages and their inline <style> blocks still read
     2. Fonts             Arial/Helvetica for text; one self-hosted Mono face
                          for .mono and tabular figures
     3. Shell             resets, skip link, masthead, main navigation, footer,
                          and the public components shared by more than one page
     4. Public pages      This week, Products, Contact
     5. App components    layout, type, forms, buttons, tables, cards, rows,
                          documents (selector names are a contract with the
                          buyer and desk pages; keep them)
     6. Responsive        900 / 760 / 620 / 350
     7. Print
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */
:root {
  /* approved public palette */
  --navy: #123543;
  --navy-deep: #0d2833;
  --red: #a63c26;
  --paper: #f4f0e7;
  --white: #fffdf8;
  --ink: #153641;
  --muted: #586568;
  --line: #d5d4c9;
  --ice: #eae7dc;
  --green: #275e47;
  /* Product condition bands: distinct, readable steps above the white rows. */
  --group-live: #b9cec0;
  --group-fresh: #c1cac6;
  --group-frozen: #bcccd8;
  --group-other: #cfcabc;

  /* legacy names, remapped to the palette above. The app pages and the inline
     <style> blocks in desk/buy and desk/sheet read these; keep the names. */
  --card: #fffefa;
  --cream: #e9efee;
  --steel: #52616a;
  --rule: #d4dad8;
  /* The row hairlines were 1.06:1 on paper — a line nobody could see. This is
     1.64:1 on --paper and 1.83:1 on --white: still quiet, but present. */
  --edge: #b7c0bb;
  --rule2: #e6ebe9;
  --harbor: #153c50;
  --harbor-deep: #102e3e;
  --harbor-tint: #e9efee;

  /* spacing scale */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 18px;
  --s5: 28px;
  --s6: 44px;
  --s7: 68px;

  /* font stacks */
  --sans: Plex, 'IBM Plex Sans', Arial, Helvetica, sans-serif;
  --title: Georgia, 'Times New Roman', serif;
  --mono: Mono, "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}


/* ==========================================================================
   2. Fonts
   Text is Arial/Helvetica and needs no font file. Mono (IBM Plex Mono) is
   copied to /fonts/ by the build for the .mono class and tabular figures; when
   the file is absent locally the fallback stack shows, which is expected.
   ========================================================================== */
/* IBM Plex Sans is the approved interface face and was already being built and
   shipped as /fonts/sans.woff2 -- it was simply never referenced. The 600 is now
   built too, so the 600-weight list names are a real cut rather than a synthetic
   bold. Georgia carries the editorial headings; it is a system face, so there is
   nothing to load. */
@font-face { font-family: Plex; src: url(/fonts/sans.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Plex; src: url(/fonts/sans-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Mono; src: url(/fonts/mono.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Mono; src: url(/fonts/mono-bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }


/* ==========================================================================
   3. Shell
   ========================================================================== */

/* --- resets --- */
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid #d37423;
  outline-offset: 4px;
}
button, a { touch-action: manipulation; }
img { max-width: 100%; display: block; }
svg { max-width: 100%; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(28px, 2.4vw, 38px); line-height: 1.02; font-weight: 800; letter-spacing: -.045em; }
h2 { font-size: 25px; line-height: 1.15; letter-spacing: -.025em; }
h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
[hidden] { display: none !important; }

.shell { width: min(1400px, calc(100% - 64px)); margin-inline: auto; }
main { flex: 1 0 auto; min-height: 60vh; padding-bottom: 64px; }
main:focus { outline: none; }

/* --- skip link --- */
.skip { position: absolute; top: -100px; left: 12px; background: var(--white); padding: 12px; z-index: 10; }
.skip:focus { top: 8px; }

/* --- masthead: header.site.masthead > .shell.masthead-inner --- */
.topbar { position: sticky; top: 0; z-index: 6; }
.admin-app .topbar { position: static; }
.masthead { background: var(--white); }
/* 56px is the floor: the brand lockup is 56px tall. The old 74px came from the
   two-line descriptor that used to sit beside it. */
.masthead-inner { min-height: 56px; display: flex; align-items: center; gap: 36px; }

/* The lockup is composed from /fish.webp and /wordmark.webp: fish at full height,
   a hairline rule, the wordmark at about 70% height, reading like the approved
   214x84 artwork. Both files are lossy on white; multiply hides the white on the
   off-white masthead. */
.brand { display: flex; align-items: center; gap: 6px; flex-shrink: 0; height: 56px; }
.brand img { mix-blend-mode: multiply; }
.brand .headfish { height: 56px; width: auto; }
.brand .wordmark { display: flex; align-items: center; height: 42px; border-left: 1px solid var(--ink); padding-left: 10px; }
.brand .headtype { height: 40px; width: auto; }

.masthead-note { font-size: 13px; line-height: 1.35; }
.masthead-note a { font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.masthead-note a:hover { color: var(--red); }
.masthead-note span { display: block; font-weight: normal; color: var(--muted); font-size: 12px; }

/* .headright holds the account nav (empty until nav.js adds Orders / Desk for a
   signed-in buyer) and the Sign in button, which nav.js swaps for a.headtel
   "Sign out". Keep the bare nav and the a.btn inside .headright. */
.headright { margin-left: auto; display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.account-nav { display: flex; align-items: center; gap: 16px; }
.account-nav:empty { display: none; }
.account-nav a, .headright .headtel {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  padding-block: 10px;
  white-space: nowrap;
}
.account-nav a:hover, .headright .headtel:hover { color: var(--ink); }
.account-nav a.on { color: var(--ink); font-weight: 700; }

/* .signin also carries .btn (nav.js hook); the masthead scope keeps the red
   button ahead of the navy .btn rules in section 5. */
.masthead .signin {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: var(--red);
  color: #fff;
  border: 0;
  padding: 12px 19px;
  min-height: 46px;
  font-weight: bold;
  font-size: 14px;
  line-height: 1.2;
}
.masthead .signin:hover, .button:hover { background: #8f2d20; }

/* --- main navigation: .nav-band > nav.shell.navigation --- */
/* The band sits outside header.site so "header.site nav" still means the account
   nav. Desk pages hide the whole public shell. */
.nav-band { background: var(--navy-deep); box-shadow: 0 2px 0 #102c3b20; overflow: hidden; overflow: clip; }
.admin-app .nav-band { display: none !important; }
.navigation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.navigation a {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  color: #e4edee;
  font-weight: 600;
  font-size: 14px;
  border-inline-start: 1px solid #ffffff18;
  position: relative;
}
.navigation a:first-child::before,
.navigation a:last-child::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 100vw; background: inherit;
}
.navigation a:first-child::before { right: 100%; }
.navigation a:last-child::before { left: 100%; }
/* the outer dividers would otherwise float a stub's width in from each edge */
.navigation a:first-child { border-inline-start: 0; }
.navigation a:hover { background: #ffffff0d; }
.navigation a:focus-visible { outline-offset: -3px; }
/* stamp.cjs marks the current page with aria-current="page" (or class="on" on an
   older header without data-nav hooks); both get the same treatment. */
.navigation a[aria-current=page], .navigation a.on {
  background: var(--paper); color: var(--navy-deep);
  border-inline-start-color: transparent;
}
.navigation a[aria-current=page] + a { border-inline-start-color: transparent; }
.navigation a[aria-current=page]:hover, .navigation a.on:hover { background: var(--paper); }
.navigation a[aria-current=page]:after, .navigation a.on:after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 4px;
  left: 0;
  right: 0;
  background: #d25c43;
}
.navigation a:first-child[aria-current=page]:after, .navigation a:first-child.on:after { left: -100vw; }
.navigation a:last-child[aria-current=page]:after, .navigation a:last-child.on:after { right: -100vw; }

/* --- footer: footer.site > .shell.footer-inner --- */
footer { background: var(--navy-deep); color: var(--white); }
.footer-inner { display: flex; align-items: center; gap: 32px; padding-block: 30px; }
.footer-brand { display: flex; gap: 16px; align-items: center; margin-right: auto; }
/* The approved footer treatment: the full-colour seal on a warm ivory circular
   field against the navy. The seal is dark linework and disappears straight onto
   navy -- brand-assets/production/fish-co/seal-on-navy.png is the standing proof
   -- so it gets its own ground. contain, not cover, so the ring is never cropped
   or distorted. A reversed seal exists as an alternative asset; ivory is the
   approved default. */
.footer-brand img {
  width: 96px; height: 96px; border-radius: 50%;
  background: #f4f0e7; padding: 7px; object-fit: contain;
}
.footer-brand p { font-size: 13px; font-weight: 700; }
.footer-brand span { display: block; font-weight: normal; font-size: 11px; color: #b7cbd0; margin-top: 3px; }
.footer-inner > a { font-size: 13px; padding-block: 12px; }
.legal { display: flex; gap: 18px; font-size: 11px; color: #c9d7da; }
.legal a { padding-block: 15px; }

/* --- public components shared by more than one page --- */
.page-heading { padding: 24px 0 16px; display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.eyebrow, .label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow { color: var(--red); margin-bottom: 12px; }
.heading-note { font-size: 14px; color: var(--muted); max-width: 270px; flex-shrink: 0; line-height: 1.65; }
.heading-note a { text-decoration: underline; text-underline-offset: 4px; }
.button {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  min-height: 48px;
  padding: 12px 20px;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}
.order-bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); padding: 20px 0; }
.order-bar p { font-size: 14px; color: var(--muted); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 28px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.quiet-link {
  display: block;
  width: fit-content;
  color: var(--muted);
  font-size: 13px;
  padding-block: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.feed-state { padding: 20px 0; color: var(--muted); font-size: 14px; }
.feed-state button, .feed-state + button { margin-top: 12px; padding: 10px 18px; min-height: 44px; background: var(--navy); color: #fff; border: 0; cursor: pointer; }
.feed-state + button { margin-top: 0; margin-bottom: 20px; }


/* ==========================================================================
   4. Public pages
   ========================================================================== */

/* --- This week (/) --- */
.landing-strip { display: flex; gap: 48px; padding: 18px 24px; background: var(--ice); border-left: 3px solid var(--navy); }
.landing-strip > div { display: flex; align-items: baseline; gap: 14px; }
.landing-strip .label { color: var(--muted); font-size: 10px; }
.landing-strip strong { font-size: 16px; }

.section-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; gap: 16px; }
.section-heading h2 { font-size: 23px; }
.section-heading a { font-size: 13px; text-decoration: underline; text-underline-offset: 4px; padding-block: 10px; }

.list-head {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr .65fr;
  gap: 20px;
  padding: 12px 22px;
  background: var(--navy);
  color: #d8e4e7;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .12em;
}
.list-head span:last-child { text-align: right; }

.product-list { list-style: none; margin: 0; padding: 0; background: var(--white); border-inline: 1px solid var(--line); }
.product-row {
  display: grid;
  grid-template-columns: 1.05fr 1.25fr .65fr;
  gap: 20px;
  align-items: center;
  padding: 23px 22px;
  border-bottom: 1px solid var(--line);
}
.product-name { font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.22; }
.product-details { font-size: 13px; line-height: 1.5; color: var(--muted); }
.product-details span { display: block; }
.status-wrap { text-align: right; }

/* status pill: base grey = closed / not this week; .open green; .sold red */
.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  padding: 6px 8px;
  background: var(--ice);
  color: var(--muted);
  max-width: 100%;
}
.status:before { content: ""; width: 5px; height: 5px; flex: 0 0 5px; background: currentColor; }
.status.open { color: var(--green); background: #e8f0e8; }
/* On a product listing, "available" is the answer the buyer came for, so it is
   the one pill that carries weight: white on --green is 7.56:1, and .status:before
   takes currentColor so the dot follows. Scoped away from /orders/, where these
   same class names mean order states and must stay quiet. */
.row .status.open, .catalog-item .status.open { background: var(--green); color: #fff; }
/* On a product listing, "available" is the answer the buyer came for, so it is
   the one pill that carries weight: white on --green is 7.56:1, and .status:before
   takes currentColor so the dot follows. Scoped away from /orders/, where these
   same class names mean order states and must stay quiet. */
.row .status.open, .catalog-item .status.open, .feature .status.open { background: var(--green); color: #fff; }
.status.sold { color: #a13324; background: #faebe4; }
.status.closed { color: var(--muted); background: var(--ice); }
/* A cap is a warning, not an alarm: amber sits between the green of Available
   and the red of Sold out. The number behind it is never shown to a customer. */
/* Coming soon: not running yet, but expected. Navy rather than the amber
   Limited already owns -- two amber chips a row apart would read as the same
   state. This one is an invitation to ask, not a warning about supply. */
.status.soon { color: var(--navy); background: #e7eef3; }
.status.limited { color: #8a5520; background: #f7efe2; }
.status-note { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.product-row.inactive .product-name { color: #53636a; }

.week-bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; margin-top: 48px; align-items: center; }
.product-photo { position: relative; }
.product-photo img { width: 100%; height: 244px; object-fit: cover; }
.product-photo figcaption { position: absolute; bottom: 0; left: 0; background: var(--navy); color: #fff; font-size: 11px; padding: 9px 14px; }
.new-account h2 { font-size: 32px; max-width: 310px; }
.new-account > p:not(.eyebrow) { color: var(--muted); font-size: 14px; margin: 14px 0 18px; }

/* --- Products (/products/) --- */
.search-wrap { max-width: 520px; margin-top: 8px; }
.search-wrap label { display: block; font-size: 13px; font-weight: bold; margin-bottom: 8px; }
.search-wrap input {
  width: 100%;
  padding: 14px;
  border: 1px solid #82979e;
  background: var(--white);
  color: var(--ink);
  border-radius: 0;
  font-size: 16px;
}
.result-count { font-size: 12px; color: var(--muted); margin: 18px 0; }

/* --- Contact (/contact/) --- */
.contact-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; margin-top: 10px; }
.contact-primary .label { color: var(--muted); }
.phone { display: block; font-weight: 700; font-size: clamp(27px, 3vw, 40px); letter-spacing: -.03em; padding-block: 10px; }
.contact-primary > p { font-size: 14px; color: var(--muted); }
.contact-primary .service-area { margin-top: 32px; line-height: 1.9; }
.contact-account { background: var(--ice); padding: 30px; }
.contact-account > p { margin: 14px 0 22px; font-size: 14px; color: var(--muted); }
/* the short company block under the contact layout */
.company-facts { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 30px; }
.company-facts h2 { font-size: 23px; }
/* Three facts, one row, stacked label over value: at a third of the width a
   120px label column would leave the value on two or three ragged lines. */
.facts-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 30px; margin: 10px 0 0; }
.facts-list div { padding: 10px 0 12px; border-top: 1px solid var(--line); border-bottom: 0; font-size: 14px; line-height: 1.5; }
.facts-list dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.facts-list dd { margin: 0; }


/* ==========================================================================
   5. App components (buyer, legal, desk pages)
   Everything here is scoped so it never reaches the public pages: app pages
   put their content in div.wrap; public pages use main.shell.
   ========================================================================== */

/* --- layout --- */
.wrap { max-width: 1464px; margin: 0 auto; padding: 0 32px; }
:where(.wrap) section { padding: var(--s6) 0; }
:where(.wrap) section.head { padding-bottom: var(--s5); }
:where(.wrap) section.head + section { padding-top: 0; }
.head h1 { margin-bottom: var(--s4); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); }
.desk { max-width: none; }
.cta { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: 0; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

/* --- type --- */
:where(.wrap) p { margin: 0 0 var(--s4); }
:where(.wrap) h2 { margin-bottom: var(--s4); }
:where(.wrap) :is(p, td, dd) a { border-bottom: 1px solid var(--rule); }
:where(.wrap) :is(p, td, dd) a:hover { border-bottom-color: var(--ink); }
.kicker { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: var(--s3); }
.lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.lede { font-size: 17px; line-height: 1.55; max-width: 58ch; color: var(--muted); }
.help { font-size: 13px; color: var(--muted); margin-top: var(--s2); }
.msg { border-left: 3px solid var(--red); padding-left: var(--s4); margin: var(--s4) 0; }
.small { font-size: 13.5px; line-height: 1.55; }
.mono { font-family: var(--mono); }
.dim { color: var(--muted); }
.strong { font-weight: 700; }
.board-note { font-size: 14px; color: var(--muted); margin-top: var(--s4); }
.fishart { width: auto; height: 250px; display: block; }

/* --- panels and cards --- */
.panel { background: var(--card); border: 1px solid var(--rule); padding: var(--s5); }
.panel h2, .panel h3 { margin-bottom: var(--s3); }
.panel p:last-child { margin-bottom: 0; }
.card { border: 1px solid var(--rule); background: var(--card); padding: var(--s4); margin-bottom: var(--s4); }
.card h3 { margin-bottom: var(--s2); }
.card .meta { font-size: 12.5px; color: var(--muted); margin-bottom: var(--s3); }
.card .sub { font-size: 12.5px; color: var(--muted); }
.card input[type=text] { width: 120px; padding: 6px var(--s2); }
.card input[type=number] { width: 92px; text-align: right; padding: 6px var(--s2); }
.card table { margin-bottom: var(--s3); }
.card .st {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--rule);
  margin-left: var(--s2);
  vertical-align: middle;
}
.card .st.new { background: var(--red); color: #fff; border-color: var(--red); }
.card .st.accepted { background: var(--navy); color: #fff; border-color: var(--navy); }

/* --- forms --- */
form { max-width: 640px; }
.field { margin-bottom: var(--s4); }
label { display: block; font-size: 13px; font-weight: 700; margin-bottom: var(--s2); }
input, select, textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--white);
  border: 1px solid #82979e;
  padding: 11px var(--s3);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
select {
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%23172d37' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right var(--s3) center;
  background-size: 11px 7px;
  padding-right: 34px;
}
textarea { min-height: 104px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: auto; -webkit-appearance: auto; appearance: auto; }
.hp { position: absolute; left: -9999px; }   /* honeypot wrapper on /trade/ */

/* --- buttons --- */
button {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  padding: 12px var(--s5);
  cursor: pointer;
  border-radius: 0;
}
button:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
button:disabled { opacity: .6; cursor: default; }
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.15;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  padding: 11px var(--s4);
}
.btn:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
.btn-sm { font-size: 12.5px; padding: 8px 13px; }

/* --- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
th, td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rule2); vertical-align: top; }
thead th { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); }
tbody th { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); width: 30%; white-space: nowrap; }
td.nw { white-space: nowrap; }

/* --- tabs (desk) --- */
.tabs { display: flex; gap: var(--s4); margin-bottom: var(--s5); border-bottom: 1px solid var(--rule); }
.tabs button {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 var(--s2);
  cursor: pointer;
}
.tabs button:hover { background: none; color: var(--navy); border-color: transparent; }
.tabs button.on, .tabs button.on:hover { border-bottom-color: var(--red); }

/* --- the week and its rows (/live-list/) --- */
.week {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: var(--s3);
  margin-bottom: var(--s4);
}
.week .lands { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
/* --- The Live List: an order grid ----------------------------------------
   Six labelled columns, because a buyer has to be able to check the arithmetic
   without doing it in their head. Product, Case (how much one case is), Price
   (the unit price and the case price), Cases (always a count of cases, never a
   weight), Ordered (the weight that count comes to — what the packing list is
   counted in) and Amount (the line total, the only column that means money).
   The multiplication is on the page before anything is typed, and the line
   total appears the moment it is. */
.lhead, .lrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 124px 92px 84px 112px;
  gap: var(--s4); align-items: center;
}
/* The board is the one thing on this site a buyer works in rather than reads, so
   it is an object with edges: a panel on white, the navy header as its lid. On
   the paper ground it used to be loose rows with nothing holding them. */
#weekbody, #standing-rows {
  background: var(--white);
  border: 1px solid var(--edge);
  border-radius: 2px;
  overflow: hidden;
}
/* Filled navy: 10.01:1, and the only dark mass inside the content field on the
   page a buyer spends their money on. Everything else here is a tint.
   --s4 of side padding, matched by every row under it, so the columns line up
   and nothing sits against the edge. */
.lhead {
  padding: 10px var(--s4); border-bottom: 0;
  background: var(--navy); color: #e6edef;
  font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
}
.lhead > :not(:first-child) { text-align: right; }
.lrow { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--edge); }
.lrow:last-child { border-bottom: 0; }

/* A product name and its amount are some 700px apart on a wide screen, and that
   gap is exactly where the eye loses the row. Three things carry it across:
   a hairline down each gutter, a faint stripe on alternate rows, and a wash on
   the row under the pointer. */
.lhead > :not(:first-child),
.lrow > div:not(:first-child) {
  border-left: 1px solid var(--edge);
  padding-left: var(--s3);
}
/* Nothing to divide from at the panel edge. */
.lrow > div:last-child, .lhead > :last-child { padding-right: 0; }
/* On the navy header band the gutter has to read against navy, not against paper. */
.lhead > :not(:first-child) { border-left-color: #3d5b66; }
/* The alternating stripe was 1.05:1 — two weak devices read worse than one real
   one, so with hairlines that exist the stripe is noise. The hover wash is the
   one place the brand rust does real work, so it is strengthened rather than
   dropped. */
.lrow:hover { background: #d2765c33; }
.lrow .nm { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.lrow .sub { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.lcase, .lrow .pr, .lqty, .ltot, .lamt { text-align: right; font-variant-numeric: tabular-nums; }
/* The weight actually being ordered. It is the number the kitchen counts in and
   the number on the packing list, so it gets a column rather than a footnote. */
.ltot { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.lrow.out .ltot, .ltot.none { font-weight: 400; color: var(--muted); }
.lcase { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.lrow .pr { font-family: var(--mono); font-size: 15px; }
.lrow .pr small { display: block; font-size: 11px; color: var(--muted); }
.lrow .pr .percase { color: var(--ink); font-weight: 700; }
.lrow input { width: 92px; text-align: right; }
/* A locked order's quantities are still worth reading, so they stay on the page
   rather than disappearing — but they must not look like something you can type
   into. readOnly alone is invisible: the box looked exactly as editable as it
   does when it is. */
.lrow input[readonly] {
  background: var(--ice); color: var(--muted);
  border-color: #cfd6d3; cursor: not-allowed;
}
.lrow input[readonly] + .unit { color: var(--muted); }
.lqty .unit { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.lamt { font-family: var(--mono); font-size: 16px; font-weight: 700; }
/* opacity faded the one line that says WHY a row is unavailable — sold out, or
   closed at 4pm — to 2.05:1. The row still has to recede; the reason still has to
   be readable. A filled surface does both: --ink on --ice is 10.37:1. */
.lrow.out { background: var(--ice); }
.lrow.out .nm { color: var(--muted); }
.lrow.out:hover { background: var(--ice); }

/* The weekly order on /account/ borrows the Live List's row, without the price
   and amount columns: what it repeats is a quantity, not a charge. */
#standing .lhead, #standing .lrow { grid-template-columns: minmax(0, 1fr) 84px 104px 120px; }
#standing .order-line p > span { display: block; font-size: 12px; color: var(--red); margin-top: 3px; }
#standing .part-case { color: #8a5520; }
@media (max-width: 760px) {
  #standing .lhead { display: none; }
  #standing .lrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm nm" "cs qt" "tot tot"; }
  #standing .lrow > div:nth-child(1) { grid-area: nm; }
  #standing .lrow > div:nth-child(2) { grid-area: cs; text-align: left; }
  #standing .lrow > div:nth-child(3) { grid-area: qt; }
  #standing .lrow > div:nth-child(4) { grid-area: tot; text-align: left; }
}

/* While a confirmation is open it owns the decision. The page's own Place order
   and Skip buttons sit after #review, so two "Place order" buttons were on
   screen at once and it was not obvious which one committed the order. Done in
   the cascade rather than in script so it also covers the skip confirmation and
   the cancel-the-edit confirmation. */
#review:not([hidden]) ~ button,
#review:not([hidden]) ~ .help { display: none; }
.lrow.out input { display: none; }
.runtot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink);
  padding-top: var(--s3);
  margin-top: var(--s3);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Show / hide on a password field. The button sits inside the field's box rather
   than beside it, so the row does not grow and the layout does not move when the
   label changes between Show and Hide. */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 74px; }
.pw-peek {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  min-height: 34px; padding: 6px 10px; border: 0; background: none;
  font: 600 12px var(--sans); color: var(--navy); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.pw-peek:hover { color: var(--red); }
/* Edge and IE draw their own reveal control; two would be silly. */
.pw-wrap input::-ms-reveal, .pw-wrap input::-ms-clear { display: none; }

.lockbar { border-left: 3px solid var(--navy); background: var(--ice); padding: var(--s3) var(--s4); margin-bottom: var(--s5); }
/* One bar carried every state — order in and changeable, order packed and final,
   week shut — in the same navy on the same ice. Those three have entirely
   different consequences for a buyer and read identically at a glance, which is
   how somebody ends up staring at a greyed board wondering which it is.
   Colour AND a leading label, so the distinction survives greyscale, a bright
   kitchen and colour-blindness. */
.lockbar.is-placed { border-left-color: var(--green); }
.lockbar.is-placed .lbl { color: var(--green); }
.lockbar.is-shut { border-left-color: var(--red); background: #f6e9e3; }
.lockbar.is-shut .lbl { color: var(--red); }
.lockbar.is-done { border-left-color: var(--muted); }
.signin-panel { max-width: 420px; }   /* the sign-in panel (was .signin; .signin is now the header button) */

/* --- review step (nav.js gwsAsk and the live-list review) --- */
.review { border: 1px solid var(--line); border-left: 3px solid var(--navy); background: var(--ice); padding: var(--s4); margin: var(--s4) 0; }
.review .lbl { margin-bottom: var(--s3); }
.review ul { list-style: none; margin: 0 0 var(--s3); padding: 0; font-size: 14px; }
.review li { display: flex; justify-content: space-between; gap: var(--s4); padding: 5px 0; border-bottom: 1px solid var(--line); }
.review li:last-child { border-bottom: 0; }
.review li .q { font-family: var(--mono); white-space: nowrap; }
.review .tot { display: flex; justify-content: space-between; border-top: 2px solid var(--ink); padding-top: var(--s2); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.review .warn { color: var(--red); }
.review .acts { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.review .acts .ghost { background: none; color: var(--ink); border-color: var(--ink); }
.review .acts .ghost:hover { background: none; color: var(--red); border-color: var(--red); }

/* --- desk odds and ends --- */
.step.off { opacity: .45; }
.step.off input, .step.off button, .step.off textarea { pointer-events: none; }
.gate { font-size: 12.5px; font-weight: 700; color: var(--red); border-left: 2px solid var(--red); padding-left: var(--s3); margin: var(--s3) 0; }
.trail { border-top: 1px solid var(--rule2); padding: var(--s3) 0; display: grid; grid-template-columns: 150px 1fr; gap: var(--s4); }
.trail .when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.trail .what { font-size: 14px; }
.trail .who { font-size: 12px; color: var(--muted); }
.qty { display: flex; align-items: baseline; gap: var(--s2); }
.qty input { width: 78px; text-align: right; }
.qty .u { font-family: var(--mono); font-size: 12px; color: var(--muted); }
#wkrows .cz { width: 190px; }
#wkrows td:first-child { min-width: 186px; }

/* --- order rows (/orders/) --- */
/* --- My orders: the same five columns the Live List uses ------------------
   An order should read the same way whether you are placing it or looking one
   up later. The whole row is the link — the arrow is there because nothing in
   the old row looked as though it could be opened. */
.ohead, .orow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 64px 116px 116px 22px;
  gap: var(--s4); align-items: center;
}
.ohead {
  padding: 0 0 6px; border-bottom: 2px solid var(--ink);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.ohead > :not(:first-child) { text-align: right; }
.orow { padding: var(--s3) 0; border-bottom: 1px solid var(--rule2); }
.orow:last-child { border-bottom: 0; }
.orow-link { color: inherit; }
.orow:nth-child(even) { background: #00000005; }
.orow-link:hover { background: #d2765c14; }
.orow-link:hover .sp, .orow-link:hover .ogo { color: var(--red); }
.orow .sp { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.orow .la { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.oref, .oitems, .ostatus, .orow .pr { text-align: right; font-variant-numeric: tabular-nums; }
.oref { font-family: var(--mono); font-size: 13px; color: var(--muted); }
.oitems { font-size: 14px; color: var(--ink); }
.orow .status { font-size: 10px; padding: 4px 7px; gap: 5px; }
.orow .pr { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.ogo { text-align: right; color: var(--muted); font-size: 15px; }

/* the columns fold on a phone, and each cell names itself once the header is gone */
@media (max-width: 760px) {
  .ohead { display: none; }
  .orow {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "sp sp" "ref status" "items total" "go go";
    gap: var(--s2) var(--s4);
    padding: 13px 14px 14px; margin-bottom: 10px;
    background: var(--white); border: 1px solid var(--line);
  }
  .orow:nth-child(even), .orow-link:hover { background: var(--white); }
  .orow > div:nth-child(1) { grid-area: sp; }
  .orow > div:nth-child(2) { grid-area: ref; text-align: left; }
  .orow > div:nth-child(3) { grid-area: items; text-align: left; }
  .orow > div:nth-child(4) { grid-area: status; }
  .orow > div:nth-child(5) { grid-area: total; }
  .orow > div:nth-child(6) { display: none; }
  .oitems::before { content: "Items"; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
}

/* --- printable documents (/orders/ confirmation, desk purchase order) --- */
.doc { background: var(--card); border: 1px solid var(--rule); padding: var(--s6); margin: var(--s5) 0 var(--s7); max-width: 900px; }
.dochead { display: flex; align-items: center; gap: var(--s5); border-bottom: 1px solid var(--ink); padding-bottom: var(--s4); }
.docseal { width: 110px; height: 110px; display: block; }
.docfrom p { margin: 0 0 2px; }
.doctitle { font-size: 30px; margin: var(--s5) 0 var(--s4); }
.docmeta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  border-top: 1px solid var(--rule2);
  border-bottom: 1px solid var(--rule2);
  padding: var(--s3) 0;
  margin-bottom: var(--s5);
}
.docmeta .k { display: block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.docmeta .v { display: block; font-size: 14px; font-weight: 700; margin-top: 4px; line-height: 1.25; }
.docto { margin-bottom: var(--s5); }
.docto p { margin: 0 0 2px; }
.doclines { margin-bottom: var(--s4); }
.doclines thead th { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--ink); padding-bottom: var(--s2); }
.doclines td { vertical-align: top; padding: var(--s3) var(--s3) var(--s3) 0; }
.doclines .num { text-align: right; font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.doclines .sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
.doclines .adj { color: var(--red); }
.doctotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 2px solid var(--ink);
  padding-top: var(--s3);
  font-size: 21px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.docnote { margin-top: var(--s4); }
.docnote .lbl { display: block; }


/* ==========================================================================
   Buyer pages
   Classes that replaced the inline styles on /live-list/, /orders/, /trade/,
   /terms/, /privacy/ and 404. Scoped like section 5: nothing here reaches the
   public pages. The one media rule stays with its component on purpose.
   ========================================================================== */
:where(.wrap) section.tight { padding-top: 0; }   /* the sign-in section under the heading */
.section-gap { margin-top: var(--s6); }            /* a heading or link row after a list */

/* /live-list/: order notes, preset note, the two order buttons, the desk hand-off */
.notes-field { margin-top: var(--s5); }
.notes-field textarea { min-height: 64px; }
.preset-note { margin-bottom: var(--s4); }
button.quiet { background: none; color: var(--ink); border-color: var(--ink); margin-left: var(--s3); }
button.quiet:hover { background: none; color: var(--red); border-color: var(--red); }
@media (max-width: 620px) {
  button.quiet { display: block; margin: var(--s3) 0 0; }   /* stacks under Place order */
}
.desk-panel { max-width: 520px; }
.desk-panel .cta { margin-top: var(--s4); }

/* sign-in panel: message and links under the button, the two secondary forms */
.form-msg { margin-bottom: 0; }
.form-links { margin-top: var(--s4); }
.subform { margin-top: var(--s4); border-top: 1px solid var(--rule); padding-top: var(--s4); }

/* /orders/: the Print / My orders / Live List row above the document */
.doc-actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; padding-top: var(--s5); }

/* /trade/: heading column and the validation message */
.trade-intro h1 { margin-bottom: var(--s4); }
.trade-intro .lede { margin-bottom: var(--s5); }
.form-error { color: var(--red); }

/* /terms/, /privacy/ */
.terms-table th { white-space: normal; }
.review-note { margin-top: var(--s5); }
.prose { max-width: 70ch; }

/* 404 */
.notfound { text-align: center; }
.notfound .fishart { height: 132px; margin: 0 auto; }
.notfound h1 { margin-top: var(--s5); }
.notfound .lede { margin: 0 auto var(--s4); }


/* ==========================================================================
   6. Responsive
   ========================================================================== */

@media (max-width: 900px) {
  /* app */
  .grid2 { grid-template-columns: 1fr; gap: var(--s5); }
  :where(.wrap) section { padding: var(--s5) 0; }
  .fishart { height: 200px; }
}

@media (max-width: 760px) {
  /* shell */
  .shell { width: calc(100% - 36px); }
  .topbar { display: contents; }
  .nav-band { position: sticky; top: 0; z-index: 5; }
  .masthead-inner { min-height: 82px; gap: 16px; flex-wrap: wrap; }
  .brand { height: 66px; gap: 5px; }
  .brand .headfish { height: 66px; }
  .brand .wordmark { height: 48px; padding-left: 8px; }
  .brand .headtype { height: 46px; }
  .masthead-note { font-size: 12px; }
  .masthead-note span { display: none; }
  .headright { margin-left: auto; gap: 14px; }
  .account-nav { gap: 12px; }
  .account-nav a, .headright .headtel { font-size: 12px; }
  .masthead .signin { font-size: 13px; min-height: 44px; padding: 11px 14px; gap: 15px; }
  .navigation { width: 100%; }
  .navigation a { min-height: 52px; font-size: 13px; }
  .page-heading { padding: 28px 0 23px; display: block; }
  .page-heading h1 { font-size: 34px; max-width: 400px; }
  .eyebrow { font-size: 10px; margin-bottom: 10px; }
  .heading-note { margin-top: 12px; font-size: 13px; max-width: none; }
  .heading-note br { display: none; }
  .order-bar { padding: 16px 0; gap: 10px; }
  .order-bar p { font-size: 12px; }
  .button { font-size: 13px; gap: 18px; padding: 12px 16px; }
  .footer-inner { flex-wrap: wrap; gap: 10px 25px; padding-block: 24px; }
  .footer-brand { width: 100%; margin: 0 0 8px; }
  .footer-brand img { width: 80px; height: 80px; padding: 6px; }
  .legal { margin-left: auto; }
  main { padding-bottom: 36px; }

  /* This week */
  .landing-strip { padding: 14px 15px; gap: 8px; display: grid; }
  .landing-strip > div { display: grid; grid-template-columns: 64px 1fr; gap: 10px; }
  .landing-strip strong { font-size: 14px; }
  .section-heading { padding: 19px 0 10px; }
  .section-heading h2 { font-size: 21px; }
  .list-head { display: none; }
  .product-list { border: 1px solid var(--line); border-bottom: 0; }
  .product-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 18px 16px; align-items: start; }
  .product-name { font-size: 20px; grid-column: 1; grid-row: 1; }
  .product-details { grid-column: 1 / -1; grid-row: 2; font-size: 12px; max-width: 95%; line-height: 1.55; }
  .product-details span { display: inline; }
  .product-details span + span:before { content: " · "; }
  .status-wrap { grid-column: 2; grid-row: 1; max-width: 116px; }
  .status { font-size: 10px; padding: 5px 6px; gap: 5px; }
  .status-note { font-size: 10px; }
  .week-bottom { grid-template-columns: 1fr; gap: 25px; margin-top: 30px; }
  .product-photo img { height: 190px; }
  .new-account h2 { font-size: 28px; max-width: none; }
  .new-account > p:not(.eyebrow) { margin: 10px 0; }
  .new-account { padding: 0 0 4px; }

  /* Products: see the Products section for the full column ladder */

  /* Contact */
  .contact-layout { grid-template-columns: 1fr; gap: 30px; }
  .contact-account { padding: 23px; }
  .company-facts { margin-top: 34px; padding-top: 24px; }
  .facts-list { grid-template-columns: 1fr; }

  /* app */
  .wrap { padding: 0 18px; }
  table.resp, table.resp tbody, table.resp tr, table.resp td { display: block; width: auto; }
  table.resp thead { display: none; }
  table.resp tr { border-bottom: 1px solid var(--rule); padding: var(--s3) 0; }
  table.resp tr:last-child { border-bottom: 0; }
  table.resp td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); text-align: right; }
  table.resp td::before {
    content: attr(data-l);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    flex: 0 0 auto;
  }
  table.resp td:empty { display: none; }
  .card input[type=text], .card input[type=number] { width: 120px; }
  .desk .tabs { gap: var(--s4); overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .desk .tabs button { white-space: nowrap; }
}

@media (max-width: 900px) {
  /* app: live-list rows stack name / price / quantity */
  /* the header cannot survive at this width; every cell labels itself instead */
  .lhead { display: none; }
  .lrow {
    grid-template-columns: 1fr auto;
    grid-template-areas: "nm nm" "cs qt" "pr tot" "amt amt";
    gap: var(--s2) var(--s4); align-items: center;
    padding: 13px 14px 14px;
    background: var(--white); border: 1px solid var(--line);
    margin-bottom: 10px;
  }
  /* the card is the separator, so the striping and the last-row exception both go */
  .lrow:nth-child(odd), .lrow:hover { background: var(--white); }
  .lrow:last-child { border-bottom: 1px solid var(--line); margin-bottom: 0; }
  .lrow.out { background: #00000004; }
  .lrow > div:nth-child(1) { grid-area: nm; }
  .lrow > div:nth-child(2) { grid-area: cs; text-align: left; }
  .lrow > div:nth-child(3) { grid-area: pr; text-align: left; display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
  .lrow > div:nth-child(4) { grid-area: qt; }
  .lrow > div:nth-child(5) { grid-area: tot; }
  .lrow > div:nth-child(6) { grid-area: amt; border-top: 1px solid var(--rule2); margin-top: 2px; padding-top: var(--s3); display: flex; justify-content: space-between; align-items: baseline; }
  /* The column header is gone at this width, so each number names itself —
     without this, the case size and the ordered total both read "10 lb". */
  .lcase::before, .ltot::before, .lamt::before {
    font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted); margin-right: 6px;
  }
  .lcase::before { content: "Case"; }
  /* The weight, not the money — the same word the printed order uses. */
  .ltot::before  { content: "Ordered"; }
  .lamt::before  { content: "Amount"; }
  .lrow .pr small { display: inline; }
  .lrow input { width: 110px; }
  .lrow > div:not(:first-child) { border-left: 0; padding-left: 0; }

}

/* Lifted out of the order-grid block, which now folds at 900px: the activity
   trail was always a 620px change and has nothing to do with those columns. */
@media (max-width: 620px) {
  .trail { grid-template-columns: 1fr; gap: var(--s1); }
}

@media (max-width: 350px) {
  /* shell */
  .shell { width: calc(100% - 28px); }
  .navigation { width: 100%; }
  .brand { height: 60px; }
  .brand .headfish { height: 60px; }
  .brand .wordmark { height: 44px; }
  .brand .headtype { height: 42px; }
  .masthead .signin { padding-inline: 11px; }
  .navigation a { font-size: 12px; }
  .page-heading h1 { font-size: 30px; }
  .order-bar p { max-width: 72px; }
  .footer-inner { gap: 8px 16px; }
  /* This week */
  .product-row { padding-inline: 12px; }
  .product-name { font-size: 18px; }
  /* app */
  .wrap { padding: 0 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ==========================================================================
   7. Print (order confirmations and desk documents)
   ========================================================================== */
@media print {
  header.site, footer.site, .nav-band, .skip, .noprint, #listwrap { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; display: block; }
  main { flex: none; min-height: 0; padding-bottom: 0; }
  .wrap { max-width: none; padding: 0; }
  section { padding: 0; }
  .doc { border: 0; background: #fff; padding: 0; margin: 0; max-width: none; }
  .doclines td, .doclines th { padding-top: 6pt; padding-bottom: 6pt; }
  .doclines .adj { color: #000; font-weight: 700; }
  a { border-bottom: 0 !important; color: #000; }
  .doclines, .doctotal, .dochead { page-break-inside: avoid; }
}

/* The Live List quantity box counts cases, not pounds, wherever a product has a
   case size. This caption sits under the box and says what one case is, so the
   number in the box is never ambiguous. */

/* ===========================================================================
   THIS WEEK, PRODUCTS AND THE LIVE LIST — 7 September 2026

   One block, authored once. This replaced four blocks of overrides appended on
   top of each other over the course of a day, where .catalog-item was redefined
   eighteen times, .brand thirteen, and .week-shell twice with two different
   widths. The page rendered correctly only because of cascade order, which is
   not a design.

   The governing rule here is that the page has ONE grid. .navigation is three
   equal columns, so the split below it is the same three columns: the picture
   takes column one, the board takes two and three. The left column therefore
   ends exactly where "This week" ends and the board begins exactly where
   "Products" begins. There is no page-specific shell width — a second container
   width was what put the content 110px outside the menu on both sides.
   =========================================================================== */

/* --- This week: the approved composition (Design Study 03) ---------------
   Two columns at 37/63 with a 25px gap and 26px side padding, the feature under
   a rust top edge, and a 2px navy rule above "The weekly list" inset to the row
   content. Live / Fresh / Frozen are distinct compact headings, and product
   condition is kept separate from weekly availability: the group says how it is
   stored, the pill on the right says whether you can have it this week. */

.week-page { padding-inline: 26px; }

.week-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; padding: 12px 0 11px;
}
.week-head h1 {
  font-family: var(--title); font-size: clamp(26px, 2.2vw, 34px);
  font-weight: 400; line-height: 1.1; letter-spacing: -.025em;
}
/* "Arrives" is the seafood landing, not a promise of delivery to one customer */
.week-arrival { display: flex; gap: 26px; padding-left: 23px; border-left: 2px solid var(--navy); flex-shrink: 0; }
.week-arrival .caption { display: block; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.week-arrival strong { font-size: 15px; font-weight: 600; }

.week-columns { display: grid; grid-template-columns: minmax(0, .37fr) minmax(0, .63fr); gap: 25px; align-items: start; }

/* the feature */
.feature { background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--red); overflow: hidden; }
.feature-photo { display: block; width: 100%; padding: 0; border: 0; background: none; line-height: 0; cursor: zoom-in; }
.feature-photo img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.feature-photo:focus-visible { outline: 3px solid #cf762d; outline-offset: -3px; }
.feature-copy { padding: 15px 18px 17px; }
.feature .overline { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.feature h2 { font-family: var(--title); font-size: 22px; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; margin-top: 5px; }
.feature h2 span { color: var(--red); }
.feature-source { font-size: 13px; color: var(--muted); margin-top: 7px; }
.feature-facts { display: flex; align-items: center; gap: 11px; margin-top: 9px; font-size: 13px; }
.live-word { color: var(--green); font-size: 11px; letter-spacing: .09em; font-weight: 700; border-right: 1px solid var(--line); padding-right: 11px; }
.feature-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 13px; border-top: 1px solid var(--line); padding-top: 6px; }
.feature-bottom .text-action { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }

/* the list */
.week-list { min-width: 0; }
.list-title {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 2px solid var(--navy); padding: 5px 12px 0; min-height: 27px; margin-bottom: 5px;
}
.list-title h2 { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.list-title .link-button { font-size: 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--muted); }

.group { margin-bottom: 4px; }
.group-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 86px 111px; align-items: center;
  gap: 20px; padding: 6px 18px;
  background: var(--group-live); border-top: 2px solid var(--green); color: #264f3e;
}
.group-head h3 { font-family: var(--title); font-size: 19px; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.group-head > span { font-size: 10px; letter-spacing: .08em; font-weight: 500; text-align: right; }
.group[data-kind="fresh"]  > .group-head { background: var(--group-fresh); border-color: #687c7d; color: #3f575a; }
.group[data-kind="frozen"] > .group-head { background: var(--group-frozen); border-color: #56758a; color: #355166; }
.group[data-kind="other"]  > .group-head { background: var(--group-other); border-color: var(--muted); color: var(--ink); }

.row {
  display: grid; grid-template-columns: minmax(0, 1fr) 86px 111px; align-items: center;
  gap: 20px; padding: 5px 18px; background: var(--white); border-bottom: 1px solid var(--edge);
}
.row:last-child { border-bottom: 0; }
.row-name { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.02em; }
.row-origin { display: flex; flex-wrap: wrap; gap: 1px 14px; font-size: 12px; margin-top: 2px; color: var(--muted); }
.row-unit { font-size: 13px; text-align: right; color: var(--ink); }
.row .status-wrap { text-align: right; }
/* Not opacity: it fades the pill's own background with the text and takes the
   one word that matters — Sold out, Closed — to 2.36:1. A quieter surface makes
   the row recede and leaves every label at full strength. */
.row.inactive { background: #f2efe8; }
.row.inactive .row-name { color: var(--muted); }
/* the one product the business is built on */
.row-signature { border-left: 2px solid var(--red); }
.row-signature .row-name { color: var(--red); }

.order-line {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px;
}
.order-line p { font-size: 15px; font-weight: 500; }
.order-line p > span { display: block; font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 3px; }

/* Phones: the columns stack and the feature becomes a compact horizontal
   photo-and-copy treatment above the list. The desktop page is never scaled
   down into a phone canvas. */
@media (max-width: 900px) {
  .week-page { padding-inline: 16px; }
  .week-columns { grid-template-columns: 1fr; gap: 18px; }
  .week-head { padding: 14px 0 12px; }
  .feature { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); }
  .feature-photo img { height: 100%; aspect-ratio: auto; min-height: 128px; }
  .feature-copy { padding: 12px 14px 13px; }
  .feature h2 { font-size: 19px; }
  .group-head, .row { grid-template-columns: minmax(0, 1fr) 64px 92px; gap: 12px; padding-inline: 14px; }
  .row-name { font-size: 15px; }
}
@media (max-width: 520px) {
  /* The feature stays horizontal on a phone. Stacking it puts a 16/9 photo
     across the screen and pushes the list off the first screen, which is the
     opposite of what the approved version does. */
  .feature { grid-template-columns: minmax(0, .38fr) minmax(0, .62fr); }
  .feature-photo img { min-height: 112px; }
  .feature-copy { padding: 10px 12px 11px; }
  .feature h2 { font-size: 17px; }
  .feature-source, .feature-facts { margin-top: 5px; font-size: 12px; }
  .feature-bottom { margin-top: 9px; padding-top: 5px; }
  .week-arrival { padding-left: 14px; gap: 18px; }
  .group-head, .row { grid-template-columns: minmax(0, 1fr) auto; }
  .group-head > span:first-of-type { display: none; }
  .row > .row-main { grid-column: 1; grid-row: 1; }
  .row-unit { grid-column: 1; grid-row: 2; text-align: left; font-size: 12px; color: var(--muted); margin-top: 2px; }
  .row .status-wrap { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .row-origin { font-size: 11px; }
}

/* --- Products: a list to scan -------------------------------------------- */

/* Cards on the same white surface as the weekly list, with the top edge
   carrying the product's condition in the same colours the week list gives its
   Live / Fresh / Frozen groups. The photo column is reserved on every card,
   photo or not, so names start on the same line and text blocks are the same
   width — reserved, not filled with a grey plate: most of the line will never
   be photographed and a column of empty rectangles reads as broken. */
.catalog {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; list-style: none; padding: 0; margin: 0;
}
.catalog-item {
  display: grid; grid-template-columns: minmax(0, 1fr);
  column-gap: 16px; align-content: start;
  background: var(--white); border: 1px solid var(--edge);
  border-top: 2px solid var(--muted);
  padding: 13px 16px 14px;
}
.catalog-item > *:not(.catalog-shot) { grid-column: 1; }
/* the photo column exists only on a card that has a photo: inside a bordered
   card an empty reserved column reads as a mistake, and names still line up
   because every card starts at the same left edge */
.catalog-item:has(.catalog-shot) { grid-template-columns: minmax(0, 1fr) 108px; }
.catalog-item.targeted { outline: 2px solid var(--red); outline-offset: 2px; }
.catalog-item[data-kind="live"]   { border-top-color: var(--green); }
.catalog-item[data-kind="fresh"]  { border-top-color: #687c7d; }
.catalog-item[data-kind="frozen"] { border-top-color: #56758a; }

.catalog-item h2 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; }
.catalog-item p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.catalog-item .catalog-season,
.catalog-item details { margin-top: 6px; }
.catalog-item details { font-size: 12px; color: var(--muted); }
.catalog-item summary { cursor: pointer; min-height: 30px; display: flex; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.catalog-item .catalog-season { font-size: 12px; }

/* name on the left, availability on the right: one row, never wrapped */
.catalog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.catalog-head .status-wrap { flex-shrink: 0; }
.catalog-item .status { font-size: 10px; padding: 4px 7px; gap: 5px; }
.catalog-item .status-note { font-size: 10px; }

/* how it is stored — a different fact from whether it is available this week */
.catalog-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kind-tag {
  font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; background: var(--ice); color: var(--ink);
}
.catalog-item[data-kind="live"]   .kind-tag { background: var(--group-live); color: #264f3e; }
.catalog-item[data-kind="fresh"]  .kind-tag { background: var(--group-fresh); color: #3f575a; }
.catalog-item[data-kind="frozen"] .kind-tag { background: var(--group-frozen); color: #355166; }
.catalog-item[data-kind="other"]  .kind-tag { background: var(--group-other); color: var(--ink); }

/* the page titles carry the same face as "Available this week." */
.page-heading h1 { font-family: var(--title); font-weight: 400; letter-spacing: -.025em; }

/* Section headings on the public pages take the title face too, at the same
   size the feature card uses on the home page. Utility labels — "The weekly
   list", column heads — stay in the sans, so the two roles stay distinct. */
.contact-account h2,
.company-facts h2 { font-family: var(--title); font-weight: 400; font-size: 22px; letter-spacing: -.025em; }

/* Three across, then two, then one — all three kept together and in order, so
   the narrowest rule is always the last one to match. */
@media (max-width: 1180px) { .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .catalog { grid-template-columns: minmax(0, 1fr); } }

/* the thumbnail is a button: it opens the photo at full size */
.catalog-shot {
  grid-column: 2; grid-row: 1 / -1; align-self: start;
  padding: 0; border: 0; background: none; line-height: 0; cursor: zoom-in;
  border-radius: 2px;
}
.catalog-shot img {
  width: 128px; height: auto; aspect-ratio: 16 / 9;
  object-fit: cover; display: block; background: var(--ice);
}
.catalog-shot:hover img { opacity: .88; }
.catalog-shot:focus-visible { outline: 3px solid #cf762d; outline-offset: 3px; }

/* --- the photo viewer ----------------------------------------------------- */

/* <dialog> + showModal() gives the focus trap, Escape and the inert background,
   which are the three things a hand-rolled lightbox usually gets wrong. */
.photo-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: min(92vw, 720px); overflow: visible;
}
.photo-dialog::backdrop { background: rgba(23, 24, 26, .74); }
.photo-dialog figure { margin: 0; background: var(--white); border: 1px solid var(--rule); }
.photo-dialog img { width: 100%; height: auto; display: block; }
.photo-dialog figcaption { padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--ink); }

/* padding, margin and min-height are reset explicitly: the global button rule
   sets padding 12px var(--s5), and with border-box a width cannot fall below the
   padding it contains — that turned a 38px circle into a 57px oval. */
.photo-dialog .photo-close {
  position: absolute; top: 10px; right: 10px;
  width: 38px; height: 38px; min-height: 0; padding: 0; margin: 0;
  display: grid; place-items: center;
  border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,254,250,.94); color: var(--ink);
  font: 400 22px/1 var(--sans);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  cursor: pointer;
}
.photo-dialog .photo-close:hover { background: #fff; }

@media (max-width: 620px) {
  .catalog-item { grid-template-columns: 1fr 96px; }
  .catalog-shot img { width: 96px; }
  .photo-dialog .photo-close { top: 8px; right: 8px; }
}

/* --- Live List ------------------------------------------------------------ */

/* The quantity box is a 43px tap target, right on a phone in a kitchen and too
   generous on a desktop where a chef tabs down the list. Phones keep it. */

@media (min-width: 901px) {
  /* Tighter rows on a wide screen, but the side padding is the panel's and stays. */
  .lrow { padding: 7px var(--s4); }
  .lrow .nm { font-size: 15px; }
  .lrow .sub { font-size: 12px; margin-top: 1px; }
  .lrow input { min-height: 32px; padding: 4px 9px; }
}

/* Customer navigation: one desktop row, a mobile disclosure, and a native
   Account disclosure. Links retain their normal browser navigation behavior. */
body:not(.admin-app) .header-v2 { display:block; position:relative; z-index:20; border-top:3px solid var(--red); border-bottom:1px solid var(--edge); background:var(--white); }
body:not(.admin-app) .header-v2 .shell { width:min(1240px,calc(100% - 56px)); max-width:none; padding:0; margin-inline:auto; }
body:not(.admin-app) .header-v2 .masthead-inner { display:flex; align-items:center; flex-wrap:nowrap; gap:28px; min-height:86px; }
body:not(.admin-app) .header-v2 .brand { height:72px; flex-shrink:0; width:auto; }
body:not(.admin-app) .header-v2 .brand .headfish { height:72px; }
body:not(.admin-app) .header-v2 .brand .wordmark { height:60px; padding-left:12px; }
body:not(.admin-app) .header-v2 .brand .headtype { height:56px; }
body:not(.admin-app) .header-v2 .masthead-note { margin:0; flex-shrink:0; }
body:not(.admin-app) .header-v2 .site-navigation { display:flex; align-items:center; justify-content:flex-end; gap:28px; margin-left:auto; min-width:0; }
body:not(.admin-app) .header-v2 .site-navigation[hidden] { display:none; }
body:not(.admin-app) .header-v2 .navigation { display:flex; align-items:center; gap:26px; width:auto; margin:0; padding:0; background:none; border:0; }
body:not(.admin-app) .header-v2 .navigation a { display:flex; position:relative; align-items:center; flex:none; min-height:44px; padding:0; border:0; background:none; color:var(--muted); font:400 14px/1.3 var(--sans); white-space:nowrap; text-decoration:none; }
body:not(.admin-app) .header-v2 .navigation a::before { content:none; }
body:not(.admin-app) .header-v2 .navigation a::after { content:none; }
body:not(.admin-app) .header-v2 .navigation a:is([aria-current="page"],.on) { color:var(--ink); font-weight:600; }
body:not(.admin-app) .header-v2 .navigation a:is([aria-current="page"],.on)::after { content:''; position:absolute; left:0; right:0; bottom:1px; height:2px; background:var(--red); }
body:not(.admin-app) .header-v2 .navigation a:hover { color:var(--red); background:none; }
body:not(.admin-app) .header-v2 .headright { display:flex; align-items:center; align-self:center; gap:20px; margin:0; padding:0; flex-shrink:0; }
body:not(.admin-app) .header-v2 .headright > .signin { display:inline-flex; justify-content:center; align-items:center; min-height:44px; padding:11px 18px; margin:0; background:var(--red); color:var(--white); border:1px solid var(--red); border-radius:0; font:600 14px/1.3 var(--sans); text-decoration:none; white-space:nowrap; }
body:not(.admin-app) .header-v2 .headright > .signin:hover { background:#8e301e; border-color:#8e301e; }
body:not(.admin-app) .header-v2 .account-menu { position:relative; margin:0; padding:0; border:0; background:none; font:400 14px/1.4 var(--sans); }
body:not(.admin-app) .header-v2 .account-menu[hidden] { display:none; }
body:not(.admin-app) .header-v2 .account-menu > summary { display:flex; align-items:center; gap:10px; min-height:44px; padding:0 2px; margin:0; list-style:none; color:var(--ink); font:400 14px/1.4 var(--sans); cursor:pointer; }
body:not(.admin-app) .header-v2 .account-menu > summary::-webkit-details-marker { display:none; }
body:not(.admin-app) .header-v2 .account-menu > summary::after { content:''; width:6px; height:6px; margin-top:-3px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); }
body:not(.admin-app) .header-v2 .account-menu[open] > summary::after { transform:rotate(225deg); margin-top:3px; }
body:not(.admin-app) .header-v2 .account-menu .account-nav { position:absolute; z-index:30; right:0; top:calc(100% + 8px); display:flex; flex-direction:column; align-items:stretch; gap:0; width:210px; max-width:calc(100vw - 28px); padding:6px; margin:0; border:1px solid var(--edge); border-top:2px solid var(--navy); background:var(--white); box-shadow:0 8px 20px #1235431a; }
body:not(.admin-app) .header-v2 .account-menu:not([open]) .account-nav { display:none; }
body:not(.admin-app) .header-v2 .account-nav a { display:block; min-height:44px; padding:12px; margin:0; border:0; color:var(--ink); background:none; font:400 14px/1.3 var(--sans); text-decoration:none; white-space:normal; }
body:not(.admin-app) .header-v2 .account-nav a:hover, body:not(.admin-app) .header-v2 .account-nav a:is(.on,[aria-current="page"]) { background:var(--paper); color:var(--red); }
body:not(.admin-app) .header-v2 .account-nav a:last-child { border-top:1px solid var(--edge); }
body:not(.admin-app) .header-v2 .site-menu-toggle { display:none; }
@media(max-width:1160px) {
  body:not(.admin-app) .header-v2 .masthead-note { display:none; }
}
@media(max-width:1120px) {
  body:not(.admin-app) .header-v2 .shell { width:calc(100% - 36px); }
  body:not(.admin-app) .header-v2 .site-navigation { gap:22px; }
  body:not(.admin-app) .header-v2 .navigation { gap:22px; }
}
@media(max-width:760px) {
  body:not(.admin-app) .header-v2 .shell { width:calc(100% - 28px); }
  body:not(.admin-app) .header-v2 .masthead-inner { flex-wrap:wrap; gap:0 16px; min-height:76px; padding-block:6px; }
  body:not(.admin-app) .header-v2 .brand { height:64px; }
  body:not(.admin-app) .header-v2 .brand .headfish { height:64px; }
  body:not(.admin-app) .header-v2 .brand .wordmark { height:52px; padding-left:9px; }
  body:not(.admin-app) .header-v2 .brand .headtype { height:48px; }
  body:not(.admin-app) .header-v2 .site-menu-toggle:not([hidden]) { display:block; margin:0 0 0 auto; min-width:72px; min-height:44px; padding:10px 14px; border:1px solid var(--edge); border-radius:0; background:none; color:var(--ink); font:600 14px/1.4 var(--sans); }
  body:not(.admin-app) .header-v2 .site-menu-toggle[aria-expanded="true"] { background:var(--paper); border-color:var(--ink); }
  body:not(.admin-app) .header-v2 .site-navigation { flex:1 0 100%; flex-direction:column; align-items:stretch; gap:8px; margin:6px 0 0; padding:12px 0 8px; border-top:1px solid var(--edge); }
  body:not(.admin-app) .header-v2 .navigation { justify-content:space-between; gap:16px; }
  body:not(.admin-app) .header-v2 .navigation a { min-height:44px; }
  body:not(.admin-app) .header-v2 .headright { order:-1; align-self:stretch; justify-content:space-between; flex-wrap:nowrap; gap:14px; margin:0; padding:0; }
  body:not(.admin-app) .header-v2 .headright > .signin { font-size:14px; }
}

/* Allow a full cutoff date to wrap on narrow phones rather than clip. */
@media (max-width: 520px) {
  .week-page { padding-inline: 14px; }
  .week-arrival { flex-shrink: 1; flex-wrap: wrap; width: 100%; max-width: 100%; gap: 8px 18px; }
  .week-arrival > div { min-width: 0; }
  .week-arrival strong { white-space: normal; }
}