/* ==========================================================================
   Hakuna Matata International Market

   The palette is read off the store's own sign: the crimson of its border, the
   sunset gradient inside the Africa mark, and the warm white of its field.
   Nothing here is invented, so the site and the storefront agree.

   Swapping in a finalized brand is a change to the tokens in :root and nothing
   else.
   ========================================================================== */

:root {
  /* --- Colour -------------------------------------------------------- */
  --ink: #171412;          /* the sign's lettering — warm near-black */
  --ink-soft: #4a423b;
  --muted: #756a5f;

  --crimson: #9e1c33;      /* the sign's border. Primary. */
  --crimson-deep: #7c1428;
  --ember: #dd5b2a;        /* mid-sunset, inside the Africa mark */
  --gold: #efb43c;         /* the sun */

  --paper: #fbf8f3;        /* the sign's field */
  --surface: #ffffff;
  --surface-sunk: #f4efe7;
  --line: #e7ded1;
  --line-strong: #d6c9b6;

  --ok: #1f6b45;
  --warn: #96591a;

  /* --- Type ----------------------------------------------------------- */
  --display: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Source Sans 3', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --step-xl: clamp(2.75rem, 1.6rem + 4.6vw, 5rem);
  --step-l: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  --step-m: clamp(1.4rem, 1.2rem + 0.9vw, 1.95rem);
  --step-s: 1.1875rem;
  --step-body: 1.0625rem;
  --step-sm: 0.9375rem;
  --step-xs: 0.8125rem;

  /* --- Space and shape ------------------------------------------------ */
  --gutter: clamp(1.25rem, 4vw, 2.75rem);
  --measure: 62ch;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgb(23 20 18 / 0.05), 0 1px 3px rgb(23 20 18 / 0.04);
  --shadow-md: 0 4px 12px rgb(23 20 18 / 0.06), 0 2px 4px rgb(23 20 18 / 0.04);
  --shadow-lg: 0 18px 40px rgb(23 20 18 / 0.1), 0 4px 10px rgb(23 20 18 / 0.05);
}

/* --------------------------------------------------------------- reset -- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--crimson); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--crimson-deep); }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

/* One visible, consistent focus ring everywhere, including for keyboard users
   who never see a hover state. */
:focus-visible {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ utilities -- */

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap-narrow {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: 0.5rem;
  top: -100%;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 600;
}
.skip-link:focus { top: 0.5rem; color: #fff; }

.eyebrow {
  font-family: var(--display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 0.75rem;
}

.lede {
  font-size: clamp(1.125rem, 1.02rem + 0.45vw, 1.3125rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.stack > * + * { margin-top: 1rem; }

/* --------------------------------------------------------------- band ---- */
/* The repeating motif framing the store's sign, redrawn as a rule. It is the
   only piece of ornament on the site; everything else earns its place by
   carrying information. */

/* Drawn as a repeating background rather than an inline <svg> + <pattern>.
   A pattern defined once in the document and referenced from several places
   resolves currentColor against the element it was DEFINED on, and its user
   space against a zero-sized host — both of which flatten the motif into a
   solid bar. A background-image has neither problem and removes the markup. */
.band {
  display: block;
  width: 100%;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='10'%3E%3Crect width='18' height='2.5' fill='%239e1c33' opacity='0.32'/%3E%3Cpath d='M9 3.6 L13.4 10 L4.6 10 Z' fill='%239e1c33'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 18px 10px;
  background-position: left top;
}

/* -------------------------------------------------------------- header --- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 74px;
}

/* The sign photo is too detailed to read at header size, so the header wears a
   typographic wordmark built from the same letterforms and the hero carries the
   real thing. */
.wordmark {
  display: grid;
  gap: 0.1rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  padding-block: 0.4rem;
}
.wordmark:hover { color: var(--ink); }

.wordmark__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 0.86rem + 0.78vw, 1.45rem);
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark__sub {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(0.58rem, 0.5rem + 0.3vw, 0.72rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--crimson);
  line-height: 1;
}

.site-nav { display: flex; align-items: center; gap: 0.35rem; list-style: none; }

.site-nav a {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step-sm);
}
.site-nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.site-nav a[aria-current='page'] { color: var(--crimson); background: color-mix(in srgb, var(--crimson) 8%, transparent); }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--crimson);
  color: #fff;
  font-weight: 700;
  font-size: var(--step-sm);
  text-decoration: none;
  white-space: nowrap;
}
.header-call:hover { background: var(--crimson-deep); color: #fff; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .header-call span { display: none; }

  .site-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
  }
  .site-nav[data-open='true'] { display: flex; }
  .site-nav a { padding: 0.85rem 0.5rem; font-size: 1.05rem; border-radius: 0; }
  .site-nav li + li a { border-top: 1px solid var(--line); }
}

