/* Abol Ethiopian Market — shared stylesheet.
   Layout and type only. Every business fact is injected at runtime by
   js/site.js from site_config.json. */

:root {
  --green: #1f5c3d;
  --green-dark: #143f2a;
  --amber: #d99b16;
  --terracotta: #a8391f;
  --cream: #faf6ef;
  --sand: #efe6d7;
  --ink: #2b2620;
  --ink-soft: #5c5348;
  --line: #ddd0bb;
  --radius: 10px;
  --wrap: 1080px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 17px/1.65 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: var(--green-dark);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin-top: 0; }
h3 { font-size: 1.15rem; }

a { color: var(--green); }
a:hover { color: var(--terracotta); }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--green-dark); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: .5rem; top: .5rem; }

/* ---------- Header / nav (injected identically on all 6 pages) ---------- */

.site-header {
  background:
    radial-gradient(circle at 12% 0%, rgba(217, 155, 22, .16), transparent 55%),
    var(--green-dark);
  color: var(--cream);
}
.site-header a { color: var(--cream); text-decoration: none; }
.header-top {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding: .9rem 0;
}
.brand { font-family: Georgia, serif; font-size: 1.35rem; font-weight: 700; letter-spacing: .01em; }
.brand .brand-am {
  display: block; font-size: 1.15rem; font-weight: 400; line-height: 1.3;
  color: var(--amber); letter-spacing: .02em;
}
.brand .brand-loc { display: block; font-family: inherit; font-size: .72rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber); opacity: .85; }
.header-contact { font-size: .92rem; text-align: right; }
.header-contact a { text-decoration: underline; }

.site-nav ul {
  display: flex; flex-wrap: wrap; gap: .15rem;
  list-style: none; margin: 0; padding: 0 0 .5rem;
}
.site-nav a {
  display: block; padding: .5rem .85rem; border-radius: var(--radius);
  font-size: .95rem;
}
.site-nav a:hover { background: rgba(255, 255, 255, .12); }
.site-nav a[aria-current="page"] { background: var(--amber); color: var(--green-dark); font-weight: 600; }

/* ---------- Sections ---------- */

main { display: block; }

.hero {
  background:
    radial-gradient(ellipse at 85% -10%, rgba(217, 155, 22, .22), transparent 60%),
    radial-gradient(ellipse at 0% 110%, rgba(168, 57, 31, .10), transparent 55%),
    linear-gradient(180deg, var(--sand), var(--cream));
  border-bottom: 1px solid var(--line);
  padding: 2.75rem 0 2.25rem;
}

/* gold rule under every section heading, echoing the tibeb band */
main h2 {
  position: relative; padding-bottom: .45rem;
}
main h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 54px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--green) 0 33%, var(--amber) 33% 66%, var(--terracotta) 66% 100%);
}
.hero p.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; margin: 0 0 1.25rem; }

section { padding: 2.25rem 0; }
section + section { border-top: 1px solid var(--line); }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem;
}
.card h3 { margin-top: 0; }
.card ul { margin: 0; padding-left: 1.15rem; }
.card ul li { margin: .2rem 0; }

.price { font-weight: 700; color: var(--terracotta); font-size: 1.05rem; }
.serves { color: var(--ink-soft); font-size: .92rem; margin: 0 0 .6rem; }

