/* ==========================================================================
   The Overstone Arms — design system
   Colour palette sampled from the official logo (muted teal / ivory).
   ========================================================================== */

:root {
  --teal-primary: #365b5e;
  --teal-deep: #294b4e;
  --teal-mid: #547377;
  --ivory: #f5f3ec;
  --off-white: #ece9df;
  --charcoal: #252a29;
  --accent-warm: #b8a988;

  --teal-primary-rgb: 54, 91, 94;
  --teal-deep-rgb: 41, 75, 78;

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-s: 3px;
  --radius-m: 4px;
  --container: 1180px;

  --shadow-card: 0 8px 24px rgba(37, 42, 41, 0.09);
  --shadow-lift: 0 14px 34px rgba(37, 42, 41, 0.16);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  color: var(--teal-deep);
}
p { margin: 0 0 1em; }
button { font-family: inherit; }

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

@media (min-width: 640px) {
  .container { padding: 0 32px; }
}

section { padding: 64px 0; }
@media (min-width: 900px) { section { padding: 96px 0; } }

.section--ivory { background: var(--ivory); }
.section--off { background: var(--off-white); }
.section--teal { background: var(--teal-primary); color: var(--ivory); }
.section--teal h2, .section--teal h3 { color: var(--ivory); }
.section--deep { background: var(--teal-deep); color: var(--ivory); }
.section--deep h2, .section--deep h3 { color: var(--ivory); }

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-warm);
  margin-bottom: 0.9em;
  font-weight: 600;
}
.section--teal .eyebrow, .section--deep .eyebrow { color: var(--off-white); opacity: 0.85; }

.section-head {
  max-width: 640px;
  margin: 0 auto 40px;
  text-align: center;
}
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.section-head p { color: var(--teal-mid); font-size: 1.05rem; }
.section--teal .section-head p, .section--deep .section-head p { color: var(--off-white); opacity: 0.92; }

/* Event panel — a text-led card with a fine double border, echoing the logo's frame */
.event-section { padding-top: 64px; padding-bottom: 64px; }
.event-panel {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 56px 48px;
  text-align: center;
  border: 1px solid var(--teal-primary);
}
.event-panel::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--accent-warm);
  opacity: 0.6;
  pointer-events: none;
}
.event-panel--invert { border-color: var(--ivory); }
.event-panel--invert::before { border-color: rgba(245, 243, 236, 0.5); opacity: 1; }
.event-panel .eyebrow { display: block; margin-bottom: 8px; }
.event-panel h2 { margin-bottom: 4px; }
.event-panel p { color: var(--teal-mid); max-width: 520px; margin: 0 auto 28px; }
.event-panel--invert p { color: var(--off-white); opacity: 0.92; }
.event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--teal-primary);
  color: var(--teal-primary);
  margin-bottom: 22px;
}
.event-icon svg { width: 24px; height: 24px; }
.event-panel--invert .event-icon { border-color: var(--ivory); color: var(--ivory); }
@media (max-width: 640px) {
  .event-panel { padding: 40px 22px; }
  .event-panel::before { inset: 7px; }
  .event-section { padding-top: 48px; padding-bottom: 48px; }
}

.rule {
  width: 64px;
  height: 2px;
  background: var(--accent-warm);
  border: none;
  margin: 18px auto;
}
.section-head.align-left { margin-left: 0; text-align: left; }
.section-head.align-left .rule { margin-left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 30px;
  border-radius: var(--radius-s);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.2s var(--ease);
  min-height: 48px;
  line-height: 1;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--teal-primary);
  color: var(--ivory);
  border-color: var(--teal-primary);
}
.btn--primary:hover { background: var(--teal-deep); border-color: var(--teal-deep); }

.btn--outline {
  background: transparent;
  color: var(--teal-primary);
  border-color: var(--teal-primary);
}
.btn--outline:hover { background: var(--teal-primary); color: var(--ivory); }

.btn--invert {
  background: var(--ivory);
  color: var(--teal-deep);
  border-color: var(--ivory);
}
.btn--invert:hover { background: transparent; color: var(--ivory); border-color: var(--ivory); }

.btn--ghost-on-dark {
  background: transparent;
  color: var(--ivory);
  border-color: rgba(245, 243, 236, 0.55);
}
.btn--ghost-on-dark:hover { background: rgba(245, 243, 236, 0.12); border-color: var(--ivory); }

.btn--sm { padding: 10px 20px; font-size: 0.75rem; min-height: 40px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 243, 236, 0.94);
  backdrop-filter: saturate(140%) blur(6px);
  border-bottom: 1px solid rgba(41, 75, 78, 0.12);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  /* Slightly wider than the shared page container: at ordinary desktop
     widths (1366-1920px and up) the full "The Overstone Arms" wordmark,
     all nine nav links and the phone/Book a Table actions don't quite fit
     within the page's usual 1180px measure, which is what was silently
     clipping the name with an ellipsis before this was fixed. Only the
     header gets the extra room; every other section keeps --container. */
  max-width: 1280px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.brand img { height: 48px; width: 48px; flex-shrink: 0; object-fit: contain; border-radius: 6px; }
@media (min-width: 480px) { .brand img { height: 58px; width: 58px; } }
@media (min-width: 1024px) { .brand img { height: 66px; width: 66px; } }
.brand-text {
  font-family: var(--font-display);
  line-height: 1.05;
  color: var(--teal-deep);
  min-width: 0;
}
.brand-text .name {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  white-space: nowrap;
}
@media (min-width: 360px) { .brand-text .name { font-size: 1rem; } }
@media (min-width: 400px) { .brand-text .name { font-size: 1.15rem; } }
@media (min-width: 480px) { .brand-text .name { font-size: 1.32rem; } }
.brand-text .tag {
  display: none;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-mid);
  white-space: nowrap;
}
@media (min-width: 480px) { .brand-text .tag { display: block; } }

.main-nav { display: none; }
@media (min-width: 1024px) {
  .main-nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .main-nav a {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--charcoal);
    position: relative;
    padding: 6px 0;
  }
  .main-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease);
  }
  .main-nav a:hover::after,
  .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
  .main-nav a[aria-current="page"] { color: var(--teal-deep); }
}

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.header-actions .call-link {
  display: none;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--teal-deep);
}
@media (min-width: 1024px) { .header-actions .call-link { display: inline-flex; align-items: center; gap: 6px; } }
.header-actions .header-book {
  display: none;
}
@media (min-width: 480px) { .header-actions .header-book { display: inline-flex; } }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--teal-primary);
  background: transparent;
  color: var(--teal-deep);
  cursor: pointer;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 22px; height: 22px; }

.mobile-nav {
  position: fixed;
  inset: 0;
  top: 0;
  background: var(--teal-deep);
  color: var(--ivory);
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(245, 243, 236, 0.18);
}
.mobile-nav-top .brand img { height: 52px; width: 52px; border-radius: 6px; }
.mobile-nav-top .brand-text .name { color: var(--ivory); font-size: 1.1rem; }
.mobile-nav-close {
  width: 44px; height: 44px;
  border-radius: var(--radius-s);
  border: 1.5px solid rgba(245,243,236,0.5);
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}
.mobile-nav ul { padding: 18px 20px 8px; }
.mobile-nav li { border-bottom: 1px solid rgba(245, 243, 236, 0.12); }
.mobile-nav a {
  display: block;
  padding: 16px 4px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ivory);
}
.mobile-nav-cta { padding: 20px; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.mobile-nav-cta .btn { width: 100%; font-family: var(--font-body); }
.mobile-nav-cta .btn.btn--invert { color: var(--teal-deep); }
.mobile-nav-cta .btn.btn--ghost-on-dark { color: var(--ivory); }
body.nav-open { overflow: hidden; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  color: var(--ivory);
  display: flex;
  align-items: flex-end;
  min-height: 78svh;
  overflow: hidden;
}
@media (min-width: 900px) { .hero { min-height: 88svh; } }
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media .ph-block { height: 100%; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}
@media (max-width: 640px) {
  .hero-media img { object-position: 72% 42%; }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(41,75,78,0.35) 0%, rgba(41,75,78,0.32) 40%, rgba(30,52,54,0.82) 100%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 48px 0 56px;
  max-width: 720px;
}
@media (min-width: 900px) { .hero-content { padding: 0 0 88px; } }
.hero-crest { height: 84px; width: 84px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,0.28); }
@media (min-width: 640px) { .hero-crest { height: 108px; width: 108px; margin-bottom: 26px; } }
.hero-content .eyebrow { color: var(--off-white); }
.hero-content h1 {
  color: var(--ivory);
  font-size: clamp(2.3rem, 6vw, 3.9rem);
  margin-bottom: 0.3em;
}
.hero-content .lede {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--off-white);
  max-width: 52ch;
  margin-bottom: 1.8em;
}
.hero .btn-row .btn { min-width: 168px; }

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  color: var(--ivory);
  padding: 120px 0 56px;
  overflow: hidden;
}
.page-hero .ph-block { position: absolute; inset: 0; }
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(41,75,78,0.55), rgba(41,75,78,0.86));
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--ivory); font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 0.25em; }
.page-hero p { color: var(--off-white); max-width: 60ch; }
.breadcrumb { font-size: 0.78rem; letter-spacing: 0.05em; color: var(--off-white); opacity: 0.85; margin-bottom: 16px; }
.breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- placeholder photography blocks ---------- */
.ph-block {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(135deg, var(--teal-mid) 0%, var(--teal-deep) 100%);
  overflow: hidden;
}
.ph-block::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(245,243,236,0.05) 0 2px, transparent 2px 14px);
}
.ph-label {
  position: relative;
  z-index: 1;
  margin: 14px;
  padding: 8px 12px;
  background: rgba(37, 42, 41, 0.55);
  color: var(--off-white);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius-s);
  border: 1px dashed rgba(245,243,236,0.5);
  max-width: calc(100% - 28px);
}
.ph-block.ratio-16-9 { aspect-ratio: 16/9; }
.ph-block.ratio-4-3 { aspect-ratio: 4/3; }
.ph-block.ratio-1-1 { aspect-ratio: 1/1; }
.ph-block.ratio-3-4 { aspect-ratio: 3/4; }
.ph-block.ratio-21-9 { aspect-ratio: 21/9; }

