/* Lantz's Bulk Foods - concept demo by WhitecapData
   Warm country-store palette: oatmeal paper, deep barn maroon, chalkboard menus. */

:root {
  --cream: #f6efe1;
  --cream-2: #efe5d2;
  --paper: #fbf7ee;
  --ink: #241d17;
  --ink-soft: #4b3f34;
  --maroon: #7a1e1e;
  --maroon-dark: #5c1414;
  --kraft: #b98a4b;
  --kraft-dark: #9a6d34;
  --board: #211d1a;
  --board-line: rgba(255, 255, 255, .12);
  --line: #e2d5bd;
  --shadow: 0 14px 40px rgba(45, 30, 15, .14);
  --radius: 14px;
  --wrap: 1140px;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--maroon); }

h1, h2, h3, h4 { font-family: var(--serif); line-height: 1.12; margin: 0 0 .4em; font-weight: 800; letter-spacing: -.01em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--kraft-dark);
  margin-bottom: .8rem;
}

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--maroon); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ── Demo ribbon ─────────────────────────────────────────── */

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(251, 247, 238, .94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 74px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 52px; height: 52px; object-fit: contain; }
.brand-name { font-family: var(--serif); font-weight: 800; font-size: 1.28rem; line-height: 1; display: block; }
.brand-sub { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--kraft-dark); font-weight: 700; }