.btn {
  display: inline-block; background: var(--green); color: #fff;
  padding: .7rem 1.35rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; border: 0; cursor: pointer;
  font-size: 1rem; font-family: inherit;
}
.btn:hover { background: var(--green-dark); color: #fff; }
.btn.secondary { background: transparent; color: var(--green); border: 2px solid var(--green); }
.btn.secondary:hover { background: var(--green); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.pill-list li {
  background: var(--sand); border: 1px solid var(--line);
  border-radius: 999px; padding: .3rem .9rem; font-size: .92rem;
}

.note {
  background: #fff; border-left: 4px solid var(--amber);
  padding: .9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 1.25rem 0;
}

.hours-table { border-collapse: collapse; width: 100%; max-width: 420px; }
.hours-table th, .hours-table td {
  text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line);
}
.hours-table th { font-weight: 600; }

.placeholder-img {
  display: block; width: 100%; border-radius: var(--radius);
  border: 1px dashed var(--line); background: var(--sand);
}

/* Photos. The owner's own files are small (260–312px wide) and the stock
   images are 640x480, so every image is locked to one 4:3 box with
   object-fit: cover. That keeps rows even and stops the small originals
   being stretched far past their natural size. Raise --photo-w once
   full-resolution originals arrive. */
:root { --photo-w: 300px; }

.photo-row {
  display: flex; flex-wrap: wrap; gap: 1.25rem;
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.photo { margin: 0; flex: 0 1 var(--photo-w); max-width: var(--photo-w); }
.photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); background: var(--sand);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(43, 38, 32, .09);
}
.photo figcaption {
  margin-top: .5rem; font-size: .88rem; line-height: 1.5; color: var(--ink-soft);
  border-left: 3px solid var(--amber); padding-left: .6rem;
}

/* ---------- Tibeb: the woven band on Ethiopian netela / habesha kemis ----- */

.tibeb {
  height: 14px; width: 100%;
  background: url("../img/tibeb-border.svg") repeat-x center / auto 100%;
}
.tibeb-thick { height: 22px; }

/* Food photos are square: the owner's shots are mostly portrait, and a 4:3
   crop cut the plate in half. A square keeps the whole platter in frame. */
.photo-row--food .photo img { aspect-ratio: 1 / 1; }

.price-table th[scope="col"] {
  border-bottom: 2px solid var(--line); font-size: .9rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
}
.price-table { max-width: 560px; }
.rate-notes { margin: .9rem 0 0; padding-left: 1.15rem; color: var(--ink-soft); font-size: .95rem; }
.rate-notes li { margin: .25rem 0; }

.map-frame { width: 100%; height: 380px; border: 1px solid var(--line); border-radius: var(--radius); }

/* ---------- Forms ---------- */

.order-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field .req { color: var(--terracotta); }
.field input, .field select, .field textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  border: 1px solid var(--line); border-radius: 6px; background: var(--cream);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 3px solid var(--amber); outline-offset: 1px;
}
.field textarea { min-height: 5.5rem; resize: vertical; }
.form-help { color: var(--ink-soft); font-size: .9rem; margin: .25rem 0 0; }

/* ---------- Footer ---------- */