/* ---------- real photography (mirrors .ph-block ratio system) ---------- */
.photo {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--teal-mid);
}
.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo.ratio-16-9 { aspect-ratio: 16/9; }
.photo.ratio-4-3 { aspect-ratio: 4/3; }
.photo.ratio-1-1 { aspect-ratio: 1/1; }
.photo.ratio-3-4 { aspect-ratio: 3/4; }
.photo.ratio-21-9 { aspect-ratio: 21/9; }
/* full-bleed variant for section backgrounds (page-hero / final-cta) */
.photo.fill { position: absolute; inset: 0; aspect-ratio: auto; }
.photo.fill img { object-position: var(--photo-pos, center); }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- welcome / intro ---------- */
.welcome-grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .welcome-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
  .welcome-grid.reverse { direction: rtl; }
  .welcome-grid.reverse > * { direction: ltr; }
}
.welcome-copy h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.welcome-copy .rule { margin-left: 0; }
.trait-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin-top: 24px; }
.trait-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.94rem; color: var(--teal-deep); font-weight: 600; }
.trait-list svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; color: var(--accent-warm); }
.frame-border { border: 8px solid var(--ivory); box-shadow: var(--shadow-lift); }

/* ---------- food feature cards ---------- */
.card-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.food-card {
  background: var(--off-white);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.food-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.food-card .ph-block, .food-card > .photo { aspect-ratio: 4/3; }
.food-card-body { padding: 22px 20px 26px; }
.food-card-body h3 { font-size: 1.3rem; margin-bottom: 6px; }
.food-card-body p { color: var(--teal-mid); font-size: 0.92rem; margin-bottom: 0; }

/* ---------- weekly schedule ---------- */
.week-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 760px) { .week-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .week-grid { grid-template-columns: repeat(5, 1fr); } }
.week-card {
  background: rgba(245, 243, 236, 0.06);
  border: 1px solid rgba(245, 243, 236, 0.22);
  border-radius: var(--radius-m);
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.week-card:hover { background: rgba(245, 243, 236, 0.12); border-color: rgba(245,243,236,0.4); }
.week-card .day {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-warm);
  font-weight: 700;
}
.week-card h3 { color: var(--ivory); font-size: 1.4rem; margin-bottom: 2px; }
.week-card p { color: var(--off-white); font-size: 0.88rem; opacity: 0.92; margin-bottom: 0; }
.week-card .price-tag {
  align-self: flex-start;
  margin-top: auto;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--accent-warm);
  padding: 5px 10px;
  border-radius: var(--radius-s);
  font-weight: 700;
}

/* ---------- garden / feature split ---------- */
.feature-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
@media (min-width: 900px) { .feature-split { grid-template-columns: 1.1fr 1fr; } }
.feature-split .ph-block, .feature-split > .photo { aspect-ratio: 16/9; }
@media (min-width: 900px) { .feature-split .ph-block, .feature-split > .photo { aspect-ratio: auto; height: 100%; } }
.garden-collage { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.garden-collage .photo.main { flex: 2 1 auto; aspect-ratio: 4/3; min-height: 0; }
.garden-collage .photo.support { flex: 1 1 auto; aspect-ratio: 16/9; min-height: 0; }
@media (min-width: 900px) { .garden-collage .photo { aspect-ratio: auto; flex-basis: 0; } }
.feature-copy {
  background: var(--teal-deep);
  color: var(--ivory);
  padding: 40px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) { .feature-copy { padding: 56px 48px; } }
.feature-copy h2, .feature-copy h3 { color: var(--ivory); }
.feature-copy p { color: var(--off-white); }
.tick-list { margin: 18px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.tick-list li { display: flex; gap: 10px; font-size: 0.95rem; }
.tick-list svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-warm); margin-top: 3px; }

/* ---------- sunday feature ---------- */
.sunday-feature {
  display: grid;
  gap: 36px;
  align-items: center;
}
@media (min-width: 900px) { .sunday-feature { grid-template-columns: 1fr 1fr; gap: 60px; } }
.sunday-times {
  display: flex;
  gap: 22px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.sunday-times .time-block { border-left: 2px solid var(--accent-warm); padding-left: 14px; }
.sunday-times .time-block .label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-mid); }
.sunday-times .time-block .value { font-family: var(--font-display); font-size: 1.5rem; color: var(--teal-deep); font-weight: 600; }

/* ---------- reviews ---------- */
.review-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review-card {
  background: var(--ivory);
  border: 1px solid rgba(41,75,78,0.14);
  border-radius: var(--radius-m);
  padding: 26px 24px;
}
.review-card .stars { color: var(--accent-warm); letter-spacing: 2px; margin-bottom: 12px; font-size: 0.95rem; }
.review-card p.quote { font-style: italic; color: var(--charcoal); font-size: 0.96rem; }
.review-card .who { font-size: 0.82rem; color: var(--teal-mid); font-weight: 600; }
.review-note {
  text-align: center;
  max-width: 640px;
  margin: 8px auto 0;
  font-size: 0.85rem;
  color: var(--teal-mid);
}

/* ---------- events/functions ---------- */
.event-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 640px) { .event-type-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .event-type-grid { grid-template-columns: repeat(6, 1fr); } }
.event-type {
  border: 1px solid rgba(245,243,236,0.28);
  border-radius: var(--radius-m);
  padding: 18px 12px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ivory);
}
.event-type svg { width: 26px; height: 26px; margin: 0 auto 10px; color: var(--accent-warm); }

/* ---------- visit us ---------- */
.visit-grid {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) { .visit-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.info-list { display: flex; flex-direction: column; gap: 22px; }
.info-item { display: flex; gap: 16px; }
.info-item svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--teal-primary); margin-top: 2px; }
.info-item h4 { margin-bottom: 4px; font-size: 1.05rem; }
.info-item p { margin-bottom: 0; color: var(--teal-mid); font-size: 0.95rem; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hours-table td { padding: 6px 0; border-bottom: 1px dashed rgba(41,75,78,0.15); }
.hours-table td:last-child { text-align: right; font-weight: 600; color: var(--teal-deep); }
.map-embed { border-radius: var(--radius-m); overflow: hidden; box-shadow: var(--shadow-card); }
.map-embed iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- final CTA ---------- */
.final-cta { position: relative; color: var(--ivory); overflow: hidden; }
.final-cta .ph-block { position: absolute; inset: 0; aspect-ratio: auto; }
.final-cta::after { content: ""; position: absolute; inset: 0; background: rgba(41,75,78,0.72); }
.final-cta .container { position: relative; z-index: 1; text-align: center; }
.final-cta h2 { color: var(--ivory); font-size: clamp(2rem, 5vw, 3rem); }

/* ---------- footer ---------- */
.site-footer { background: var(--teal-deep); color: var(--off-white); padding: 56px 0 24px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 24px; } }
.footer-brand { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 14px; }
.footer-brand img { height: 58px; width: 58px; border-radius: 6px; flex-shrink: 0; }
.footer-brand .name { font-family: var(--font-display); font-size: 1.2rem; color: var(--ivory); display: block; }
.footer-brand .tag { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-warm); }
.site-footer p { color: var(--off-white); opacity: 0.85; font-size: 0.9rem; }
.site-footer h4 { color: var(--ivory); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 16px; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { font-size: 0.92rem; opacity: 0.9; }
.footer-links a:hover { opacity: 1; text-decoration: underline; }
.social-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(245,243,236,0.3);
  border-radius: var(--radius-s);
}
.social-row a:hover { background: rgba(245,243,236,0.12); }
.social-row svg { width: 17px; height: 17px; }
.footer-bottom {
  border-top: 1px solid rgba(245,243,236,0.16);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: 0.8rem;
  opacity: 0.75;
}
.footer-bottom a:hover { text-decoration: underline; }

/* ---------- sticky mobile action bar ---------- */
.mobile-action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  background: var(--teal-deep);
  border-top: 1px solid rgba(245,243,236,0.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
@media (min-width: 1024px) { .mobile-action-bar { display: none; } }
.mobile-action-bar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--ivory);
  padding: 9px 4px 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  min-height: 56px;
  border-right: 1px solid rgba(245,243,236,0.12);
  transition: background-color 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-action-bar a:last-child { border-right: none; }
.mobile-action-bar a.is-primary { background: var(--accent-warm); color: var(--teal-deep); }
.mobile-action-bar svg { width: 19px; height: 19px; }

/* Pressed/active feedback - :active and :focus-visible cover mouse, keyboard
   and most touch browsers; .is-pressed (added briefly by JS on touchstart)
   keeps the colour visible on touch devices where :active can be too brief
   to notice. Same warm accent used for the Book button elsewhere on the
   site, so the feedback colour matches the existing branding. */
.mobile-action-bar a:active,
.mobile-action-bar a.is-pressed,
.mobile-action-bar a:focus-visible {
  background: var(--accent-warm);
  color: var(--teal-deep);
}
.mobile-action-bar a.is-primary:active,
.mobile-action-bar a.is-primary.is-pressed,
.mobile-action-bar a.is-primary:focus-visible {
  background: #9c9074;
  color: var(--teal-deep);
}
.mobile-action-bar a:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--teal-deep);
}
body.has-mobile-bar { padding-bottom: 62px; }
@media (min-width: 1024px) { body.has-mobile-bar { padding-bottom: 0; } }

/* ---------- misc pages: menus / gallery / private events / about / whats-on ---------- */
.menu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.menu-tabs button {
  border: 1.5px solid var(--teal-primary);
  background: transparent;
  color: var(--teal-primary);
  padding: 10px 18px;
  border-radius: var(--radius-s);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  min-height: 44px;
}
.menu-tabs button.is-active,
.menu-tabs button:hover { background: var(--teal-primary); color: var(--ivory); }

.menu-panel { display: none; }
.menu-panel.is-active { display: block; }
.menu-panel-grid { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .menu-panel-grid { grid-template-columns: 1fr 1fr; } }
.menu-card {
  background: var(--off-white);
  border-radius: var(--radius-m);
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
}
.menu-card h3 { font-size: 1.35rem; }
.menu-card .desc { color: var(--teal-mid); font-size: 0.92rem; margin-bottom: 18px; }
.menu-file-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.menu-image { cursor: zoom-in; border-radius: var(--radius-m); }
.menu-image:hover { opacity: 0.92; }