.site-nav { display: flex; align-items: center; gap: 1.35rem; }
.site-nav a { text-decoration: none; color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.site-nav a:hover { color: var(--maroon); }
.site-nav a[aria-current="page"] { color: var(--maroon); }
/* The nav's `a` rule outweighs `.btn-primary` on specificity, so the Call
   button lost its white text. Restore it (and keep it white on hover). */
.site-nav a.btn-primary,
.site-nav a.btn-primary:hover { color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  padding: .72rem 1.3rem; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-outline { background: transparent; color: var(--maroon); border-color: var(--maroon); }
.btn-outline:hover { background: var(--maroon); color: #fff; }
.btn-small { padding: .5rem 1rem; font-size: .88rem; }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .2s; }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position: relative; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(24,15,9,.72) 0%, rgba(24,15,9,.4) 46%, rgba(24,15,9,.12) 100%), linear-gradient(180deg, rgba(30,20,12,.28) 0%, rgba(30,20,12,.5) 68%, rgba(30,20,12,.78) 100%); }
.hero .wrap { position: relative; z-index: 2; padding-top: 5.5rem; padding-bottom: 5.5rem; max-width: 940px; }
.hero .eyebrow { color: #f0d49b; }
.hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero .lede { font-size: clamp(1.05rem, 2.4vw, 1.32rem); max-width: 640px; color: #f4ece0; }
.hero-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 1.6rem 0 0; }
.hero-tags li { font-size: .82rem; font-weight: 600; padding: .32rem .8rem; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(0,0,0,.18); }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
.mt-1 { margin-top: 1.4rem; }
.mt-2 { margin-top: 2rem; }

.hero-facts { position: relative; z-index: 2; background: var(--maroon); }
.hero-facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding: 0; }
.hero-facts .fact { padding: 1.05rem 1.2rem; color: #f6e9d8; }
.hero-facts .fact + .fact { box-shadow: -1px 0 0 rgba(255,255,255,.14); }
.hero-facts .fk { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #e6b877; font-weight: 700; }
.hero-facts .fv { display: block; font-weight: 600; font-size: .98rem; margin-top: .15rem; }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 4.6rem 0; }
.section.tight { padding: 3rem 0; }
.band { background: var(--paper); }
.band-kraft { background: linear-gradient(180deg, #f1e6d0, #ecdfc4); }
.section-head { max-width: 680px; margin-bottom: 2.4rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.7rem); }
.lede { font-size: 1.12rem; color: var(--ink-soft); }

/* ── Category grid ───────────────────────────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; }
/* Static info tiles (not links): defined border + top accent so they read as
   intentional content, and darker text for contrast on the cream background. */
.cat {
  background: #fff; border: 1px solid #d8c49a; border-top: 3px solid var(--maroon); border-radius: 12px;
  padding: 1.15rem 1rem; text-align: center; font-weight: 700; color: var(--ink); font-size: 1.02rem;
  box-shadow: 0 6px 16px rgba(45,30,15,.08);
}
.cat span { display: block; font-size: 1.85rem; margin-bottom: .3rem; }
.cat small { display: block; font-weight: 500; color: #6b5a47; font-size: .82rem; margin-top: .25rem; }

/* ── Feature cards (photos) ──────────────────────────────── */
.grid { display: grid; gap: 1.4rem; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); display: flex; flex-direction: column; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 1.2rem 1.3rem 1.5rem; }
.card-body h3 { font-size: 1.32rem; margin-bottom: .3rem; }
.card-body p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ── Split ───────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.ticks { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.ticks li { position: relative; padding-left: 1.8rem; margin-bottom: .7rem; color: var(--ink-soft); }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--maroon); font-weight: 800; }

/* ── Chalkboard menu ─────────────────────────────────────── */
/* His own menu boards, one image each. The board colour frames them; a tap opens the full size one so a phone can zoom in on the prices. */
.menu-board { background: var(--board); border-radius: 18px; padding: clamp(.6rem, 2vw, 1.2rem); box-shadow: var(--shadow); }
.menu-slides { display: grid; gap: clamp(.6rem, 2vw, 1.2rem); }
.menu-slide { display: block; border-radius: 10px; overflow: hidden; line-height: 0; }
.menu-slide img { width: 100%; height: auto; display: block; }
.menu-tabs { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.6rem; }
.menu-tabs button {
  font-family: var(--sans); font-weight: 700; font-size: .95rem; cursor: pointer;
  padding: .55rem 1.4rem; border-radius: 999px; border: 2px solid var(--maroon);
  background: transparent; color: var(--maroon);
}
.menu-tabs button[aria-selected="true"] { background: var(--maroon); color: #fff; }
.menu-panel[hidden] { display: none; }

/* ── Reviews ─────────────────────────────────────────────── */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem; box-shadow: 0 6px 18px rgba(45,30,15,.06); }
.review .stars { color: var(--kraft-dark); letter-spacing: .12em; font-size: .95rem; }
.review p { font-size: 1rem; color: var(--ink); margin: .5rem 0 .8rem; }
.review .rev-name { font-weight: 700; font-size: .9rem; color: var(--ink-soft); }

/* ── Info strip ──────────────────────────────────────────── */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.info { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.4rem 1.5rem; }
.info h3 { font-size: 1.18rem; margin-bottom: .3rem; }
.info p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ── Visit / contact ─────────────────────────────────────── */
.visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.hours-list .k { font-weight: 600; }
.hours-list .v { color: var(--ink-soft); text-align: right; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow); }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 1rem; background: var(--paper);
}
.field textarea { min-height: 110px; resize: vertical; }
.form-note { font-size: .82rem; color: var(--ink-soft); margin-top: .4rem; }
.form-ok { background: #eef6ec; border: 1px solid #b9d8b0; color: #2f6a2a; border-radius: 8px; padding: .9rem 1rem; font-weight: 600; margin-top: 1rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.map-frame { border: 0; width: 100%; height: 320px; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background: #201a15; color: #cfc3b2; padding: 3.4rem 0 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.4rem; }
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.footer-brand img { width: 46px; height: 46px; object-fit: contain; }
.footer-brand .fb-name { font-family: var(--serif); font-weight: 800; font-size: 1.3rem; color: #fff; }
.site-footer h4 { color: #fff; font-size: 1rem; margin-bottom: .8rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .45rem; }
.footer-list a { color: #cfc3b2; text-decoration: none; font-size: .94rem; }
.footer-list a:hover { color: #fff; }
.site-footer p { margin: .3rem 0; font-size: .94rem; }
.social-row { display: flex; gap: .6rem; margin-top: 1rem; }
.social-row a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); display: grid; place-items: center; color: #cfc3b2; text-decoration: none; font-weight: 700; font-size: .82rem; }
.social-row a:hover { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.footer-fine { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding: 1.3rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: #9c9182; }

/* ── Reveal animation ────────────────────────────────────── */
/* Content is visible by DEFAULT. JS adds `.pre` only to elements that are
   off-screen at load, so nothing is ever stuck blank if JS is slow/absent or
   the timing is off. `.in` (added on scroll, or by a failsafe timer) plays the
   fade. */
.reveal.pre { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; }
@media (prefers-reduced-motion: reduce) { .reveal.pre { opacity: 1; transform: none; } html { scroll-behavior: auto; } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-3, .reviews-grid, .info-grid { grid-template-columns: 1fr 1fr; }
  .split, .visit-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero-facts .wrap { grid-template-columns: 1fr 1fr; }
  .hero-facts .fact + .fact { box-shadow: none; }
}
@media (max-width: 640px) {
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 300px); flex-direction: column; align-items: flex-start;
    background: var(--paper); padding: 5rem 1.6rem 2rem; gap: 1.2rem; transform: translateX(100%); transition: transform .25s ease;
    box-shadow: -12px 0 40px rgba(0,0,0,.18);
  }
  .site-nav.open { transform: none; }
  /* The header's backdrop-filter makes it the containing block for this fixed
     drawer, which trapped it at header height so its manila background only
     covered the top strip and links spilled onto the hero. Drop the blur on
     mobile (the header bg is already 94% opaque) so the drawer fills the
     viewport and the background covers every link. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .grid-3, .reviews-grid, .info-grid, .cat-grid { grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-fine { flex-direction: column; }
  .section { padding: 3.2rem 0; }
}
@media (max-width: 400px) {
  .grid-3, .reviews-grid, .info-grid { grid-template-columns: 1fr; }
}

/* ── Sub-page hero (Cafe / About / Visit) ────────────────── */
.page-hero { position: relative; background: linear-gradient(120deg, var(--maroon-dark), var(--maroon)); color: #fff; overflow: hidden; }
.page-hero .wrap { position: relative; z-index: 2; padding: 3.7rem 22px 3.4rem; max-width: 900px; }
.page-hero .eyebrow { color: #f0d49b; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); margin-bottom: .4rem; text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.page-hero p { color: #f4ece0; max-width: 640px; font-size: 1.1rem; margin: 0; }
/* Photo-backed variant: real image with a maroon wash so the text stays legible. */
.page-hero.photo .ph-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(56,13,13,.9) 0%, rgba(74,18,18,.66) 52%, rgba(74,18,18,.34) 100%); }

/* ── Link cards (home → sub-pages) ───────────────────────── */
.linkcard {
  display: block; text-decoration: none; color: inherit; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.7rem;
  box-shadow: 0 6px 18px rgba(45,30,15,.06); transition: transform .15s ease, box-shadow .15s ease;
}
.linkcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.linkcard .lc-ic { font-size: 1.9rem; line-height: 1; }
.linkcard h3 { margin: .5rem 0 .25rem; font-size: 1.3rem; }
.linkcard p { margin: 0 0 .7rem; color: var(--ink-soft); font-size: .96rem; }
.linkcard .go { color: var(--maroon); font-weight: 700; font-size: .9rem; }

/* ── Footer map (demo footer-map standard) ───────────────── */
.footer-map-wrap { margin-top: 2.6rem; }
.footer-map { border: 0; width: 100%; height: 280px; border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.28); }
@media (max-width: 640px) { .footer-map { height: 220px; } }

/* Ways to reach the shop, in place of the demo's cosmetic contact form. */
.contact-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.contact-list li { display: flex; gap: .6rem; flex-wrap: wrap; }
.contact-list b { min-width: 3.5rem; color: var(--ink-soft); font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }

/* ── Products ──────────────────────────────────────────────────────────────
   The catalog page. Everything below renders from /catalog.json, which the
   Worker serves out of the document the portal publishes. */

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

body.no-scroll { overflow: hidden; }

.catalog-section { padding: 42px 0 70px; }

.catalog-status {
  max-width: 60ch;
  margin: 40px auto;
  text-align: center;
  color: var(--ink-soft);
}

.catalog-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.search-field { flex: 1 1 260px; }
.search-field input {
  width: 100%;
  padding: 12px 16px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.search-field input:focus-visible {
  outline: 2px solid var(--maroon);
  outline-offset: 1px;
}
.result-count { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.dept-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}
.dept {
  font: inherit;
  font-size: .9rem;
  padding: 7px 14px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.dept:hover { border-color: var(--kraft); color: var(--ink); }
.dept.on {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
}
/* Headings then sections (catalog-groups.js). The list stops being one row of
   chips and becomes two stacked rows; each row wraps like the old one did. */
.dept-row { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.dept-sub {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.dept-sub .dept { font-size: .85rem; padding: 6px 12px; }

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}

.product {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  text-align: left;
  font: inherit;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}
.product:hover { border-color: var(--kraft); box-shadow: var(--shadow); }
.product:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.product-photo {
  display: block;
  aspect-ratio: 1;
  margin-bottom: 8px;
  background: var(--cream-2);
  border-radius: 10px;
  overflow: hidden;
}
.product-photo img { width: 100%; height: 100%; object-fit: contain; }
/* No photo yet for most products. An empty tile reads as "we have not got to
   this one" rather than as a broken image. */
.no-photo {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .5), transparent 62%),
    repeating-linear-gradient(45deg, transparent 0 11px, rgba(185, 138, 75, .09) 11px 22px),
    var(--cream-2);
}

.product-name { font-weight: 600; line-height: 1.35; }
.product-size { color: var(--ink-soft); font-size: .86rem; }
.product-price { margin-top: auto; padding-top: 6px; font-weight: 600; color: var(--maroon); }
.product-price .per { font-weight: 400; color: var(--ink-soft); font-size: .85rem; }
.product-price .ask { font-weight: 500; color: var(--ink-soft); font-size: .9rem; }

.empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 40px 0; }

/* ── One product ─────────────────────────────────────────────────────────── */

.detail-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(36, 29, 23, .62);
}
.detail-backdrop[hidden] { display: none; }

.detail-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  width: min(880px, 100%);
  max-height: 88vh;
  overflow: auto;
  padding: 26px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.detail-close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 1.7rem;
  line-height: 1;
  padding: 4px 10px;
  color: var(--ink-soft);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.detail-close:hover { background: var(--cream-2); color: var(--ink); }

.detail-photo {
  align-self: start;
  aspect-ratio: 1;
  background: var(--cream-2);
  border-radius: 10px;
  overflow: hidden;
}
.detail-photo:empty { display: none; }
.detail-photo img { width: 100%; height: 100%; object-fit: contain; }

.detail-body h2 { font-family: var(--serif); font-size: 1.7rem; margin: 0 0 6px; }
.detail-size { margin: 0 0 10px; color: var(--ink-soft); }
.detail-price { margin: 0 0 6px; font-size: 1.25rem; font-weight: 600; color: var(--maroon); }
.detail-weight, .detail-desc { color: var(--ink-soft); }

.detail-ing {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--cream-2);
  border-radius: 10px;
}
.detail-ing h3 { margin: 0 0 6px; font-size: 1rem; }
.detail-ing p { margin: 0; font-size: .92rem; }
.detail-ing .source { margin-top: 8px; color: var(--ink-soft); font-size: .82rem; }
.detail-ing.none { color: var(--ink-soft); font-size: .92rem; }

.detail-call { margin: 18px 0 0; font-weight: 500; }

@media (max-width: 680px) {
  .detail-box { grid-template-columns: 1fr; padding: 20px; }
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* This month's specials, from his portal (assets/specials.js). Hidden until one is running. */
.specials-band { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.specials-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.2rem; }
.special { background: #fff; border: 1px solid var(--line); border-left: 5px solid var(--maroon, #7a1e1e);
  border-radius: 12px; padding: 1.2rem 1.4rem; }
.special h3 { font-size: 1.15rem; margin: 0 0 .3rem; }
.special p { margin: 0; color: var(--ink-soft); white-space: pre-line; }
.specials-box { margin: 0 0 1.6rem; }
.specials-box h2 { font-size: 1.35rem; margin: 0 0 .8rem; }
[data-specials][hidden] { display: none; }

/* Email sign-up box (home and Visit). Posts to /api/subscribe; assets/signup.js
   answers in place, and without it the Worker returns a small thank-you page. */
.signup-band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signup-card { max-width: 760px; margin: 0 auto; text-align: center; }
.signup-card .lede { color: var(--ink-soft); margin: 0 auto 1.2rem; max-width: 560px; }
.signup-form { text-align: left; }
.signup-fields { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: .8rem; align-items: end; }
.signup-fields .field { margin-bottom: 0; min-width: 0; }
.signup-fields .btn { white-space: nowrap; }
.signup-form .optional { font-weight: 400; color: var(--ink-soft); }
.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.signup-status { min-height: 1.2em; margin: .6rem 0 0; font-weight: 600; }
.signup-status.is-ok { color: #2f6b2f; }
.signup-status.is-error { color: var(--maroon); }
.contact-card .signup-form { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.contact-card .signup-fields { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .signup-fields { grid-template-columns: 1fr; }
  .signup-fields .btn { width: 100%; }
}