/* ==========================================================================
   Bailey's Meat Market — site styles
   The look follows the store's own logo and printed flyers: deep maroon,
   white, flyer green for prices, grey product panels, brush-stroke textures,
   heavy serif product names and a script "Bailey's".
   ========================================================================== */

:root {
  /* Brand colours (sampled from the logo and flyer) */
  --c-maroon: #801b23;
  --c-maroon-dark: #5c1219;
  --c-maroon-soft: #f7e8e9;
  --c-green: #1d6b12;
  --c-green-dark: #155009;
  --c-panel: #e4e4e4;             /* flyer product panel grey */
  --c-charcoal: #232323;

  /* Neutrals */
  --c-page: #ffffff;
  --c-alt: #f3f2f0;
  --c-ink: #161616;
  --c-muted: #5b5b5b;
  --c-line: #dcdad6;

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-price: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-script: "Allura", "Brush Script MT", cursive;

  /* Shape & rhythm */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 6px rgba(0, 0, 0, .05);
  --shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 14px 34px rgba(0, 0, 0, .12);
  --container: 1180px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(56px, 8vw, 100px);

  /* Brush strokes, like the green price labels and the "EST. 1995" swash */
  --brush-green: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 412 80' preserveAspectRatio='none'%3E%3Cpath fill='%231d6b12' d='M14.0 7.9 L26.0 9.9 L38.0 9.2 L50.0 6.3 L62.0 6.2 L74.0 6.4 L86.0 8.5 L98.0 6.7 L110.0 9.8 L122.0 9.5 L134.0 11.9 L146.0 11.2 L158.0 6.9 L170.0 7.9 L182.0 7.1 L194.0 9.8 L206.0 9.3 L218.0 6.4 L230.0 10.1 L242.0 7.9 L254.0 8.7 L266.0 10.8 L278.0 7.5 L290.0 9.2 L302.0 10.4 L314.0 11.9 L326.0 8.5 L338.0 6.9 L350.0 6.2 L362.0 10.6 L374.0 11.3 L386.0 10.2 L392.8 8.8 L395.4 19.6 L391.7 27.4 L387.6 36.4 L393.5 46.4 L395.2 52.4 L390.9 62.8 L387.2 70.8 L386.0 71.6 L374.0 69.9 L362.0 71.4 L350.0 72.0 L338.0 70.9 L326.0 72.5 L314.0 68.7 L302.0 69.7 L290.0 73.3 L278.0 71.4 L266.0 72.2 L254.0 69.8 L242.0 71.5 L230.0 70.6 L218.0 69.2 L206.0 68.4 L194.0 70.2 L182.0 71.5 L170.0 72.9 L158.0 68.7 L146.0 69.7 L134.0 68.3 L122.0 70.4 L110.0 73.7 L98.0 69.3 L86.0 73.0 L74.0 68.5 L62.0 70.6 L50.0 71.0 L38.0 70.2 L26.0 68.4 L14.0 68.9 L11.3 69.5 L12.4 63.2 L11.7 52.3 L9.1 45.9 L12.2 35.4 L7.5 28.2 L4.8 19.3 L10.2 8.7Z M14 6h55v1.6h-58z M384 3h26v1.4h-26z M19 74h44v1.6h-31z M390 73h29v1.4h-34z '/%3E%3C/svg%3E");
  --brush-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 412 80' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M14.0 8.7 L26.0 11.5 L38.0 9.0 L50.0 7.1 L62.0 9.8 L74.0 6.6 L86.0 6.5 L98.0 10.2 L110.0 11.9 L122.0 9.9 L134.0 6.9 L146.0 9.2 L158.0 7.1 L170.0 6.2 L182.0 8.6 L194.0 9.1 L206.0 9.0 L218.0 8.7 L230.0 12.0 L242.0 11.0 L254.0 7.9 L266.0 7.7 L278.0 10.6 L290.0 11.1 L302.0 11.7 L314.0 6.0 L326.0 11.5 L338.0 11.9 L350.0 6.4 L362.0 10.7 L374.0 6.5 L386.0 11.8 L388.2 8.0 L388.0 16.1 L395.0 25.4 L392.6 35.4 L388.9 45.4 L388.3 53.9 L388.2 61.8 L389.1 70.1 L386.0 72.5 L374.0 70.0 L362.0 69.6 L350.0 71.8 L338.0 70.4 L326.0 70.8 L314.0 69.3 L302.0 73.1 L290.0 70.3 L278.0 70.4 L266.0 68.4 L254.0 69.4 L242.0 72.2 L230.0 74.0 L218.0 69.7 L206.0 72.0 L194.0 71.8 L182.0 73.1 L170.0 70.8 L158.0 69.5 L146.0 68.4 L134.0 68.1 L122.0 71.7 L110.0 73.8 L98.0 68.3 L86.0 72.9 L74.0 69.8 L62.0 72.8 L50.0 71.1 L38.0 71.5 L26.0 70.8 L14.0 71.4 L3.3 72.2 L10.0 63.7 L10.9 52.9 L4.5 45.0 L12.0 37.5 L10.9 25.7 L5.3 17.2 L10.0 7.3Z M4 6h43v1.6h-30z M366 5h31v1.4h-44z M19 74h43v1.6h-55z M383 71h43v1.4h-40z '/%3E%3C/svg%3E");
  --brush-maroon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-6 0 412 80' preserveAspectRatio='none'%3E%3Cpath fill='%23801b23' d='M14.0 7.4 L26.0 8.2 L38.0 9.8 L50.0 6.1 L62.0 7.6 L74.0 12.0 L86.0 11.0 L98.0 9.8 L110.0 9.8 L122.0 9.1 L134.0 10.0 L146.0 10.5 L158.0 7.8 L170.0 11.2 L182.0 10.3 L194.0 10.3 L206.0 8.4 L218.0 8.7 L230.0 11.3 L242.0 6.8 L254.0 11.8 L266.0 9.8 L278.0 9.0 L290.0 8.1 L302.0 9.5 L314.0 10.1 L326.0 11.1 L338.0 10.0 L350.0 11.2 L362.0 11.4 L374.0 10.3 L386.0 11.0 L389.8 7.3 L395.5 19.8 L387.9 27.9 L391.1 34.2 L389.9 45.5 L395.7 51.5 L393.1 60.3 L394.2 70.3 L386.0 71.4 L374.0 69.3 L362.0 71.4 L350.0 73.8 L338.0 69.0 L326.0 73.9 L314.0 73.6 L302.0 73.4 L290.0 71.5 L278.0 70.3 L266.0 69.8 L254.0 70.6 L242.0 69.3 L230.0 68.6 L218.0 73.6 L206.0 72.8 L194.0 73.5 L182.0 73.3 L170.0 70.8 L158.0 68.2 L146.0 71.5 L134.0 68.4 L122.0 72.4 L110.0 73.2 L98.0 68.9 L86.0 70.9 L74.0 70.8 L62.0 69.4 L50.0 73.0 L38.0 68.4 L26.0 71.6 L14.0 71.3 L4.2 72.9 L7.9 64.1 L9.9 51.6 L7.0 42.6 L11.0 35.2 L6.9 25.3 L12.6 19.3 L9.9 10.8Z M36 6h35v1.6h-38z M369 7h35v1.4h-34z M25 74h58v1.6h-40z M373 76h26v1.4h-28z '/%3E%3C/svg%3E");
}