.menu-subtabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.menu-subtabs button {
  border: 1.5px solid var(--teal-mid);
  background: transparent;
  color: var(--teal-deep);
  padding: 8px 16px;
  border-radius: var(--radius-s);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  min-height: 40px;
}
.menu-subtabs button.is-active,
.menu-subtabs button:hover { background: var(--teal-mid); color: var(--ivory); border-color: var(--teal-mid); }
.menu-subpanel { display: none; }
.menu-subpanel.is-active { display: block; }

.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.gallery-filters button {
  border: 1px solid var(--teal-mid);
  background: transparent;
  color: var(--teal-deep);
  padding: 8px 16px;
  border-radius: var(--radius-s);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}
.gallery-filters button.is-active, .gallery-filters button:hover { background: var(--teal-deep); color: var(--ivory); border-color: var(--teal-deep); }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }
.gallery-item { border-radius: var(--radius-m); overflow: hidden; cursor: pointer; }
.gallery-item .ph-block { aspect-ratio: 1/1; transition: transform 0.4s var(--ease); }
.gallery-item:hover .ph-block { transform: scale(1.04); }
.gallery-item.is-hidden { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(37,42,41,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-inner { max-width: 900px; width: 100%; }
.lightbox-inner .ph-block { aspect-ratio: 4/3; border-radius: var(--radius-m); }
.lightbox-inner .photo-frame {
  max-height: 82vh;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-inner .photo-frame img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; display: block; }
.lightbox-inner .caption { color: var(--ivory); font-size: 0.85rem; margin-top: 12px; text-align: center; }
.lightbox-close {
  position: absolute; top: 20px; right: 20px;
  width: 46px; height: 46px;
  border-radius: var(--radius-s);
  border: 1.5px solid var(--ivory);
  background: transparent;
  color: var(--ivory);
  cursor: pointer;
}

/* Career timeline — linear on mobile, alternating either side of a centre line on desktop */
.timeline-v2 { list-style: none; margin: 0; padding: 12px 0; position: relative; }
.timeline-v2::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--teal-mid);
  opacity: 0.35;
}
.timeline-v2-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 20px;
  padding: 22px 0;
}
.timeline-v2-marker { grid-column: 1; display: flex; justify-content: center; padding-top: 5px; }
.timeline-v2-marker .dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--accent-warm);
  border: 3px solid var(--off-white);
  box-shadow: 0 0 0 1px var(--teal-mid);
  position: relative;
  z-index: 1;
}
.timeline-v2-content { grid-column: 2; text-align: left; }
.timeline-v2-content .when { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-mid); font-weight: 600; }
.timeline-v2-content h4 { margin: 4px 0 6px; font-size: 1.2rem; }
.timeline-v2-content p { color: var(--teal-mid); font-size: 0.92rem; max-width: 440px; }
@media (min-width: 860px) {
  .timeline-v2::before { left: 50%; transform: translateX(-0.5px); }
  .timeline-v2-item { grid-template-columns: 1fr 32px 1fr; gap: 32px; }
  .timeline-v2-marker { grid-column: 2; }
  .timeline-v2-item:nth-child(odd) .timeline-v2-content { grid-column: 1; text-align: right; }
  .timeline-v2-item:nth-child(odd) .timeline-v2-content p { margin-left: auto; }
  .timeline-v2-item:nth-child(even) .timeline-v2-content { grid-column: 3; text-align: left; }
}

/* Bell's Kitchen video facade — lightweight, no YouTube script/iframe until clicked */
.video-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .video-grid { grid-template-columns: 1fr 1fr; } }
.video-card { text-align: center; }
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: var(--radius-m);
  overflow: hidden;
  background: var(--teal-mid);
}
.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-facade .play-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-facade .play-btn svg { width: 58px; height: 58px; transition: transform 0.2s var(--ease); }
.video-facade:hover .play-btn svg, .video-facade:focus-visible .play-btn svg { transform: scale(1.08); }
.video-embed { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-m); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { margin-top: 12px; font-size: 0.85rem; color: var(--off-white); opacity: 0.85; }

.enquiry-form { display: grid; gap: 16px; }
.form-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; color: var(--teal-deep); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid rgba(41,75,78,0.25);
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--teal-primary);
  box-shadow: 0 0 0 3px rgba(54,91,94,0.15);
}
.form-note { font-size: 0.82rem; color: var(--teal-mid); }

.badge-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(184,169,136,0.16);
  border: 1px solid rgba(184,169,136,0.4);
  color: var(--teal-deep);
  padding: 10px 14px;
  border-radius: var(--radius-s);
  font-size: 0.85rem;
  margin-bottom: 22px;
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent-warm);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-deep);
  color: var(--ivory);
  padding: 12px 18px;
  z-index: 500;
}
.skip-link:focus { left: 12px; top: 12px; }

.two-col { display: grid; gap: 40px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 2fr 1fr; } }

/* ==========================================================================
   Seasonal page + Village Shop
   --------------------------------------------------------------------------
   Added after the original build. Everything below reuses the tokens declared
   at the top of this file — no new colours, fonts or radii are introduced, so
   a seasonal campaign still looks like The Overstone Arms rather than like a
   Christmas card. Nothing above this comment was changed.
   ========================================================================== */

/* the nine-item navigation needs a little less air on smaller laptops, and
   no link should ever break across two lines */
@media (min-width: 1024px) {
  .main-nav a { white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1339px) {
  .main-nav { gap: 15px; }
  .main-nav a { font-size: 0.78rem; }
}
@media (min-width: 1340px) { .main-nav { gap: 24px; } }

/* Right at the 1024px breakpoint (nav switches from the hamburger menu to
   this full row) there still isn't quite room for "The Overstone Arms" in
   full next to nine nav links and the phone/Book a Table actions - the full
   name was quietly clipped with an ellipsis before this was fixed. A little
   extra tightening, only in this narrow band, closes that gap without
   touching the wider layout above 1150px where there's already room. */
@media (min-width: 1024px) and (max-width: 1150px) {
  .main-nav { gap: 10px; }
  .main-nav a { font-size: 0.72rem; }
  .header-actions { gap: 6px; }
  .header-actions .header-book { padding: 8px 14px; font-size: 0.7rem; }
  .brand-text .name { font-size: 1.08rem; }
}

/* an empty promotion slot must not leave a gap on the homepage */
[data-slot]:empty { display: none; }

/* ---------- shared page furniture ---------- */
.page-hero { background: var(--teal-deep); }
.page-hero--tall { padding: 132px 0 72px; }
@media (min-width: 900px) { .page-hero--tall { padding: 176px 0 88px; } }
/* The original page-hero overlay was tuned for dark interior photographs; a
   bright winter or kitchen photograph disappears underneath it. Lighter at the
   top so the photograph reads, darker where the wording and buttons sit. */
.page-hero--tall::after {
  background: linear-gradient(180deg, rgba(41, 75, 78, 0.30) 0%, rgba(41, 75, 78, 0.50) 34%, rgba(41, 75, 78, 0.88) 100%);
}
.page-hero .eyebrow { display: block; color: var(--accent-warm); margin-bottom: 10px; }
.page-hero .hero-lede {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--ivory);
  max-width: 34ch;
  margin-bottom: 26px;
}
.page-hero .btn-row { margin-top: 4px; }
/* keeps the wording readable over a bright photograph without darkening it */
.page-hero--tall .breadcrumb,
.page-hero--tall .eyebrow,
.page-hero--tall h1,
.page-hero--tall .hero-lede { text-shadow: 0 1px 14px rgba(18, 36, 38, 0.5); }

.final-cta-text { max-width: 62ch; margin: 0 auto 26px; color: var(--off-white); }
.final-cta-signoff {
  max-width: 60ch;
  margin: 28px auto 0;
  font-family: var(--font-display);
  font-size: 1.12rem;
  color: var(--ivory);
  opacity: 0.95;
}

.empty-note {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  color: var(--teal-mid);
  font-size: 0.96rem;
}
.section--deep .empty-note, .section--teal .empty-note { color: var(--off-white); opacity: 0.92; }

.made-badge {
  display: inline-block;
  border: 1px solid var(--accent-warm);
  color: var(--teal-deep);
  background: rgba(184, 169, 136, 0.16);
  border-radius: var(--radius-s);
  padding: 5px 11px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.section--deep .made-badge, .section--teal .made-badge { color: var(--ivory); background: rgba(245, 243, 236, 0.12); }

.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.price { font-family: var(--font-display); font-size: 1.22rem; font-weight: 600; color: var(--teal-deep); }
.section--deep .price, .section--teal .price { color: var(--ivory); }
.price s { opacity: 0.55; font-size: 0.9em; margin-right: 4px; }
.tag {
  display: inline-block;
  border: 1px solid rgba(41, 75, 78, 0.28);
  border-radius: var(--radius-s);
  padding: 3px 9px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--teal-mid);
}
.section--deep .tag, .section--teal .tag { border-color: rgba(245, 243, 236, 0.4); color: var(--off-white); }
.tag--sold { border-color: var(--accent-warm); color: var(--accent-warm); }
.card-actions { margin: 14px 0 0; }
.small { font-size: 0.82rem; color: var(--teal-mid); }
.section--deep .small, .section--teal .small { color: var(--off-white); opacity: 0.85; }

.event-card.is-sold-out > .photo, .dish.is-sold-out { opacity: 0.68; }

/* ---------- copy + photograph pair ---------- */
.feature-pair { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .feature-pair { grid-template-columns: 1fr 1fr; gap: 56px; }
  /* same trick the homepage's welcome-grid uses: swap the columns without
     changing the reading order of the markup */
  .feature-pair.reverse { direction: rtl; }
  .feature-pair.reverse > * { direction: ltr; }
}
.feature-pair-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.feature-pair-copy .rule { margin-left: 0; }
.feature-pair-copy .made-badge { margin-bottom: 14px; }
.feature-pair-copy p { color: var(--teal-mid); }
.section--deep .feature-pair-copy p, .section--teal .feature-pair-copy p { color: var(--off-white); }