/* ---------------------------------------------------------------- hero --- */

.hero { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(2rem, 4vw, 3.5rem); }

.hero__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; }
}

.hero__title {
  font-size: var(--step-xl);
  font-weight: 900;
  letter-spacing: -0.03em;
}

.hero__title em {
  font-style: normal;
  color: var(--crimson);
}

.hero__lede { margin-top: 1.25rem; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* The sign itself. It is a photograph of a physical object, so it gets a frame
   and a shadow rather than being floated on the page as though it were a
   vector. */
.hero__sign {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--surface);
  rotate: -0.6deg;
}

.hero__sign img { width: 100%; }

/* --------------------------------------------------------------- facts --- */
/* The storefront card: the four things somebody standing on the pavement
   actually needs. */

.facts {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 4vw, 3rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

@media (min-width: 700px) { .facts { grid-template-columns: repeat(3, 1fr); } }

.fact { padding: 1.35rem 1.5rem; }
.fact + .fact { border-top: 1px solid var(--line); }

@media (min-width: 700px) {
  .fact + .fact { border-top: 0; border-left: 1px solid var(--line); }
}

.fact__label {
  font-family: var(--display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.fact__value { font-size: var(--step-s); font-weight: 600; line-height: 1.35; }
.fact__value a { text-decoration: none; }
.fact__value a:hover { text-decoration: underline; }
.fact__note { font-size: var(--step-sm); color: var(--muted); margin-top: 0.2rem; }

/* ------------------------------------------------------------- buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-sm);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-deep); color: #fff; }

.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-sunk); color: var(--ink); }

.btn-ghost { background: transparent; color: var(--ink); border-color: transparent; padding-inline: 0.5rem; }
.btn-ghost:hover { color: var(--crimson); }

.btn-sm { padding: 0.5rem 1rem; font-size: var(--step-xs); }
.btn-block { width: 100%; }

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

.section { padding-block: clamp(2.75rem, 5vw, 4.5rem); }
.section-sunk { background: var(--surface-sunk); }

.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.section__title { font-size: var(--step-l); }
.section__intro { margin-top: 0.6rem; color: var(--ink-soft); max-width: var(--measure); }

/* ---------------------------------------------------------- categories --- */

.category-rail {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
  list-style: none;
}

.category-chip {
  display: grid;
  gap: 0.15rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.category-chip:hover {
  border-color: var(--crimson);
  color: var(--ink);
  transform: translateY(-2px);
}

.category-chip__name { font-family: var(--display); font-weight: 700; font-size: var(--step-s); line-height: 1.2; }
.category-chip__count { font-size: var(--step-xs); color: var(--muted); }

/* ----------------------------------------------------------- productss --- */

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  list-style: none;
}

.product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.product-card:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.product-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-sunk);
  overflow: hidden;
}

.product-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* No photography yet, and an empty grey rectangle reads as broken. Until the
   store uploads images, each product shows its own initials on a tint drawn
   from the sign's sunset — deliberate rather than missing, and it disappears
   the moment a real photo lands. */
.placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--ph-bg, var(--surface-sunk));
}

.placeholder__initials {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 5vw, 2.75rem);
  letter-spacing: -0.04em;
  color: var(--ph-fg, var(--crimson));
  opacity: 0.85;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.1rem 1.15rem;
  flex: 1;
}

