@charset "UTF-8";
/* ==========================================================================
   Kamundia Butchery Nairobi - stylesheet
   Palette taken from the client's own logo: butcher red, brand gold, near-black,
   bone. Mobile-first: every breakpoint below is min-width.
   ========================================================================== */

:root {
  --ink: #17110f;
  --ink-2: #241a16;
  --ink-3: #35251f;
  --red: #d81f26;
  --red-dark: #a8141a;
  --red-soft: #fdecec;
  --gold: #f2b530;
  --gold-dark: #c8901c;
  --bone: #faf6f0;
  --bone-2: #f1e9dd;
  --white: #ffffff;
  --text: #241c19;
  --muted: #6d5d55;
  --line: rgba(23, 17, 15, 0.12);
  --line-2: rgba(23, 17, 15, 0.07);
  --wa: #25d366;
  --wa-dark: #1da851;
  --ok: #1b7f3b;

  --display: "Chakra Petch", "Arial Narrow", sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Kaushan Script", cursive;

  --wrap: 1200px;
  --pad: 16px;
  --r: 14px;
  --r-sm: 9px;
  --shadow: 0 2px 4px rgba(23, 17, 15, 0.05), 0 10px 28px rgba(23, 17, 15, 0.07);
  --shadow-lg: 0 18px 50px rgba(23, 17, 15, 0.16);
  --header-h: 66px;
}

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

/* [hidden] MUST win. The UA stylesheet's `[hidden] { display: none }` is beaten
   by any author `display` rule, and several components here set one (.pcard is
   flex, .pgrid is grid). That silently broke the shop category filter: the JS
   set `card.hidden = true` correctly but the cards kept rendering. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bone);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  /* room for the fixed mobile call bar */
  padding-bottom: 68px;
}

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

/* Baseline size for inline sprite icons. The icon() helper emits a bare
   <svg><use></svg> with no width/height, so anywhere one is dropped straight
   into prose it would otherwise fall back to the SVG default intrinsic size
   (300x150) and render enormous. Component rules below are more specific and
   still win, so this only catches the loose ones. */
svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex: none;
  vertical-align: -0.14em;
}