/* ---------- seasonal: intro + availability notice ---------- */
.season-intro { padding-bottom: 56px; }
.season-intro-copy { max-width: 66ch; margin: 0 auto; text-align: center; }
.season-intro-copy .lede-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.62rem);
  line-height: 1.4;
  color: var(--teal-deep);
}
.season-intro-copy p { color: var(--teal-mid); }

.season-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 720px;
  margin: 34px auto 0;
  padding: 20px 22px;
  border: 1px solid rgba(41, 75, 78, 0.18);
  border-radius: var(--radius-m);
  background: #fff;
}
.season-notice.is-highlight {
  border-color: var(--accent-warm);
  background: rgba(184, 169, 136, 0.14);
  box-shadow: var(--shadow-card);
}
.season-notice svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--accent-warm); margin-top: 2px; }
.season-notice strong { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--teal-deep); margin-bottom: 4px; }
.season-notice p { margin: 0; color: var(--teal-mid); font-size: 0.94rem; }

/* ---------- seasonal: group discounts ---------- */
.offer-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 26px; }
@media (min-width: 640px) { .offer-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } }
.offer-card {
  text-align: center;
  padding: 30px 24px;
  border: 1px solid rgba(41, 75, 78, 0.16);
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.offer-percent {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  line-height: 1;
  color: var(--teal-primary);
  margin-bottom: 10px;
}
.offer-card p { color: var(--teal-mid); margin-bottom: 10px; font-size: 0.95rem; }
.offer-min {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.offer-extra { max-width: 60ch; margin: 0 auto 24px; text-align: center; color: var(--teal-mid); }
.section--deep .offer-card { background: rgba(245, 243, 236, 0.08); border-color: rgba(245, 243, 236, 0.28); }
.section--deep .offer-percent, .section--deep .offer-min { color: var(--ivory); }
.section--deep .offer-card p, .section--deep .offer-extra { color: var(--off-white); }

/* ---------- seasonal: gifts + vouchers ---------- */
.gift-list { display: grid; gap: 12px; grid-template-columns: 1fr; max-width: 820px; margin: 0 auto 30px; }
@media (min-width: 700px) { .gift-list { grid-template-columns: 1fr 1fr; } }
.gift-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 15px 18px;
  border-left: 2px solid var(--accent-warm);
  background: #fff;
  border-radius: var(--radius-s);
}
.gift-list strong { font-family: var(--font-display); font-size: 1.1rem; color: var(--teal-deep); font-weight: 600; }
.gift-list span { font-size: 0.88rem; color: var(--teal-mid); }
.voucher-panel {
  max-width: 760px;
  margin: 0 auto 26px;
  padding: 30px 28px;
  border: 1px solid var(--accent-warm);
  border-radius: var(--radius-m);
  background: rgba(184, 169, 136, 0.12);
  text-align: center;
}
.voucher-panel h3 { font-size: 1.5rem; }
.voucher-panel p { color: var(--teal-mid); margin-bottom: 0; }

/* a menu photograph inside a card on the Seasonal page — portrait, and the
   whole picture is a link through to the real menu */
.menu-preview > a { display: block; }
.menu-preview .photo { aspect-ratio: 3/4; }
@media (min-width: 900px) { .menu-preview .photo { aspect-ratio: 4/5; } }

/* ---------- seasonal: link tiles ---------- */
.link-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .link-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .link-grid { grid-template-columns: repeat(3, 1fr); } }
.link-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  padding: 16px 20px;
  border: 1px solid rgba(41, 75, 78, 0.2);
  border-radius: var(--radius-m);
  background: #fff;
  font-weight: 600;
  color: var(--teal-deep);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.link-tile:hover { border-color: var(--teal-primary); transform: translateY(-2px); }
.link-tile svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--accent-warm); }
.section--deep .link-tile { background: rgba(245, 243, 236, 0.08); border-color: rgba(245, 243, 236, 0.3); color: var(--ivory); }

/* ---------- homepage: seasonal promotion band ---------- */
.season-promo { padding: 54px 0; }
.season-promo-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
@media (min-width: 860px) {
  .season-promo-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; }
  .season-promo-inner .btn-row { flex-shrink: 0; }
}
.season-promo h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 6px; }
.season-promo p { color: var(--off-white); margin-bottom: 0; max-width: 60ch; opacity: 0.92; }

/* ---------- shop ---------- */
.shop-traits { grid-template-columns: 1fr; max-width: 820px; margin-left: auto; margin-right: auto; }
@media (min-width: 620px) { .shop-traits { grid-template-columns: 1fr 1fr; } }

.shop-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.shop-filters button {
  border: 1px solid var(--teal-mid);
  background: transparent;
  color: var(--teal-deep);
  padding: 9px 16px;
  border-radius: var(--radius-s);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}
.shop-filters button.is-active,
.shop-filters button:hover { background: var(--teal-deep); color: var(--ivory); border-color: var(--teal-deep); }

.shop-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
.shop-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.shop-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.shop-card.is-hidden { display: none; }
.shop-card > .photo { aspect-ratio: 4/3; }
.shop-flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 20px 0; }
.shop-card-body { padding: 18px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.shop-card-body h3 { font-size: 1.24rem; margin-bottom: 6px; }
.shop-card-body > p { color: var(--teal-mid); font-size: 0.92rem; margin-bottom: 12px; }
.shop-card-body .producer { font-size: 0.82rem; font-weight: 600; color: var(--teal-primary); }
.shop-card-body .card-actions { margin-top: auto; }
.shop-more { margin: 4px 0 10px; }
.shop-more summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-primary);
  list-style: none;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.shop-more summary::-webkit-details-marker { display: none; }
.shop-more summary::after { content: " +"; }
.shop-more[open] summary::after { content: " \2013"; }
.shop-more p { font-size: 0.88rem; color: var(--teal-mid); margin-bottom: 8px; }

/* ---------- pre-order menus ---------- */
.preorder-list { display: flex; flex-direction: column; gap: 34px; }
.preorder-menu {
  background: #fff;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.preorder-menu > .photo { aspect-ratio: 16/9; }
@media (min-width: 900px) { .preorder-menu > .photo { aspect-ratio: 21/9; } }
.preorder-body { padding: 28px 24px 32px; }
@media (min-width: 900px) { .preorder-body { padding: 36px 40px 40px; } }
.preorder-body h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
.preorder-body > p { color: var(--teal-mid); }
.preorder-facts {
  display: grid;
  gap: 6px 18px;
  grid-template-columns: 1fr;
  margin: 20px 0 26px;
  padding: 18px 20px;
  background: var(--off-white);
  border-radius: var(--radius-s);
}
@media (min-width: 700px) { .preorder-facts { grid-template-columns: max-content 1fr; } }
.preorder-facts dt {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-deep);
}
.preorder-facts dd { margin: 0 0 8px; font-size: 0.92rem; color: var(--teal-mid); }
@media (min-width: 700px) { .preorder-facts dd { margin-bottom: 0; } }

.course-heading {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--teal-deep);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 26px 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(41, 75, 78, 0.15);
}
.dish-list { display: flex; flex-direction: column; gap: 16px; }
.dish { padding-left: 14px; border-left: 2px solid var(--accent-warm); }
.dish-head { display: flex; gap: 14px; align-items: baseline; justify-content: space-between; }
.dish-name { font-weight: 600; color: var(--teal-deep); }
.dish p { margin: 4px 0 0; font-size: 0.9rem; color: var(--teal-mid); }
.dish .price { font-size: 1.05rem; }

.past-menus summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--teal-primary);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.past-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; color: var(--teal-mid); font-size: 0.92rem; }
.past-list li { padding-left: 14px; border-left: 2px solid rgba(41, 75, 78, 0.18); }

/* Cards on a dark band.
   The original site only ever put .food-card on a light section, so the
   "everything is ivory on teal" rules above would have made a card's own
   heading invisible. These put the card back to its normal colours wherever
   one lands on a teal band (the Seasonal events row, the shop's events row). */
.section--deep .food-card, .section--teal .food-card,
.section--deep .shop-card, .section--teal .shop-card { background: var(--off-white); }
.section--deep .food-card h3, .section--teal .food-card h3,
.section--deep .shop-card h3, .section--teal .shop-card h3 { color: var(--teal-deep); }
.section--deep .food-card .price, .section--teal .food-card .price,
.section--deep .shop-card .price, .section--teal .shop-card .price { color: var(--teal-deep); }
.section--deep .food-card .tag, .section--teal .food-card .tag,
.section--deep .shop-card .tag, .section--teal .shop-card .tag {
  border-color: rgba(41, 75, 78, 0.28);
  color: var(--teal-mid);
}
.section--deep .food-card .tag--sold, .section--teal .food-card .tag--sold,
.section--deep .shop-card .tag--sold, .section--teal .shop-card .tag--sold {
  border-color: var(--teal-primary);
  color: var(--teal-primary);
}
.section--deep .food-card .small, .section--teal .food-card .small,
.section--deep .shop-card .small, .section--teal .shop-card .small { color: var(--teal-mid); opacity: 1; }
.section--deep .food-card .made-badge, .section--teal .food-card .made-badge,
.section--deep .shop-card .made-badge, .section--teal .shop-card .made-badge {
  color: var(--teal-deep);
  background: rgba(184, 169, 136, 0.16);
}
.section--deep .food-card .eyebrow, .section--teal .food-card .eyebrow,
.section--deep .shop-card .eyebrow, .section--teal .shop-card .eyebrow { opacity: 1; }

/* ==========================================================================
   Village Shop ordering — bag, product, checkout, confirmation
   Added 2026-09-10, with the online ordering system.

   Third clearly-separated block appended to this stylesheet; nothing above it
   was changed. Everything here uses the same tokens, the same 44px minimum
   tap target and the same ivory/teal language as the rest of the site — the
   shop should feel like the pub, not like a shopping cart bolted on.
   ========================================================================== */

[hidden] { display: none !important; }

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

/* ---------- the bag button in the header ---------- */
.bag-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--teal-deep);
  border-radius: var(--radius-s);
  transition: background 0.2s var(--ease);
}
.bag-link:hover { background: rgba(var(--teal-primary-rgb), 0.09); }
.bag-link svg { width: 21px; height: 21px; }
.bag-count {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--teal-primary);
  color: var(--ivory);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* ---------- shop landing: category cards ---------- */