.product-card__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-s);
  line-height: 1.22;
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  font-size: var(--step-xs);
  color: var(--muted);
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-card__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-s);
  color: var(--ink);
}

/* Country of origin is the fact that tells a shopper whether this is the
   version of a staple they grew up with, so it gets typographic weight rather
   than being buried in the description. */
.origin-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--display);
  font-size: var(--step-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--crimson);
}
.origin-tag::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  padding: 0.28rem 0.6rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--ink);
  color: #fff;
}
.badge-out { background: var(--warn); }

/* ------------------------------------------------------ product detail --- */

.detail { padding-block: clamp(2rem, 4vw, 3.5rem); }

.detail__grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 880px) { .detail__grid { grid-template-columns: 1fr 1fr; align-items: start; } }

.gallery { display: grid; gap: 0.75rem; }

.gallery__main {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunk);
  border: 1px solid var(--line);
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 0.6rem;
  list-style: none;
}

.gallery__thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-sunk);
  padding: 0;
  cursor: pointer;
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current='true'] { border-color: var(--crimson); box-shadow: 0 0 0 1px var(--crimson); }

.detail__title { font-size: var(--step-l); margin-bottom: 0.5rem; }

.spec {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--step-sm);
}
.spec th, .spec td { text-align: left; padding: 0.7rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-weight: 600; color: var(--muted); width: 38%; font-family: var(--display); letter-spacing: 0.02em; }

/* The site cannot take an order, so the call to action is the shop counter.
   SOW 1.2 and 8.2. */
.ask {
  margin-top: 1.75rem;
  padding: 1.35rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.ask__title { font-family: var(--display); font-weight: 700; font-size: var(--step-s); margin-bottom: 0.35rem; }
.ask__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* -------------------------------------------------------------- filter --- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 260px;
  max-width: 420px;
  padding: 0.15rem 0.15rem 0.15rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}
.search:focus-within { border-color: var(--crimson); }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0.6rem 0;
  font: inherit;
  font-size: var(--step-sm);
}
.search input:focus { outline: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }

.chip {
  display: inline-block;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--step-xs);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { border-color: var(--crimson); color: var(--crimson); }
.chip[aria-current='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

.result-count { font-size: var(--step-sm); color: var(--muted); }

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

/* align-content:start keeps the label and input pinned to the top of the cell.
   Without it, a field sitting beside a taller one (because that one carries a
   hint line) has its rows stretched and its input drifts out of alignment with
   its neighbour. */
.field { display: grid; gap: 0.4rem; margin-bottom: 1.1rem; align-content: start; }

.field label { font-weight: 600; font-size: var(--step-sm); }
.field__hint { font-size: var(--step-xs); color: var(--muted); }

.input,
.textarea,
.select {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  font-size: var(--step-sm);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--crimson); outline: 2px solid color-mix(in srgb, var(--crimson) 25%, transparent); outline-offset: 0; }

.textarea { min-height: 150px; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23756a5f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 12px;
  padding-right: 2.25rem;
}

.check { display: flex; align-items: start; gap: 0.6rem; font-size: var(--step-sm); }
.check input { margin-top: 0.28rem; accent-color: var(--crimson); width: 17px; height: 17px; }

/* The honeypot. Hidden from people, not from the bots that fill in every field
   they can find. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--crimson) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--crimson) 30%, transparent);
  color: var(--crimson-deep);
  font-size: var(--step-sm);
  margin-bottom: 1.25rem;
}
.form-error ul { padding-left: 1.1rem; }

/* --------------------------------------------------------------- flash --- */

.flash {
  display: flex;
  gap: 0.7rem;
  align-items: start;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius);
  font-size: var(--step-sm);
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.flash-success { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 30%, transparent); color: #14512f; }
.flash-error { background: color-mix(in srgb, var(--crimson) 8%, var(--surface)); border-color: color-mix(in srgb, var(--crimson) 30%, transparent); color: var(--crimson-deep); }