/* ---------- base ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.icon-sprite { display: none; }  /* the <symbol> sheet the icons <use>; a class, not style=, so the CSP needs no 'unsafe-inline' */  /* never let a component's display rule un-hide it */

/* Grid children may shrink below their content width, so nothing forces
   sideways scrolling on narrow phones (the smallest-phone overrides for
   buttons and prices are at the end of this file) */
.split > *, .visit-grid > *, .deal-row > *, .hero__inner > *, .footer-grid > *,
.cat-grid > *, .aisle-list > *, .pick-grid > *, .origin-grid > *, .inside__grid > *, .form-grid > *,
.flyer-text__grid > * { min-width: 0; }
.contact-lines a, .footer-contact a, .info-card address { overflow-wrap: anywhere; }
img { height: auto; }

a { color: var(--c-maroon); text-underline-offset: .18em; }
a:hover { color: var(--c-green); }
a[href^="tel:"] { white-space: nowrap; } /* never split a phone number across lines */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 3.8rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--c-green);
  outline-offset: 2px;
  border-radius: 2px;
}

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

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

.icon { width: 1.25em; height: 1.25em; flex: none; }
.icon--sm { width: 1em; height: 1em; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--c-ink); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: #fff; }

/* ---------- buttons and pills ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .85em 1.4em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: 700 .86rem/1.2 var(--font-body);
  letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--c-maroon); color: #fff; }
.btn--primary:hover { background: var(--c-maroon-dark); color: #fff; }
.btn--green { background: var(--c-green); color: #fff; }
.btn--green:hover { background: var(--c-green-dark); color: #fff; }
/* White button for maroon backgrounds (header, CTA bands) */
.btn--accent { background: #fff; color: var(--c-maroon); }
.btn--accent:hover { background: var(--c-green); color: #fff; }
.btn--ghost { border-color: currentColor; color: var(--c-maroon); background: transparent; }
.btn--ghost:hover { background: var(--c-maroon); border-color: var(--c-maroon); color: #fff; }
.btn--light { border-color: rgba(255, 255, 255, .7); color: #fff; background: transparent; }
.btn--light:hover { background: #fff; color: var(--c-maroon); border-color: #fff; }

.status-pill {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 700; font-size: .82rem;
}
.status-pill::before {
  content: ""; width: .55em; height: .55em; border-radius: 50%;
  background: #9a9a9a;
}
.status-pill.is-open::before { background: #57d36b; box-shadow: 0 0 0 3px rgba(87, 211, 107, .3); }
.status-pill.is-closed::before { background: #ff8a80; }

/* Section kicker in script, echoing the "Bailey's" lettering in the logo */
.eyebrow {
  display: block;
  margin-bottom: .1rem;
  color: var(--c-maroon);
  font-family: var(--font-script);
  font-size: 2.1rem; font-weight: 400; line-height: 1.1;
}
.eyebrow .icon { display: none; }

.lead { font-size: 1.1rem; color: var(--c-muted); max-width: 60ch; }

/* Brush-stroke price label, as on the flyer */
.price-brush {
  display: inline-block;
  padding: .12em .7em .18em;
  background: var(--brush-green) center / 100% 100% no-repeat;
  color: #fff;
  font-family: var(--font-price); font-weight: 700; font-size: 1.85rem; line-height: 1.1;
  white-space: nowrap;
}
.price-brush small { font-size: .62em; font-weight: 600; margin-left: .1em; }

/* ---------- draft banner & top bar ---------- */

.draft-banner {
  background: var(--c-maroon-soft);
  color: var(--c-maroon-dark);
  font-size: .82rem;
  text-align: center;
  padding: 6px var(--gutter);
}

/* Dark maroon strip that sits on top of the header as one block */
.topbar {
  background: var(--c-maroon-dark); color: rgba(255, 255, 255, .88);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.topbar__inner { display: flex; align-items: center; gap: 22px; min-height: 38px; }
/* The header is built by js/layout.js once the page has arrived, so its slot
   holds the space it will take: without this, everything below jumped down
   ~120px as the header appeared (Lighthouse's layout shift was 1.0 on the
   flyer page). The two numbers are the top bar (39px, one line at every
   width) plus --header-h, and they change together at 720px. */
#site-header {
  display: block;
  min-height: calc(39px + var(--header-h));
  background: linear-gradient(var(--c-maroon-dark) 39px, var(--c-maroon) 39px);
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar__link { display: inline-flex; align-items: center; gap: .45em; }
.topbar__social { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* The store's pages are where each new flyer appears first, so the links are
   set in each network's own colour, which is what people recognise, labelled
   on wide screens and kept as round buttons on a phone rather than hidden. */
.topbar .social-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px 0 6px;
  border-radius: 999px;
  color: #fff;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: transform .15s, filter .15s;
}
.topbar .social-chip:hover, .topbar .social-chip:focus-visible { color: #fff; transform: translateY(-1px); filter: brightness(1.1); }
.topbar .social-chip .icon { width: 18px; height: 18px; }
.social-chip--fb { background: #1877f2; }
.social-chip--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
@media (max-width: 1100px) {
  .topbar .social-chip { flex: none; width: 30px; height: 30px; padding: 0; justify-content: center; }
  .social-chip__label { display: none; }
}
/* Below ~800px the address no longer fits beside the rest on one line; it is
   in the footer and on the contact page, and the header's reserved height
   depends on this bar staying one line. */
@media (max-width: 820px) {
  .topbar__address { display: none; }
}
.topbar .status-pill { color: #fff; font-size: .78rem; }

/* ---------- header & navigation ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-maroon);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}
/* The sticky search bar on the In Store page parks right under the header,
   so its height is a variable both can read and neither can drift from. */
:root { --header-h: 84px; }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.brand__mark { width: auto; height: 62px; }
.brand__wordmark { width: auto; height: 44px; }

.site-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .3em;
  padding: .6em .75em;
  border: 0; border-radius: var(--radius-sm);
  background: none;
  color: #fff;
  font: 600 .82rem/1.2 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 #fff; border-radius: 0; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, .5); border-radius: var(--radius);
  background: transparent; color: #fff;
  cursor: pointer;
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; left: 0; right: 0; top: var(--nav-top, 0); bottom: 0;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 18px var(--gutter) 32px;
    background: var(--c-maroon-dark);
    overflow-y: auto;
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-link {
    width: 100%; justify-content: space-between;
    padding: 15px 4px; border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
    font-size: .95rem;
  }
  .nav-link[aria-current="page"] { box-shadow: inset 4px 0 0 #fff; padding-left: 14px; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 720px) {
  .topbar__address { display: none; }
  .topbar__inner { justify-content: space-between; gap: 10px; }
  .topbar__social { margin-left: 0; gap: 8px; }
  .topbar .social-chip { flex: none; width: 30px; height: 30px; padding: 0; justify-content: center; }
  .social-chip__label { display: none; }
  .topbar .status-pill { white-space: nowrap; min-width: 0; }
  :root { --header-h: 72px; }
  .site-header__inner { min-height: var(--header-h); }
  .brand__mark { height: 50px; }
  .brand__wordmark { height: 34px; }
}
/* On a narrow phone the number becomes a round call button beside the two
   social ones, so the opening hours stay on one line. The number is still
   read out, and the footer of every page spells it out in full. */
@media (max-width: 480px) {
  .topbar__social { margin-left: auto; }
  .topbar__phone {
    flex: none; justify-content: center; width: 30px; height: 30px;
    border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px;
  }
  .topbar__phone-num {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .topbar__inner { gap: 6px; }
  .topbar__social { gap: 6px; }
  .topbar .status-pill { font-size: .66rem; letter-spacing: .01em; }
}

/* ---------- sections ---------- */

.section { padding: var(--section) 0; }
.section--sand { background: var(--c-alt); }
.section--paper { background: #fff; }
.section--pattern { background: var(--c-page); }
.section--flush-top { padding-top: 0; }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 { margin: 0; }
.section-head p { margin: .6em 0 0; color: var(--c-muted); max-width: 56ch; }
.section-head--center { flex-direction: column; align-items: center; text-align: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em;
  font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-maroon); text-decoration: none;
}
.link-arrow .icon { transition: transform .15s; }
.link-arrow:hover .icon { transform: translateX(3px); }

/* ---------- hero (home): the "Nice to Meat you" banner ---------- */

.hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 90px);
  background: var(--c-maroon);
  color: #fff;
}
.hero__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }

.hero__title { margin: 0 0 1.4rem; }
.hero__title img { width: min(100%, 470px); }
.hero__lead { font-size: 1.1rem; color: rgba(255, 255, 255, .88); max-width: 52ch; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__address {
  margin: 2rem 0 0;
  font-size: .95rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
}

.hero__art { display: flex; flex-direction: column; align-items: center; justify-self: center; width: min(100%, 400px); }
.hero__logo { width: 100%; }

/* Reads as the bottom line of the logo lockup, under EST.1995: the same
   Playfair as the headings, italic, in the pink the flyer hero uses. Rules
   flank it rather than lead into it, because it is centred under the mark. */
.hero__strap {
  display: flex; align-items: center; gap: 16px;
  max-width: 100%;
  margin: 20px 0 0;
  font-family: var(--font-display); font-weight: 700; font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.65rem);
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
}
/* The rules give way rather than push the line wider than the logo above it */
.hero__strap::before,
.hero__strap::after {
  content: ""; flex: 0 1 auto; min-width: 0;
  width: clamp(22px, 2.6vw, 40px); height: 2px;
  background: currentColor;
}
/* On the narrowest phones there is no room left for them to be more than
   specks either side, so they go and the line stands on its own */
@media (max-width: 400px) {
  .hero__strap::before, .hero__strap::after { display: none; }
}

/* Home: the week's deals sit directly below, so the banner doesn't have to
   fill the screen before a shopper sees a price */
.hero--compact { padding-bottom: clamp(40px, 4.5vw, 62px); }

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__art { width: min(100%, 320px); margin-top: 8px; }
}
@media (max-width: 480px) {
  .hero__art { width: 78%; }
}

/* ---------- facts band ---------- */

.facts { background: var(--c-maroon-dark); color: #fff; }
.facts__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin: 0 auto; padding-top: 0; padding-bottom: 0; list-style: none;
}
.facts__grid li {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 16px;
  border-left: 1px solid rgba(255, 255, 255, .14);
}
.facts__grid li:first-child { border-left: 0; }
.facts__big { font-family: var(--font-price); font-weight: 700; font-size: 2.6rem; line-height: 1; letter-spacing: .01em; }
.facts__label { margin-top: 8px; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
@media (max-width: 760px) {
  .facts__grid { grid-template-columns: 1fr 1fr; }
  .facts__grid li:nth-child(3) { border-left: 0; }
  .facts__grid li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
  .facts__big { font-size: 2.1rem; }
}

/* ---------- this week's deals (home) ---------- */

/* Three big flyer panels across the top of the home page: the items marked
   headline: true in js/data.js */
.deals { padding-top: clamp(40px, 5vw, 66px); }
.deal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.deal-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 46px 22px 22px;   /* room at the top for the LOCAL stamp */
  background: var(--c-panel);
  border: 2px solid var(--c-ink);
  color: var(--c-ink); text-decoration: none; text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.deal-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--c-ink); }
.deal-card__kicker {
  font-family: var(--font-price); font-weight: 600; font-size: .82rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-maroon);
}
/* Product photo cut out of the flyer. The cut-outs are every shape the week's
   artwork happens to give, so the box is a fixed height and the photo is
   bounded by it, sitting on the bottom edge so a row of them shares a line.
   Flex, not grid: an auto-sized grid row takes its height from the photo, so a
   photo asking for 100% of it is circular and silently falls back to its own
   height. That is what let a tall cut-out spill over the name below. */
.deal-card__photo {
  display: flex; align-items: flex-end; justify-content: center;
  height: 118px; width: 100%;
  margin: 10px 0 2px;
}
.deal-card__photo img {
  max-height: 100%; max-width: 100%;
  width: auto; height: auto;
  object-fit: contain;
}

.deal-card__name {
  margin: .25em 0 .15em;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem); font-weight: 900; line-height: 1.1;
  text-transform: uppercase;
}
.deal-card__note {
  margin: 0;
  color: var(--c-maroon);
  font-family: var(--font-price); font-weight: 600; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
}
.deal-card__price { margin: auto 0 0; padding-top: 20px; }
.deal-card__price .price-brush { font-size: clamp(1.9rem, 6vw, 2.7rem); }
.deal-card__alt { margin: 8px 0 0; color: var(--c-muted); font-size: .85rem; font-weight: 600; }
.deal-card__alt s { opacity: .75; }
.deal-card .link-arrow { margin-top: 14px; color: var(--c-maroon); font-size: .85rem; }

.deals__more { margin: 28px 0 0; text-align: center; font-weight: 600; }
.deals__more a { display: inline-flex; align-items: center; gap: .5em; }

@media (max-width: 900px) { .deal-row { grid-template-columns: 1fr; } }

/* Red "LOCAL" stamp, as printed on the flyer */
.stamp {
  position: absolute; left: 10px; top: 10px;
  padding: .1em .45em;
  border: 2px solid var(--c-maroon);
  color: var(--c-maroon);
  font-family: var(--font-price); font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  transform: rotate(-6deg);
}

/* ---------- weekly flyer page ---------- */

.flyer-hero {
  position: relative; overflow: hidden;
  padding: clamp(44px, 6vw, 80px) 0 clamp(56px, 7vw, 96px);
  background: var(--c-maroon);
  color: #fff;
}
.flyer-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.flyer-hero__h1 {
  margin: 0 0 .45em;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.02; letter-spacing: .01em;
  color: #fff;
}
.flyer-hero__h1 em { font-style: normal; color: #f3c9cc; }
.flyer-hero__dates {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 1.4rem; padding: .5em 1em;
  border: 2px solid rgba(255, 255, 255, .85);
  font-family: var(--font-price); font-weight: 600; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase;
}
.flyer-hero__lead { max-width: 48ch; margin-bottom: 2rem; font-size: 1.08rem; color: rgba(255, 255, 255, .86); }

/* Paper copy of the printed flyer's cover */
.flyer-cover {
  display: block; position: relative; z-index: 0;  /* keeps ::before in front of the section background */
  max-width: 480px; width: 100%; justify-self: center;
  background: #fff; color: var(--c-ink);
  text-decoration: none;
  transform: rotate(2deg);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 30px 60px rgba(0, 0, 0, .35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.flyer-cover:hover { transform: rotate(0) translateY(-6px); color: var(--c-ink); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }
.flyer-cover::before {  /* a second sheet peeking out underneath */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #f1efeb; transform: rotate(-4deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
.flyer-cover__head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  background: var(--c-maroon);
}
.flyer-cover__head img { height: 58px; width: auto; }
.flyer-cover__head .flyer-cover__wordmark { height: 40px; }
.flyer-cover__dates {
  margin-left: auto; padding: 6px 10px;
  border: 2px solid #fff; color: #fff; text-align: center;
  font-family: var(--font-price); font-weight: 600; font-size: .78rem; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase;
}
.flyer-cover__deals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.flyer-cover__deal {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 132px; padding: 30px 8px 12px;
  background: var(--c-panel); border: 1.5px solid var(--c-ink);
  text-align: center;
}
.flyer-cover__name { font-family: var(--font-display); font-weight: 900; font-size: 1rem; line-height: 1.15; text-transform: uppercase; }
.flyer-cover__deal .price-brush { font-size: 1.35rem; }
.flyer-cover__bar {
  display: flex; justify-content: space-between;
  margin: 0 14px 14px; padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--c-green); color: #fff;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.flyer-cover__cta {
  position: absolute; left: 50%; bottom: -20px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .5em;
  padding: .75em 1.3em;
  border-radius: 999px;
  background: var(--c-ink); color: #fff;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  box-shadow: var(--shadow);
}
.flyer-cover:hover .flyer-cover__cta { background: var(--c-green); }

/* Home page: the flyer beside the copy */
.flyer-band .flyer-cover, .flyer-band .flyer-sheet { margin-bottom: 26px; }

/* The store's real flyer artwork, shown as a printed sheet. It takes the
   drawn cover's place while a flyer is live; the drawn one returns once the
   week is over, because the artwork has this week's prices printed on it. */
.flyer-sheet {
  display: block; position: relative; z-index: 0;
  max-width: 560px; width: 100%; justify-self: center;
  padding: 10px 10px 12px;
  background: #fff;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .05), 0 30px 60px rgba(0, 0, 0, .35);
  transform: rotate(1.5deg);
  transition: transform .25s ease, box-shadow .25s ease;
}
.flyer-sheet::before {  /* a second sheet peeking out underneath */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: #f1efeb; transform: rotate(-3deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .25);
}
.flyer-sheet img { width: 100%; height: auto; }
.flyer-sheet:hover { transform: rotate(0) translateY(-6px); box-shadow: 0 40px 80px rgba(0, 0, 0, .4); }
.flyer-sheet:hover .flyer-cover__cta { background: var(--c-green); }

/* Deals by department */
.inside { background: #f7f3ec; }
.inside__note { color: var(--c-muted); font-size: .9rem; }
.inside__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.inside__tile {
  display: flex; flex-direction: column; gap: 10px;
  padding: 28px 26px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 5px solid var(--c-maroon);
  color: var(--c-ink); text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.inside__tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); color: var(--c-ink); }
.inside__count { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c-maroon); }
.inside__name { font-family: var(--font-body); font-weight: 800; font-size: 1.9rem; line-height: 1; text-transform: uppercase; }
.inside__from { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 600; color: var(--c-muted); }
.inside__from .price-brush { font-size: 1.45rem; }
.inside__list { color: var(--c-muted); font-size: .9rem; }
.inside__tile .link-arrow { margin-top: auto; padding-top: 6px; }

/* The printed flyer, one full-width image per page */
.flyer-pages__list { display: grid; gap: clamp(18px, 3vw, 32px); }
.flyer-page {
  display: block;
  background: var(--c-panel);
  border: 1.5px solid var(--c-ink);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s;
}
.flyer-page:hover { box-shadow: var(--shadow); }
.flyer-page img { width: 100%; }

/* The same deals as a list (opens like the FAQ; see the FAQ rules) */
.flyer-text { margin-top: 28px; }
.flyer-text__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 8px 40px;
  padding: 6px 0 20px;
}
.flyer-text__grid h3 { margin: 0 0 .3em; font-size: 1.15rem; }
.flyer-text__grid ul { margin: 0 0 14px; padding: 0; list-style: none; }
.flyer-text__grid li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--c-line);
  font-size: .92rem;
}
.flyer-text__grid li small {
  display: block;
  color: var(--c-maroon);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.flyer-text__price { flex: none; font-family: var(--font-price); font-weight: 600; font-size: 1.05rem; }

/* "On your phone": the tick list under the heading. There used to be a phone
   mock-up beside it with the flyer inside. Framing blyyss.ca stopped working,
   and our own artwork in its place did not render for everyone either, so it
   went: the flyer pages are already on this page full width, which is what the
   frame was a smaller copy of. */
.phone-feature__list { display: grid; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; font-weight: 600; }
.phone-feature__list li { display: flex; align-items: center; gap: 10px; }
.phone-feature__list .icon { color: var(--c-green); }

@media (max-width: 900px) {
  .flyer-hero__inner { grid-template-columns: 1fr; }
  .flyer-cover, .flyer-sheet { margin-bottom: 20px; }
}
@media (max-width: 480px) {
  .flyer-cover, .flyer-sheet { transform: none; }
  .flyer-cover__head img { height: 44px; }
  .flyer-cover__head .flyer-cover__wordmark { display: none; }
  .flyer-cover__deal { min-height: 118px; padding-top: 28px; }
  .flyer-cover__name { font-size: .82rem; }
  .flyer-cover__deal .price-brush { font-size: 1.1rem; }
  .flyer-cover__bar { font-size: .62rem; }
}

@media (max-width: 560px) {
  .stamp { left: 8px; top: 8px; font-size: .68rem; }
  .deal-card { padding: 40px 16px 20px; }
}

/* ---------- story / split blocks ---------- */

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split--reverse > :first-child { order: 0; }
}

.origin-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 28px; padding: 0; list-style: none; }
.origin-list li {
  padding: .4em .95em;
  border: 1.5px solid var(--c-maroon);
  border-radius: var(--radius-sm);
  color: var(--c-maroon); font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}

/* Typographic panel: logo, "Since 1995" */
.since-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1 / 1;
  max-width: 480px; width: 100%; justify-self: center;
  padding: 36px;
  background: var(--c-maroon);
  color: #fff;
  box-shadow: inset 0 0 0 14px var(--c-maroon), inset 0 0 0 16px rgba(255, 255, 255, .55);
}
.since-panel img { width: 34%; margin-bottom: 18px; }
.since-panel__kicker { font-family: var(--font-script); font-size: 2.6rem; line-height: 1; }
.since-panel__year { font-family: var(--font-price); font-weight: 700; font-size: clamp(4rem, 9vw, 6.5rem); line-height: .95; letter-spacing: .02em; }
.since-panel__cap { margin-top: 12px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }

/* ---------- visit / hours ---------- */

.visit-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 28px; align-items: stretch; }
@media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } }

.info-card {
  padding: clamp(24px, 4vw, 34px);
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
/* h2 on a page where the card is a top-level section (contact), h3 where it
   sits under one (home); both look the same */
.info-card h2, .info-card h3 { display: flex; align-items: center; gap: .5em; font-size: 1.2rem; }
.info-card h2 .icon, .info-card h3 .icon { color: var(--c-maroon); }
.info-card + .info-card { margin-top: 20px; }
.info-card address { font-style: normal; font-size: 1.02rem; margin-bottom: 1rem; }
.contact-lines { display: grid; gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; }
.contact-lines li { display: flex; align-items: center; gap: 12px; }
.contact-lines .icon { color: var(--c-maroon); }
.contact-lines a { font-weight: 600; }

.hours-list { margin: 0; padding: 0; list-style: none; }
.hours-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 12px; border-radius: var(--radius-sm); }
.hours-list li:nth-child(odd) { background: rgba(0, 0, 0, .03); }
.hours-list li.is-today { background: var(--c-maroon-soft); color: var(--c-maroon); font-weight: 700; }
.hours-list li.is-today span:first-child::after { content: " · Today"; font-weight: 600; }

.map-frame {
  position: relative;
  min-height: 380px; height: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-alt);
  border: 1px solid var(--c-line);
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- CTA band ---------- */