.cat-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.cat-card > .photo { aspect-ratio: 4/3; }
.cat-card-body { padding: 20px 22px 22px; }
.cat-card-body h3 { font-size: 1.24rem; margin-bottom: 4px; color: var(--teal-deep); }
.cat-card-body p { color: var(--teal-mid); font-size: 0.92rem; margin-bottom: 8px; }
.cat-count {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-primary);
}
.shop-card-photo { display: block; }
.shop-card-body h3 a { color: inherit; }
.shop-card-body h3 a:hover { color: var(--teal-primary); }
.shop-closed-note {
  max-width: 70ch;
  margin: 0 auto 28px;
  padding: 16px 20px;
  border-left: 3px solid var(--accent-warm);
  background: rgba(184, 169, 136, 0.14);
  color: var(--teal-deep);
  border-radius: var(--radius-s);
}
.course-rule {
  margin-left: 10px;
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--teal-mid);
}

/* ---------- seasonal: real products in the gifts block ---------- */
.gift-products {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 900px;
  margin: 0 auto 26px;
}
@media (min-width: 700px) { .gift-products { grid-template-columns: repeat(3, 1fr); } }
.gift-product {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: inherit;
}
.gift-product:hover { box-shadow: var(--shadow-lift); }
.gift-product-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.gift-product-body strong { font-family: var(--font-display); font-size: 1.08rem; color: var(--teal-deep); }
.gift-product-body span { font-size: 0.86rem; color: var(--teal-mid); }

/* ---------- one date's availability ---------- */
.day-status {
  max-width: 780px;
  margin: 0 auto;
  padding: 30px 26px 32px;
  text-align: center;
  border-radius: var(--radius-m);
  border: 1px solid rgba(41, 75, 78, 0.2);
  background: #fff;
  box-shadow: var(--shadow-card);
}
@media (min-width: 700px) { .day-status { padding: 38px 40px 40px; } }
.day-status h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 10px; }
.day-status p { color: var(--teal-mid); max-width: 58ch; margin: 0 auto 20px; }
.day-status-badge {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.day-status--fully-booked { border-color: var(--accent-warm); background: rgba(184, 169, 136, 0.13); }
.day-status--fully-booked .day-status-badge { background: var(--teal-deep); color: var(--ivory); }
.day-status--limited .day-status-badge { background: var(--accent-warm); color: var(--charcoal); }
.day-status--available .day-status-badge { background: var(--teal-primary); color: var(--ivory); }

/* ---------- the ordering pages ---------- */
.store-page { padding: 34px 0 70px; background: var(--ivory); }
@media (min-width: 900px) { .store-page { padding: 46px 0 90px; } }
.store-page .breadcrumb { margin-bottom: 18px; color: var(--teal-mid); }
.store-page .breadcrumb a { color: var(--teal-primary); }
.store-page h1 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); }
.store-loading { color: var(--teal-mid); padding: 40px 0; }

.store-note {
  padding: 16px 20px;
  margin-bottom: 22px;
  border-left: 3px solid var(--accent-warm);
  background: rgba(184, 169, 136, 0.14);
  border-radius: var(--radius-s);
}
.store-note p { margin: 0; color: var(--teal-deep); }
.store-note--bad { border-left-color: #a4443a; background: rgba(164, 68, 58, 0.08); }
.store-note--bad p { color: #7d332c; }

.store-toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 20px);
  z-index: 120;
  max-width: min(92vw, 420px);
  padding: 13px 20px;
  border-radius: var(--radius-m);
  background: var(--teal-deep);
  color: var(--ivory);
  font-size: 0.92rem;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.store-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
body.has-mobile-bar .store-toast { bottom: 76px; }

/* ---------- forms ---------- */
.order-form { max-width: 720px; }
.order-group {
  border: 0;
  padding: 0;
  margin: 0 0 26px;
}
.order-group legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 0;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 600;
  color: var(--teal-deep);
}
.group-rule {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-mid);
}
.group-rule.is-required { color: var(--teal-primary); }

.order-form .field { margin-bottom: 16px; }
.order-form label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 600; color: var(--teal-deep); }
.order-form input[type="text"],
.order-form input[type="email"],
.order-form input[type="tel"],
.order-form input[type="date"],
.order-form input[type="number"],
.order-form textarea,
.order-form select {
  width: 100%;
  /* 16px stops iOS Safari zooming the whole page when a field is focused —
     the single most common reason a mobile checkout feels broken. */
  font: 400 1rem/1.5 var(--font-body);
  color: var(--charcoal);
  background: #fff;
  border: 1px solid rgba(41, 75, 78, 0.28);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  min-height: 48px;
}
.order-form textarea { min-height: 96px; resize: vertical; }
.order-form input:focus-visible,
.order-form textarea:focus-visible,
.order-form select:focus-visible {
  outline: 2px solid var(--teal-primary);
  outline-offset: 1px;
  border-color: var(--teal-primary);
}
.order-form .help { margin: 6px 0 0; font-size: 0.82rem; color: var(--teal-mid); }
.order-form .form-row.two { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .order-form .form-row.two { grid-template-columns: 1fr 1fr; } }

.form-errors:empty { display: none; }
.form-errors {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 3px solid #a4443a;
  background: rgba(164, 68, 58, 0.08);
  border-radius: var(--radius-s);
}
.form-error { margin: 0 0 6px; color: #7d332c; font-size: 0.92rem; font-weight: 500; }
.form-error:last-child { margin-bottom: 0; }
.field-error { margin: 6px 0 0; color: #7d332c; font-size: 0.86rem; font-weight: 500; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- choices ---------- */
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 17px;
  background: #fff;
  border: 1px solid rgba(41, 75, 78, 0.2);
  border-radius: var(--radius-m);
  cursor: pointer;
  min-height: 56px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.choice:hover { border-color: var(--teal-primary); }
.choice:has(input:checked) { border-color: var(--teal-primary); box-shadow: inset 0 0 0 1px var(--teal-primary); }
.choice:has(input:focus-visible) { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--teal-primary); flex: none; }
.choice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.choice-head { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; }
.choice-name { font-weight: 600; color: var(--teal-deep); }
.choice-price { font-weight: 600; color: var(--teal-primary); white-space: nowrap; }
.choice-desc { font-size: 0.88rem; color: var(--teal-mid); }
.choice-meta { font-size: 0.8rem; color: var(--teal-mid); }
.choice.is-sold-out { opacity: 0.55; cursor: not-allowed; }
.choice-list--compact .choice { padding: 14px 16px; }
.fixed-date { padding: 12px 16px; background: var(--off-white); border-radius: var(--radius-s); margin-bottom: 16px; }
.allergen-note { color: var(--teal-mid); margin-bottom: 18px; }

/* ---------- product page ---------- */
.product-layout { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .product-layout { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 46px; } }
.product-media .photo { border-radius: var(--radius-m); overflow: hidden; }
.product-media .shop-flags { padding: 14px 0 0; }
.product-body h1 { margin-bottom: 10px; }
.product-price { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-bottom: 14px; }
.product-price s { color: var(--teal-mid); }
.product-price .price { font-size: 1.5rem; }
.product-body > p { color: var(--teal-mid); margin-bottom: 14px; }
.product-body .lede-text { color: var(--teal-deep); }

.order-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 0 20px;
  margin-top: 6px;
  border-top: 1px solid rgba(41, 75, 78, 0.15);
}
.qty-field { width: 110px; }
.qty-field label { display: block; margin-bottom: 6px; font-size: 0.86rem; font-weight: 600; color: var(--teal-deep); }
.order-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.order-total span:first-child {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--teal-mid);
}
.order-total-value { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--teal-deep); }
.btn--wide { width: 100%; justify-content: center; }
.btn.is-busy { opacity: 0.75; cursor: progress; }

/* ---------- bag ---------- */
.bag-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.bag-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px 16px;
  padding: 16px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
@media (min-width: 720px) { .bag-line { grid-template-columns: 96px minmax(0, 1fr) auto; align-items: start; } }
.bag-line.is-gone { opacity: 0.7; }
.bag-thumb { border-radius: var(--radius-s); overflow: hidden; }
.bag-thumb--empty { background: var(--off-white); aspect-ratio: 1/1; }
.bag-line-body h3 { font-size: 1.16rem; margin-bottom: 4px; }
.bag-line-body h3 a { color: var(--teal-deep); }
.bag-detail { margin: 0 0 3px; font-size: 0.86rem; color: var(--teal-mid); word-break: break-word; }
.bag-detail strong { color: var(--teal-deep); font-weight: 600; }
.bag-line-side {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid rgba(41, 75, 78, 0.12);
}
@media (min-width: 720px) {
  .bag-line-side {
    grid-column: auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    padding-top: 0;
    border-top: 0;
  }
}
.bag-line-side select { min-height: 44px; padding: 8px 10px; border: 1px solid rgba(41, 75, 78, 0.28); border-radius: var(--radius-s); background: #fff; font: inherit; }
.link-button {
  border: 0;
  background: none;
  padding: 8px 0;
  min-height: 44px;
  color: var(--teal-primary);
  font: 600 0.86rem/1.4 var(--font-body);
  text-decoration: underline;
  cursor: pointer;
}
.bag-summary {
  padding: 18px 20px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
}
.bag-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.bag-total span:first-child { font-family: var(--font-display); font-size: 1.3rem; color: var(--teal-deep); }
.bag-total .price { font-size: 1.5rem; }
.bag-summary .small { margin: 6px 0 0; color: var(--teal-mid); }
.bag-empty { padding: 30px 0; }
.bag-empty p { color: var(--teal-mid); margin-bottom: 18px; }

/* ---------- checkout ---------- */
.checkout-layout { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 46px; } }
.checkout-summary {
  padding: 22px 22px 24px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
@media (min-width: 940px) { .checkout-summary { position: sticky; top: 96px; } }
.checkout-summary h2 { font-size: 1.4rem; margin-bottom: 14px; }
.summary-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.summary-line {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(41, 75, 78, 0.12);
}
.summary-line:last-child { border-bottom: 0; padding-bottom: 0; }
.summary-line strong { color: var(--teal-deep); font-weight: 600; }
.summary-detail p { margin: 4px 0 0; font-size: 0.82rem; color: var(--teal-mid); word-break: break-word; }
.summary-detail strong { font-weight: 600; }
.summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 2px solid var(--teal-primary);
}
.summary-total span:first-child { font-family: var(--font-display); font-size: 1.25rem; color: var(--teal-deep); }
.summary-total .price { font-size: 1.45rem; }