a { color: var(--red-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4, h5 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.55em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.85rem, 7.2vw, 3.5rem); }
h2 { font-size: clamp(1.45rem, 5.2vw, 2.35rem); }
h3 { font-size: clamp(1.12rem, 3.6vw, 1.4rem); }
h4 { font-size: 1.02rem; }
p { margin: 0 0 1.05em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li { margin-bottom: 0.45em; }
/* Bold inherits the colour of whatever it sits in. Do NOT pin a dark colour
   here: bold text also lands on dark surfaces (dark cards, CTA bands, footer,
   hero) where a near-black emphasis colour becomes black-on-black. The weight
   is the emphasis - it does not need a colour of its own. Surfaces that do want
   a specific bold colour set it explicitly (.footer__nap b, .strip b, etc). */
strong, b { font-weight: 700; }
small { font-size: 0.85em; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--red); color: #fff; padding: 12px 18px; font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; }

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

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

.section { padding: 42px 0; }
.section--tight { padding: 26px 0; }
.section--dark { background: var(--ink); color: #efe6df; }
/* :where() keeps this at single-class specificity so any component that sets its
   own heading colour beats it. A dark section legitimately contains LIGHT cards
   (.steps li, .card, .imgcard) and a blanket white would make their headings
   white-on-white - see the reset just below. */
.section--dark :where(h2, h3, h4) { color: #fff; }
/* :not(.btn) matters. Without it this rule (0,2,0) outranks .btn (0,1,0) and
   repaints every button label gold - which made the gold button invisible. */
.section--dark a:not(.btn) { color: var(--gold); }
.section--bone { background: var(--bone-2); }
.section--white { background: var(--white); }

/* Light-background components keep dark headings even inside a dark section. */
.steps li h3,
.card:not(.card--dark) h3,
.imgcard h3,
.napcard h3,
.summary h3,
.ordercard h3,
.emptystate h3,
.pcard h3,
.aside__box:not(.aside__box--dark) h3 { color: var(--ink); }

.eyebrow {
  font-family: var(--display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.6em;
}
.section--dark .eyebrow { color: var(--gold); }

.script { font-family: var(--script); font-weight: 400; }

.lead { font-size: 1.06rem; color: #4a3c36; }
.section--dark .lead { color: #d9cdc5; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  --btn-bd: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  line-height: 1.1;
  padding: 13px 20px;
  min-height: 46px;
  border-radius: 999px;
  border: 2px solid var(--btn-bd);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, filter 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; filter: brightness(1.07); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; filter: none; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; fill: currentColor; }

.btn--red { --btn-bg: var(--red); --btn-fg: #fff; --btn-bd: var(--red); }
.btn--gold { --btn-bg: var(--gold); --btn-fg: var(--ink); --btn-bd: var(--gold); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--wa { --btn-bg: var(--wa); --btn-fg: #06301a; --btn-bd: var(--wa); }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(23, 17, 15, 0.28); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: #fff; --btn-bd: var(--ink); }
.btn--outline-light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255, 255, 255, 0.5); }
.btn--outline-light:hover { --btn-bg: #fff; --btn-fg: var(--ink); --btn-bd: #fff; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: rgba(23, 17, 15, 0.2); }
.btn--sm { font-size: 0.85rem; padding: 9px 15px; min-height: 38px; }
.btn--sm svg { width: 16px; height: 16px; }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.btn-row .btn { flex: 1 1 auto; }
@media (min-width: 600px) {
  .btn-row .btn { flex: 0 0 auto; }
}

/* ---------- Header / nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(23, 17, 15, 0.04);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--header-h);
  position: relative;
}

.brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__logo {
  width: auto;
  height: 42px;
  object-fit: contain;
}
@media (min-width: 700px) { .brand__logo { height: 54px; } }

.nav__tools {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  padding: 0;
}
.iconbtn:hover { background: var(--bone-2); }
.iconbtn svg { width: 21px; height: 21px; fill: currentColor; }
/* The badge is ALWAYS in the DOM and always laid out; only its transform
   changes. Toggling `hidden` here meant a layout change inside a
   position:sticky header, and mobile browsers frequently do not repaint that
   sticky layer until the next scroll or reload - so the count appeared not to
   update until you refreshed. A transform on a promoted layer repaints
   reliably. Deliberately NO transition: a frozen animation must never be able
   to hide the count (same rule as the FAQ panels). */
.cartdot {
  position: absolute;
  top: 3px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  transform: scale(0);
  transform-origin: center;
  will-change: transform;
  pointer-events: none;
}
.cartdot.is-on { transform: scale(1); }

.nav__burger {
  width: 42px; height: 42px;
  border: 0; background: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav__burger span,
.nav__burger span::before,
.nav__burger span::after {
  display: block;
  width: 22px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav__burger span::before,
.nav__burger span::after { content: ""; position: absolute; }
.nav__burger span::before { transform: translateY(-7px); }
.nav__burger span::after { transform: translateY(7px); }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { transform: rotate(45deg); }
.nav.is-open .nav__burger span::after { transform: rotate(-45deg); }

/* Collapsed mobile menu: absolutely positioned under the header, height animated
   by JS so it never pokes above or spills past the viewport. */
.nav__menu-wrap {
  position: absolute;
  top: 100%;
  left: calc(var(--pad) * -1);
  right: calc(var(--pad) * -1);
  background: var(--white);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--red);
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden auto;
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0.2s;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.nav.is-open .nav__menu-wrap { visibility: visible; opacity: 1; }

.nav__menu {
  list-style: none;
  margin: 0;
  padding: 6px var(--pad) 0;
}
.nav__item { margin: 0; border-bottom: 1px solid var(--line-2); }
.nav__item > a,
.nav__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 13px 2px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.nav__item > a:hover, .nav__toggle:hover { color: var(--red); text-decoration: none; }
.nav__item.is-active > a, .nav__item.is-active > .nav__toggle { color: var(--red); }
.nav__toggle svg { width: 15px; height: 15px; fill: currentColor; transition: transform 0.2s ease; }
.nav__item.is-open > .nav__toggle svg { transform: rotate(180deg); }

.nav__drop {
  list-style: none;
  margin: 0;
  padding: 0 0 8px 10px;
  display: none;
}
.nav__item.is-open > .nav__drop { display: block; }
.nav__drop li { margin: 0; }
.nav__drop a {
  display: block;
  padding: 9px 4px;
  font-size: 0.93rem;
  color: #4a3c36;
  border-left: 2px solid var(--line);
  padding-left: 12px;
}
.nav__drop a:hover { color: var(--red); border-left-color: var(--red); text-decoration: none; }
.nav__drop-head {
  font-family: var(--display);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 4px 4px 12px;
}

.nav__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px var(--pad) 18px;
  background: var(--bone);
  border-top: 1px solid var(--line);
}

@media (min-width: 1060px) {
  .nav__burger { display: none; }
  .nav { gap: 18px; }
  .nav__menu-wrap {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex: 1 1 auto;
    max-height: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    background: none;
    border: 0;
    box-shadow: none;
    order: 2;
  }
  .nav__tools { order: 3; }
  .nav__menu { display: flex; align-items: center; gap: 2px; padding: 0; }
  .nav__item { border: 0; position: relative; }
  .nav__item > a,
  .nav__toggle {
    padding: 10px 11px;
    font-size: 0.9rem;
    white-space: nowrap;
    border-radius: 8px;
  }
  .nav__item.is-active > a,
  .nav__item.is-active > .nav__toggle { background: var(--red-soft); }
  .nav__drop {
    display: block;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 250px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--red);
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
    z-index: 70;
  }
  .nav__drop--wide { min-width: 290px; }
  .nav__item:hover > .nav__drop,
  .nav__item:focus-within > .nav__drop,
  .nav__item.is-open > .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav__drop a { border-left: 0; padding: 9px 12px; border-radius: 6px; }
  .nav__drop a:hover { background: var(--bone-2); }
  .nav__drop-head { padding-left: 12px; }
  .nav__cta { flex-direction: row; padding: 0; background: none; border: 0; }
  .nav__cta .btn--ghost { display: none; }
}
@media (min-width: 1220px) {
  .nav__cta .btn--ghost { display: inline-flex; }
}

/* ---------- Search ---------- */
.searchbar {
  border-top: 1px solid var(--line);
  background: var(--bone);
  padding-block: 12px 14px;
}
.searchbar__form {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 6px 4px 14px;
}
.searchbar__icon { width: 19px; height: 19px; fill: var(--muted); flex: none; }
.searchbar__form input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-family: var(--body);
  font-size: 1rem;
  padding: 10px 0;
  color: var(--text);
}
.searchbar__form input:focus { outline: none; }
.searchbar__form input::-webkit-search-cancel-button { -webkit-appearance: none; }
.searchbar__close {
  flex: none;
  width: 36px; height: 36px;
  border: 0; border-radius: 50%;
  background: var(--bone-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.searchbar__close svg { width: 15px; height: 15px; fill: var(--ink); }

.searchbar__results { margin-top: 12px; }
.searchbar__note {
  font-size: 0.86rem;
  color: var(--muted);
  margin: 0;
}
.sresults {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  max-height: 58vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (min-width: 640px) { .sresults { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sresults { grid-template-columns: repeat(3, 1fr); } }

.sresult {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 8px;
  min-width: 0;
}
.sresult:hover { border-color: var(--red); text-decoration: none; box-shadow: var(--shadow); }
.sresult img {
  width: 52px; height: 52px;
  border-radius: 6px;
  object-fit: cover;
  flex: none;
  background: var(--bone-2);
}
.sresult__txt { min-width: 0; }
.sresult__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sresult__meta { display: block; font-size: 0.8rem; color: var(--muted); }
.sresult__meta b { color: var(--red-dark); font-weight: 700; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/sections/kamundia-butchery-team-city-market-nairobi.jpg");
  background-size: cover;
  background-position: 50% 20%;
  opacity: 0.42;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 17, 15, 0.86) 0%, rgba(23, 17, 15, 0.62) 45%, rgba(23, 17, 15, 0.93) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding: 44px 0 46px;
  max-width: 760px;
}
.hero__script {
  font-family: var(--script);
  font-size: clamp(1.3rem, 5vw, 1.9rem);
  color: var(--gold);
  margin: 0 0 2px;
  line-height: 1.2;
}
.hero h1 { color: #fff; margin-bottom: 0.4em; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero__sub {
  font-size: 1.04rem;
  color: #e2d7d0;
  margin-bottom: 6px;
  max-width: 60ch;
}
.hero__tag {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 5px 13px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  font-size: 0.88rem;
  color: #d7cbc3;
}
.hero__facts li { display: flex; align-items: center; gap: 7px; margin: 0; }
.hero__facts svg { width: 16px; height: 16px; fill: var(--gold); flex: none; }
@media (min-width: 800px) {
  .hero__inner { padding: 76px 0 78px; }
}

/* Rating pill (links to the Google Business Profile) */
.ratepill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 15px 7px 12px;
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: #f3ece7;
}
.ratepill:hover { text-decoration: none; background: rgba(255, 255, 255, 0.17); }
.ratepill b { color: #fff; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 14px; height: 14px; fill: var(--gold); }

/* ---------- Page hero (inner pages) ---------- */
.phero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.phero--img::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--phero-img);
  background-size: cover;
  background-position: center;
  opacity: 0.34;
}
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 17, 15, 0.8), rgba(23, 17, 15, 0.94));
}
.phero__inner {
  position: relative;
  z-index: 2;
  padding: 30px 0 36px;
  max-width: 760px;
}
.phero h1 { color: #fff; }
.phero p { color: #ddd2ca; margin-bottom: 0; }
@media (min-width: 800px) { .phero__inner { padding: 46px 0 52px; } }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 0.79rem;
  color: #b5a79f;
  margin-bottom: 14px;
}
.crumbs a { color: #d9cbc3; }
.crumbs span[aria-current] { color: var(--gold); }

/* ---------- Trust strip ---------- */
.strip { background: var(--ink-2); color: #e6dbd4; padding: 16px 0; }
.strip__inner {
  display: grid;
  gap: 12px 22px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.strip__inner > div {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
}
.strip svg { width: 21px; height: 21px; fill: var(--gold); flex: none; margin-top: 2px; }
.strip span { display: block; font-size: 0.8rem; color: #b8aaa2; line-height: 1.35; min-width: 0; }
.strip b {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  color: #fff;
  line-height: 1.25;
}
@media (min-width: 860px) { .strip__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Section headings ---------- */
.shead { max-width: 720px; margin-bottom: 26px; }
.shead--center { margin-inline: auto; text-align: center; }
.shead p { margin-bottom: 0; color: #4d3f39; font-size: 1.02rem; }
.section--dark .shead p { color: #cbbeb6; }
.shead__script {
  font-family: var(--script);
  font-size: 1.35rem;
  color: var(--red);
  margin: 0 0 2px;
  line-height: 1.2;
}
.section--dark .shead__script { color: var(--gold); }

/* ---------- Category cards ---------- */
.cats {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 720px) { .cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }

.catcard {
  position: relative;
  display: block;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--ink);
  min-width: 0;
  box-shadow: var(--shadow);
}
.catcard:hover { text-decoration: none; }
.catcard img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.catcard:hover img { transform: scale(1.05); }
.catcard__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 34px 12px 12px;
  background: linear-gradient(180deg, rgba(23, 17, 15, 0) 0%, rgba(23, 17, 15, 0.88) 55%, rgba(23, 17, 15, 0.97) 100%);
  color: #fff;
}
.catcard__body h3 {
  color: #fff;
  font-size: 1rem;
  margin: 0 0 3px;
  line-height: 1.15;
}
.catcard__count {
  font-size: 0.76rem;
  color: var(--gold);
  font-weight: 600;
  display: block;
}
@media (min-width: 720px) {
  .catcard__body { padding: 40px 16px 16px; }
  .catcard__body h3 { font-size: 1.2rem; }
}

/* ---------- Product cards ---------- */
.pgrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 700px) { .pgrid { gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1020px) { .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  min-width: 0;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.pcard:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: rgba(216, 31, 38, 0.4); }
.pcard__media {
  position: relative;
  display: block;
  background: var(--bone-2);
}
.pcard__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.pcard__flag {
  position: absolute;
  top: 7px; left: 7px;
  font-family: var(--display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 999px;
  max-width: calc(100% - 14px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard__flag--out { background: var(--ink); color: #fff; }
.pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 10px 10px 11px;
  min-width: 0;
}
.pcard__cat {
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 3px;
}
.pcard h3 { font-size: 0.95rem; margin: 0 0 5px; line-height: 1.2; }
.pcard h3 a { color: var(--ink); }
.pcard h3 a:hover { color: var(--red); text-decoration: none; }
.pcard__blurb {
  display: none;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.45;
}
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  flex-wrap: wrap;
}
.pcard__price {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.15;
}
.pcard__price small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.7rem;
  color: var(--muted);
}
.pcard__foot .btn { padding: 8px 12px; min-height: 36px; font-size: 0.8rem; }
@media (min-width: 560px) {
  .pcard__blurb { display: block; }
  .pcard h3 { font-size: 1.05rem; }
  .pcard__body { padding: 14px 14px 15px; }
}

/* ---------- Shop toolbar / filters ---------- */
.shopbar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 22px;
}
.shopbar__row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* Search field and sort control share --ctl-h so they line up exactly. */
.shopbar { --ctl-h: 48px; }

.shopbar__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 100%;
  min-width: 0;
  height: var(--ctl-h);
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0 6px 0 15px;
}
.shopbar__search svg { width: 18px; height: 18px; fill: var(--muted); flex: none; }
.shopbar__search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  font-family: var(--body);
  font-size: 0.98rem;
  padding: 0;
  color: var(--text);
}
.shopbar__search input:focus { outline: none; }
.shopbar__search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.shopbar__clear {
  flex: none; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--bone-2);
  cursor: pointer; display: none; align-items: center; justify-content: center;
}
.shopbar__clear:hover { background: var(--red-soft); }
.shopbar__clear svg { width: 13px; height: 13px; fill: var(--ink); }
.shopbar__clear.is-on { display: inline-flex; }

.shopbar__sort {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
/* Native select chrome is replaced: a sort glyph on the left, our own chevron on
   the right, matching the search pill's height and radius. */
.shopbar__sort select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-width: 0;
  height: var(--ctl-h);
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  border: 2px solid rgba(23, 17, 15, 0.16);
  border-radius: 999px;
  padding: 0 38px 0 40px;
  background-color: #fff;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317110f'%3E%3Cpath d='M3 6h18v2H3zM3 11h12v2H3zM3 16h6v2H3z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317110f'%3E%3Cpath d='M12 15.4 6.3 9.7l1.4-1.4 4.3 4.3 4.3-4.3 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left 14px center, right 13px center;
  background-size: 15px, 14px;
  transition: border-color 0.15s ease;
}
.shopbar__sort select:hover { border-color: rgba(23, 17, 15, 0.4); }
.shopbar__sort select:focus-visible { border-color: var(--ink); }
/* the native dropdown list itself is drawn by the OS - keep it legible */
.shopbar__sort select option { font-family: var(--body); font-weight: 500; color: var(--text); }

.shopbar__count {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--muted);
  flex: none;
  white-space: nowrap;
}
@media (min-width: 780px) {
  .shopbar__search { flex: 1 1 320px; }
  .shopbar__sort { flex: 0 0 auto; }
  .shopbar__sort select { width: auto; }
}

.chips {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  padding: 10px 0 2px;
  margin: 0;
  list-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chips li { margin: 0; flex: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--red); text-decoration: none; }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip small { font-weight: 500; opacity: 0.65; }

.emptystate {
  text-align: center;
  padding: 40px 16px;
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: var(--r);
}
.emptystate h3 { margin-bottom: 6px; }
.emptystate p { color: var(--muted); margin-bottom: 14px; }

/* ---------- Product detail ---------- */
.pdp { display: grid; gap: 22px; }
@media (min-width: 900px) {
  .pdp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
}
.pdp__media {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bone-2);
  border: 1px solid var(--line);
}
.pdp__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.pdp__info { min-width: 0; }
.pdp__cat {
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 6px;
}
.pdp__info h1 { font-size: clamp(1.6rem, 6vw, 2.5rem); margin-bottom: 10px; }
.pdp__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.pdp__price span { font-family: var(--body); font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.pdp__stock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ok);
  margin-bottom: 14px;
}
.pdp__stock--out { color: var(--red-dark); }
.pdp__stock svg { width: 15px; height: 15px; fill: currentColor; }

.qtyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 6px;
}
.qty {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  flex: none;
  background: #fff;
}
.qty button {
  width: 42px; height: 44px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.qty button:hover { background: var(--bone-2); }
.qty input {
  width: 46px; height: 44px;
  border: 0; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  background: none; color: var(--ink);
  -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty input:focus { outline: none; }
.qtyrow .btn { flex: 1 1 160px; }
.qtyrow__unit {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--muted);
  margin-left: -4px;
  flex: none;
}
.cartrow__unit b { color: var(--ink); }
.ordercard__ref {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.76rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.ordercard__meta { font-size: 0.82rem; color: var(--muted); margin: -6px 0 12px; }

.pdp__note {
  background: var(--red-soft);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 11px 14px;
  font-size: 0.89rem;
  margin: 16px 0;
  color: #5c2a2c;
}
.pdp__note b { color: #7d1a20; }

.spectable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0 0 20px;
}
.spectable th,
.spectable td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spectable th {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  width: 38%;
  background: var(--bone-2);
}
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.cooklist { list-style: none; padding: 0; margin: 0 0 20px; }
.cooklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}
.cooklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--gold);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317110f'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- Prose ---------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 1.7em; }
.prose h3 { margin-top: 1.4em; }
.prose > :first-child { margin-top: 0; }
.prose ul li::marker { color: var(--red); }

.layout { display: grid; gap: 30px; }
@media (min-width: 980px) {
  .layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
}
.layout > * { min-width: 0; }

.aside { display: grid; gap: 16px; }
@media (min-width: 980px) { .aside { position: sticky; top: 96px; } }
.aside__box {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
}
.aside__box h3 { font-size: 1.1rem; margin-bottom: 8px; }
.aside__box p { font-size: 0.92rem; color: var(--muted); }
.aside__box .btn { width: 100%; margin-bottom: 8px; }
.aside__box .btn:last-child { margin-bottom: 0; }
.aside__box--dark { background: var(--ink); border-color: var(--ink); color: #dfd4cd; }
.aside__box--dark h3 { color: #fff; }
.aside__box--dark p { color: #c3b5ad; }
.aside__script { font-family: var(--script); color: var(--gold); font-size: 1.2rem; margin: 0 0 2px; line-height: 1.1; }
.aside__nap { display: grid; gap: 10px; font-size: 0.9rem; }
.aside__nap > div { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.aside__nap svg { width: 17px; height: 17px; fill: var(--red); flex: none; margin-top: 3px; }
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { margin: 0; border-bottom: 1px solid var(--line-2); }
.linklist li:last-child { border-bottom: 0; }
.linklist a { display: block; padding: 9px 0; font-size: 0.92rem; font-weight: 500; }

/* ---------- Cards / features ---------- */
.cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cards > * { min-width: 0; }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.card__icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--red-soft);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.card__icon svg { width: 22px; height: 22px; fill: var(--red); }
.card h3 { margin-bottom: 7px; }
.card p:last-child { margin-bottom: 0; }
.card--dark { background: var(--ink-2); border-color: var(--ink-3); color: #cfc1b9; }
.card--dark h3 { color: #fff; }
/* the "About 3-4kg" style line under a card heading */
.card__meta {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--red-dark);
  margin: -2px 0 10px;
}
.card--dark .card__meta { color: var(--gold); }
.card--dark .card__icon { background: rgba(242, 181, 48, 0.15); }
.card--dark .card__icon svg { fill: var(--gold); }

.imgcard { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.imgcard img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.imgcard__body { padding: 16px; }
.imgcard__body h3 { margin-bottom: 6px; }
.imgcard__body p:last-child { margin-bottom: 0; }

/* Split image + text */
.split { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
  .split--rev > *:first-child { order: 2; }
}
.split > * { min-width: 0; }
.split__media { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Numbered steps */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps li {
  counter-increment: s;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px 18px 18px 20px;
  margin: 0;
  min-width: 0;
}
.steps li::before {
  content: counter(s);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  margin-bottom: 10px;
}
.steps h3 { font-size: 1.05rem; margin-bottom: 5px; }
.steps p { font-size: 0.92rem; color: var(--muted); margin: 0; }

/* Bullet checklist */
.checks { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 28px; margin: 0; font-size: 0.96rem; }
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--red);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.section--dark .checks li::before { background-color: var(--gold); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317110f'%3E%3Cpath d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E"); }

/* Pills list (e.g. "also at the counter") */
.pills { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; padding: 0; margin: 0 0 16px; }
.pills li {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 500;
  background: var(--bone-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  color: #4a3c36;
}
.section--dark .pills li { background: var(--ink-3); border-color: var(--ink-3); color: #cfc1b9; }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 16px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.35;
  color: var(--ink);
  text-align: left;
}
.faq__q::after {
  content: "";
  flex: none;
  width: 22px; height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--bone-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d81f26'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.22s ease;
}
.faq__q[aria-expanded="true"] { color: var(--red); }
.faq__q[aria-expanded="true"]::after { transform: rotate(45deg); }
/* Open/closed is driven purely by the .is-open class, with NO transition on the
   property that gates visibility. A transitioned max-height stays pinned at its
   start value whenever the animation clock does not tick (background tab, a
   throttled or non-compositing renderer), which would leave answers permanently
   hidden. Snapping open is less pretty and always correct. The +/- icon still
   animates, because if that freezes nothing is lost. */
.faq__a {
  max-height: 0;
  overflow: hidden;
}
.faq__item.is-open .faq__a { max-height: 2000px; }
.faq__a > div {
  padding: 0 34px 16px 0;
  font-size: 0.96rem;
  color: #4c3e38;
}
.faq__a p { margin: 0 0 12px; font-size: 0.96rem; color: #4c3e38; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a > div > *:first-child { margin-top: 0; }
.section--dark .faq { border-color: var(--ink-3); }
.section--dark .faq__item { border-color: var(--ink-3); }
.section--dark .faq__q { color: #fff; }
.section--dark .faq__a > div,
.section--dark .faq__a p { color: #c8bab2; }

/* ---------- CTA band ---------- */
.cta {
  position: relative;
  background: var(--ink);
  color: #e4d9d2;
  border-radius: var(--r);
  padding: 30px 20px 32px;
  text-align: center;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../assets/sections/kamundia-butchery-team-city-market-nairobi.jpg");
  background-size: cover;
  background-position: 50% 30%;
  opacity: 0.2;
}
.cta > * { position: relative; z-index: 2; }
.cta h2 { color: #fff; }
.cta p { max-width: 62ch; margin-inline: auto; }
.cta__script { font-family: var(--script); color: var(--gold); font-size: 1.4rem; margin: 0 0 2px; line-height: 1.1; }
.cta__note { font-size: 0.86rem; color: #b7a9a1; margin-top: 16px; margin-bottom: 0; }
.cta .btn-row { justify-content: center; }
@media (min-width: 700px) { .cta { padding: 46px 40px 48px; } }

/* ---------- NAP card + map ---------- */
.napcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
.napcard h3 { margin-bottom: 12px; }
.napcard__rows { display: grid; gap: 11px; font-size: 0.94rem; margin-bottom: 4px; }
.napcard__rows > div { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.napcard__rows svg { width: 18px; height: 18px; fill: var(--red); flex: none; margin-top: 3px; }
.napcard__rows small { color: var(--muted); }

.mapwrap {
  border-radius: var(--r);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bone-2);
  line-height: 0;
}
.mapwrap iframe { width: 100%; height: 320px; border: 0; display: block; }
@media (min-width: 900px) { .mapwrap iframe { height: 420px; } }

.hoursbox { margin-top: 16px; }
.hoursbox table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.hoursbox td { padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.hoursbox td:last-child { text-align: right; font-weight: 600; color: var(--ink); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 14px; }
/* align-items:start matters: without it a field whose neighbour carries helper
   text gets stretched to the taller row height, and because .field is itself a
   grid the spare space is absorbed by its rows - which pushed the label down and
   stretched the input to 59px next to a 45px select. */
.form__row { display: grid; gap: 14px; align-items: start; }
@media (min-width: 620px) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label { font-family: var(--display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--text);
}
.field textarea { min-height: 130px; resize: vertical; }
/* same treatment as the shop sort control so every select matches */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2317110f'%3E%3Cpath d='M12 15.4 6.3 9.7l1.4-1.4 4.3 4.3 4.3-4.3 1.4 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px;
}
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(216, 31, 38, 0.12); }
.field small { color: var(--muted); font-size: 0.82rem; }
.hp { position: absolute; left: -9999px; }

.formnote {
  font-size: 0.87rem;
  color: var(--muted);
  background: var(--bone-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0;
}

/* ---------- Cart ---------- */
.cartlayout { display: grid; gap: 22px; }
@media (min-width: 940px) { .cartlayout { grid-template-columns: minmax(0, 1fr) 350px; gap: 32px; align-items: start; } }
.cartlayout > * { min-width: 0; }

.cartlist { display: grid; gap: 10px; }
.cartrow {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 10px;
}
.cartrow img { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; background: var(--bone-2); }
.cartrow__main { min-width: 0; }
.cartrow__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 2px;
}
.cartrow__name a { color: inherit; }
.cartrow__unit { font-size: 0.8rem; color: var(--muted); margin: 0 0 8px; }
.cartrow__ctl { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cartrow__ctl .qty { transform: scale(0.86); transform-origin: left center; }
.cartrow__sum { font-family: var(--display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.cartrow__del {
  border: 0; background: none; cursor: pointer;
  color: var(--muted); font-size: 0.82rem; text-decoration: underline;
  padding: 4px 0;
}
.cartrow__del:hover { color: var(--red); }

.summary {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
}
@media (min-width: 940px) { .summary { position: sticky; top: 96px; } }
.summary h3 { margin-bottom: 12px; }
.summary__rows { display: grid; gap: 9px; font-size: 0.95rem; margin-bottom: 14px; }
.summary__rows > div { display: flex; justify-content: space-between; gap: 12px; }
.summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  border-top: 2px solid var(--ink);
  padding-top: 12px;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--ink);
}
.summary .btn { width: 100%; margin-bottom: 9px; }
.summary__fine { font-size: 0.82rem; color: var(--muted); margin: 6px 0 0; }
.summary__pending { font-style: normal; color: var(--red-dark); font-weight: 600; font-size: 0.88rem; }
.summary__qty { display: block; font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.summary__plus { font-family: var(--body); font-weight: 500; font-size: 0.72rem; color: var(--muted); display: block; }
.summary__rows [data-fee-row].is-set span:last-child { font-weight: 700; color: var(--ink); }

/* Delivery fee table (delivery page, meat-delivery page, areas hub, cart) */
.feetable th[scope="row"] { width: 34%; vertical-align: middle; background: var(--bone-2); }
.feetable__fee {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
  padding: 4px 13px;
  white-space: nowrap;
}
.feetable__fee--ask { background: var(--ink); }
.feetable td { font-size: 0.92rem; }

/* "Delivery to X is a flat KSh Y" line under the account area select */
.feenote {
  margin: 0 0 4px;
  font-size: 0.9rem;
  color: #4a3c36;
  background: var(--bone-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 13px;
}
.feenote b { color: var(--red-dark); }

/* M-Pesa "how to pay" box on the delivery page */
.paybox {
  background: var(--ink);
  color: #e6dbd4;
  border-radius: var(--r);
  padding: 20px 22px;
  margin: 18px 0 22px;
}
.paybox h3 { color: #fff; margin-bottom: 10px; }
.paybox ol { margin: 0 0 12px; padding-left: 1.25em; }
.paybox li { margin-bottom: 6px; }
.paybox b { color: #fff; }
.paybox__till {
  display: inline-block;
  background: var(--gold);
  color: var(--ink) !important;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  padding: 1px 10px;
  border-radius: 6px;
}
.paybox p { color: #cbbeb6; }

/* ---------- Account ---------- */
.acctabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
  padding-bottom: 0;
  scrollbar-width: none;
}
.acctabs::-webkit-scrollbar { display: none; }
.acctab {
  flex: none;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 12px 14px;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.acctab.is-on { color: var(--red); border-bottom-color: var(--red); }
.accpanel[hidden] { display: none; }

.orderlist { display: grid; gap: 12px; }
.ordercard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}
.ordercard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.ordercard__date { font-family: var(--display); font-weight: 700; color: var(--ink); }
.ordercard__tot { font-family: var(--display); font-weight: 700; color: var(--red-dark); }
.ordercard ul { margin: 0 0 12px; padding-left: 1.1em; font-size: 0.9rem; color: #4c3e38; }
.ordercard ul li { margin-bottom: 3px; }

/* ---------- Toast ---------- */
/* Inset from BOTH edges and centred with margin-inline:auto. With only
   `left:50%` the shrink-to-fit width resolves against just half the viewport,
   which squeezed the label into one word per line. */
.toast {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 80px;
  margin-inline: auto;
  width: fit-content;
  z-index: 120;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 9px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  padding: 11px 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.25;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.toast svg { width: 17px; height: 17px; fill: var(--gold); flex: none; }
/* keep it to a single line - long product names ellipsise rather than wrap */
.toast > span {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toast a { color: var(--gold); text-decoration: underline; flex: none; white-space: nowrap; }
@media (min-width: 900px) { .toast { bottom: 24px; } }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink);
  color: #b3a49c;
  padding: 38px 0 20px;
  font-size: 0.92rem;
  border-top: 4px solid var(--red);
}
.footer__grid { display: grid; gap: 28px; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 32px; } }
.footer__grid > * { min-width: 0; }
.footer h4 {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer ul li { margin-bottom: 8px; }
.footer a { color: #cdbdb4; }
.footer a:hover { color: #fff; }
.footer__logo {
  height: 44px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 8px;
  padding: 5px 9px;
  margin-bottom: 8px;
}
.footer__script { font-family: var(--script); color: var(--gold); font-size: 1.25rem; margin: 0 0 6px; line-height: 1.1; }
.footer__brand p { color: #a2938b; font-size: 0.89rem; }

.socials { display: flex; gap: 8px; margin-top: 4px; }
.socials a {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
}
.socials a:hover { background: var(--red); }
.socials svg { width: 18px; height: 18px; fill: #fff; }

.footer__nap { display: grid; gap: 10px; }
.footer__nap > div { display: flex; gap: 9px; align-items: flex-start; min-width: 0; }
.footer__nap svg { width: 16px; height: 16px; fill: var(--gold); flex: none; margin-top: 3px; }
.footer__nap b { color: #fff; }

.footer__areas {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ink-3);
  font-size: 0.85rem;
  line-height: 1.9;
}
.footer__areas b { color: var(--gold); font-weight: 600; }

.footer__bottom {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--ink-3);
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: #8d7f78;
}
.footer__bottom p { margin: 0; }
@media (min-width: 800px) {
  .footer__bottom { grid-template-columns: 1fr auto; align-items: center; }
  .footer__bottom p:last-child { text-align: right; }
}

/* ---------- Fixed mobile call bar ---------- */
.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(23, 17, 15, 0.97);
  border-top: 1px solid var(--ink-3);
}
.callbar .btn {
  padding: 10px 6px;
  min-height: 44px;
  font-size: 0.82rem;
  border-radius: var(--r-sm);
  gap: 6px;
}
.callbar .btn svg { width: 16px; height: 16px; }
@media (min-width: 900px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Misc ---------- */
.center { text-align: center; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.viewall { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-weight: 700; }
.viewall svg { width: 16px; height: 16px; fill: currentColor; }

.notice {
  background: var(--bone-2);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 14px 16px;
  margin: 0 0 20px;
  font-size: 0.94rem;
}
.notice p:last-child { margin-bottom: 0; }
/* icons sitting inline in notice copy */
.notice svg {
  width: 1.05em;
  height: 1.05em;
  fill: var(--red);
  vertical-align: -0.16em;
  margin-right: 2px;
}

.arealist { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .arealist { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.arealist a {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 13px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  min-width: 0;
}
.arealist a:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.arealist svg { width: 16px; height: 16px; fill: var(--red); flex: none; }
.arealist span { overflow: hidden; text-overflow: ellipsis; }

.gallery { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery figure { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery figcaption { padding: 10px 12px; font-size: 0.83rem; color: var(--muted); }