.cta-band {
  padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 60px);
  border-radius: var(--radius);
  background: var(--c-maroon);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: .25em; }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 52ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- page hero (inner pages) ---------- */

.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(44px, 6vw, 76px) 0 clamp(40px, 5vw, 60px);
  background: var(--c-maroon);
  color: #fff;
}
/* Large faint logo on the right of every page header */
.page-hero::after {
  content: ""; position: absolute; right: max(-60px, calc((100vw - var(--container)) / 2 - 40px)); top: 50%;
  width: 360px; height: 414px; transform: translateY(-50%);
  background: url("../images/logo-mark-white.webp") center / contain no-repeat;
  opacity: .1;
  pointer-events: none;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__inner > div { max-width: 760px; }
.page-hero h1 { color: #fff; font-size: clamp(2.1rem, 4.6vw, 3.3rem); }
.page-hero .lead { margin-bottom: 0; color: rgba(255, 255, 255, .85); }
.page-hero .status-pill { color: #fff; }
.page-hero__badge {
  display: grid; place-items: center;
  width: 170px; height: 170px;
  border-radius: 50%;
  color: #fff;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .95), inset 0 0 0 9px var(--c-maroon), inset 0 0 0 10.5px rgba(255, 255, 255, .45);
}
.page-hero__badge .icon { width: 70px; height: 70px; stroke-width: 1.35; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.page-hero .btn--primary { background: #fff; color: var(--c-maroon); }
.page-hero .btn--primary:hover { background: var(--c-green); color: #fff; }
.page-hero .btn--ghost { color: #fff; }
.page-hero .btn--ghost:hover { background: #fff; border-color: #fff; color: var(--c-maroon); }
.breadcrumb { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.breadcrumb li + li::before { content: "/"; margin-right: 6px; color: rgba(255, 255, 255, .4); }
.breadcrumb a { color: rgba(255, 255, 255, .85); }
.breadcrumb a:hover { color: #fff; }
@media (max-width: 720px) {
  .page-hero__inner { grid-template-columns: 1fr; }
  .page-hero__badge { display: none; }
}

/* ---------- shared page blocks: category cards, promise, steps ---------- */

/* What the flyer announces without a price: the turkey and corned beef on the
   Oct 14 one. Reads as a note from the counter rather than a priced deal. */
.counter-note {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 24px 28px;
  background: var(--c-alt);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-green);
  border-radius: var(--radius);
}
.counter-note > div { flex: 1 1 320px; min-width: 0; }
.counter-note h2 { margin: 2px 0 6px; font-size: clamp(1.15rem, 2vw, 1.5rem); }
.counter-note p { margin: 0; color: var(--c-muted); font-size: .95rem; }
.counter-note .eyebrow { margin: 0; }
.counter-note__icon {
  flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--c-green); color: #fff;
}
.counter-note__icon .icon { width: 26px; height: 26px; }
@media (max-width: 560px) {
  .counter-note { gap: 16px; padding: 20px; }
  .counter-note__icon { width: 44px; height: 44px; }
}

/* ---------- In Store: the owner's own picks ----------
   Set as a nameplate, with the size he wrote underneath, the aisle as a tag
   and the pickup button at the foot. The photo above the name is optional,
   so a card still stands up on the name alone. */
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.pick {
  display: flex; flex-direction: column;
  padding: 20px 18px 16px;
  background: #fff;
  border: 1px solid var(--c-line); border-top: 3px solid var(--c-maroon);
  border-radius: var(--radius);
}
/* A fixed box rather than the image's own size, so one tall packshot cannot
   stretch its row and the cards stay on a grid whether or not they have one. */
.pick__shot {
  align-self: center;
  width: auto; height: 104px; max-width: 100%;
  margin-bottom: 12px;
  object-fit: contain; object-position: center bottom;
}
.pick__name {
  margin: 0;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.25;
}
.pick__size {
  margin: 6px 0 0;
  color: var(--c-green);
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
}
.pick__aisle {
  margin-top: auto; padding-top: 14px;
  color: var(--c-muted);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  text-decoration: none;
}
.pick__aisle:hover, .pick__aisle:focus-visible { color: var(--c-maroon); text-decoration: underline; }
@media (max-width: 560px) {
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .pick { padding: 16px 14px 13px; }
}

/* ---------- In Store: pickup ----------
   The add button sits at the foot of each pick and becomes a quantity
   stepper once the product is on the list; the list and the form sit under
   the grid, and a bar at the bottom of the screen counts what's been added. */
.pick { transition: border-color .15s, box-shadow .15s; }
.pick.is-picked { border-color: var(--c-green); border-top-color: var(--c-green); box-shadow: 0 0 0 1px var(--c-green); }
.pick__action { margin-top: 12px; }
.pick__add {
  display: flex; align-items: center; justify-content: center; gap: .45em;
  width: 100%; padding: .6em .8em;
  border: 1.5px solid var(--c-maroon); border-radius: var(--radius-sm);
  background: #fff; color: var(--c-maroon);
  font: 700 .74rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.pick__add:hover, .pick__add:focus-visible { background: var(--c-maroon); color: #fff; }
@media (max-width: 560px) {
  .pick__add { gap: .35em; padding: .65em .4em; font-size: .68rem; letter-spacing: .03em; white-space: nowrap; }
}

.qty {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--c-green); border-radius: var(--radius-sm);
  background: #fff;
}
.qty button {
  width: 40px; height: 36px;
  border: 0; background: transparent; color: var(--c-green);
  font: 700 1.2rem/1 var(--font-body); cursor: pointer;
}
.qty button:hover:not(:disabled), .qty button:focus-visible { background: rgba(29, 107, 18, .1); }
.qty button:disabled { color: var(--c-line); cursor: default; }
.qty span { min-width: 2ch; text-align: center; font-weight: 700; color: var(--c-green-dark); }
.qty--sm { flex: none; }
.qty--sm button { width: 32px; height: 30px; font-size: 1.05rem; }

.pickup {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: start;
  margin-top: 32px;
  scroll-margin-top: calc(var(--header-h, 70px) + 90px);
}
.pickup .info-card + .info-card { margin-top: 0; }
@media (max-width: 860px) { .pickup { grid-template-columns: 1fr; } }
.pickup__empty { margin: 0; color: var(--c-muted); }
.pickup__items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pickup__item {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--c-line);
}
.pickup__item img, .pickup__noimg { flex: none; width: 44px; height: 44px; object-fit: contain; }
.pickup__name { flex: 1; min-width: 0; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.pickup__name small { display: block; color: var(--c-green); font-weight: 700; font-size: .76rem; }
.pickup__clear {
  margin-top: 14px; padding: 0;
  border: 0; background: none; color: var(--c-muted);
  font: 600 .82rem var(--font-body); text-decoration: underline; cursor: pointer;
}
.pickup__clear:hover { color: var(--c-maroon); }
.pickup__form .field textarea { min-height: 84px; }

.pickup-bar {
  position: fixed; left: 50%; bottom: 16px; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 32px);
  padding: 12px 14px 12px 18px;
  border-radius: 999px;
  background: var(--c-green); color: #fff;
  box-shadow: var(--shadow);
  font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .2s, transform .2s;
}
.pickup-bar:hover { background: var(--c-green-dark); color: #fff; }
.pickup-bar__go {
  display: inline-flex; align-items: center; gap: .35em;
  padding: 6px 12px; border-radius: 999px;
  background: #fff; color: var(--c-green-dark);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
}
.pickup-bar.is-away { opacity: 0; pointer-events: none; transform: translate(-50%, 12px); }
@media (prefers-reduced-motion: reduce) { .pick, .pickup-bar { transition: none; } }

/* ---------- In Store: the search box and the aisle panels ----------
   The shelf list runs to a couple of thousand products, so an aisle is a
   closed panel that says how many it holds; the search box above filters
   every aisle at once and opens the ones that match. */
/* The search bar sits under the header and stays there while the aisles
   scroll past. --header-h is set beside the header itself and changes with it,
   so the two cannot come apart. z-index sits one under the header's 40, which
   keeps the phone menu over the top of it when that opens. */
.search-bar {
  position: sticky; top: var(--header-h); z-index: 30;
  padding: 14px 0 10px;
  background: var(--c-page);     /* opaque: the aisles scroll underneath it */
  border-bottom: 1px solid var(--c-line);
}
@media (max-width: 720px) {
  .search-bar { padding: 10px 0 4px; }
}
.search-bar .aisle-search__result:empty { display: none; }

.aisle-search { position: relative; display: flex; align-items: center; margin: 0 0 10px; }
.aisle-search__icon {
  position: absolute; left: 18px;
  width: 18px; height: 18px;
  color: var(--c-maroon); pointer-events: none;
}
.aisle-search__input {
  width: 100%;
  padding: 16px 18px 16px 48px;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff;
  font: inherit; font-size: 1rem;
}
.aisle-search__input::placeholder { color: var(--c-muted); }
.aisle-search__input:focus-visible { outline: 2px solid var(--c-maroon); outline-offset: 2px; }
.aisle-search__result { margin: 8px 0 4px; padding: 0 4px; color: var(--c-muted); font-size: .92rem; }

.aisle-list { display: grid; gap: 12px; }
.aisle {
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden;
}
.aisle__head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px;
  cursor: pointer;
  list-style: none;          /* hide the default triangle */
}
.aisle__head::-webkit-details-marker { display: none; }
.aisle__head:focus-visible { outline: 2px solid var(--c-maroon); outline-offset: -2px; }
.aisle__icon {
  flex: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c-maroon); color: #fff;
}
.aisle__icon .icon { width: 21px; height: 21px; }
.aisle__text { flex: 1 1 auto; min-width: 0; }
.aisle__name { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; }
.aisle__blurb { display: block; margin-top: 2px; color: var(--c-muted); font-size: .9rem; }
.aisle__count {
  flex: none;
  padding: .3em .8em;
  border-radius: 999px;
  background: var(--c-alt); color: var(--c-muted);
  font-size: .78rem; font-weight: 700; white-space: nowrap;
}
/* The caret, drawn rather than iconised so it can turn with the panel */
.aisle__head::after {
  content: ""; flex: none;
  width: 9px; height: 9px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s;
}
.aisle[open] > .aisle__head::after { transform: rotate(-135deg) translate(-2px, -2px); }
.aisle__items {
  margin: 0; padding: 4px 22px 22px;
  list-style: none;
  columns: 260px; column-gap: 28px;
}
.aisle__items li {
  break-inside: avoid;
  padding: .3em 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .9rem;
}
.aisle__items li[hidden] { display: none; }
.aisle__soon { margin: 0; padding: 0 22px 22px; color: var(--c-muted); font-size: .9rem; }
@media (max-width: 560px) {
  .aisle__head { gap: 12px; padding: 16px; }
  .aisle__blurb { display: none; }
  .aisle__items { padding: 4px 16px 18px; }
  /* "298" rather than "298 products", so the aisle's name keeps the room */
  .aisle__count-word { display: none; }
  .aisle__count { padding: .3em .65em; }
}


.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.cat-card { padding: 26px 24px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.cat-card__icon {
  display: grid; place-items: center;
  width: 54px; height: 54px; margin-bottom: 16px;
  border-radius: 50%;
  background: var(--c-maroon); color: #fff;
}
.cat-card__icon .icon { width: 26px; height: 26px; }
.cat-card h3 { font-size: 1.22rem; }
.cat-card p { color: var(--c-muted); font-size: .94rem; }
.cat-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.cat-card li { padding: .28em .7em; border-radius: var(--radius-sm); background: var(--c-alt); font-size: .82rem; font-weight: 600; }

.promise {
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--radius);
  background: #fff;
  border: 2px solid var(--c-maroon);
}
.promise__seal {
  display: grid; place-items: center; align-content: center;
  width: 112px; height: 112px;
  border-radius: 50%;
  background: var(--c-maroon); color: #fff;
  font-family: var(--font-price); font-size: 1.6rem; font-weight: 700; line-height: 1; text-transform: uppercase;
  box-shadow: inset 0 0 0 6px var(--c-maroon), inset 0 0 0 8px rgba(255, 255, 255, .8);
}
.promise__seal span { font-size: .9rem; font-weight: 500; margin-bottom: 2px; }
.promise h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.promise p:last-child { margin-bottom: 0; }
.promise + .promise { margin-top: 20px; }
@media (max-width: 600px) { .promise { grid-template-columns: 1fr; } }

.steps-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: s; margin: 0; padding: 0; list-style: none; }
.steps-row li {
  position: relative; counter-increment: s;
  padding: 62px 24px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.steps-row li::before {
  content: counter(s);
  position: absolute; left: 24px; top: 18px;
  font-family: var(--font-price); font-weight: 700; font-size: 1.9rem; color: var(--c-maroon);
}
.steps-row h3 { font-size: 1.15rem; }
.steps-row p { margin: 0; color: var(--c-muted); font-size: .94rem; }
@media (max-width: 760px) { .steps-row { grid-template-columns: 1fr; } }

/* ---------- "still being filled in" markers ---------- */

/* "Soon" tag on a nav tab whose page is not finished yet. In the phone menu
   the tab is a full-width flex row, so it lands on the right-hand edge. */
.nav-badge {
  padding: .2em .5em;
  border-radius: 999px;
  background: var(--c-green);
  color: #fff;
  font-family: var(--font-price); font-size: .62rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}

/* Matching flag at the top of that page */
.soon-pill {
  display: inline-flex; align-items: center; gap: .6em;
  margin: 0 0 16px; padding: .45em 1.1em;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  font-family: var(--font-price); font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
}
.soon-pill::before {
  content: "";
  width: .55em; height: .55em;
  border-radius: 50%;
  background: #f3c9cc;
}

/* ---------- groceries ---------- */

/* Shown while the store's full product list is still being added */
.section--tight { padding-top: clamp(32px, 5vw, 48px); padding-bottom: 0; }
.notice {
  display: flex; align-items: flex-start; gap: 22px;
  padding: clamp(22px, 3.5vw, 32px);
  border: 2px solid var(--c-maroon);
  border-radius: var(--radius);
  background: var(--c-maroon-soft);
}
.notice__icon {
  flex: none;
  display: grid; place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--c-maroon); color: #fff;
}
.notice__icon .icon { width: 26px; height: 26px; }
.notice h2 { margin-bottom: .35em; font-size: clamp(1.25rem, 2.4vw, 1.65rem); }
.notice p { margin: 0; color: var(--c-muted); }
@media (max-width: 600px) { .notice { flex-direction: column; gap: 16px; } }

/* An aisle we haven't listed yet */
.cat-card--empty { border-style: dashed; border-width: 2px; background: var(--c-alt); }
.cat-card .cat-card__soon {
  margin: 16px 0 0;
  color: var(--c-maroon);
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- imports ---------- */

.origin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.origin-card {
  padding: 22px 22px 24px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-top: 4px solid var(--c-maroon);
  border-radius: var(--radius);
}
.origin-card h3 { margin-bottom: .35em; font-size: 1.3rem; }
.origin-card p { margin: 0; color: var(--c-muted); font-size: .94rem; }

/* ---------- forms ---------- */

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.field label { display: block; margin-bottom: 6px; font-weight: 600; font-size: .9rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .75em .9em;
  border: 1.5px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--c-ink);
  font: inherit;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--c-maroon); box-shadow: 0 0 0 3px rgba(128, 27, 35, .15); }
.form-note { margin: 12px 0 0; color: var(--c-muted); font-size: .88rem; }
.form-submit { margin-top: 18px; }
.label-hint { font-weight: 400; color: var(--c-muted); }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details, .flyer-text { padding: 4px 22px; background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); }
.faq summary, .flyer-text summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0;
  font-weight: 700; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker, .flyer-text summary::-webkit-details-marker { display: none; }
.faq summary::after, .flyer-text summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--c-maroon); }
.faq details[open] summary::after, .flyer-text[open] summary::after { content: "–"; }
.faq details p { color: var(--c-muted); }

/* ---------- footer ---------- */

.site-footer { padding-top: clamp(48px, 6vw, 72px); background: var(--c-maroon-dark); color: rgba(255, 255, 255, .78); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #cde9c7; }
/* The Visit column is never narrower than its content, so the email address stays on one line */
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr minmax(max-content, 1.1fr) 1.3fr; gap: 40px; padding-bottom: 44px; }
/* Four columns only from 1041px: below that the logo, email and hours can't all fit side by side */
@media (max-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-brand .brand__mark { height: 72px; }
.footer-brand .brand__wordmark { height: 46px; }
.footer-brand p { margin: 16px 0 18px; font-size: .92rem; max-width: 34ch; }
.footer-title {
  margin-bottom: 16px;
  font-family: var(--font-body); font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
}
.footer-links, .footer-contact { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: .93rem; }
.footer-contact li { display: flex; gap: 10px; align-items: flex-start; }
.footer-contact .icon { margin-top: .3em; color: rgba(255, 255, 255, .7); }
/* Following the store is how a shopper hears about the flyer first, so the
   links say which network they are and are sized to be pressed, rather than
   being two unlabelled circles tucked under the address. */
.footer-social { display: grid; gap: 12px; }
.footer-social__lead { margin: 0; color: rgba(255, 255, 255, .78); font-size: .95rem; }
.footer-social__row { display: flex; flex-wrap: wrap; gap: 10px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  font-weight: 700; font-size: .95rem; letter-spacing: .02em;
  transition: background-color .15s, color .15s, border-color .15s;
}
.social-btn .icon { width: 22px; height: 22px; }
.site-footer .social-btn:hover, .site-footer .social-btn:focus-visible {
  background: #fff; border-color: #fff; color: var(--c-maroon);
}
.hours-list--footer li { padding: 5px 0; background: none !important; font-size: .9rem; }
.hours-list--footer li.is-today { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 24px;
  border-top: 1px solid rgba(255, 255, 255, .15);
  font-size: .82rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom__note { flex-basis: 100%; color: rgba(255, 255, 255, .6); }

/* ---------- 404 ---------- */

.not-found { text-align: center; padding: clamp(72px, 12vw, 140px) 0; }
.not-found .page-hero__badge {
  display: grid; margin: 0 auto 28px;
  color: var(--c-maroon);
  box-shadow: inset 0 0 0 3px var(--c-maroon), inset 0 0 0 9px #fff, inset 0 0 0 10.5px rgba(128, 27, 35, .45);
}
.not-found__lead { margin: 0 auto 28px; }
.not-found__actions { justify-content: center; }

/* ---------- smallest phones ----------
   Keep this block last: it has to come after the .btn and .price-brush rules
   above to override them. */

@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; padding: .85em 1em; letter-spacing: .04em; }
  .price-brush { font-size: 1.25rem; }
  /* room for the email address on one line in the contact cards */
  .info-card { padding-left: 18px; padding-right: 18px; }
  .contact-lines li { gap: 10px; }
  .contact-lines a { font-size: .94rem; }
}

/* ---------- phones: room for a thumb ----------
   Links that sit in a list (footer, contact cards) are only as tall as their
   line of text, about 20px, which is a hard target on a phone. On small
   screens they get padding to roughly 40px, and the pickup controls grow to
   match, without changing how anything looks on a desktop. */
@media (max-width: 720px) {
  .deals__more { line-height: 2.2; }
  .footer-links, .footer-contact { gap: 2px; }
  .footer-links a, .footer-contact a { display: inline-block; padding: 9px 0; }
  .footer-contact .icon { margin-top: .85em; }
  .contact-lines { gap: 4px; }
  .contact-lines a { display: inline-block; padding: 9px 0; }
}
@media (max-width: 360px) {
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pick { padding: 14px 10px 11px; }
  .pick__shot { height: 88px; }
}
@media (max-width: 560px) {
  .pick__add { min-height: 40px; }
  .pick__action .qty button { height: 40px; }
  .pickup__item .qty--sm button { width: 38px; height: 36px; }
}