.site-footer {
  background:
    radial-gradient(circle at 88% 0%, rgba(217, 155, 22, .14), transparent 55%),
    var(--green-dark);
  color: var(--sand);
  margin-top: 2rem; padding: 0 0 1.5rem;
}
.site-footer > .wrap { padding-top: 2.25rem; }
.site-footer a { color: var(--amber); }
.site-footer h2 { color: #fff; font-size: 1.1rem; }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: .25rem 0; }
.footer-bottom {
  margin-top: 1.75rem; padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: .88rem; color: #cdbfa6;
}

/* ---------- Config-missing marker (PLAYBOOK step 1) ---------- */

.tbd {
  background: #fff3cd; color: #7a5b00; border: 1px dashed #c9a227;
  padding: .1rem .45rem; border-radius: 4px; font-size: .9em; font-weight: 600;
}

.config-error {
  background: #fdecea; border: 1px solid #d9534f; color: #7a231e;
  padding: 1rem; border-radius: var(--radius); margin: 1rem 0;
}

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

@media (max-width: 640px) {
  .header-contact { text-align: left; }
  .site-nav ul { gap: .1rem; }
  .site-nav a { padding: .45rem .6rem; font-size: .9rem; }
}

/* ---------- Buna Break promotion ---------------------------------------- */

.promo-pill {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--amber); color: var(--green-dark) !important;
  padding: .5rem .9rem; border-radius: var(--radius);
  margin: 0 0 .6rem; font-size: .93rem; text-decoration: none !important;
}
.promo-pill:hover { background: #eeae2a; }
.promo-pill-tag {
  background: var(--green-dark); color: var(--cream);
  border-radius: 999px; padding: .12rem .6rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.promo-pill-text { font-weight: 600; }
.promo-pill-go { margin-left: auto; font-weight: 700; }

.promo {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 2px 10px rgba(43, 38, 32, .07);
}
.promo-body {
  display: grid; gap: 1.75rem; padding: 1.75rem;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
.promo-kicker {
  margin: 0 0 .35rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta);
}
.promo-kicker [lang="am"] {
  font-size: 1.15rem; letter-spacing: 0; text-transform: none; vertical-align: -.1em;
}
.promo-offer { margin: 0 0 .4rem; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.promo-tagline { margin: 0 0 1.1rem; color: var(--ink-soft); max-width: 46ch; }

.promo-status {
  background: var(--sand); border-radius: var(--radius);
  padding: .7rem .9rem; margin-bottom: 1rem; font-size: .97rem;
}
.promo-live { color: var(--terracotta); }
.promo-dot {
  display: inline-block; width: .55rem; height: .55rem; margin-right: .45rem;
  border-radius: 50%; background: var(--terracotta); vertical-align: middle;
  animation: promo-pulse 1.6s ease-in-out infinite;
}
@keyframes promo-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .promo-dot { animation: none; } }

.promo-clock {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--green-dark);
}
.promo-btn { font-size: 1.05rem; }
.promo-note { margin: .7rem 0 0; color: var(--ink-soft); font-size: .92rem; max-width: 44ch; }
.promo-used { color: var(--terracotta); font-weight: 600; }

.promo-side h3 { margin: 0 0 .5rem; font-size: 1rem; }
.promo-hours { list-style: none; margin: 0 0 1rem; padding: 0; font-size: .93rem; }
.promo-hours li { padding: .25rem 0; border-bottom: 1px dashed var(--line); }
.promo-hours strong { color: var(--green-dark); }
.promo-terms {
  margin: 0; padding-left: 1.1rem; font-size: .85rem;
  color: var(--ink-soft); line-height: 1.5;
}
.promo-terms li { margin: .2rem 0; }

/* the claimed ticket */
.ticket {
  background: linear-gradient(180deg, var(--green-dark), #0f3220);
  color: var(--cream); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; text-align: center; max-width: 22rem;
  border: 2px dashed var(--amber);
}
.ticket-label {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.ticket-code {
  margin: .55rem 0 .35rem;
  font-family: "Consolas", "SFMono-Regular", Menlo, monospace;
  font-size: clamp(1.4rem, 4.5vw, 1.9rem); font-weight: 700;
  letter-spacing: .06em; color: #fff;
}
.ticket-expiry { margin: 0 0 .5rem; font-size: .93rem; color: var(--sand); }
.ticket-expiry .promo-clock { color: var(--amber); }
.ticket-store {
  margin: 0; padding-top: .5rem; font-size: .82rem; color: #cdbfa6;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

@media (max-width: 720px) {
  .promo-body { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.25rem; }
  .promo-pill-go { display: none; }
}

.promo-img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius); border: 1px solid var(--line);
  margin-bottom: 1rem;
}

.promo-review {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  justify-content: space-between;
  background: var(--sand); border-top: 1px solid var(--line);
  padding: 1.25rem 1.75rem;
}
.promo-review h3 { margin: 0 0 .2rem; font-size: 1.1rem; }
.promo-review p { margin: 0; color: var(--ink-soft); font-size: .93rem; max-width: 52ch; }
.promo-review-btn { white-space: nowrap; }

@media (max-width: 720px) {
  .promo-review { padding: 1.25rem; }
  .promo-review-btn { width: 100%; text-align: center; }
}

/* ---------- Buna Break: compact variant ---------------------------------
   The promotion sits below "What we carry" so the first h2 on the home page
   is about the shop, not the offer. It is deliberately kept to a small
   vertical footprint so it reads as a strip, not a second hero. */

.promo-body { padding: 1.15rem 1.35rem; gap: 1.35rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.promo-offer { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: .3rem; }
.promo-kicker { font-size: .74rem; margin-bottom: .25rem; }
.promo-kicker [lang="am"] { font-size: 1rem; }
.promo-tagline { font-size: .93rem; margin-bottom: .8rem; }
.promo-status { padding: .55rem .75rem; margin-bottom: .8rem; font-size: .92rem; }
.promo-btn { font-size: .97rem; padding: .6rem 1.15rem; }
.promo-note { font-size: .87rem; margin-top: .55rem; }

.promo-img { aspect-ratio: 16 / 9; margin-bottom: .7rem; }
.promo-side h3 { font-size: .88rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.promo-hours { font-size: .88rem; margin-bottom: .6rem; }
.promo-hours li { padding: .18rem 0; }

.promo-details { font-size: .84rem; color: var(--ink-soft); }
.promo-details summary { cursor: pointer; color: var(--green); }
.promo-details summary:hover { color: var(--terracotta); }
.promo-terms { margin: .4rem 0 0; font-size: .84rem; }

.promo-review { padding: .85rem 1.35rem; gap: .75rem 1.25rem; }
.promo-review h3 { font-size: .98rem; }
.promo-review p { font-size: .88rem; }
.promo-review-btn { font-size: .92rem; padding: .55rem 1.1rem; }

.ticket { padding: .85rem 1rem; max-width: 20rem; }
.ticket-code { font-size: clamp(1.2rem, 3.6vw, 1.5rem); margin: .4rem 0 .3rem; }
.ticket-expiry { font-size: .87rem; }
.ticket-store { font-size: .76rem; padding-top: .4rem; }

@media (max-width: 720px) {
  .promo-body { grid-template-columns: 1fr; padding: 1.1rem; }
  .promo-img { aspect-ratio: 2 / 1; }
}

/* ==========================================================================
   Mobile
   --------------------------------------------------------------------------
   Measured in Chromium at 390x844 before this block existed: the header was
   389px tall — 46% of the viewport — and the <h1> did not start until 433px.
   Brand, phone, address, a two-row nav and the promo pill were all stacked
   full-size. The rules below cut that to roughly 240px, fill the wasted
   50px beside every photo, and restack the rates table, which had been
   squeezed into 81px columns.
   ========================================================================== */

@media (max-width: 620px) {

  /* --- header: the big win ------------------------------------------- */

  .header-top { padding: .7rem 0 .55rem; gap: .35rem; }

  .brand { font-size: 1.3rem; line-height: 1.15; }
  /* Amharic sits beside the name instead of on its own line */
  .brand .brand-am { display: inline; font-size: 1.05rem; margin-left: .35rem; }
  /* the town is already in the <h1>, the footer and the schema */
  .brand .brand-loc { display: none; }

  .header-contact { font-size: 1rem; margin: 0; }
  /* the address stays in the footer, on /contact and in the JSON-LD */
  .header-addr { display: none; }
  .header-addr + br,
  .header-contact br { display: none; }
  .header-tel { display: inline-block; padding: .25rem 0; font-weight: 600; }

  /* nav: keep two rows but give every link a proper 44px touch target */
  .site-nav ul { gap: .2rem; padding-bottom: .45rem; }
  .site-nav a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 .7rem; font-size: .95rem;
  }

  /* promo pill on one line */
  .promo-pill {
    gap: .5rem; padding: .45rem .8rem; margin-bottom: .45rem;
    font-size: .87rem; flex-wrap: nowrap; align-items: center;
  }
  .promo-pill-tag { font-size: .76rem; padding: .12rem .5rem; white-space: nowrap; }
  .promo-pill-text {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }

  .tibeb-thick { height: 16px; }

  /* --- content ------------------------------------------------------- */

  section { padding: 1.75rem 0; }
  .hero { padding: 2rem 0 1.75rem; }
  .hero p.lede { font-size: 1.05rem; }

  /* photos filled only 300px of a 350px column, leaving a dead gap */
  .photo { flex: 1 1 100%; max-width: 100%; }
  .photo figcaption { max-width: none; }
  .photo-row { gap: 1.5rem; }

  /* buttons are easier to hit full width */
  .btn { display: block; width: 100%; text-align: center; padding: .8rem 1rem; }
  .btn-row { gap: .6rem; }
  .btn-row .btn { width: 100%; }

  /* footer links need room for a thumb */
  .site-footer li a { display: inline-block; padding: .3rem 0; }

  .map-frame { height: 300px; }
  .order-form { padding: 1.1rem; }

  .promo-kicker { font-size: .8rem; }
}

/* rates and hours tables: 3 columns in 350px gave 81px-wide cells and
   4-line wraps. Restack them as label/value rows instead. */
@media (max-width: 560px) {
  .price-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; width: 100%; }
  .price-table tr {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .7rem .9rem; margin-bottom: .7rem; background: #fff;
  }
  .price-table th[scope="row"] {
    border: 0; padding: 0 0 .3rem; font-family: Georgia, serif;
    font-size: 1.05rem; color: var(--green-dark);
  }
  .price-table td { border: 0; padding: .1rem 0; }
  .price-table td:first-of-type { font-weight: 700; color: var(--terracotta); }
  .price-table td:last-of-type { color: var(--ink-soft); font-size: .92rem; }
}

/* Touch targets. WCAG 2.5.8 exempts links inline in a sentence, so prose
   links are left alone; everything that reads as a control gets 44px. */
@media (max-width: 620px) {
  .brand { display: inline-block; padding: .55rem 0; }

  .header-tel { min-height: 44px; display: inline-flex; align-items: center; }

  .promo-pill { min-height: 44px; }

  /* footer page list — same labels as the nav, and it was 38px */
  .site-footer li a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0;
  }
  /* phone and email in the footer NAP block */
  .site-footer p a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  .promo-details summary {
    min-height: 44px; display: flex; align-items: center;
  }
  .promo-kicker { font-size: .82rem; }
  .promo-kicker [lang="am"] { font-size: 1.05rem; }
}

/* ---------- At the counter: services grid -------------------------------- */

.section-intro { color: var(--ink-soft); max-width: 62ch; margin: 0 0 1.35rem; }

.service-grid {
  display: grid; gap: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.service {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  border-left: 4px solid var(--amber);
  padding: .95rem 1.1rem;
}
.service h3 {
  margin: 0 0 .3rem; font-size: 1.05rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.service p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.55; }
.service-tag {
  background: var(--green-dark); color: var(--cream);
  border-radius: 999px; padding: .1rem .55rem;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

@media (max-width: 620px) {
  .service-grid { grid-template-columns: 1fr; gap: .7rem; }
  .service { padding: .85rem 1rem; }
}

/* ---------- Siga bet cut menu -------------------------------------------
   Laid out like a butcher's board: Amharic name, English name, then what
   the cut is for. */

.cut-menu { list-style: none; margin: 0; padding: 0; }

.cut {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .15rem 1.25rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.cut:first-child { border-top: 1px solid var(--line); }

.cut-am {
  grid-row: 1 / span 2; align-self: start;
  font-size: 1.25rem; line-height: 1.35; color: var(--terracotta);
}
.cut-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.1rem; font-weight: 700; color: var(--green-dark);
}
.cut-detail { color: var(--ink-soft); font-size: .93rem; line-height: 1.55; }

@media (max-width: 620px) {
  .cut { grid-template-columns: 1fr; gap: .1rem; padding: .8rem 0; }
  .cut-am { grid-row: auto; font-size: 1.15rem; }
  .cut-name { font-size: 1.05rem; }
}

/* ---------- Brand mark ---------------------------------------------------
   The mesob roundel sits beside the shop name. Its own background is the
   same dark green as the header, so on the header only the gold ring and
   the cream basket read — which is the intended effect. */

.brand { display: flex; align-items: center; gap: .65rem; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 auto; display: block; }
.brand-text { display: block; }

@media (max-width: 620px) {
  .brand { display: flex; gap: .55rem; padding: .5rem 0; }
  .brand-mark { width: 38px; height: 38px; }
}