/* ---------- bank details ----------
   Only ever drawn once somebody has chosen to pay this way, or on their own
   order confirmation. Never on the shop, never in a product listing. */
.bank-panel {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--off-white);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius-s);
}
.bank-panel h3 { font-size: 1.1rem; margin-bottom: 10px; }
.bank-panel .small { color: var(--teal-mid); margin: 10px 0 0; }
.bank-details { display: grid; grid-template-columns: max-content 1fr; gap: 4px 18px; margin: 0; }
.bank-details dt { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--teal-mid); align-self: center; }
.bank-details dd { margin: 0; font-size: 1.02rem; font-weight: 600; color: var(--teal-deep); word-break: break-word; }

/* ---------- confirmation ---------- */
.confirm-head { max-width: 720px; margin-bottom: 30px; }
.confirm-head h1 { margin-bottom: 18px; }
.confirm-head p { color: var(--teal-mid); }
.confirm-ref {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 16px 24px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.confirm-ref-label { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--teal-mid); }
.confirm-ref strong { font-family: var(--font-display); font-size: 1.7rem; color: var(--teal-deep); letter-spacing: 0.02em; }
.confirm-block {
  max-width: 720px;
  padding: 22px 24px 24px;
  margin-bottom: 20px;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.confirm-block h2 { font-size: 1.35rem; margin-bottom: 14px; }
.confirm-block > p { color: var(--teal-mid); margin-bottom: 8px; }
.confirm-block .summary-line strong { color: var(--teal-deep); }

/* On a phone, the small button is a primary action — "Order This", "Buy a
   Voucher", "Pre-Order". 40px is under the 44px minimum the rest of this
   stylesheet already keeps to (.shop-filters button, .shop-more summary,
   .bag-line-side select), so it is raised here rather than left as the one
   thing on the shop that is fiddly to tap. Desktop is unchanged. */
@media (max-width: 720px) {
  .btn--sm { min-height: 44px; }
}

/* ==========================================================================
   Store refinements — product cards, voucher amounts, per-diner ordering
   Added 2026-09-11. Fourth appended block; nothing above was changed.
   ========================================================================== */

/* ---------- product cards ----------
   Name, price, button, THEN description. A paragraph above the button pushes
   it off the bottom of a phone screen, which is how a shop ends up reading
   like an article nobody buys anything from. */
.shop-card { position: relative; }
.shop-card-link { color: inherit; }
.shop-card-link::after {
  /* The whole card is the target, not just the words. The real button sits
     above this on z-index so it still shows its own hover and focus. */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.shop-card:hover .shop-card-link { color: var(--teal-primary); }
.shop-card .card-actions,
.shop-card .shop-more,
.shop-card-photo { position: relative; z-index: 2; }
.shop-card-body .card-meta { margin-bottom: 14px; font-size: 1.05rem; }
.shop-card-body .card-actions { margin-top: 0; margin-bottom: 14px; }
.shop-card-desc {
  color: var(--teal-mid);
  font-size: 0.92rem;
  margin-bottom: 10px;
}
.shop-card-body .producer { margin-bottom: 8px; }
.price-prefix,
.price-suffix {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal-mid);
  letter-spacing: 0.02em;
}
.btn--block {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 48px;
}

/* ---------- voucher amount chooser ---------- */
.value-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
}
.value-chip {
  min-height: 52px;
  padding: 12px 10px;
  border: 1px solid rgba(41, 75, 78, 0.28);
  border-radius: var(--radius-m);
  background: #fff;
  color: var(--teal-deep);
  font: 600 1.05rem/1 var(--font-body);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.value-chip:hover { border-color: var(--teal-primary); }
.value-chip:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.value-chip.is-on {
  background: var(--teal-primary);
  border-color: var(--teal-primary);
  color: var(--ivory);
}

/* ---------- ordering a menu one diner at a time ---------- */
.diners-box .help { margin-bottom: 16px; }
.diner-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.diner-card {
  padding: 18px 18px 14px;
  border: 1px solid rgba(41, 75, 78, 0.2);
  border-left: 3px solid var(--accent-warm);
  border-radius: var(--radius-m);
  background: #fff;
}
.diner-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.diner-head h3 {
  font-size: 1.2rem;
  color: var(--teal-deep);
  margin: 0;
}
.diner-group { margin: 14px 0 4px; }
.diner-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--teal-deep);
}
.diner-card .choice { padding: 12px 14px; min-height: 48px; }
.diner-card .field { margin-bottom: 12px; }

/* ---------- admin-facing store home cards (public side unaffected) ---------- */
@media (max-width: 620px) {
  .value-row { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .diner-head { flex-wrap: wrap; }
}

/* ==========================================================================
   Shop browsing — compact cards, category groups, scrollable filters
   Added 2026-09-12. Fifth appended block; nothing above was changed.

   The shelves were one flat grid of full-size cards, which made "All" (every
   product at once) a very long scroll. Cards on the shelf grid are now the
   compact variant — image, name, price, quantity and an Add button, nothing
   else — grouped under a heading per category so "All" still reads as an
   organised shop rather than one long list. The category filter buttons are
   unchanged in behaviour; they now show or hide a whole group at once
   instead of one card at a time. Voucher/checkout cards elsewhere on the
   site (the gift voucher band, the homepage "From the Shop" band) still use
   the original full-size card — only the shelves changed.
   ========================================================================== */

.shop-cat-group.is-hidden { display: none; }

.shop-cat-group { margin-bottom: 36px; }
.shop-cat-group:last-child { margin-bottom: 0; }
.shop-cat-heading {
  font-size: 1.18rem;
  margin: 0 0 14px;
  color: var(--teal-deep);
  padding-bottom: 8px;
  border-bottom: 1.5px solid rgba(41, 75, 78, 0.14);
}

/* A denser grid than the original .shop-grid: more, smaller cards, so the
   shelves read like shelves rather than a magazine feature. */
.shop-grid--compact { gap: 16px; }
@media (min-width: 480px) { .shop-grid--compact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .shop-grid--compact { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .shop-grid--compact { grid-template-columns: repeat(4, 1fr); } }

.shop-card--compact .shop-card-body { padding: 14px 16px 16px; }
.shop-card--compact .shop-card-body h3 {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 4px;
  /* Long product names (till descriptions can run long) still get two lines
     without pushing the price and button around from card to card. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.shop-card--compact .card-meta { margin-bottom: 10px; font-size: 0.98rem; }
.shop-card--compact .shop-card-more { margin: 0; }
.shop-card--compact .shop-card-more a {
  position: relative;
  z-index: 2;
  font-size: 0.82rem;
  color: var(--teal-mid);
  text-decoration: underline;
}

/* Quantity box + Add button, drawn straight onto a compact card by
   js/shop-quickadd.js. Sits above the card's own click-through overlay
   (.shop-card-link::after) so it stays clickable in its own right. */
.qty-add-row { display: flex; gap: 8px; position: relative; z-index: 2; margin-top: auto; }
.qty-add-row .qty-input {
  width: 56px;
  flex: 0 0 56px;
  min-height: 44px;
  text-align: center;
  border: 1.5px solid rgba(41, 75, 78, 0.25);
  border-radius: var(--radius-s);
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
}
.qty-add-row .quick-add-btn { flex: 1; min-height: 44px; }

/* The category bar: horizontally scrollable on a narrow screen rather than
   wrapping onto several lines or shrinking its text. */
@media (max-width: 719px) {
  .shop-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
    margin-bottom: 22px;
    scrollbar-width: thin;
  }
  .shop-filters button { flex: 0 0 auto; white-space: nowrap; }
}

/* ==========================================================================
   Shop page — products higher up the page
   Added 2026-09-12. Sixth appended block; nothing above was changed.

   ".shop-lead" wraps only the short intro and "Supporting Local" wording
   between the hero and the shelves (see storeMainHtml() in
   render-store.js) — it is store-page-only markup, so tightening its
   spacing here cannot affect Seasonal or any other page that also uses the
   shared textBlock()/section-head building blocks. The ordinary `section`
   rule (64px / 96px) is unchanged everywhere else.
   ========================================================================== */
.shop-lead section { padding: 36px 0; }
@media (min-width: 900px) { .shop-lead section { padding: 48px 0; } }
.shop-lead .section-head { margin-bottom: 28px; }

/* A smaller hero, on this page only — the same photo, title and buttons,
   just not occupying most of the first mobile screen. */
.shop-hero .page-hero--tall { padding: 88px 0 40px; }
@media (min-width: 900px) { .shop-hero .page-hero--tall { padding: 120px 0 56px; } }

/* ==========================================================================
   Shop page — searching and browsing 265 products
   Added 2026-09-12. Seventh appended block; nothing above was changed.

   The catalogue grew from 30 lines to 265, which turns "scroll the shelves"
   into a poor way to find anything. Three pieces of furniture were added
   above the grid — a search box, the category bar (already there, now the
   primary route) and a Show-more button — and this block styles them.

   The progressive-loading rule is the important one: the SERVER renders
   every card and marks everything past the first batch `hidden`, so the page
   paints a short, browsable shop rather than flashing 265 cards. The
   <noscript> block at the end un-hides the lot for a visitor with no
   JavaScript, so they get a long but complete shop instead of a truncated
   one. See js/shop-browse.js and shopSection() in render-store.js.
   ========================================================================== */

/* ---- search ---- */
.shop-search {
  position: relative;
  max-width: 520px;
  margin: 0 auto 18px;
}
.shop-search input[type="search"] {
  width: 100%;
  min-height: 52px;
  padding: 12px 92px 12px 46px;
  border: 1.5px solid rgba(41, 75, 78, 0.25);
  border-radius: var(--radius-m, 10px);
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.shop-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.shop-search input[type="search"]:focus {
  outline: none;
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px rgba(41, 75, 78, 0.14);
}
.shop-search-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--teal-mid);
  opacity: 0.75;
  pointer-events: none;
}
.shop-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-s, 6px);
  background: rgba(41, 75, 78, 0.08);
  color: var(--teal-mid);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.shop-search-clear:hover { background: rgba(41, 75, 78, 0.16); }