/* --------------------------------------------------------------- panel --- */

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  box-shadow: var(--shadow-sm);
}

.panel__title { font-size: var(--step-m); margin-bottom: 1rem; }

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

.hours { width: 100%; border-collapse: collapse; font-size: var(--step-sm); }
.hours th, .hours td { text-align: left; padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 600; color: var(--ink-soft); font-family: var(--display); letter-spacing: 0.01em; }
.hours td { text-align: right; font-variant-numeric: tabular-nums; }
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours tr[data-today='true'] th, .hours tr[data-today='true'] td { color: var(--crimson); font-weight: 700; }

/* SNAP/EBT is stated as an in-store fact and never as something the site can
   process. SOW 3.1.3 requires the statement; 8.2 requires that limit. */
.payment-note {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font-size: var(--step-sm);
  font-weight: 600;
}

.map-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-sunk);
  aspect-ratio: 16 / 10;
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

.map-placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: var(--step-sm);
}

/* --------------------------------------------------------------- empty --- */

.empty {
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.empty__title { font-size: var(--step-m); margin-bottom: 0.6rem; }
.empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

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

.site-footer { background: var(--ink); color: #d9d2cb; margin-top: clamp(3rem, 6vw, 5rem); }
.site-footer .band { color: var(--crimson); }

.site-footer__inner {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 760px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }

.site-footer h2 {
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8d8378;
  margin-bottom: 0.9rem;
}

.site-footer a { color: #f2ece5; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-list { list-style: none; display: grid; gap: 0.5rem; font-size: var(--step-sm); }

.footer-brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.footer-brand__sub {
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.socials { display: flex; gap: 0.5rem; list-style: none; margin-top: 1rem; }
.socials a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid #3a332e;
  color: #d9d2cb;
}
.socials a:hover { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.socials svg { width: 19px; height: 19px; }

.colophon {
  border-top: 1px solid #2c2621;
  padding-block: 1.25rem;
  font-size: var(--step-xs);
  color: #8d8378;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

/* --------------------------------------------------------------- prose --- */

.prose { max-width: var(--measure); }
.prose h2 { font-size: var(--step-m); margin: 2.25rem 0 0.75rem; }
.prose h3 { font-size: var(--step-s); margin: 1.75rem 0 0.5rem; }
.prose ul { padding-left: 1.2rem; margin-bottom: 1em; }
.prose li { margin-bottom: 0.35rem; }

/* A visible marker for copy the store still owes us, so placeholder text can
   never be mistaken for approved content at review. SOW 6.1.5. */
.pending {
  border-left: 3px solid var(--gold);
  padding: 0.15rem 0 0.15rem 1rem;
  color: var(--ink-soft);
}
.pending::before {
  content: 'Placeholder copy';
  display: block;
  font-family: var(--display);
  font-size: var(--step-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warn);
  margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------- error --- */

.status-page { padding-block: clamp(4rem, 10vw, 8rem); text-align: center; }
.status-page__code {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--crimson);
  letter-spacing: -0.04em;
}
.status-page__title { font-size: var(--step-l); margin: 0.75rem 0 0.75rem; }
.status-page p { color: var(--muted); max-width: 44ch; margin-inline: auto; }
.status-page .btn { margin-top: 1.75rem; }
.status-page pre {
  text-align: left;
  margin-top: 2rem;
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.8rem;
  overflow-x: auto;
}

/* ---------------------------------------------------------------- auth --- */

.auth-page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: var(--surface-sunk);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.auth-card__body { padding: clamp(1.75rem, 4vw, 2.5rem); }

.auth-card__brand { display: block; text-align: center; text-decoration: none; margin-bottom: 1.75rem; }
.auth-card__title { font-size: var(--step-m); margin-bottom: 0.4rem; }
.auth-card__intro { color: var(--muted); font-size: var(--step-sm); margin-bottom: 1.5rem; }
.auth-card__foot { text-align: center; margin-top: 1.25rem; font-size: var(--step-sm); }