/* ---- how many of how many ---- */
.shop-count {
  text-align: center;
  margin: 0 0 22px;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  opacity: 0.7;
}

/* ---- the "Local" label on a compact card ----
   Deliberately small and quiet: it appears on twelve of 265 products, and a
   badge that shouts on every card would say nothing at all. */
.shop-card-flag { margin: 0 0 6px; }
.made-badge--sm {
  font-size: 0.64rem;
  padding: 2px 8px;
  letter-spacing: 0.08em;
}

/* ---- nothing matched ---- */
.shop-empty-note {
  text-align: center;
  padding: 32px 16px;
  margin: 0;
  opacity: 0.8;
}

/* ---- show more ---- */
.shop-more-row { display: flex; justify-content: center; margin-top: 10px; }
.shop-more-row .btn { min-width: 240px; min-height: 48px; }

/* A group whose products are all filtered out leaves no heading behind. */
.shop-cat-group[hidden] { display: none !important; }
.shop-card[hidden] { display: none !important; }

/* With no JavaScript there is nothing to reveal the rest of the shop, run the
   search or filter a category, so a no-JS visitor must be given the whole
   catalogue and none of the controls. That cannot be expressed as a class
   here — it has to be a <noscript><style> — so it lives in store.html's
   hand-written <head>, immediately above the stylesheet link. This comment is
   the pointer to it; there is no rule to write at this end. */

/* ---- "A Look Around the Shop": two photographs, below the shelves ----
   A pair, not a gallery. One column on a phone so neither photograph shrinks
   to a thumbnail; two side by side from tablet width up. The Gallery page is
   where the rest of the pub's shop photographs live. */
.shop-look-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 720px) {
  .shop-look-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
.shop-look { margin: 0; }
.shop-look .photo {
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.shop-look figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  text-align: center;
  opacity: 0.75;
}

/* ---- a blocked checkout, said usefully ----
   When something in the bag stops the order, the checkout names it and offers
   the one action that fixes it, rather than sending the customer back to a
   nine-line bag to work out which one the message meant. */
.checkout-problem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid rgba(176, 58, 46, 0.25);
  border-radius: var(--radius-s, 8px);
  background: rgba(176, 58, 46, 0.05);
}
.checkout-problem .form-error { margin: 0; flex: 1 1 240px; }
.checkout-problem .btn { flex: 0 0 auto; }

/* ==========================================================================
   Shop page — a shelf you can scan on a phone
   Added 2026-09-13. Eighth appended block; nothing above was changed.

   The shelves were readable but slow to browse on a phone: one card to a row
   until 480px and two above it, so 265 products meant an enormous scroll and
   no way to compare two things at a glance. This block does four things, and
   nothing outside the shop's own markup is touched:

     1. THREE CARDS TO A ROW on an ordinary phone, dropping to two below
        360px, where three would leave about 88px of card and make the names
        and buttons genuinely unusable. Tablet and desktop are unchanged at
        three and four.
     2. A CARD BUILT FOR THAT WIDTH — smaller but still legible type, a name
        clamped to three lines (two once there is room), a price that stays
        the loudest thing on the card, and a minus/plus stepper with an Add
        button under it, every target at least 40px and the Add button 44.
     3. THE OPENING VIEW SIZED TO THE SCREEN. The server renders nine cards
        and marks the next nine `hidden` in two labelled bands; the rules
        below un-hide the second band at 360px and the third at 900px, so the
        page paints 9 / 12 / 18 cards with no script involved at all.
        js/shop-browse.js strips those classes as soon as it loads and takes
        over. FIRST_BATCH in render-store.js and the widths in
        js/shop-browse.js must stay in step with the widths here.
     4. The rest of the shelf furniture the phone meets: the "Made Locally"
        line, the labelled, swipeable category bar, and the small link in the
        "added to your bag" bar that goes straight to the basket.
   ========================================================================== */

/* ---- 1. the grid ----
   Base is TWO columns — the layout a 320px phone gets, and the one every
   wider rule builds up from. 10px of gap at that width is the difference
   between a readable card and one that is all padding. */
.shop-grid--compact {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Three across from 360px: a 375px phone gives each card about 106px, which
   holds a three-line name, a price and a full-width Add button. */
@media (min-width: 360px) {
  .shop-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

/* The old 480px rule set two columns; from here up the cards simply get more
   room rather than more of them, until the desktop breakpoints below. */
@media (min-width: 480px) {
  .shop-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 720px) {
  .shop-grid--compact { gap: 18px; }
}
/* 1000px (three) and 1280px (four) are the desktop layout this page already
   had; both are restated here only because this block now owns the grid. */
@media (min-width: 1000px) {
  .shop-grid--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .shop-grid--compact { grid-template-columns: repeat(4, 1fr); }
}

/* No `content-visibility: auto` on the groups here, though it is the obvious
   thing to reach for. The shelves are already short — the server renders nine
   to eighteen cards and marks the rest `hidden`, which is display:none and
   costs nothing to lay out — so skipping the few groups that ARE on the page
   saves very little, while the placeholder height it needs makes the
   scrollbar move under the reader's thumb as each group is reached. The
   opening view is where the work was worth doing; this was not. */

/* ---- 2. the card at phone width ---- */
.shop-card--compact { border-radius: var(--radius-s, 8px); }
.shop-card--compact .shop-card-body { padding: 10px 10px 12px; }

/* Big enough to read at arm's length, clamped so that a long till
   description cannot push the price and the button of one card out of line
   with its neighbours. The full name is still in the link text (screen
   readers, search) and in `title` (desktop hover). */
.shop-card--compact .shop-card-body h3 {
  font-size: 0.86rem;
  line-height: 1.3;
  margin-bottom: 4px;
  -webkit-line-clamp: 3;
}
.shop-card--compact .card-meta {
  margin-bottom: 8px;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--teal-deep);
}
.shop-card--compact .card-meta .price { font-weight: 700; }
/* "Out of stock" and friends: kept, but not competing with the price. */
.shop-card--compact .card-meta .tag {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.62rem;
}
.shop-card--compact .shop-card-flag { margin: 0 0 4px; }
.shop-card--compact .shop-card-more { margin-top: 6px; }

/* The picture, where a product has one. Square, cropped, and never taller
   than the card's own share of the row. */
.shop-card--compact > .shop-card-photo .photo { aspect-ratio: 1 / 1; }

/* ---- the quantity stepper ----
   [ − ][ 1 ][ + ] on one line with Add underneath: the only arrangement that
   keeps every target tappable inside a ~100px column. From 480px up, where
   there is room, the Add button comes back alongside the stepper. */
.qty-add-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.qty-stepper {
  display: flex;
  align-items: stretch;
  border: 1.5px solid rgba(41, 75, 78, 0.25);
  border-radius: var(--radius-s, 6px);
  background: #fff;
  overflow: hidden;
}
.qty-step {
  flex: 0 0 34px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: rgba(41, 75, 78, 0.06);
  color: var(--teal-deep);
  font: 700 1.15rem/1 var(--font-body);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.qty-step:hover { background: rgba(41, 75, 78, 0.14); }
.qty-step:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }
.qty-add-row .qty-input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 40px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-size: 0.95rem;
  background: #fff;
}
.qty-add-row .qty-input:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }
/* The browser's own spinner is unusable at this size and duplicates the two
   buttons either side of it. */
.qty-add-row .qty-input::-webkit-outer-spin-button,
.qty-add-row .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-add-row .qty-input { -moz-appearance: textfield; appearance: textfield; }

.qty-add-row .quick-add-btn {
  flex: 0 0 auto;
  width: 100%;
  min-height: 44px;
  padding: 8px 6px;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* "Added ✓", for a moment, on the button the finger is already on. */
.quick-add-btn.is-added {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
}

@media (min-width: 480px) {
  .qty-add-row { flex-direction: row; align-items: center; gap: 8px; }
  .qty-stepper { flex: 0 0 auto; }
  .qty-step { flex-basis: 36px; min-height: 44px; }
  .qty-add-row .qty-input { flex: 0 0 42px; width: 42px; min-height: 44px; }
  .qty-add-row .quick-add-btn { width: auto; flex: 1 1 auto; font-size: 0.74rem; }
}
@media (min-width: 1000px) {
  .shop-card--compact .shop-card-body { padding: 14px 16px 16px; }
  .shop-card--compact .shop-card-body h3 {
    font-size: 1rem;
    -webkit-line-clamp: 2;
  }
  .shop-card--compact .card-meta { font-size: 1.05rem; }
}

/* ---- 3. the opening view, before any script runs ----
   These beat `.shop-card[hidden] { display: none !important; }` in the block
   above only because they come later in the file — so they must stay at the
   end of it. They are deliberately LESS specific than the <noscript> rule in
   store.html's <head>, which un-hides the whole catalogue for a visitor with
   no JavaScript and has to keep winning. */
@media (min-width: 360px) {
  .shop-card--batch-md[hidden] { display: flex !important; }
  .shop-cat-group--batch-md[hidden] { display: block !important; }
}
@media (min-width: 900px) {
  .shop-card--batch-md[hidden],
  .shop-card--batch-lg[hidden] { display: flex !important; }
  .shop-cat-group--batch-md[hidden],
  .shop-cat-group--batch-lg[hidden] { display: block !important; }
}

/* ---- 4. the furniture above the shelves ---- */

/* The logo line. A quiet single line, directly above the search box: it
   belongs to the shop rather than to any one shelf, and the products have to
   stay within reach of the top of the page. */
.shop-made-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 620px;
  margin: 0 auto 16px;
  padding: 10px 14px;
  border: 1px solid rgba(41, 75, 78, 0.16);
  border-radius: var(--radius-m, 10px);
  background: rgba(41, 75, 78, 0.04);
  text-align: center;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--teal-mid);
}
.shop-made-note .made-badge { flex: 0 0 auto; }

/* The category bar, named. On a phone this is the main way around 265
   products, and an unlabelled strip of buttons does not read as one. */
.shop-filters-label {
  margin: 0 0 8px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-mid);
}
@media (max-width: 719px) {
  .shop-filters {
    /* Room for the shadow of the selected button, and a hint of the next one
       at the right-hand edge so the row reads as scrollable. */
    padding-bottom: 8px;
    margin-bottom: 18px;
    scroll-padding-inline: 20px;
  }
  .shop-filters button { padding: 10px 15px; font-size: 0.76rem; }
  .shop-filters button.is-active {
    box-shadow: 0 2px 8px rgba(41, 75, 78, 0.28);
  }
  .shop-search { margin-bottom: 14px; }
  .shop-count { margin-bottom: 16px; }
  .shop-cat-group { margin-bottom: 26px; }
  .shop-cat-heading { font-size: 1.02rem; margin-bottom: 10px; }
}

/* A shop you are adding things to should offer the way to the basket. The
   bar itself still lets taps through to the shelves underneath; only the
   link inside it is clickable, and only while the bar is actually up. */
.store-toast--action { pointer-events: none; }
.store-toast-link {
  color: var(--ivory);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
  pointer-events: auto;
}
.store-toast--action:not(.is-on) .store-toast-link { pointer-events: none; }

/* ==========================================================================
   Shop page — where "Continue Shopping" lands
   Added 2026-09-13, later. Ninth appended block; nothing above was changed.

   The bag, the checkout and the order confirmation all link back to
   `store.html#products` (SHOP_HREF in js/store.js) rather than to the top of
   the shop, so a customer who has just added something returns to the search
   box and the shelves instead of to the hero photograph they have already
   scrolled past once.

   The site header is `position: sticky`, so a plain fragment jump would put
   the top of #products underneath it. `scroll-margin-top` is the browser's
   own answer to exactly that: it applies to the fragment jump on arrival, to
   the re-scroll js/shop-browse.js does after it has put the customer's
   category and search back, and to any other anchor scroll. The header
   measures 69px on a phone and 87px from 1024px up, where the full menu bar
   appears; both values here leave a little air above the line as well.
   ========================================================================== */
#products { scroll-margin-top: 84px; }
@media (min-width: 1024px) { #products { scroll-margin-top: 102px; } }

/* ==========================================================================
   A basket you can read at a glance, and a way through to the shop photos
   Added 2026-09-13, later still. Tenth appended block; nothing above was
   changed. The original ".bag-line" rules further up are now unused by the
   bag page — they are left in place rather than deleted, because nothing
   else in this stylesheet has ever been removed and they cost nothing.

   The basket gave every product a card: a 96px photograph, a 1.16rem name,
   every detail line under it and a full-height column on the right for the
   quantity dropdown, the price and Remove. Eight products was several
   screens of scrolling to check one order. It is now one row per product —
   thumbnail, name, unit price, stepper, line total, remove — from ONE piece
   of markup, laid out by grid: a headed table on a laptop, two tight lines
   on a phone. No second template, and no table that scrolls sideways.
   ========================================================================== */

/* ---- 1. the layout: list, and a summary beside it on a wide screen ---- */
.bag-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-bottom: 26px;
}
@media (min-width: 900px) {
  .bag-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; }
  /* Sticky, so the total and the Checkout button stay put while a long
     basket scrolls past. 104px clears the sticky site header. */
  .bag-layout .bag-summary { position: sticky; top: 104px; margin-bottom: 0; }
}

.bag-list {
  display: block;
  gap: 0;
  margin-bottom: 0;
  background: #fff;
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* ---- 2. one row ----
   Phone: a 52px thumbnail down the left, the name across the top, and the
   three numbers plus Remove on a second line beneath it.
   Laptop (720px up): one row of six columns, headed once at the top. */
.bag-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "thumb name"
    "thumb prices";
  gap: 4px 12px;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(41, 75, 78, 0.12);
}
.bag-row:last-child { border-bottom: 0; }
.bag-row.is-gone { opacity: 0.7; }

.bag-row-thumb {
  grid-area: thumb;
  align-self: start;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-s);
  overflow: hidden;
  background: var(--off-white);
}
.bag-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No photograph: the product's initial, rather than an empty grey square. */
.bag-row-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--teal-mid);
  opacity: 0.55;
}

.bag-row-main { grid-area: name; min-width: 0; }
.bag-row-main h3 {
  font-size: 0.95rem;
  line-height: 1.3;
  margin: 0;
  color: var(--teal-deep);
}
.bag-row-main h3 a { color: inherit; }
.bag-row-main h3 a:hover { color: var(--teal-primary); }
/* The order's own detail — choices, a voucher's recipient, the customer's
   instructions. One line, clamped: a basket is for checking, and the full
   text is on the product page and in the confirmation. */
.bag-row-detail {
  margin: 2px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--teal-mid);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The three numbers sit together on their own line under the name. */
.bag-row-prices {
  grid-area: prices;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
}
.bag-row-prices .bag-row-cell { display: inline-flex; align-items: center; gap: 6px; }
/* Pushed to the far end of the numbers line, where a thumb reaches it. */
.bag-row-prices .bag-row-remove { margin-left: auto; }

.bag-row-cell { min-width: 0; }
/* "Price", "Quantity", "Total" — announced, never drawn. The visible column
   headings are the header row on a wide screen; on a phone the three numbers
   read perfectly well without three words in front of them, and the words
   were exactly what pushed each row onto three lines. */
.bag-cell-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.bag-row .price { font-size: 0.95rem; font-weight: 700; color: var(--teal-deep); }
.bag-row-total .price { font-size: 1rem; }
.bag-qty-static { font-size: 0.86rem; color: var(--teal-mid); }

/* The stepper, the same one the shop shelves use. */
.bag-qty { flex: 0 0 auto; }
.bag-qty .qty-step { flex: 0 0 32px; min-height: 36px; }
.bag-qty-input {
  flex: 0 0 34px;
  width: 34px;
  min-width: 0;
  min-height: 36px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  text-align: center;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
  -moz-appearance: textfield;
  appearance: textfield;
}
.bag-qty-input::-webkit-outer-spin-button,
.bag-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bag-qty-input:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: -2px; }

/* Remove: a bin, with the word beside it where there is room. The button is
   44px square on a phone even though the icon is 18px — the target is what
   matters, not the drawing. */
.bag-row-remove { grid-area: remove; justify-self: end; }
.bag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--teal-mid);
  font: 600 0.8rem/1 var(--font-body);
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.bag-remove svg { width: 18px; height: 18px; flex: 0 0 18px; }
.bag-remove:hover { background: rgba(158, 42, 43, 0.09); color: #9e2a2b; }
.bag-remove:focus-visible { outline: 2px solid var(--teal-primary); outline-offset: 2px; }
.bag-remove-text { display: none; }

.bag-row-problem {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 0.84rem;
  border-bottom: 1px solid rgba(41, 75, 78, 0.12);
}

/* ---- nothing in the basket has a photograph ----
   The column goes, rather than standing there as a row of empty squares.
   It returns on its own as soon as one product in the basket has one. */
.bag-list--no-photos .bag-row-thumb { display: none; }
.bag-list--no-photos .bag-row {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "name"
    "prices";
}

/* The heading row is for the wide layout only. */
.bag-row--head { display: none; }

@media (min-width: 720px) {
  .bag-row {
    grid-template-columns: 56px minmax(0, 1fr) 84px 132px 84px 108px;
    grid-template-areas: "thumb name unit qty total remove";
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
  }
  .bag-row-thumb { width: 56px; height: 56px; align-self: center; }
  .bag-row-main h3 { font-size: 1rem; }
  /* The wrapper steps out of the way so its three children become
     columns of the row itself, which is what lines the prices up. */
  .bag-row-prices { display: contents; }
  .bag-row-prices .bag-row-cell { display: block; }
  .bag-row-unit { grid-area: unit; }
  .bag-row-qty { grid-area: qty; }
  .bag-row-total { grid-area: total; text-align: right; }
  .bag-row-remove { grid-area: remove; justify-self: end; }
  .bag-row--head {
    display: grid;
    padding-top: 14px;
    padding-bottom: 10px;
    background: rgba(41, 75, 78, 0.04);
    font: 700 0.7rem/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal-mid);
  }
  .bag-list--no-photos .bag-row {
    grid-template-columns: minmax(0, 1fr) 84px 132px 84px 108px;
    grid-template-areas: "name unit qty total remove";
  }
  .bag-row--head .bag-row-total { text-align: right; }
  .bag-remove-text { display: inline; }
  .bag-row-problem { padding-left: 18px; padding-right: 18px; }
}

/* ---- 3. the summary panel ---- */
.bag-summary-head {
  font-size: 1.12rem;
  margin: 0 0 12px;
  color: var(--teal-deep);
}
.bag-summary-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--teal-mid);
  margin-bottom: 8px;
}
.bag-summary-count { font-size: 0.95rem; font-weight: 700; color: var(--teal-deep); }
.bag-summary .bag-total {
  padding-top: 10px;
  border-top: 1px solid rgba(41, 75, 78, 0.14);
}
.bag-summary .bag-total span:first-child { font-size: 1.12rem; }
.bag-summary .bag-total .price { font-size: 1.3rem; }
.bag-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.bag-actions .btn { width: 100%; }
.bag-actions .form-error { margin: 0; }

/* ---- 4. "View The Shop Gallery", under the Made Locally message ---- */
.shop-made-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-basis: 100%;
  justify-content: center;
  min-height: 36px;
  color: var(--teal-primary);
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.shop-made-link svg { width: 15px; height: 15px; flex: 0 0 15px; }
.shop-made-link:hover { color: var(--teal-deep); }

/* ---- 5. where that link lands in the Gallery ----
   gallery.html?category=shop#gallery — the query string presses "The Shop"
   filter (js/main.js), the fragment puts the filters and the photographs on
   screen. Same header allowance as #products on the shop. */
#gallery { scroll-margin-top: 84px; }
@media (min-width: 1024px) { #gallery { scroll-margin-top: 102px; } }

/* ---- 6. booking form status (2026-09-15) ----
   The booking form used to be a mailto: link with no result to show; now a
   real submission needs a success/error message in the same place. Reuses
   .form-note's sizing, just adds colour and the button's own disabled look —
   nothing else on the page changed. */
.booking-status { margin: 14px 0 0; font-size: 0.9rem; font-weight: 600; }
.booking-status--success { color: var(--teal-deep); }
.booking-status--error { color: #7d332c; }
.enquiry-form button[disabled] { opacity: 0.65; cursor: not-allowed; }