:root {
  color-scheme: light;
  --bg: #efe4d8;
  --page: #fffbf6;
  --surface: #ffffff;
  --surface-2: #f6ece1;
  --ink: #2a1c13;
  --ink-soft: #6d5646;
  --ink-faint: #9a8474;
  --orange: #c2571f;
  --orange-ink: #ffffff;
  --orange-soft: #f7e0cf;
  --caramel: #b57a34;
  --brown: #5b3920;
  --espresso: #2a1c13;
  --line: rgba(42, 28, 19, 0.11);
  --line-2: rgba(42, 28, 19, 0.2);
  --veg: #6e6b1f;
  --veg-bg: #eeebcf;
  --warn: #b23a22;
  --warn-bg: #f8ddd4;
  --ok: #5e7a2e;
  --field: #ffffff;
  --field-line: rgba(42, 28, 19, 0.2);
  --shadow: 0 1px 2px rgba(42, 28, 19, 0.06), 0 10px 28px -14px rgba(42, 28, 19, 0.3);
  --sheet-shadow: 0 -12px 40px -10px rgba(20, 10, 4, 0.35);
  --serif: "Sorts Mill Goudy", "Goudy Old Style", Garamond, Georgia, serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Sacramento", "Brush Script MT", cursive;
  --display-weight: 400;
  --brand: #2a1c13;
  --brand-2: #4a2e1b;
  --brand-ink: #fbe9d2;
  --brand-ink-soft: #c9b29b;
  --hi: #e07a3a;
  --hi-ink: #1f1209;
  --accent: #c2571f;
  --warm: #b57a34;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0a07;
    --page: #18110c;
    --surface: #211710;
    --surface-2: #2a1e15;
    --ink: #f4e8db;
    --ink-soft: #c3ad99;
    --ink-faint: #8f7b6a;
    --orange: #f08a4b;
    --orange-ink: #1f1209;
    --orange-soft: #3a2416;
    --caramel: #e0aa66;
    --brown: #e9c9a4;
    --line: rgba(244, 232, 219, 0.1);
    --line-2: rgba(244, 232, 219, 0.2);
    --veg: #d6d08a;
    --veg-bg: #2c2a15;
    --warn: #f29a82;
    --warn-bg: #3b1e17;
    --ok: #b7cf7e;
    --field: #150f0a;
    --field-line: rgba(244, 232, 219, 0.2);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0a07;
  --page: #18110c;
  --surface: #211710;
  --surface-2: #2a1e15;
  --ink: #f4e8db;
  --ink-soft: #c3ad99;
  --ink-faint: #8f7b6a;
  --orange: #f08a4b;
  --orange-ink: #1f1209;
  --orange-soft: #3a2416;
  --caramel: #e0aa66;
  --brown: #e9c9a4;
  --line: rgba(244, 232, 219, 0.1);
  --line-2: rgba(244, 232, 219, 0.2);
  --veg: #d6d08a;
  --veg-bg: #2c2a15;
  --warn: #f29a82;
  --warn-bg: #3b1e17;
  --ok: #b7cf7e;
  --field: #150f0a;
  --field-line: rgba(244, 232, 219, 0.2);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
html,
body {
  margin: 0;
}
:root {
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body {
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  cursor: pointer;
}
img {
  max-width: 100%;
  display: block;
}
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 8px;
}
.page {
  max-width: 720px;
  margin: 0 auto;
  background: var(--page);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* no lonely last word in headings, slogans and descriptions */
.page :is(h1, h2, h3, .u-quote, .u-sub, .quote) {
  text-wrap: balance;
}
.page p {
  text-wrap: pretty;
}

/* ---------- cover ---------- */
.cover {
  position: relative;
  height: clamp(190px, 42vw, 270px);
  background: var(--brand);
  overflow: visible;
}
.cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 14, 8, 0.35) 0%, rgba(24, 14, 8, 0) 35%, rgba(24, 14, 8, 0.25) 100%);
}
.cover-fallback {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255, 220, 170, 0.1) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, rgba(255, 220, 170, 0.1) 0 2px, transparent 2px 14px),
    radial-gradient(80% 120% at 50% 0%, var(--brand-2), var(--brand));
}
.cover-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.seg {
  display: inline-flex;
  background: rgba(255, 251, 246, 0.94);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.seg button {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand);
  letter-spacing: 0.04em;
}
.seg button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--brand-ink);
}
.badge {
  position: absolute;
  left: 50%;
  bottom: -46px;
  transform: translateX(-50%);
  z-index: 3;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--brand-2), var(--brand));
  border: 4px solid var(--page);
  box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--brand-ink);
  overflow: hidden;
  text-align: center;
  padding: 6px;
}
.badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.badge .b1 {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.22rem;
  line-height: 1;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.badge .b2 {
  font-size: 0.46rem;
  letter-spacing: 0.34em;
  font-weight: 700;
  margin-top: 4px;
  padding-left: 0.34em;
  color: var(--hi);
}

/* ---------- sheet ---------- */
.sheet {
  position: relative;
  padding: 58px 16px 24px;
  display: grid;
  gap: 16px;
}
.venue {
  margin: 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  text-wrap: balance;
  font-size: clamp(1.9rem, 7vw, 2.4rem);
  line-height: 1.05;
  letter-spacing: 0.005em;
}
.quote {
  margin: -6px auto 0;
  text-align: center;
  font-family: var(--script);
  font-size: 1.55rem;
  line-height: 1.1;
  color: var(--caramel);
  max-width: 26ch;
  text-wrap: balance;
}
.info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.info a,
.info button {
  color: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.info a:hover,
.info button:hover {
  color: var(--orange);
}
.info svg {
  flex: none;
  color: var(--caramel);
}
.groups {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.gbtn {
  border: 1px solid var(--orange);
  background: transparent;
  color: var(--orange);
  border-radius: 999px;
  padding: 8px 22px;
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gbtn[aria-pressed="true"] {
  background: var(--orange);
  color: var(--orange-ink);
}
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 0 6px 0 18px;
  min-height: 46px;
}
.search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: none;
  min-width: 0;
  padding: 11px 0;
}
.search input::placeholder {
  color: var(--ink-faint);
}
.search .sicon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--page);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex: none;
}
.filters {
  display: flex;
  gap: 8px;
  margin: -6px -16px 0;
  padding: 0 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.filters::-webkit-scrollbar {
  display: none;
}
/* auto margins centre the row when it fits and let it start at the edge when it scrolls */
.filters > :first-child {
  margin-left: auto;
}
.filters > :last-child {
  margin-right: auto;
}
.fchip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 500;
}
.fchip[aria-pressed="true"] {
  background: var(--veg-bg);
  border-color: transparent;
  color: var(--veg);
}

/* ---------- tiles ---------- */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 600px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
  .tile {
    height: 150px;
  }
}
.tile {
  position: relative;
  height: clamp(120px, 32vw, 168px);
  border-radius: 24px;
  overflow: hidden;
  border: 0;
  padding: 0;
  text-align: center;
  color: #fff;
  background: var(--brand-2);
  display: block;
  width: 100%;
  box-shadow: var(--shadow);
}
.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.tile:hover img {
  transform: scale(1.04);
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 10, 4, 0.15), rgba(20, 10, 4, 0.5));
}
.tile.art::after {
  background: linear-gradient(180deg, rgba(20, 10, 4, 0), rgba(20, 10, 4, 0.18));
}
.tile .weave {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 60%);
}
.tile-t {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px;
}
.tile-name {
  font-weight: 600;
  font-size: clamp(1.2rem, 5vw, 1.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  line-height: 1.1;
  text-wrap: balance;
}
.tile-sub {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

/* ---------- category view ---------- */
.topbar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 8;
  background: color-mix(in srgb, var(--page) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar-in {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
.back {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  flex: none;
}
.topbar h1 {
  flex: 1;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar .seg {
  box-shadow: none;
  background: var(--surface-2);
}
.topbar .seg button {
  color: var(--ink-soft);
}
.topbar .seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
}
.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 16px 10px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}
.chip {
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 14px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}
.chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.cat-hero {
  position: relative;
  margin: 14px 16px 0;
  height: 150px;
  border-radius: 22px;
  overflow: hidden;
}
.cat-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.body {
  padding: 6px 16px 36px;
}
.note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 4px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--orange-soft);
  background: color-mix(in srgb, var(--orange-soft) 60%, transparent);
  color: var(--brown);
  font-size: 0.85rem;
  font-weight: 400;
}
.note svg {
  flex: none;
  margin-top: 2px;
  color: var(--orange);
}
.sec-title {
  margin: 22px 0 2px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--caramel);
}
.dishes {
  display: grid;
}
.dish {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  text-align: left;
}
.dish:last-child {
  border-bottom: 0;
}
.dish-txt {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 3px;
}
.dish-name {
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
}
.orig {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-faint);
  line-height: 1.2;
}
.dish-desc {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.87rem;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dish-price {
  margin-top: 3px;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
}
.dish-price .from {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--ink-faint);
  margin-right: 4px;
}
.dish-price.ask {
  font-weight: 600;
  font-style: italic;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.vpills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.vpill {
  font-size: 0.76rem;
  border-radius: 8px;
  background: var(--surface-2);
  padding: 3px 8px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.vpill b {
  color: var(--orange);
  font-weight: 700;
  margin-left: 4px;
}
.dish-img {
  flex: none;
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  background: var(--surface-2);
  box-shadow: var(--shadow);
}
.tag {
  display: inline-flex;
  align-items: center;
  vertical-align: 0.12em;
  margin-left: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 1px 7px;
  line-height: 1.45;
}
/* on the menu a tag is a hairline in its own colour instead of a filled pill */
.page .tag {
  border: 1px solid var(--line-2);
  border-color: color-mix(in srgb, currentColor 34%, transparent);
  background: transparent;
}
/* a venue's own colour gets the same hairline look as the built-in labels (the inline fill stays for gestão) */
.page .tag[style] {
  background: transparent !important;
  color: color-mix(in srgb, var(--tag-c) 78%, var(--ink)) !important;
  border-color: color-mix(in srgb, var(--tag-c) 45%, transparent);
}
.tag-veg {
  background: var(--veg-bg);
  color: var(--veg);
}
.tag-vegan {
  background: var(--veg-bg);
  color: var(--veg);
}
.tag-gf {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.tag-spicy {
  background: var(--warn-bg);
  color: var(--warn);
}
.tag-new {
  background: var(--ink);
  color: var(--page);
}
.page .tag-new {
  color: var(--ink);
}
.tag-house {
  background: var(--orange-soft);
  color: var(--orange);
}
.tag-out {
  background: var(--warn-bg);
  color: var(--warn);
}
#admin .tag,
#console .tag,
#admin .plan-pill,
#console .plan-pill {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  padding: 2px 8px;
}
.dish.is-out .dish-name,
.dish.is-out .dish-desc,
.dish.is-out .dish-img,
.dish.is-out .vpills {
  opacity: 0.5;
}
.dish.is-out .dish-price {
  text-decoration: line-through;
  opacity: 0.5;
}
.empty {
  padding: 36px 0;
  text-align: center;
  color: var(--ink-soft);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.btn-soft {
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink);
}
.foot {
  padding: 26px 16px 40px;
  color: var(--ink-faint);
  font-size: 0.8rem;
  display: grid;
  gap: 10px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.linkish {
  background: none;
  border: 0;
  padding: 6px 0;
  color: var(--orange);
  font-weight: 700;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  justify-self: center;
}

/* ---------- dish sheet ---------- */
/* while a sheet is open the page behind stays put (see lockScroll in core.js) */
html.scroll-locked.scroll-gutter {
  overflow-y: scroll;
}
html.scroll-locked body {
  position: fixed;
  left: 0;
  right: 0;
  overflow: hidden;
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(20, 10, 4, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dsheet {
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--page);
  border-radius: 26px 26px 0 0;
  box-shadow: var(--sheet-shadow);
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
  .overlay {
    align-items: center;
  }
  .dsheet {
    border-radius: 26px;
    padding-bottom: 20px;
  }
}
.dsheet-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.dsheet-in {
  padding: 18px 20px 4px;
  display: grid;
  gap: 8px;
  position: relative;
}
.dsheet h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  padding-right: 40px;
}
.dsheet p {
  margin: 0;
  color: var(--ink-soft);
}
.close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 0;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
}
.dsheet .has-img .close {
  top: -54px;
  background: rgba(255, 251, 246, 0.92);
  color: #2a1c13;
}
.vlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
}
.vlist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-2);
}
.vlist li:last-child {
  border-bottom: 0;
}
.vlist b {
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

/* ---------- "Combina com": dishes suggested in the dish sheet ---------- */
.pair-list {
  margin-top: 6px;
  display: grid;
  gap: 8px;
}
.pair-list .alg-h {
  margin-bottom: 0;
}
.pair-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pair-card.no-img {
  padding-left: 14px;
}
.pair-card img {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
}
.pair-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  line-height: 1.25;
}
.pair-price {
  flex: none;
  color: var(--orange);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.pair-chev {
  flex: none;
  color: var(--ink-soft);
}

/* ---------- allergens ---------- */
.alg-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.alg-ic {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.alg-ic svg {
  width: 11px;
  height: 11px;
}
.alg-list {
  margin-top: 4px;
  padding: 11px 14px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: 0.87rem;
}
.alg-list.is-none {
  color: var(--ink-soft);
}
.alg-h {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.alg-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
}
.alg-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.alg-list li svg {
  color: var(--orange);
}
.fchip svg {
  flex: none;
}
.fchip-n {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--veg);
  color: var(--page);
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.alg-pick {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.alg-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: left;
}
.alg-opt svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
}
.alg-opt[aria-pressed="true"] {
  background: var(--warn-bg);
  border-color: transparent;
  color: var(--warn);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.alg-opt[aria-pressed="true"] svg {
  color: var(--warn);
}
.dsheet p.alg-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.8rem;
}
.alg-note svg {
  flex: none;
  margin-top: 2px;
}
.alg-acts {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin: 4px 0 6px;
}
.preview-bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 9;
  background: var(--hi);
  color: var(--hi-ink);
  font-weight: 700;
  font-size: 0.84rem;
}
.preview-bar div {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}
.preview-bar button {
  border: 0;
  border-radius: 999px;
  background: var(--page);
  color: var(--ink);
  padding: 6px 12px;
  font-weight: 700;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---------- admin ---------- */
.mgr-bar {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 8;
  background: var(--brand);
  color: var(--brand-ink);
}
.mgr-bar-in {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mgr-title {
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.3rem;
}
.mgr-status {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--brand-ink-soft);
}
.mgr-status.dirty {
  color: var(--hi);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 8px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  min-height: 38px;
  white-space: nowrap;
  text-decoration: none;
}
.btn-primary {
  background: var(--hi);
  color: var(--hi-ink);
}
.btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-quiet {
  background: transparent;
  color: inherit;
  border-color: rgba(247, 234, 219, 0.28);
}
.btn-line {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
}
.btn-danger {
  background: var(--warn);
  color: #fff;
}
.btn-sm {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 0.8rem;
  border-radius: 8px;
}
.mgr-tabs {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 12px;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.mgr-tab {
  border: 0;
  background: transparent;
  color: var(--brand-ink-soft);
  padding: 10px 10px;
  font-weight: 700;
  font-size: 0.86rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mgr-tab[aria-selected="true"] {
  color: var(--brand-ink);
  border-bottom-color: var(--hi);
}
/* more tabs past the right edge (phones): fade the edge so it reads as "swipe for more" */
.mgr-tabs.more-right {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent);
}
/* With a mouse there is no swipe and the scrollbar is hidden, so tabs past the edge could not be reached:
   wrap them onto a second row instead (touch screens keep the single swipeable row). */
@media (hover: hover) and (pointer: fine) {
  .mgr-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.mgr-main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 16px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.mgr-main > *,
.mgr-list > * {
  min-width: 0;
}
.mgr-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mgr-head h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}
.mgr-list {
  display: grid;
  gap: 8px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.mgr-item.is-open {
  box-shadow: var(--shadow);
}
.mgr-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}
.mgr-thumb {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
}
.mgr-name {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mgr-name .t {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-name .flags {
  display: flex;
  gap: 4px;
  flex: none;
}
.mgr-price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
  font-size: 0.86rem;
}
.switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.switch input {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--warn);
  position: relative;
  margin: 0;
  cursor: pointer;
  transition: background 0.15s;
  flex: none;
}
.switch input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s;
}
.switch input:checked {
  background: var(--ok);
}
.switch input:checked::after {
  transform: translateX(16px);
}
.switch .off {
  color: var(--warn);
}
@media (max-width: 560px) {
  .mgr-name {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }
  .mgr-name .t {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .mgr-name .flags:empty {
    display: none;
  }
  /* the name and its status share the room left by the buttons instead of pushing them to a row of their own */
  .mgr-title {
    flex: 1 1 0;
    min-width: 0;
    font-size: 1.15rem;
    row-gap: 0;
  }
}
@media (max-width: 480px) {
  .switch .lbl {
    display: none;
  }
}
.mgr-form {
  border-top: 1px solid var(--line);
  padding: 14px 12px;
  display: grid;
  gap: 14px;
}
.grid2 {
  display: grid;
  /* two columns at most, so "PT" and "EN" fields pair up side by side */
  grid-template-columns: repeat(auto-fit, minmax(max(220px, calc(50% - 6px)), 1fr));
  gap: 12px;
}
.fld {
  display: grid;
  gap: 4px;
}
.fld label,
.legend {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.fld input,
.fld textarea {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 9px 11px;
  outline: none;
}
.fld textarea {
  resize: vertical;
  min-height: 62px;
}
.fld input:focus,
.fld textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.fld input[readonly] {
  color: var(--ink-faint);
  cursor: default;
}
.fld input.bad {
  border-color: var(--warn);
}
.fld-price {
  max-width: 160px;
}
.photo {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.photo-prev {
  width: 110px;
  height: 110px;
  border-radius: 16px;
  object-fit: cover;
  background: var(--surface-2);
  border: 1.5px dashed var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 0.75rem;
  text-align: center;
  padding: 8px;
  flex: none;
}
.photo-prev.wide {
  width: 200px;
  height: 90px;
}
.photo-prev.round {
  border-radius: 50%;
}
.photo-acts {
  display: grid;
  gap: 6px;
  justify-items: start;
}
.file-btn {
  position: relative;
  overflow: hidden;
}
.fld label.file-btn {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}
.file-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.var-ed {
  display: grid;
  gap: 8px;
}
.var-row {
  display: grid;
  grid-template-columns: 1fr 1fr 110px auto;
  gap: 8px;
  align-items: end;
}
@media (max-width: 560px) {
  .var-row {
    grid-template-columns: 1fr 1fr;
  }
  .var-row .fld-price {
    max-width: none;
  }
}
.hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.mgr-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.mgr-actions .spacer {
  flex: 1;
}
/* gestão, Notificações: one row per kind of notification, its switch on the right */
.notify-row {
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
/* the first row sits right under the card's title, which already has its own line */
:not(.notify-row) + .notify-row {
  border-top: 0;
}
.notify-txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.notify-txt .hint {
  margin: 0;
}
.toggle {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.8rem;
  font-weight: 700;
}
.toggle[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
  border-color: var(--ink);
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-soft);
}
.icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.confirm {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--warn);
  flex-wrap: wrap;
}
.mgr-cat {
  padding: 14px;
  display: grid;
  gap: 12px;
}
.mgr-cat.is-hidden,
.mgr-catrow.is-hidden .mgr-row {
  opacity: 0.72;
}
.mgr-catrow .flags .muted {
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
}
.mgr-cat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mgr-cat-top h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  flex: 1;
  min-width: 0;
}
.muted {
  color: var(--ink-faint);
  font-size: 0.82rem;
}
.mgr-empty {
  padding: 26px;
  text-align: center;
  color: var(--ink-soft);
}
.mgr-note {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--brown);
  font-size: 0.86rem;
}
.meter {
  height: 8px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  background: var(--caramel);
  border-radius: 99px;
}
.meter.high i {
  background: var(--warn);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 40;
  background: var(--ink);
  color: var(--page);
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.86rem;
  box-shadow: var(--shadow);
  max-width: calc(100% - 32px);
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- app additions ---------- */
/* the venue's own notice at the top of the menu ("Fechados dia 25"), in its brand colours */
.notice-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.35;
  text-align: center;
  padding: 8px 8px 8px 40px;
}
.notice-bar span {
  flex: 1;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.notice-bar button {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.75;
  cursor: pointer;
}
.notice-bar button:hover {
  opacity: 1;
}
.offline-bar {
  background: var(--hi);
  color: var(--hi-ink);
  font-weight: 700;
  font-size: 0.82rem;
  text-align: center;
  padding: 7px 16px;
}
.staff-link {
  justify-self: center;
  color: var(--ink-faint);
  font-size: 0.76rem;
  text-decoration: none;
  padding: 4px 8px;
}
.staff-link:hover {
  color: var(--orange);
}
.made-with {
  justify-self: center;
  color: var(--ink-faint);
  font-size: 0.72rem;
  text-decoration: none;
  padding: 4px 8px;
  opacity: 0.85;
}
.made-with b {
  font-weight: 700;
}
.made-with:hover {
  color: var(--orange);
  opacity: 1;
}
.skeleton {
  height: 130px;
  border-radius: 24px;
  background: linear-gradient(90deg, var(--surface-2), var(--page), var(--surface-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
.skeleton:first-child {
  height: 40px;
  width: 60%;
  justify-self: center;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
body.is-admin {
  background: var(--bg);
}
/* calls waiting, on the Calls tab */
.tab-badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 9px;
  background: #d93025;
  color: #fff;
  font-size: 0.72rem;
  line-height: 18px;
  text-align: center;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
a.mgr-tab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.mgr-notes {
  padding-bottom: 0;
}
.mgr-notes:empty {
  display: none;
}
.mgr-note.warn {
  background: var(--warn-bg);
  color: var(--warn);
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.mgr-note a {
  color: inherit;
  font-weight: 700;
}
.btn-block {
  width: 100%;
}

/* ---------- "call the staff" button on the guest menu (Premium) ---------- */
.call-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--orange-ink);
  font: 800 0.95rem var(--sans);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.has-call .page {
  padding-bottom: 72px;
}
.call-sheet {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(0, 0, 0, 0.45);
}
.call-card {
  width: 100%;
  max-width: 420px;
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.call-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.4rem;
}
.call-head strong {
  font-weight: var(--display-weight, 600);
}
/* subscription section in the console */
.sub-form {
  display: grid;
  gap: 10px;
  max-width: 560px;
}
.sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}
.sub-row .fld {
  flex: 1 1 180px;
}
.sub-form .fld > span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sub-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.9rem;
}
.co-sec h4 .tag {
  margin-left: 6px;
  vertical-align: 2px;
}

/* payment history in the console (typed by hand) */
.pay-total {
  margin: 0 0 10px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pay-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 640px;
}
.pay-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
}
.pay-main {
  min-width: 0;
  flex: 1 1 220px;
}
.pay-head {
  font-variant-numeric: tabular-nums;
}
.pay-head time {
  margin-left: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.pay-meta,
.pay-note {
  font-size: 0.86rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.pay-note {
  font-style: italic;
}
.pay-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pay-form {
  margin-bottom: 12px;
  width: 100%;
  max-width: 640px;
}
.pay-form .sub-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: end;
}
.pay-form select,
.pay-form input {
  width: 100%;
}

/* change history (console details and the admin History tab) */
.hist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.hist > li {
  padding-left: 12px;
  border-left: 2px solid var(--line-2);
}
.hist-meta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
/* Versões: one row per published version, with its button on the right */
.ver-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.ver-t {
  min-width: 0;
}
.ver-row .confirm {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.hist ul {
  margin: 2px 0 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
.ret-note {
  margin-bottom: 10px;
}

/* long history lists in the console: newest few, the rest behind "Ver tudo" in a scroll box */
.list-scroll {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
  max-width: 660px;
  padding: 8px 8px 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.list-scroll .pay-list {
  margin-bottom: 0;
}
.list-more {
  display: inline-block;
  margin: 8px 0 12px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}
.pay-list + .list-more {
  margin-top: 0;
}
.list-more:hover {
  text-decoration: underline;
}

/* the admin Visits tab: stat tiles, visits per day, most opened dishes */
.stats-period {
  display: flex;
  gap: 6px;
}
.stats-period .toggle svg {
  margin-right: 4px;
}
.stats-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
@media (max-width: 640px) {
  .stats-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.stat-tile {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
}
.stat-tile span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.stat-tile b {
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.stats-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 188px;
  padding-top: 28px;
  margin-top: 10px;
  border-bottom: 1px solid var(--line-2);
}
.stats-bar {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  outline: none;
}
.stats-bar i {
  display: block;
  width: 100%;
  max-width: 28px;
  margin: 0 auto;
  background: var(--orange);
  border-radius: 4px 4px 0 0;
}
.stats-chart.is-dense {
  gap: 1px;
}
.stats-chart.is-dense .stats-bar i {
  border-radius: 2px 2px 0 0;
}
.stats-bar:hover i,
.stats-bar:focus-visible i {
  opacity: 0.75;
}
.stats-tip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--ink);
  color: var(--page);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}
.stats-bar:first-child .stats-tip,
.stats-bar:nth-child(2) .stats-tip,
.stats-bar:nth-child(3) .stats-tip {
  left: 0;
  transform: none;
}
.stats-bar:last-child .stats-tip,
.stats-bar:nth-last-child(2) .stats-tip,
.stats-bar:nth-last-child(3) .stats-tip {
  left: auto;
  right: 0;
  transform: none;
}
.stats-bar:hover .stats-tip,
.stats-bar:focus-visible .stats-tip {
  display: block;
}
.stats-axis {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.stats-dishes {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.stats-dishes li {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
}
.stats-dish-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stats-dish-bar {
  height: 8px;
  border-radius: 4px;
  background: var(--surface-2);
}
.stats-dish-bar i {
  display: block;
  height: 100%;
  background: var(--orange);
  border-radius: 4px;
}
.stats-dishes b {
  font-variant-numeric: tabular-nums;
  min-width: 2.5em;
  text-align: right;
}
.review-bad {
  color: var(--warn);
}

/* Google reviews button at the end of the guest menu */
.foot .review {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-bottom: 6px;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.review-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
}
.review-btn svg {
  color: #f4b400;
}
.review-acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
button.review-btn {
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
button.review-btn svg {
  color: var(--accent);
}
/* "Dar opinião": the guest's private message to the venue (assets/menu.js) */
.fb-card {
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.fb-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
}
.fb-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  border: 0;
  padding: 0;
  margin: 0;
}
.fb-stars legend {
  width: 100%;
  margin-bottom: 6px;
  text-align: center;
  font-weight: 700;
}
.fb-stars button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-faint);
  cursor: pointer;
}
.fb-stars button svg {
  width: 24px;
  height: 24px;
}
.fb-stars button.is-on {
  color: #f4b400;
  border-color: #f4b400;
}
.fb-card textarea,
.fb-card input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--page);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
.fb-card label {
  display: grid;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
}
.fb-card .fb-err {
  color: var(--warn);
  font-weight: 600;
}
/* "Pedir a conta": how the guest will pay and the NIF (assets/menu.js) */
.bill-pay {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.bill-pay legend {
  margin-bottom: 8px;
  font-weight: 700;
}
.bill-pay button {
  min-height: 48px;
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font: 700 0.86rem/1.2 var(--sans);
  cursor: pointer;
}
.bill-pay button.is-on {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--orange-ink);
}
/* gestão > Opiniões */
.fb-avg {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.fb-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.fb-item {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}
.fb-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.fb-stars-row {
  letter-spacing: 1px;
  font-size: 1.05rem;
  color: var(--line-2);
}
.fb-star.is-on {
  color: #f4b400;
}
.fb-text {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.fb-contact {
  margin: 0;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}
.fb-contact a {
  color: inherit;
  font-weight: 600;
}
.fb-done {
  text-align: center;
  display: grid;
  gap: 12px;
  justify-items: center;
}

/* the staff's Calls screen (admin) */
.calls-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.call-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-left: 6px solid var(--orange);
}
.call-row.is-bill {
  border-left-color: var(--caramel);
}
.call-what {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.call-what strong {
  font-size: 1.5rem;
  line-height: 1.1;
}
.call-what span {
  color: var(--ink-soft);
  font-weight: 600;
}
.call-what .call-bill {
  color: var(--ink);
  font-weight: 800;
}
.call-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
}
.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background:
    repeating-linear-gradient(45deg, rgba(181, 122, 52, 0.07) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(181, 122, 52, 0.07) 0 2px, transparent 2px 16px), var(--bg);
}
/* the menu's own warm colour when its brand is known (same caramel otherwise) */
@supports (color: color-mix(in srgb, red 50%, transparent)) {
  .login {
    --stripe: color-mix(in srgb, var(--warm) 7%, transparent);
    background:
      repeating-linear-gradient(45deg, var(--stripe) 0 2px, transparent 2px 16px),
      repeating-linear-gradient(-45deg, var(--stripe) 0 2px, transparent 2px 16px), var(--bg);
  }
}
.login-name {
  margin-top: -6px;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--page);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 28px 22px 18px;
  display: grid;
  gap: 16px;
  text-align: center;
}
.login-card h1 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}
.login-form {
  display: grid;
  gap: 12px;
  text-align: left;
}
.login-msg {
  margin: 0;
  color: var(--ink-soft);
}
.login-foot {
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.login-foot .linkish {
  font-size: 0.82rem;
}
.badge.static {
  position: static;
  transform: none;
  margin: 0 auto;
  border-color: var(--bg);
}
.form-err {
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.86rem;
  font-weight: 600;
}
.qr-card {
  justify-items: start;
}
.qr-canvas {
  width: min(100%, 360px);
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  justify-self: center;
}

/* ---------- platform additions ---------- */
.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 2px 9px;
  color: var(--brand-ink-soft);
}
.auth-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mgr-note svg {
  vertical-align: -2px;
}
.mgr-cat h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}
.pay-terms {
  margin-top: 4px;
  font-weight: 500;
}
.pay-terms input {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
}
.pay-terms a {
  color: var(--orange);
  font-weight: 700;
}
.pay-card h4 {
  margin: 0 0 -6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.swatch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  border-radius: 12px;
  padding: 7px 12px 7px 9px;
  font-size: 0.82rem;
  font-weight: 700;
}
.swatch[aria-pressed="true"] {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.swatch .dots {
  display: inline-flex;
}
.swatch .dots i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  margin-left: -5px;
}
.swatch .dots i:first-child {
  margin-left: 0;
}
.font-swatch b {
  font-size: 1.25rem;
  line-height: 1;
  min-width: 1.6em;
  text-align: center;
}
.colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.color-fld {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 6px 12px 6px 6px;
  background: var(--surface);
  cursor: pointer;
}
.color-fld input {
  width: 38px;
  height: 38px;
  border: 0;
  padding: 0;
  background: none;
  border-radius: 8px;
  cursor: pointer;
}
.color-fld span {
  display: grid;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.2;
}
.color-fld small {
  font-weight: 500;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.fld select {
  width: 100%;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 9px 11px;
  outline: none;
}
.app-icon {
  border-radius: 22%;
  border-style: solid;
}
.var-row.one-lang {
  grid-template-columns: 1fr 110px auto;
}
.co-list {
  display: grid;
  gap: 10px;
}
.co-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  flex-wrap: wrap;
}
.co-dot {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  overflow: hidden;
}
.co-dot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.co-main {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  gap: 2px;
}
.co-name {
  font-weight: 800;
  font-size: 1.02rem;
}
.co-meta {
  font-size: 0.82rem;
  color: var(--ink-faint);
  overflow-wrap: anywhere;
}
.co-meta a {
  color: var(--orange);
  text-decoration: none;
}
.co-acts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.co.is-open {
  box-shadow: var(--shadow);
}
.co-detail {
  border-top: 1px solid var(--line);
  padding: 4px 14px 14px;
  display: grid;
}
.co-sec {
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-2);
  display: grid;
  gap: 8px;
  justify-items: start;
}
.co-sec > .inline-form,
.co-sec > .staff-list,
.co-sec > .mgr-actions {
  justify-self: stretch;
}
.co-sec:last-child {
  border-bottom: 0;
}
.co-sec h4 {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.co-sec.danger h4 {
  color: var(--warn);
}
.inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-form input {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: 10px;
  padding: 8px 11px;
  outline: none;
}
.inline-form input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.staff-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.staff-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.staff-email {
  font-weight: 600;
  flex: 1 1 180px;
  min-width: 0;
  overflow-wrap: anywhere;
}
.new-co {
  border-color: var(--orange);
}
/* console > Planos: editing a plan */
.plan-form {
  gap: 10px;
  padding-top: 14px;
}
.new-co .plan-form {
  border-top: 0;
  padding: 0;
}
.plan-form .grid2 {
  align-items: start;
}
.plan-form .legend {
  margin-top: 6px;
}

/* ================= layouts: shared (classic + gallery) ================= */
.scroll-controls {
  padding: 16px 16px 4px;
  display: grid;
  gap: 14px;
}
.snav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 8;
  background: color-mix(in srgb, var(--page) 94%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-top: 10px;
}
.snav-in {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 10px 16px;
  scrollbar-width: none;
}
.snav-in::-webkit-scrollbar {
  display: none;
}
.scroll-body {
  padding-bottom: 28px;
}
.scroll-results {
  padding: 14px 16px 0;
}

/* ---------- "Sugestões do dia" (Premium): starred dishes in a row of cards above the menu, every style ---------- */
.specials {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.scroll-body > .specials {
  padding: 22px 0 4px;
}
.scroll-body > .specials .sp-title {
  padding: 0 16px;
}
.scroll-body > .specials .sp-row {
  padding-left: 16px;
  padding-right: 16px;
  scroll-padding-inline: 16px;
}
.home-body > .specials {
  margin: 0 -16px 16px;
}
.home-body > .specials .sp-title {
  padding: 0 16px;
}
.home-body > .specials .sp-row {
  padding-left: 16px;
  padding-right: 16px;
  scroll-padding-inline: 16px;
}
.sp-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.25rem;
  color: var(--ink);
}
.sp-title svg {
  width: 17px;
  height: 17px;
  color: var(--orange);
  fill: currentColor;
  flex: none;
}
.sp-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.sp-row::-webkit-scrollbar {
  display: none;
}
.sp-card {
  flex: none;
  width: 156px;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.sp-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.sp-card.no-img {
  border-top: 3px solid var(--orange);
}
.sp-card.is-out img {
  filter: grayscale(1);
  opacity: 0.6;
}
.sp-t {
  display: grid;
  align-content: space-between;
  gap: 6px;
  padding: 10px 12px 12px;
}
.sp-name {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-price {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.sp-out {
  color: var(--ink-faint);
}
@media (min-width: 600px) {
  .sp-card {
    width: 176px;
  }
}

/* ---------- happy hour: the usual price crossed out next to the new one ---------- */
s.was {
  margin-right: 2px;
  font-weight: 500;
  font-size: 0.85em;
  opacity: 0.6;
  text-decoration-thickness: 1.5px;
}
.tag-happy {
  background: var(--orange);
  color: var(--orange-ink);
}

/* ---------- "Próximos eventos": a row of date cards above the dishes ---------- */
.events {
  display: grid;
  gap: 10px;
  min-width: 0;
}
.scroll-body > .events {
  padding: 22px 0 4px;
}
.scroll-body > .events .sp-title,
.home-body > .events .sp-title {
  padding: 0 16px;
}
.home-body > .events {
  margin: 0 -16px 16px;
}
.events .sp-title svg {
  fill: none;
}
.ev-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0 16px 6px;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.ev-row::-webkit-scrollbar {
  display: none;
}
.ev-card {
  flex: none;
  width: min(280px, 78vw);
  scroll-snap-align: start;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.ev-date {
  flex: none;
  display: grid;
  justify-items: center;
  width: 52px;
  padding: 6px 0;
  border-radius: 10px;
  background: var(--orange);
  color: var(--orange-ink);
  line-height: 1.05;
  text-transform: uppercase;
}
.ev-date b {
  font: 800 1.35rem var(--sans);
}
.ev-date span {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ev-t {
  min-width: 0;
}
.ev-name {
  font-weight: 700;
  line-height: 1.25;
}
.ev-when {
  margin-top: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
  text-transform: capitalize;
}
.ev-desc {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* ---------- "A minha escolha": the list button and its sheet ---------- */
.cart-fab {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 8px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font: 800 0.95rem var(--sans);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.cart-fab .cart-n {
  min-width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--orange-ink);
  font-variant-numeric: tabular-nums;
}
.has-cart .page {
  padding-bottom: 72px;
}
.dsheet .cart-add {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.vlist .cart-add-v {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  margin: -4px 0 -4px 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.vlist li:has(.cart-add-v) b {
  margin-left: auto;
}
.cart-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
}
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line-2);
}
.cart-name {
  min-width: 0;
  display: grid;
  line-height: 1.25;
}
.cart-name span {
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cart-qty b {
  min-width: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.cart-qty button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.cart-p {
  min-width: 64px;
  text-align: right;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0 4px;
  font-weight: 700;
}
.cart-total b {
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
}
@media print {
  .cart-fab,
  .call-fab {
    display: none !important;
  }
}
.csec,
.gsec,
.bsec,
.ksec,
.lsec,
.asec,
.msec,
.tsec,
.nsec,
.wsec,
.vsec,
.rsec,
.psec,
.xsec,
.dsec,
.qsec,
.jsec,
.osec,
.esec,
.usec {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 58px);
}

/* ================= layout: classic (printed-menu look) ================= */
.classic-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 52px 16px 6px;
}
.classic-top {
  position: absolute;
  top: 12px;
  right: 16px;
}
.classic-top .seg {
  box-shadow: none;
  background: var(--surface-2);
}
.classic-top .seg button {
  color: var(--ink-soft);
}
.classic-top .seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
}
.classic-head .badge.static {
  width: 84px;
  height: 84px;
  margin-bottom: 6px;
}
.classic-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.classic-sub {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  padding-left: 0.42em;
  text-transform: uppercase;
  color: var(--caramel);
}
.classic-orn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--caramel);
  margin: 4px 0;
}
.classic-orn i {
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.classic-orn b {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  border: 1.5px solid currentColor;
}
.lay-classic .quote {
  margin: 0;
}
.lay-classic .scroll-controls {
  justify-items: stretch;
}
.snav-classic {
  background: color-mix(in srgb, var(--page) 96%, transparent);
}
.snav-classic .snav-in {
  gap: 2px;
  padding: 0 10px;
}
.snav-tab {
  flex: none;
  border: 0;
  background: none;
  padding: 13px 10px 11px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.snav-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--orange);
}
.csec {
  padding: 26px 16px 4px;
}
.csec-title {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  text-wrap: balance;
}
.csec-title small,
.gsec-title small {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-faint);
}
.crow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px dashed var(--line);
  cursor: pointer;
}
.crow:last-child {
  border-bottom: 0;
}
.crow-img {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  object-fit: cover;
  margin-top: 2px;
}
.crow-main {
  flex: 1;
  min-width: 0;
}
.cline {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.cname {
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.3;
}
.cname .tag {
  font-family: var(--sans);
}
.leader {
  flex: 1 1 20px;
  min-width: 16px;
  border-bottom: 1.5px dotted var(--line-2);
  transform: translateY(-0.3em);
}
.cprice {
  font-weight: 700;
  color: var(--orange);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cprice.ask {
  font-weight: 500;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.cdesc {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 0.87rem;
  max-width: 60ch;
}
.cvars {
  list-style: none;
  margin: 6px 0 0;
  padding: 0 0 0 12px;
  border-left: 2px solid var(--line);
  display: grid;
  gap: 3px;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.crow.is-out .cname,
.crow.is-out .cdesc,
.crow.is-out .crow-img,
.crow.is-out .cvars {
  opacity: 0.5;
}
.crow.is-out .cprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: gallery (photo cards) ================= */
.gal-hero {
  position: relative;
  height: clamp(180px, 44vw, 260px);
  background: var(--brand);
  overflow: hidden;
}
.gal-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.62) 100%);
}
.gal-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.gal-hero-t {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  color: #fff;
}
.gal-logo {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: var(--brand);
}
.gal-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gal-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(1.8rem, 7.5vw, 2.5rem);
  line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  text-wrap: balance;
}
.gal-name span {
  font-family: var(--sans);
  font-size: 0.42em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.9;
  vertical-align: 0.35em;
}
.gal-quote {
  margin: 4px 0 0;
  font-family: var(--script);
  font-size: 1.3rem;
  line-height: 1.1;
  opacity: 0.95;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}
.lay-gallery .info {
  justify-content: flex-start;
}
.lay-gallery .groups {
  justify-content: flex-start;
}
.lay-gallery .filters {
  margin-top: -4px;
}
.lay-gallery .filters > :first-child {
  margin-left: 0;
}
.gsec {
  padding: 22px 16px 4px;
}
.gsec-title {
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lay-gallery .note {
  margin: -4px 0 12px;
}
.ggrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (min-width: 600px) {
  .ggrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.gcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.15s;
}
.gcard:hover {
  transform: translateY(-2px);
}
.gcard-img,
.gcard-ph {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.gcard-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gcard-ini {
  position: relative;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 2.2rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.gcard-b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 12px 12px;
}
.gcard-name {
  font-weight: 700;
  font-size: 0.94rem;
  line-height: 1.25;
}
.gcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.gcard-tags .tag {
  margin-left: 0;
}
.gcard .dish-price {
  margin-top: auto;
  font-size: 0.95rem;
}
.gcard-out {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 8px;
}
.gcard.is-out .gcard-img,
.gcard.is-out .gcard-ph {
  filter: grayscale(0.8);
  opacity: 0.6;
}
.gcard.is-out .dish-price {
  text-decoration: line-through;
  opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) {
  .gcard {
    transition: none;
  }
}

/* ================= layout: board (café chalkboard) =================
   The whole page wears the venue's dark brand colour; the shared controls
   (search, filters, notes, footer) follow because the colour tokens are
   redefined here. */
body:has(.lay-board) {
  background: color-mix(in srgb, var(--brand) 82%, #000);
}
.lay-board {
  --page: var(--brand);
  --surface: color-mix(in srgb, var(--brand-ink) 7%, var(--brand));
  --surface-2: color-mix(in srgb, var(--brand-ink) 12%, var(--brand));
  --ink: var(--brand-ink);
  --ink-soft: var(--brand-ink-soft);
  --ink-faint: color-mix(in srgb, var(--brand-ink) 58%, var(--brand));
  --line: color-mix(in srgb, var(--brand-ink) 14%, transparent);
  --line-2: color-mix(in srgb, var(--brand-ink) 30%, transparent);
  --chalk: color-mix(in srgb, var(--warm) 62%, #fff);
  --orange: var(--chalk);
  --orange-ink: var(--brand);
  --orange-soft: color-mix(in srgb, var(--warm) 20%, var(--brand));
  --caramel: var(--chalk);
  --brown: var(--brand-ink);
  --field: color-mix(in srgb, var(--brand-ink) 8%, var(--brand));
  --field-line: color-mix(in srgb, var(--brand-ink) 26%, transparent);
  --shadow: none;
  color: var(--ink);
  background-image:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--brand-ink) 7%, transparent), transparent 70%),
    radial-gradient(90% 50% at 100% 100%, color-mix(in srgb, var(--brand-ink) 5%, transparent), transparent 70%);
}
.board-head {
  position: relative;
  padding: 54px 16px 8px;
  overflow: hidden;
}
.board-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, transparent 100%);
}
.board-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.board-top .seg {
  background: var(--surface-2);
  box-shadow: none;
}
.board-top .seg button {
  color: var(--ink-soft);
}
.board-top .seg button[aria-pressed="true"] {
  background: var(--brand-ink);
  color: var(--brand);
}
.board-frame {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 26px 18px 22px;
  border: 1.5px dashed var(--line-2);
  border-radius: 18px;
  outline: 1px solid var(--line);
  outline-offset: 5px;
}
.board-logo {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--brand-ink);
  background: var(--brand);
  margin-bottom: 4px;
}
.board-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.board-sub {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.38em;
  padding-left: 0.38em;
  text-transform: uppercase;
  color: var(--chalk);
}
.board-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 9.5vw, 3.2rem);
  line-height: 1.02;
  text-wrap: balance;
}
.board-quote {
  margin: 2px 0 0;
  font-family: var(--script);
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--ink-soft);
}
.lay-board .info {
  justify-content: center;
}
.snav-board {
  background: color-mix(in srgb, var(--brand) 92%, transparent);
}
.bchip {
  flex: none;
  border: 1.5px solid var(--line-2);
  background: none;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}
.bchip.is-active {
  background: var(--brand-ink);
  border-color: var(--brand-ink);
  color: var(--brand);
}
.bsec {
  padding: 30px 16px 6px;
}
.bsec-title {
  margin: 0 0 14px;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  font-weight: 400;
}
.bsec-name {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: var(--script);
  font-size: 2.3rem;
  line-height: 1.15;
  color: var(--brand-ink);
}
.bsec-name::before,
.bsec-name::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.bsec-title small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-board .note {
  margin: 0 0 14px;
}
.bgrid {
  display: grid;
  gap: 4px 28px;
}
@media (min-width: 600px) {
  .bgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.brow {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  cursor: pointer;
}
.brow-img {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--line-2);
}
.brow-main {
  flex: 1;
  min-width: 0;
}
.bline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.bname {
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.35;
}
.bprice {
  flex: none;
  font-weight: 800;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.bprice.ask {
  font-weight: 500;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.bdesc {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 0.86rem;
}
.bvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 3px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.bvars b {
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.btags {
  margin-top: 4px;
}
.btags .tag:first-child {
  margin-left: 0;
}
.brow.is-out .bname,
.brow.is-out .bdesc,
.brow.is-out .brow-img,
.brow.is-out .bvars {
  opacity: 0.5;
}
.brow.is-out .bprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: blocks (colour blocks) =================
   A bold brand block on top; each section is a card under a coloured band. */
.blk-head {
  position: relative;
  overflow: hidden;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 55%, var(--brand)), var(--brand) 75%);
  color: var(--brand-ink);
  padding: 58px 16px 24px;
  border-radius: 0 0 28px 28px;
}
.blk-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}
.blk-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.blk-t {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 8px;
}
.blk-logo {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--brand);
}
.blk-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blk-sub {
  background: var(--hi);
  color: var(--hi-ink);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.blk-name {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(2.3rem, 11vw, 3.6rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.blk-quote {
  margin: 0;
  font-family: var(--script);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--brand-ink-soft);
}
.lay-blocks .info,
.lay-blocks .groups {
  justify-content: flex-start;
}
.ksec {
  padding: 18px 16px 4px;
}
.ksec-title {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 18px 18px 16px;
  border-radius: 22px 22px 0 0;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  color: #fff;
}
.ksec-name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
.ksec-title small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.85;
}
.lay-blocks .note {
  margin: 0;
  border-radius: 0;
}
.ksec-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  box-shadow: var(--shadow);
  padding: 2px 16px;
}
@media (min-width: 640px) {
  .ksec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}
.krow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.krow:last-child {
  border-bottom: 0;
}
.krow-img {
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: cover;
}
.krow-main {
  flex: 1;
  min-width: 0;
}
.kname {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
}
.kdesc {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.kprice {
  flex: none;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 10px;
  padding: 4px 9px;
  font-weight: 700;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
}
.kprice.ask {
  background: none;
  padding: 4px 0;
}

/* ================= layout: elegant (centred fine-dining card) ================= */
.el-top .seg {
  box-shadow: none;
  background: var(--surface-2);
}
.el-top .seg button {
  color: var(--ink-soft);
}
.el-top .seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
}
.snav-elegant .snav-in {
  gap: 2px;
  padding: 0 10px;
}
.kprice.ask,
.lprice.ask {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.kvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.kvars b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}


.lay-elegant {
  text-align: center;
}
.el-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 64px 24px 6px;
}
.el-top {
  position: absolute;
  top: 12px;
  right: 16px;
}
.el-cover {
  width: min(190px, 52vw);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 999px 999px 14px 14px;
  margin-bottom: 8px;
}
.el-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 4px;
}
.el-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.el-sub {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.el-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.3rem, 10vw, 3.3rem);
  line-height: 1.02;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.el-orn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
}
.el-orn i {
  width: 28px;
  height: 1px;
  background: currentColor;
}
.el-orn b {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.el-quote {
  margin: 0;
  max-width: 34ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.lay-elegant .scroll-controls {
  justify-items: stretch;
  text-align: left;
}
.snav-elegant {
  background: color-mix(in srgb, var(--page) 96%, transparent);
}
.snav-elegant .snav-in {
  justify-content: safe center;
}
.snav-elegant .snav-tab {
  font-weight: 600;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
}
.lsec {
  max-width: 560px;
  margin: 0 auto;
  padding: 36px 24px 4px;
}
.lsec-title {
  margin: 0 0 18px;
  display: grid;
  justify-items: center;
  gap: 4px;
  font-weight: 400;
}
.lsec-name {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-size: 1.15rem;
  letter-spacing: 0.28em;
  padding-left: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
}
.lsec-name::before,
.lsec-name::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--line-2);
}
.lsec-title small {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-elegant .note {
  margin: 0 0 18px;
  text-align: left;
}
.lrow {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 12px 0 14px;
  cursor: pointer;
}
.lrow-img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 6px;
}
.lname {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.25;
  text-wrap: balance;
}
.ldesc {
  margin: 0;
  max-width: 40ch;
  font-size: 0.88rem;
  color: var(--ink-soft);
  text-wrap: balance;
}
.lmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  margin-top: 4px;
}
.lmeta:empty {
  display: none;
}
.lmeta .tag {
  margin-left: 0;
}
.lmeta .alg-row {
  margin: 0;
}
.lprice {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.lvars {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 16px;
  margin-top: 3px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.lvars b {
  font-weight: 600;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

/* sold out, the same in both text layouts */
.krow.is-out .krow-main,
.krow.is-out .krow-img,
.lrow.is-out > :not(.lmeta),
.lrow.is-out .lmeta .alg-row {
  opacity: 0.5;
}
.krow.is-out .kprice,
.lrow.is-out .lprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: azulejo (Portuguese tiles) =================
   A band of blue-and-white style tiles drawn in the brand colour (an SVG mask, so it follows the palette),
   a white plaque with the name, and each section framed like a tiled panel. */
.az-head {
  position: relative;
  padding-bottom: 6px;
}
.az-band,
.asec-title::before,
.asec-list::before,
.asec-list::after {
  background-color: var(--orange);
  -webkit-mask: var(--az-tile) 0 0 / 44px 44px repeat;
  mask: var(--az-tile) 0 0 / 44px 44px repeat;
}
.lay-azulejo {
  --az-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='1.6'%3E%3Ccircle cx='0' cy='0' r='8'/%3E%3Ccircle cx='40' cy='0' r='8'/%3E%3Ccircle cx='0' cy='40' r='8'/%3E%3Ccircle cx='40' cy='40' r='8'/%3E%3Cpath d='M20 4 36 20 20 36 4 20Z'/%3E%3C/g%3E%3Cg fill='black'%3E%3Ccircle cx='0' cy='0' r='3.5'/%3E%3Ccircle cx='40' cy='0' r='3.5'/%3E%3Ccircle cx='0' cy='40' r='3.5'/%3E%3Ccircle cx='40' cy='40' r='3.5'/%3E%3Cellipse cx='20' cy='12.5' rx='3.4' ry='6'/%3E%3Cellipse cx='20' cy='27.5' rx='3.4' ry='6'/%3E%3Cellipse cx='12.5' cy='20' rx='6' ry='3.4'/%3E%3Cellipse cx='27.5' cy='20' rx='6' ry='3.4'/%3E%3Ccircle cx='20' cy='0' r='1.8'/%3E%3Ccircle cx='0' cy='20' r='1.8'/%3E%3Ccircle cx='40' cy='20' r='1.8'/%3E%3Ccircle cx='20' cy='40' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
}
.az-band {
  height: 150px;
  -webkit-mask-position: center top;
  mask-position: center top;
}
/* with a cover photo the tiles become a frame around it */
.az-head:has(.az-cover) .az-band {
  height: 236px;
}
.az-cover {
  position: absolute;
  top: 18px;
  left: 18px;
  width: calc(100% - 36px);
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  outline: 4px solid var(--page);
}
.az-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.az-plaque {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  margin: -52px 22px 0;
  padding: 20px 18px 18px;
  background: var(--page);
  border: 2px solid var(--orange);
  border-radius: 6px;
  box-shadow:
    0 0 0 5px var(--page),
    0 0 0 6px var(--orange),
    var(--shadow);
}
.az-logo {
  width: 64px;
  height: 64px;
  margin-top: -54px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--page);
  box-shadow: 0 0 0 3px var(--page), 0 0 0 4.5px var(--orange);
}
.az-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.az-sub {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  color: var(--orange);
}
.az-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  line-height: 1.02;
  text-wrap: balance;
}
.az-quote {
  margin: 0;
  font-family: var(--script);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink-soft);
}
.lay-azulejo .scroll-controls {
  margin-top: 8px;
}
.asec {
  padding: 26px 16px 4px;
}
.asec-title {
  position: relative;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 0 0 12px;
  font-weight: 400;
}
/* a strip of tiles behind the section name */
.asec-title::before {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 30px;
  -webkit-mask-size: 30px 30px;
  mask-size: 30px 30px;
  opacity: 0.45;
}
.asec-name {
  position: relative;
  background: var(--page);
  border: 2px solid var(--orange);
  border-radius: 4px;
  padding: 5px 16px;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--orange);
  text-align: center;
  text-wrap: balance;
}
.asec-title small {
  position: relative;
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-azulejo .note {
  margin: 0 0 12px;
}
.asec-list {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 18px 16px;
}
/* tile borders top and bottom of each panel */
.asec-list::before,
.asec-list::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 9px;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}
.asec-list::before {
  top: 0;
  border-radius: 4px 4px 0 0;
}
.asec-list::after {
  bottom: 0;
  border-radius: 0 0 4px 4px;
  -webkit-mask-position: 0 -9px;
  mask-position: 0 -9px;
}
@media (min-width: 640px) {
  .asec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}
.arow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line-2);
  cursor: pointer;
}
.arow:last-child {
  border-bottom: 0;
}
@media (min-width: 640px) {
  .arow:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}
.arow-img {
  flex: none;
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  margin: 3px 3px 0;
}
.arow-main {
  flex: 1;
  min-width: 0;
}
.aline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.aname {
  flex: 1;
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.25;
}
.aname .tag {
  font-family: var(--sans);
}
.aprice {
  flex: none;
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--orange);
  font-variant-numeric: lining-nums tabular-nums;
}
.aprice.ask,
.mprice.ask {
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.adesc {
  margin: 2px 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.avars,
.mvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.avars b {
  font-weight: 600;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}

/* ================= layout: minimal (numbered, plain type) =================
   Left-aligned sans type on the plain page, big numbered sections, thin rules, colour only in small details. */
.lay-minimal {
  font-family: var(--sans);
}
.mn-head {
  display: grid;
  gap: 6px;
  padding: 14px 20px 8px;
}
.mn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 40px;
  margin-bottom: 26px;
}
.mn-top .seg {
  box-shadow: none;
  background: var(--surface-2);
}
.mn-top .seg button {
  color: var(--ink-soft);
}
.mn-top .seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--page);
}
.mn-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
}
.mn-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mn-sub {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.mn-name {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.6rem, 13vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.mn-quote {
  margin: 6px 0 0;
  max-width: 30ch;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.mn-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 360px;
  object-fit: cover;
  margin-top: 16px;
  border-radius: 4px;
}
.lay-minimal .info,
.lay-minimal .groups {
  justify-content: flex-start;
}
.lay-minimal .scroll-controls {
  padding-left: 20px;
  padding-right: 20px;
}
.snav-minimal .snav-in {
  gap: 4px;
  padding: 0 12px;
}
.snav-minimal .snav-tab {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.86rem;
  font-weight: 600;
}
.snav-minimal .snav-tab.is-active {
  border-bottom-color: var(--ink);
}
.msec {
  padding: 34px 20px 4px;
}
.msec-title {
  margin: 0 0 4px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 400;
}
.msec-n {
  grid-row: span 2;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.msec-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.65rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.msec-title small {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.lay-minimal .note {
  margin: 12px 0 4px;
}
@media (min-width: 640px) {
  .msec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 36px;
  }
}
.mrow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.mrow-main {
  flex: 1;
  min-width: 0;
}
.mline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.mname {
  flex: 1;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
}
.mprice {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mdesc {
  margin: 3px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.mvars b {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.mmeta .tag {
  margin-left: 0;
}
.mmeta .alg-row {
  margin: 0;
}
.mrow-img {
  flex: none;
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 4px;
}

/* sold out in the azulejo and minimal layouts */
.arow.is-out .arow-main > :not(.aline),
.arow.is-out .aname,
.arow.is-out .arow-img,
.mrow.is-out .mrow-main > :not(.mline):not(.mmeta),
.mrow.is-out .mname,
.mrow.is-out .mrow-img {
  opacity: 0.5;
}
.arow.is-out .aprice,
.mrow.is-out .mprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: terrace (esplanada) =================
   A striped awning in the brand colour with a scalloped edge, friendly rounded type,
   each dish on its own card with the price on a round sticker. */
.lay-terrace {
  --es-font: "Fredoka", var(--sans);
}
.es-head {
  position: relative;
  padding-bottom: 6px;
}
.es-awning {
  height: 86px;
  background:
    linear-gradient(rgba(0, 0, 0, 0.12), transparent 55%),
    repeating-linear-gradient(90deg, var(--orange) 0 28px, var(--surface) 28px 56px);
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat,
    radial-gradient(circle 14px at 50% 0, #000 97%, transparent) left bottom / 28px 14px repeat-x;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 14px) no-repeat,
    radial-gradient(circle 14px at 50% 0, #000 97%, transparent) left bottom / 28px 14px repeat-x;
}
.es-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.es-t {
  position: relative; /* above the awning, so the logo sits over its stripes */
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 10px 20px 0;
}
.es-logo {
  width: 76px;
  height: 76px;
  margin-top: -44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--page);
  border: 4px solid var(--page);
  box-shadow: var(--shadow);
}
.es-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.es-sub {
  margin-top: 4px;
  font-family: var(--es-font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.es-name {
  margin: 0;
  font-family: var(--es-font);
  font-weight: 600;
  font-size: clamp(2.5rem, 12vw, 3.8rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.es-quote {
  margin: 0;
  font-family: var(--script);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--ink-soft);
}
/* the cover as a photo pinned to the wall */
.es-cover {
  width: min(100%, 520px);
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-top: 14px;
  border: 7px solid var(--surface);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transform: rotate(-1.5deg);
}
.tsec {
  padding: 28px 16px 4px;
}
.tsec-title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-weight: 400;
}
/* a small striped badge before each section name, like the awning */
.tsec-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--es-font);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  text-wrap: balance;
}
.tsec-name::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, var(--orange) 0 6.5px, var(--orange-soft) 6.5px 13px);
}
.tsec-title small {
  font-family: var(--es-font);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-faint);
}
.lay-terrace .note {
  margin: 0 0 12px;
  border-radius: 16px;
}
.tsec-list {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .tsec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.trow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.trow-img {
  flex: none;
  align-self: stretch;
  width: 78px;
  min-height: 78px;
  max-height: 110px;
  object-fit: cover;
  border-radius: 14px;
}
.trow-main {
  flex: 1;
  min-width: 0;
}
.tname {
  font-family: var(--es-font);
  font-weight: 500;
  font-size: 1.12rem;
  line-height: 1.2;
}
.tdesc {
  margin: 2px 0 0;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.tvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.tvars b {
  font-weight: 700;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.tmeta,
.nmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.tmeta .tag,
.nmeta .tag {
  margin-left: 0;
}
.tmeta .alg-row,
.nmeta .alg-row {
  margin: 0;
}
.tprice {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 58px;
  height: 58px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--orange-ink);
  font-family: var(--es-font);
  font-weight: 600;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px var(--orange);
}
.tprice.ask {
  background: var(--orange-soft);
  color: var(--orange);
  font-size: 0.7rem;
  line-height: 1.1;
  text-align: center;
}

/* ================= layout: night (bar menu) =================
   A near-black page tinted with the brand colour; the name glows like a neon sign
   and prices light up. Like the board layout, the shared controls follow the redefined tokens. */
body:has(.lay-night) {
  background: color-mix(in srgb, var(--brand) 18%, #040405);
}
.lay-night {
  --night: color-mix(in srgb, var(--brand) 32%, #08080a);
  --glow: color-mix(in srgb, var(--hi) 72%, #fff);
  --page: var(--night);
  --surface: color-mix(in srgb, #fff 5%, var(--night));
  --surface-2: color-mix(in srgb, #fff 9%, var(--night));
  --ink: #f4efe8;
  --ink-soft: rgba(244, 239, 232, 0.7);
  --ink-faint: rgba(244, 239, 232, 0.48);
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.2);
  --orange: var(--glow);
  --orange-ink: var(--night);
  --orange-soft: color-mix(in srgb, var(--glow) 16%, var(--night));
  --caramel: var(--glow);
  --brown: #f4efe8;
  --field: color-mix(in srgb, #fff 6%, var(--night));
  --field-line: rgba(255, 255, 255, 0.18);
  --veg: #cfe39a;
  --veg-bg: rgba(207, 227, 154, 0.12);
  --warn: #ffb4a0;
  --warn-bg: rgba(255, 140, 110, 0.14);
  --shadow: none;
  color: var(--ink);
  color-scheme: dark;
}
.nt-head {
  position: relative;
  overflow: hidden;
  padding: 64px 20px 18px;
}
.nt-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.38;
  -webkit-mask: linear-gradient(#000 40%, transparent);
  mask: linear-gradient(#000 40%, transparent);
}
.nt-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.nt-top .seg {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.nt-top .seg button {
  color: var(--ink-soft);
}
.nt-top .seg button[aria-pressed="true"] {
  background: var(--glow);
  color: var(--night);
}
/* the neon sign */
.nt-sign {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  max-width: 440px;
  margin: 0 auto;
  padding: 26px 18px 22px;
  border: 1.5px solid var(--glow);
  border-radius: 22px;
  background: color-mix(in srgb, var(--night) 55%, transparent);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--glow) 55%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--glow) 35%, transparent);
}
.nt-logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #f4efe8;
  box-shadow: 0 0 0 2px var(--glow), 0 0 16px color-mix(in srgb, var(--glow) 60%, transparent);
}
.nt-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nt-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  padding-left: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.nt-name {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3rem, 15vw, 4.6rem);
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 6px var(--glow),
    0 0 18px var(--glow),
    0 0 36px color-mix(in srgb, var(--glow) 70%, transparent);
  text-wrap: balance;
}
.nt-quote {
  margin: 0;
  max-width: 32ch;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.lay-night .info {
  justify-content: center;
}
.snav-night {
  background: color-mix(in srgb, var(--night) 92%, transparent);
}
.snav-night .bchip.is-active {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--night);
  box-shadow: 0 0 12px color-mix(in srgb, var(--glow) 60%, transparent);
}
.nsec {
  padding: 34px 16px 6px;
}
.nsec-title {
  margin: 0 0 8px;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  font-weight: 400;
}
.nsec-name {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--glow);
  text-shadow: 0 0 12px color-mix(in srgb, var(--glow) 70%, transparent);
}
.nsec-name::before,
.nsec-name::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--glow));
  box-shadow: 0 0 6px var(--glow);
}
.nsec-name::after {
  background: linear-gradient(90deg, var(--glow), transparent);
}
.nsec-title small {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-night .note {
  margin: 8px 0 6px;
}
@media (min-width: 640px) {
  .nsec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}
.nrow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.nrow-img {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--night), 0 0 0 3.5px var(--glow), 0 0 14px color-mix(in srgb, var(--glow) 45%, transparent);
  margin: 2px 2px 0;
}
.nrow-main {
  flex: 1;
  min-width: 0;
}
.nline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.nname {
  flex: 1;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}
.nprice {
  flex: none;
  font-weight: 700;
  color: var(--glow);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 10px color-mix(in srgb, var(--glow) 60%, transparent);
}
.nprice.ask {
  font-weight: 500;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-shadow: none;
}
.ndesc {
  margin: 3px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.nvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.nvars b {
  color: var(--glow);
  font-variant-numeric: tabular-nums;
}

/* sold out in the terrace and night layouts */
.trow.is-out .trow-main,
.trow.is-out .trow-img,
.nrow.is-out .nrow-main > :not(.nline):not(.nmeta),
.nrow.is-out .nname,
.nrow.is-out .nrow-img {
  opacity: 0.5;
}
.trow.is-out .tprice,
.nrow.is-out .nprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: notebook (caderno) =================
   Ruled paper with a margin line, names written by hand (Caveat), a highlighter stroke
   behind the titles and photos taped on like polaroids. */
.lay-notebook {
  --nb-hand: "Caveat", var(--script);
  --nb-rule: color-mix(in srgb, var(--orange) 16%, transparent);
  --nb-mark: color-mix(in srgb, var(--hi) 38%, transparent);
  --nb-tape: color-mix(in srgb, var(--warm) 45%, rgba(255, 255, 255, 0.6));
  background-image:
    linear-gradient(90deg, transparent 27px, color-mix(in srgb, var(--warn) 45%, transparent) 27px 28.5px, transparent 28.5px),
    repeating-linear-gradient(transparent 0 31px, var(--nb-rule) 31px 32px);
  background-attachment: local;
}
.nb-head {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 56px 18px 10px 44px;
}
.nb-top {
  position: absolute;
  top: 12px;
  right: 16px;
}
.nb-logo {
  position: absolute;
  top: 46px;
  right: 18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: rotate(8deg);
}
.nb-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nb-sub {
  font-family: var(--nb-hand);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--orange);
}
.nb-name {
  margin: 0;
  font-family: var(--nb-hand);
  font-weight: 700;
  font-size: clamp(3.2rem, 16vw, 4.8rem);
  line-height: 0.95;
  transform: rotate(-2deg);
  transform-origin: left;
}
/* a highlighter stroke under the name */
.nb-name span {
  background: linear-gradient(transparent 58%, var(--nb-mark) 58% 90%, transparent 90%);
  padding: 0 6px;
  margin-left: -6px;
}
.nb-quote {
  margin: 4px 0 0;
  max-width: 28ch;
  font-family: var(--nb-hand);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--ink-soft);
}
/* the cover as a polaroid held by a strip of tape */
.nb-cover {
  position: relative;
  justify-self: center;
  width: min(86%, 420px);
  margin: 18px 0 6px;
  padding: 10px 10px 34px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: rotate(1.5deg);
}
.nb-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.nb-cover::before,
.wrow-pic::before {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 84px;
  height: 22px;
  margin-left: -42px;
  background: var(--nb-tape);
  transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.lay-notebook .scroll-controls {
  padding-left: 44px;
}
.lay-notebook .info,
.lay-notebook .groups {
  justify-content: flex-start;
}
.wsec {
  padding: 26px 16px 4px 44px;
}
.wsec-title {
  margin: 0 0 6px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 12px;
  font-weight: 400;
}
.wsec-name {
  font-family: var(--nb-hand);
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
  background: linear-gradient(transparent 55%, var(--nb-mark) 55% 92%, transparent 92%);
  padding: 0 6px;
  margin-left: -6px;
}
.wsec-title small {
  font-family: var(--nb-hand);
  font-size: 1.3rem;
  color: var(--ink-faint);
}
.lay-notebook .note {
  margin: 6px 0 8px;
  background: color-mix(in srgb, var(--hi) 22%, var(--surface));
  border-radius: 2px;
  transform: rotate(-0.6deg);
  box-shadow: var(--shadow);
}
@media (min-width: 640px) {
  .wsec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }
}
.wrow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  cursor: pointer;
}
.wrow-pic {
  position: relative;
  flex: none;
  padding: 5px 5px 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  transform: rotate(-3deg);
  margin-top: 6px;
}
.wrow:nth-child(even) .wrow-pic {
  transform: rotate(2.5deg);
}
.wrow-pic img {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: cover;
}
.wrow-pic::before {
  top: -6px;
  width: 40px;
  height: 12px;
  margin-left: -20px;
}
.wrow-main {
  flex: 1;
  min-width: 0;
}
.wline {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.wname {
  flex: 1;
  font-family: var(--nb-hand);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.1;
}
/* the price circled in pen */
.wprice {
  flex: none;
  font-family: var(--nb-hand);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--orange);
  padding: 4px 9px;
  border: 1.5px solid currentColor;
  border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%;
  transform: rotate(-3deg);
}
.wprice.ask {
  border: 0;
  font-size: 1.1rem;
  color: var(--ink-faint);
}
.wdesc {
  margin: 2px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.wvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px;
  font-family: var(--nb-hand);
  font-size: 1.2rem;
  color: var(--ink-soft);
}
.wvars b {
  color: var(--orange);
}
.wmeta,
.vtags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.wmeta .tag,
.vtags .tag {
  margin-left: 0;
}
.wmeta .alg-row {
  margin: 0;
}

/* ================= layout: showcase (montra) =================
   A brand-colour header with the cover below it; each section is a row of tall cards
   you swipe sideways, like a shop window. */
.sc-head {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 58px 18px 20px;
  background: linear-gradient(170deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  border-radius: 0 0 26px 26px;
}
.sc-head:has(.sc-cover) {
  padding-bottom: 0;
  margin-bottom: 70px;
}
.sc-top {
  position: absolute;
  top: 12px;
  right: 16px;
}
.sc-t {
  display: flex;
  align-items: center;
  gap: 14px;
}
.sc-logo {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--brand-ink);
}
.sc-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sc-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--hi);
}
.sc-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  line-height: 1;
  text-wrap: balance;
}
.sc-quote {
  margin: 0;
  font-family: var(--script);
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--brand-ink-soft);
}
.sc-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 340px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: -70px;
  box-shadow: var(--shadow);
}
.vsec {
  padding: 24px 0 4px;
}
.vsec-title {
  margin: 0 16px 12px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-weight: 400;
}
.vsec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.6rem;
  line-height: 1.1;
}
.vsec-title small {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-showcase .note {
  margin: 0 16px 12px;
}
/* the row: cards side by side, swiped with a finger (scrollbar hidden; the next card peeks in) */
.vsec-list {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 16px;
  padding: 2px 16px 12px;
  scrollbar-width: none;
}
.vsec-list::-webkit-scrollbar {
  display: none;
}
/* with a mouse there is no swipe: show a thin scrollbar under each row */
@media (hover: hover) and (pointer: fine) {
  .vsec-list {
    scrollbar-width: thin;
    scrollbar-color: var(--line-2) transparent;
  }
  .vsec-list::-webkit-scrollbar {
    display: block;
    height: 6px;
  }
  .vsec-list::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 3px;
  }
}
.vcard {
  position: relative;
  flex: 0 0 min(54%, 210px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  cursor: pointer;
}
.vcard-img,
.vcard-ph {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.vcard-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10; /* no photo: a shorter colour block */
}
.vcard-ini {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 3.4rem;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.vcard-out {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.vcard-b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
.vname {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
.vdesc {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vtags {
  margin-top: 2px;
}
.vcard .dish-price {
  margin-top: auto;
  padding-top: 6px;
}
.vcard.is-out .vcard-img,
.vcard.is-out .vcard-ph,
.vcard.is-out .vcard-b > :not(.dish-price) {
  opacity: 0.5;
}
.vcard.is-out .dish-price {
  text-decoration: line-through;
  opacity: 0.5;
}

/* sold out in the notebook layout */
.wrow.is-out .wrow-main > :not(.wline):not(.wmeta),
.wrow.is-out .wname,
.wrow.is-out .wrow-pic {
  opacity: 0.5;
}
.wrow.is-out .wprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: receipt (talão) =================
   The whole menu printed on a till receipt: a strip of paper with torn zigzag edges,
   monospaced type, section names printed in reverse and prices after a dotted leader. */
body:has(.lay-receipt) {
  background: color-mix(in srgb, var(--brand) 22%, var(--page));
}
.lay-receipt {
  --rc-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", "Roboto Mono", monospace;
  --page: var(--surface);
  position: relative;
  max-width: 560px;
  min-height: calc(100vh - 40px);
  margin: 18px auto 26px;
  font-family: var(--rc-mono);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
@media (max-width: 600px) {
  .lay-receipt {
    margin: 14px 10px 22px;
  }
}
/* the torn edges at the top and bottom of the paper */
.lay-receipt::before,
.lay-receipt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(-45deg, var(--page) 7px, transparent 0) 0 0 / 14px 10px repeat-x,
    linear-gradient(45deg, var(--page) 7px, transparent 0) 0 0 / 14px 10px repeat-x;
}
.lay-receipt::before {
  top: -10px;
  transform: scaleY(-1);
}
.lay-receipt::after {
  bottom: -10px;
}
.rc-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 54px 22px 6px;
  text-align: center;
}
.rc-top {
  position: absolute;
  top: 12px;
  right: 14px;
}
.rc-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: #fff;
  margin-bottom: 4px;
}
.rc-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rc-name {
  margin: 0;
  font-family: var(--rc-mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 8vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-wrap: balance;
}
.rc-sub {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rc-sub::before,
.rc-sub::after {
  content: "*** ";
  color: var(--orange);
}
.rc-sub::after {
  content: " ***";
}
/* the cover in black and white, like a picture printed on thermal paper */
.rc-cover {
  display: block;
  width: 100%;
  margin: 12px 0 4px;
  border-radius: 4px;
  overflow: hidden;
}
.rc-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
}
.rc-quote {
  margin: 6px 0 0;
  max-width: 34ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rc-quote::before {
  content: "> ";
  color: var(--orange);
}
.lay-receipt .scroll-controls {
  border-top: 2px dashed var(--line-2);
  margin: 10px 18px 0;
  padding: 14px 0 4px;
}
.lay-receipt .info,
.lay-receipt .groups {
  justify-content: center;
}
.lay-receipt .gbtn,
.lay-receipt .search,
.lay-receipt .fchip {
  border-radius: 4px;
}
.lay-receipt .gbtn[aria-pressed="true"] {
  box-shadow: none;
}
.snav-receipt {
  border-bottom: 2px dashed var(--line-2);
}
.snav-receipt .chip {
  border-radius: 3px;
  border-color: var(--ink);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
}
.snav-receipt .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
}
.rsec {
  padding: 28px 18px 4px;
}
.rsec-title {
  position: relative;
  margin: 0 0 6px;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  font-weight: 400;
}
/* the section name printed in reverse, over a dashed rule */
.rsec-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  border-top: 2px dashed var(--line-2);
}
.rsec-name {
  position: relative;
  max-width: 86%;
  padding: 5px 12px;
  background: var(--ink);
  color: var(--page);
  box-shadow: 0 0 0 8px var(--page);
  font-family: var(--rc-mono);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.rsec-title small {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-receipt .note {
  margin: 8px 0 6px;
  border-radius: 3px;
}
@media (min-width: 640px) {
  .rsec-list {
    padding: 0 6px;
  }
}
.rrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--line-2);
  cursor: pointer;
}
.rrow:last-child {
  border-bottom: 0;
}
.rrow-main {
  flex: 1;
  min-width: 0;
}
.rline {
  display: flex;
  align-items: baseline;
}
.rname {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.rdots {
  flex: 1;
  min-width: 14px;
  margin: 0 6px;
  border-bottom: 2px dotted var(--line-2);
  transform: translateY(-4px);
}
.rprice {
  flex: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--orange);
}
.rprice.ask {
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.rdesc {
  margin: 3px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rvars {
  display: grid;
  gap: 2px;
  margin-top: 4px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.rvars span {
  display: flex;
  gap: 6px;
}
.rvars span::before {
  content: "+";
  color: var(--ink-faint);
}
.rvars b {
  margin-left: auto;
  color: var(--orange);
}
.rmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.rmeta .tag {
  margin-left: 0;
  border-radius: 3px;
}
.rmeta .alg-row {
  margin: 0;
}
.rrow-img {
  flex: none;
  width: 64px;
  height: 64px;
  margin-top: 2px;
  border-radius: 4px;
  object-fit: cover;
  border: 1px solid var(--line-2);
}
.rrow.is-out .rrow-main > :not(.rline):not(.rmeta),
.rrow.is-out .rname,
.rrow.is-out .rrow-img {
  opacity: 0.5;
}
.rrow.is-out .rprice {
  text-decoration: line-through;
  opacity: 0.5;
}
/* a barcode printed at the end of the receipt */
.lay-receipt .foot {
  border-top: 2px dashed var(--line-2);
  margin: 10px 18px 0;
  padding: 22px 0 40px;
  font-family: var(--rc-mono);
}
.lay-receipt .foot::before {
  content: "";
  justify-self: center;
  width: min(70%, 260px);
  height: 46px;
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 2px,
    transparent 2px 4px,
    var(--ink) 4px 5px,
    transparent 5px 8px,
    var(--ink) 8px 11px,
    transparent 11px 12px,
    var(--ink) 12px 13px,
    transparent 13px 17px
  );
  opacity: 0.8;
}

/* ================= layout: pop =================
   Bold and playful: thick outlines, hard offset shadows and sticker colours on a dotted page.
   Each dish is an outlined card with its price on a tilted sticker. */
.lay-pop {
  --po-line: var(--ink);
  --po-shadow: 3px 3px 0 var(--po-line);
  --po-sticker: color-mix(in srgb, var(--hi) 55%, var(--surface));
  --page: color-mix(in srgb, var(--warm) 35%, var(--surface));
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1.2px, transparent 1.4px);
  background-size: 18px 18px;
}
.po-head {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 14px 18px 6px;
}
.po-top {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.po-top .seg {
  border: 1.5px solid var(--po-line);
  box-shadow: 2px 2px 0 var(--po-line);
}
.po-logo {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1.5px solid var(--po-line);
  box-shadow: var(--po-shadow);
  transform: rotate(-4deg);
}
.po-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.po-sub {
  margin-top: 8px;
  padding: 4px 12px;
  background: var(--orange);
  color: var(--orange-ink);
  border: 1.5px solid var(--po-line);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--po-line);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}
.po-name {
  margin: 0;
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: clamp(2.6rem, 13vw, 4.4rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
/* the quote in a speech bubble */
.po-quote {
  position: relative;
  margin: 4px 0 6px;
  max-width: 30ch;
  padding: 10px 14px;
  background: var(--surface);
  border: 1.5px solid var(--po-line);
  border-radius: 14px;
  box-shadow: 2px 2px 0 var(--po-line);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}
.po-quote::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: -9px;
  width: 14px;
  height: 14px;
  background: var(--surface);
  border-right: 1.5px solid var(--po-line);
  border-bottom: 1.5px solid var(--po-line);
  transform: rotate(45deg);
}
.po-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-top: 6px;
  border: 1.5px solid var(--po-line);
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--po-line);
  transform: rotate(-1deg);
}
@media (min-width: 640px) {
  .po-cover {
    aspect-ratio: 2 / 1;
  }
}
.lay-pop .gbtn,
.lay-pop .fchip {
  border: 1.5px solid var(--po-line);
  color: var(--ink);
  background: var(--surface);
}
.lay-pop .gbtn[aria-pressed="true"],
.lay-pop .fchip[aria-pressed="true"] {
  background: var(--orange);
  color: var(--orange-ink);
  box-shadow: 2px 2px 0 var(--po-line);
}
.lay-pop .search {
  background: var(--surface);
  border: 1.5px solid var(--po-line);
  box-shadow: 2px 2px 0 var(--po-line);
}
.snav-pop {
  border-bottom: 1.5px solid var(--po-line);
}
.snav-pop .chip {
  border: 1.5px solid var(--po-line);
  color: var(--ink);
  font-weight: 700;
  background: var(--surface);
}
.snav-pop .chip.is-active {
  background: var(--orange);
  border-color: var(--po-line);
  color: var(--orange-ink);
  box-shadow: 2px 2px 0 var(--po-line);
}
.psec {
  padding: 30px 16px 4px;
}
.psec-title {
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-weight: 400;
}
/* the section name on a tilted label */
.psec-name {
  display: inline-block;
  padding: 6px 14px;
  background: var(--orange);
  color: var(--orange-ink);
  border: 1.5px solid var(--po-line);
  border-radius: 10px;
  box-shadow: var(--po-shadow);
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
}
.psec:nth-child(even) .psec-name {
  background: var(--po-sticker);
  color: var(--ink);
  transform: rotate(1.2deg);
}
.psec-title small {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.lay-pop .note {
  margin: 0 0 14px;
  background: var(--surface);
  border: 1.5px solid var(--po-line);
  box-shadow: 2px 2px 0 var(--po-line);
}
.psec-list {
  display: grid;
  gap: 16px;
}
@media (min-width: 640px) {
  .psec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.prow {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 92px;
  background: var(--surface);
  border: 1.5px solid var(--po-line);
  border-radius: 16px;
  box-shadow: var(--po-shadow);
  cursor: pointer;
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.prow:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--po-line);
}
.prow-img {
  flex: none;
  width: 96px;
  object-fit: cover;
  border-right: 1.5px solid var(--po-line);
  border-radius: 13px 0 0 13px;
}
.prow-main {
  flex: 1;
  min-width: 0;
  padding: 12px 14px 12px;
}
.pname {
  padding-right: 64px;
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 1.02rem;
  line-height: 1.2;
}
.pdesc {
  margin: 4px 0 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.pvars {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.pvars span {
  padding: 2px 9px;
  border: 1.5px solid var(--po-line);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.pvars b {
  font-weight: 800;
}
.pmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 8px;
}
.pmeta .tag {
  margin-left: 0;
  border: 1.5px solid currentColor;
}
.pmeta .alg-row {
  margin: 0;
}
/* the price on a sticker over the card's top-right corner */
.pprice {
  position: absolute;
  top: -10px;
  right: -8px;
  padding: 5px 10px;
  background: var(--po-sticker);
  color: var(--ink);
  border: 1.5px solid var(--po-line);
  border-radius: 10px;
  box-shadow: 2px 2px 0 var(--po-line);
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1;
  transform: rotate(4deg);
}
.prow:nth-child(even) .pprice {
  transform: rotate(-3deg);
}
.pprice.ask {
  font-size: 0.72rem;
}
.prow.is-out .prow-main,
.prow.is-out .prow-img {
  opacity: 0.5;
}
.prow.is-out .pprice {
  text-decoration: line-through;
  opacity: 0.6;
}

/* ================= layout: contemporary (contemporâneo) =================
   A restaurant's menu: a full-width cover with the name over it, serif names, prices in their
   own column and thin rules. On a computer the page widens and the sections move to a column
   on the left that stays in view. */
.ct-head {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 250px;
  padding: 64px 22px 26px;
  background: linear-gradient(160deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
  overflow: hidden;
}
.ct-head.has-cover {
  min-height: clamp(340px, 62vh, 500px);
  color: #fff;
  background: #111;
}
.ct-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* darken the bottom of the photo so the name reads on any picture */
.ct-head.has-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.18) 52%, rgba(0, 0, 0, 0.72) 100%);
}
.ct-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.ct-t {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 8px;
  max-width: 640px;
}
.ct-logo {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  margin-bottom: 6px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
.ct-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ct-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.88;
}
.ct-sub::before {
  content: "";
  width: 26px;
  height: 1.5px;
  background: currentColor;
}
.ct-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.6rem, 11vw, 4.4rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.ct-quote {
  margin: 2px 0 0;
  max-width: 36ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.4;
  opacity: 0.9;
}
.lay-contemporary .scroll-controls {
  padding: 18px 20px 4px;
}
.snav-contemporary .snav-in {
  gap: 6px;
  padding: 0 14px;
}
.snav-contemporary .snav-tab {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.88rem;
  font-weight: 600;
}
.xsec {
  padding: 34px 20px 4px;
}
.xsec-title {
  margin: 0 0 6px;
  display: grid;
  gap: 4px;
  font-weight: 400;
}
/* a short accent rule over each section name */
.xsec-title::before {
  content: "";
  width: 30px;
  height: 2px;
  margin-bottom: 8px;
  background: var(--orange);
}
.xsec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.85rem;
  line-height: 1.1;
}
.xsec-title small {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-contemporary .note {
  margin: 10px 0 4px;
}
.xrow {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.xrow-img {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  object-fit: cover;
}
.xrow-main {
  flex: 1;
  min-width: 0;
}
.xline {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.xname {
  flex: 1;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.16rem;
  line-height: 1.25;
}
.xprice {
  flex: none;
  min-width: 4.2em;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.xprice.ask {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
}
.xdesc {
  margin: 5px 0 0;
  max-width: 52ch;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
/* sizes: one line each, the price in the same column as the dish prices */
.xvars {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}
.xvars span {
  display: flex;
  gap: 14px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.xvars b {
  margin-left: auto;
  min-width: 4.2em;
  text-align: right;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.xmeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 8px;
}
.xmeta .tag {
  margin-left: 0;
}
.xmeta .alg-row {
  margin: 0;
}
.xrow.is-out .xrow-main > :not(.xline):not(.xmeta),
.xrow.is-out .xname,
.xrow.is-out .xrow-img {
  opacity: 0.5;
}
.xrow.is-out .xprice {
  text-decoration: line-through;
  opacity: 0.5;
}
/* computers: a wider page, the sections in a column on the left, dishes in two columns */
@media (min-width: 960px) {
  .page.lay-contemporary {
    max-width: 1140px;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    column-gap: 44px;
    align-items: start;
    padding: 0 28px;
  }
  .lay-contemporary > * {
    grid-column: 1 / -1;
  }
  .lay-contemporary:has(.snav) .snav-slot {
    grid-column: 1;
    position: sticky;
    top: 20px;
    padding-top: 34px;
  }
  .lay-contemporary:has(.snav) .scroll-body {
    grid-column: 2;
  }
  .ct-head {
    margin: 20px 0 0;
    padding: 72px 48px 40px;
    border-radius: 22px;
  }
  .ct-name {
    font-size: 5rem;
  }
  .lay-contemporary .scroll-controls {
    padding: 22px 0 4px;
  }
  .snav-contemporary {
    position: static;
    margin: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
  }
  .snav-contemporary .snav-in {
    flex-direction: column;
    gap: 2px;
    padding: 0;
    overflow: visible;
    border-left: 1px solid var(--line-2);
  }
  .snav-contemporary .snav-tab {
    text-align: left;
    white-space: normal;
    padding: 9px 14px;
    margin-left: -1px;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }
  .snav-contemporary .snav-tab.is-active {
    border-left-color: var(--orange);
  }
  .xsec {
    padding: 34px 0 4px;
  }
  .xsec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
  }
}

/* ================= layout: deco (déco) =================
   Art deco: a gold fan over the name, the header in a double gold frame, names in spaced
   capitals, photos cut as octagons and each section framed with stepped corners. */
.lay-deco {
  --dc-gold: color-mix(in srgb, var(--hi) 55%, var(--warm));
  --page: color-mix(in srgb, var(--warm) 10%, var(--surface));
}
.dc-head {
  position: relative;
  padding: 58px 18px 8px;
}
.dc-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.dc-frame {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 26px 18px 24px;
  text-align: center;
  border: 1px solid var(--dc-gold);
  outline: 1px solid var(--dc-gold);
  outline-offset: 5px;
}
.dc-fan {
  width: 108px;
  height: 54px;
  stroke: var(--dc-gold);
  stroke-width: 1.2;
}
.dc-logo {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--page),
    0 0 0 3px var(--dc-gold);
}
.dc-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dc-sub {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dc-gold);
}
.dc-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.2rem, 10vw, 3.4rem);
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* a diamond between two stepped gold lines */
.dc-orn,
.dsec-title::after {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.dc-orn i {
  width: 54px;
  height: 5px;
  border-top: 1px solid var(--dc-gold);
  border-bottom: 1px solid var(--dc-gold);
}
.dc-orn b {
  width: 9px;
  height: 9px;
  background: var(--dc-gold);
  transform: rotate(45deg);
}
.dc-quote {
  margin: 0;
  max-width: 32ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
.dc-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin-top: 18px;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
}
.lay-deco .info,
.lay-deco .groups {
  justify-content: center;
}
.snav-deco .snav-in {
  justify-content: safe center;
}
.snav-deco .snav-tab.is-active {
  border-bottom-color: var(--dc-gold);
}
.dsec {
  position: relative;
  margin: 26px 16px 0;
  padding: 26px 18px 10px;
  border: 1px solid var(--dc-gold);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
}
/* the cut corners drawn in gold */
.dsec::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--dc-gold) 0 8.5px, transparent 8.5px 9.5px, transparent) top left / 13px 13px no-repeat,
    linear-gradient(225deg, var(--dc-gold) 0 8.5px, transparent 8.5px) top right / 13px 13px no-repeat,
    linear-gradient(45deg, var(--dc-gold) 0 8.5px, transparent 8.5px) bottom left / 13px 13px no-repeat,
    linear-gradient(315deg, var(--dc-gold) 0 8.5px, transparent 8.5px) bottom right / 13px 13px no-repeat;
  opacity: 0.9;
}
.dsec-title {
  margin: 0 0 8px;
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
  font-weight: 400;
}
.dsec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.dsec-title small {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dc-gold);
}
.dsec-title::after {
  content: "";
  width: 120px;
  height: 7px;
  margin-top: 4px;
  background:
    linear-gradient(45deg, transparent 2.5px, var(--dc-gold) 2.5px 5px, transparent 5px) center / 7px 7px no-repeat,
    linear-gradient(var(--dc-gold), var(--dc-gold)) left center / 50px 1px no-repeat,
    linear-gradient(var(--dc-gold), var(--dc-gold)) right center / 50px 1px no-repeat;
}
.lay-deco .note {
  margin: 8px 0;
}
@media (min-width: 640px) {
  .dsec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}
.drow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--dc-gold) 35%, transparent);
  cursor: pointer;
}
.drow:last-child {
  border-bottom: 0;
}
.drow-img {
  flex: none;
  width: 70px;
  height: 70px;
  object-fit: cover;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.drow-main {
  flex: 1;
  min-width: 0;
}
.dline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dname {
  flex: 1;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dprice {
  flex: none;
  font-family: var(--serif);
  font-size: 1.12rem;
  color: var(--dc-gold);
}
.dprice.ask {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.ddesc {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.dvars,
.qvars,
.jvars,
.ovars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 5px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.dvars b {
  color: var(--dc-gold);
  font-weight: 600;
}
.dmeta,
.qmeta,
.jmeta,
.ometa,
.etags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.dmeta .tag,
.qmeta .tag,
.jmeta .tag,
.ometa .tag,
.etags .tag {
  margin-left: 0;
}
.dmeta .alg-row,
.qmeta .alg-row,
.jmeta .alg-row,
.ometa .alg-row {
  margin: 0;
}
.drow.is-out .drow-main > :not(.dline):not(.dmeta),
.drow.is-out .dname,
.drow.is-out .drow-img,
.qrow.is-out .qrow-main > :not(.qmeta),
.qrow.is-out .qrow-img,
.jrow.is-out .jrow-main > :not(.jline):not(.jmeta),
.jrow.is-out .jname,
.jrow.is-out .jrow-img,
.orow.is-out .orow-main > :not(.oline):not(.ometa),
.orow.is-out .oname,
.orow.is-out .orow-img {
  opacity: 0.5;
}
.drow.is-out .dprice,
.qrow.is-out .qprice,
.jrow.is-out .jprice,
.orow.is-out .oprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: market (mercearia) =================
   A grocer's counter: kraft paper, the name stamped in bold capitals, section names on
   rubber-stamp labels and each price on a kraft tag hanging at the right. */
.lay-market {
  --mk-kraft: color-mix(in srgb, var(--warm) 75%, #fff);
  --mk-tag: color-mix(in srgb, var(--mk-kraft) 55%, var(--surface));
  --page: color-mix(in srgb, var(--mk-kraft) 32%, var(--surface));
  background-image: repeating-linear-gradient(115deg, transparent 0 3px, color-mix(in srgb, var(--mk-kraft) 22%, transparent) 3px 4px);
}
.mk-head {
  display: grid;
  justify-items: start;
  gap: 6px;
  padding: 14px 18px 8px;
}
.mk-top {
  justify-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.mk-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent);
  padding: 3px;
}
.mk-logo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.mk-sub {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.mk-name {
  margin: 0;
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: clamp(2.4rem, 12vw, 4rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}
.mk-quote {
  margin: 4px 0 0;
  max-width: 34ch;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
/* the cover pinned on the wall with a strip of brown tape */
.mk-cover {
  position: relative;
  display: block;
  justify-self: stretch;
  margin-top: 16px;
  padding: 8px;
  background: var(--surface);
  box-shadow: 0 6px 18px rgba(60, 40, 10, 0.18);
  transform: rotate(-0.8deg);
}
.mk-cover::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 96px;
  height: 22px;
  margin-left: -48px;
  background: color-mix(in srgb, var(--mk-kraft) 85%, #8a6a3a);
  opacity: 0.85;
  transform: rotate(2deg);
}
.mk-cover img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.snav-market .chip {
  border-radius: 4px;
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
  font-weight: 700;
}
.snav-market .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
}
.qsec {
  padding: 30px 16px 4px;
}
.qsec-title {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-weight: 400;
}
/* the section name on a rubber-stamp label */
.qsec-name {
  display: inline-block;
  padding: 5px 12px 4px;
  border: 1.5px solid var(--orange);
  border-radius: 4px;
  color: var(--orange);
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--orange) 18%, transparent);
}
.qsec-title small {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-market .note {
  margin: 0 0 8px;
}
@media (min-width: 640px) {
  .qsec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}
.qrow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  cursor: pointer;
}
.qrow-img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 4px solid var(--surface);
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(60, 40, 10, 0.16);
}
.qrow-main {
  flex: 1;
  min-width: 0;
}
.qname {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
}
.qdesc {
  margin: 3px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.qvars b {
  color: var(--ink);
}
/* the price on a kraft tag with a hole and a string */
.qprice {
  position: relative;
  flex: none;
  align-self: flex-start;
  margin: 10px 2px 0 6px;
  padding: 6px 10px 6px 18px;
  background: var(--mk-tag);
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 50%);
  transform: rotate(4deg);
  transform-origin: left center;
  filter: drop-shadow(0 1px 1px rgba(60, 40, 10, 0.25));
}
.qprice::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--page);
  box-shadow: inset 0 0 0 1px rgba(60, 40, 10, 0.3);
}
.qrow:nth-child(even) .qprice {
  transform: rotate(-3deg);
}
.qprice.ask {
  font-size: 0.72rem;
  font-weight: 700;
}

/* ================= layout: garden (jardim) =================
   Soft and green: leaf branches around the name, the cover and dish photos in arches,
   section names in italic serif with a small sprig. */
.lay-garden {
  --gd-leaf: color-mix(in srgb, var(--orange) 70%, var(--brand));
  --gd-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 120'%3E%3Cpath d='M30 118C30 80 32 40 40 4' stroke='%23000' stroke-width='2.4' fill='none'/%3E%3Cpath d='M31 96C14 92 6 80 8 66C22 70 30 80 31 96ZM32 76C48 72 56 60 54 46C40 50 32 60 32 76ZM33 56C18 52 12 40 14 28C26 32 33 42 33 56ZM36 36C50 32 56 22 54 10C44 14 37 22 36 36Z'/%3E%3C/svg%3E");
  --page: color-mix(in srgb, var(--gd-leaf) 7%, var(--surface));
}
.gd-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 58px 22px 8px;
  text-align: center;
  overflow: hidden;
}
.gd-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.gd-leaf {
  position: absolute;
  top: 30px;
  width: 70px;
  height: 140px;
  background: var(--gd-leaf);
  opacity: 0.55;
  -webkit-mask: var(--gd-sprig) no-repeat center / contain;
  mask: var(--gd-sprig) no-repeat center / contain;
}
.gd-l {
  left: -6px;
  transform: rotate(-24deg);
}
.gd-r {
  right: -6px;
  transform: scaleX(-1) rotate(-24deg);
}
.gd-arch {
  display: block;
  width: min(72%, 300px);
  margin-bottom: 10px;
  padding: 6px;
  border: 1.5px solid color-mix(in srgb, var(--gd-leaf) 50%, transparent);
  border-radius: 999px 999px 18px 18px;
}
.gd-arch img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 999px 999px 14px 14px;
}
.gd-logo {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-leaf) 18%, var(--page));
}
.gd-head:has(.gd-arch) .gd-logo {
  margin-top: -44px;
  position: relative;
}
.gd-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gd-sub {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gd-leaf);
}
.gd-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1;
  text-wrap: balance;
}
.gd-quote {
  margin: 0;
  max-width: 30ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.lay-garden .info,
.lay-garden .groups {
  justify-content: center;
}
.snav-garden .chip.is-active {
  background: var(--gd-leaf);
  border-color: var(--gd-leaf);
  color: #fff;
}
.jsec {
  padding: 32px 18px 4px;
}
.jsec-title {
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-weight: 400;
}
/* a small sprig before the section name */
.jsec-title::before {
  content: "";
  width: 18px;
  height: 34px;
  background: var(--gd-leaf);
  -webkit-mask: var(--gd-sprig) no-repeat center / contain;
  mask: var(--gd-sprig) no-repeat center / contain;
  transform: rotate(20deg);
}
.jsec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-style: italic;
  font-size: 1.9rem;
  line-height: 1.1;
}
.jsec-title small {
  flex-basis: 100%;
  padding-left: 28px;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-garden .note {
  margin: 6px 0 8px;
  border-radius: 999px;
}
@media (min-width: 640px) {
  .jsec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 30px;
  }
}
.jrow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--gd-leaf) 18%, transparent);
  cursor: pointer;
}
.jrow-img {
  flex: none;
  width: 66px;
  height: 84px;
  object-fit: cover;
  border-radius: 999px 999px 10px 10px;
}
.jrow-main {
  flex: 1;
  min-width: 0;
}
.jline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.jname {
  flex: 1;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.15rem;
  line-height: 1.25;
}
.jprice {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--gd-leaf) 14%, var(--surface));
  color: var(--gd-leaf);
  font-weight: 700;
  font-size: 0.88rem;
}
.jprice.ask {
  background: none;
  color: var(--ink-faint);
  font-weight: 600;
  font-size: 0.78rem;
}
.jdesc {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.jvars b {
  color: var(--gd-leaf);
}

/* ================= layout: postcard (postal) =================
   Each section is a postcard with an airmail border, a numbered stamp and a postmark; the
   header is a picture postcard with the logo as its stamp. */
.lay-postcard {
  --pc-air: repeating-linear-gradient(135deg, var(--orange) 0 7px, var(--surface) 7px 11px, var(--hi) 11px 18px, var(--surface) 18px 22px);
  --page: color-mix(in srgb, var(--warm) 18%, var(--surface-2, var(--surface)));
  counter-reset: pc;
}
.pc-head {
  position: relative;
  padding: 56px 16px 6px;
}
.pc-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 2;
}
.pc-card {
  position: relative;
  padding: 10px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  transform: rotate(-1deg);
}
.pc-cover {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.pc-t {
  display: grid;
  gap: 4px;
  padding: 14px 92px 8px 8px;
}
.pc-card:has(.pc-cover) .pc-t {
  padding-right: 8px;
}
.pc-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.pc-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.3rem, 11vw, 3.6rem);
  line-height: 1;
  text-wrap: balance;
}
.pc-quote {
  margin: 2px 0 0;
  font-family: var(--script);
  font-size: 1.35rem;
  line-height: 1.15;
  color: var(--ink-soft);
}
/* a perforated stamp with the logo, and a round postmark over it */
.pc-stamp,
.osec::after {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 3px dotted color-mix(in srgb, var(--ink) 22%, transparent);
  outline: 4px solid var(--surface);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 8%, transparent);
}
.pc-stamp {
  top: 22px;
  right: 22px;
  width: 64px;
  height: 76px;
  overflow: hidden;
  transform: rotate(4deg);
}
.pc-card:not(:has(.pc-cover)) .pc-stamp {
  top: 16px;
}
.pc-stamp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-stamp b {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--orange);
}
.pc-mark {
  position: absolute;
  top: 46px;
  right: 58px;
  width: 64px;
  height: 64px;
  border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(transparent 44%, color-mix(in srgb, var(--ink) 35%, transparent) 44% 47%, transparent 47% 53%, color-mix(in srgb, var(--ink) 35%, transparent) 53% 56%, transparent 56%) 64px 0 / 90px 100% no-repeat;
  pointer-events: none;
  transform: rotate(-12deg);
}
.pc-card:not(:has(.pc-cover)) .pc-mark {
  top: 40px;
}
.pc-card:has(.pc-cover) .pc-stamp,
.pc-card:has(.pc-cover) .pc-mark {
  top: auto;
  bottom: 22px;
}
.pc-card:has(.pc-cover) .pc-mark {
  bottom: 40px;
}
.pc-card:has(.pc-cover) .pc-t {
  padding-right: 100px;
}
.osec {
  position: relative;
  counter-increment: pc;
  margin: 26px 14px 0;
  padding: 24px 18px 14px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* the airmail border */
.osec::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 4px;
  background: var(--pc-air);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  pointer-events: none;
}
/* the stamp with the section's number */
.osec::after {
  content: counter(pc);
  top: 22px;
  right: 22px;
  width: 42px;
  height: 50px;
  font-family: var(--serif);
  font-size: 1.6rem;
  color: var(--orange-ink);
  background: var(--orange);
  outline-color: var(--surface);
  transform: rotate(5deg);
}
.osec-title {
  margin: 4px 64px 6px 0;
  display: grid;
  gap: 2px;
  font-weight: 400;
}
.osec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.75rem;
  line-height: 1.1;
}
.osec-title small {
  font-family: var(--script);
  font-size: 1.15rem;
  color: var(--ink-faint);
}
.lay-postcard .note {
  margin: 4px 0 8px;
}
@media (min-width: 640px) {
  .osec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}
/* dishes on the lines of the address side */
.orow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-2);
  cursor: pointer;
}
.orow-img {
  flex: none;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transform: rotate(2deg);
}
.orow-main {
  flex: 1;
  min-width: 0;
}
.oline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.oname {
  flex: 1;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.3;
}
.oprice {
  flex: none;
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--orange);
}
.oprice.ask {
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.odesc {
  margin: 3px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ovars b {
  color: var(--orange);
}

/* ================= layout: bento =================
   Everything in rounded tiles: the header is a grid of tiles (name, cover, quote) and each
   section is a grid of dish tiles, the first dish with a photo taking the whole row. */
.lay-bento {
  --bn-tile: var(--surface);
  --page: color-mix(in srgb, var(--warm) 14%, var(--surface-2, var(--surface)));
}
.bn-head {
  position: relative;
  padding: 56px 12px 4px;
}
.bn-top {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
}
.bn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.bn-tile {
  border-radius: 24px;
  overflow: hidden;
}
.bn-id {
  grid-column: 1 / -1;
  display: grid;
  justify-items: start;
  align-content: end;
  gap: 6px;
  min-height: 170px;
  padding: 20px;
  background: linear-gradient(160deg, var(--brand-2), var(--brand));
  color: var(--brand-ink);
}
.bn-logo {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  margin-bottom: auto;
}
.bn-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bn-sub {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hi);
}
.bn-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.3rem, 11vw, 3.6rem);
  line-height: 1;
}
.bn-cover {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
}
.bn-quote {
  margin: 0;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  background: color-mix(in srgb, var(--hi) 22%, var(--surface));
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.3;
}
.bn-grid:not(.has-cover) .bn-quote {
  grid-column: 1 / -1;
}
@media (min-width: 640px) {
  .bn-grid {
    grid-template-columns: 1.2fr 1fr 0.8fr;
  }
  .bn-id {
    grid-column: auto;
    grid-row: span 2;
    min-height: 280px;
  }
  .bn-cover {
    grid-column: span 2;
  }
  .bn-quote {
    grid-column: span 2;
  }
}
.snav-bento .chip {
  background: var(--surface);
  border-color: transparent;
}
.snav-bento .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
}
.esec {
  padding: 26px 12px 4px;
}
.esec-title {
  margin: 0 0 10px;
  padding: 0 6px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-weight: 400;
}
.esec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.7rem;
  line-height: 1.1;
}
.esec-title small {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.lay-bento .note {
  margin: 0 0 10px;
  border-radius: 18px;
}
.esec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 640px) {
  .esec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ecard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bn-tile);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
}
.ecard.is-big {
  grid-column: 1 / -1;
}
.ecard-img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.ecard.is-big .ecard-img {
  aspect-ratio: 16 / 9;
}
@media (min-width: 640px) {
  .ecard.is-big {
    grid-column: span 2;
  }
  .pc-cover {
    aspect-ratio: 2 / 1;
  }
}
.ecard-out {
  position: absolute;
  top: 10px;
  left: 10px;
  background: var(--warn-bg);
  color: var(--warn);
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ecard:not(.has-img) .ecard-out {
  position: static;
  align-self: flex-start;
  margin: 12px 0 0 14px;
}
.ecard-b {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px 14px;
}
.ename {
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.25;
}
.ecard.is-big .ename {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.4rem;
}
.edesc {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ecard .dish-price {
  margin-top: auto;
  padding-top: 6px;
}
.ecard.is-out .ecard-img,
.ecard.is-out .ecard-b > :not(.dish-price) {
  opacity: 0.5;
}
.ecard.is-out .dish-price {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layouts of 2026-10-17: shared pieces =================
   Retro, Zen, Maré, Bistrô, Rótulo, Álbum, Bauhaus, Aguarela and the styles of 2026-10-18 all use the same
   classes (u-head, usec, urow…, built by uHead and lineRow in core.js); each one restyles them under its
   .lay-<style> below. */
.u-head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 58px 20px 10px;
  text-align: center;
  overflow: hidden;
}
.u-top {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 3;
}
.u-t {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: inherit;
  gap: 8px;
}
.u-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.u-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.u-sub {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange);
}
.u-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: clamp(2.4rem, 11vw, 3.8rem);
  line-height: 1;
  text-wrap: balance;
}
.u-quote {
  margin: 0;
  max-width: 32ch;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.u-cover {
  position: relative;
  z-index: 1;
  display: block;
  justify-self: stretch;
}
.u-cover img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.usec {
  padding: 30px 16px 4px;
}
.usec-title {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-weight: 400;
}
.usec-name {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.7rem;
  line-height: 1.1;
}
.usec-title small {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.usec .note {
  margin: 4px 0 8px;
}
@media (min-width: 640px) {
  .usec-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
  }
}
.urow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.urow-img {
  flex: none;
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
}
.urow-main {
  flex: 1;
  min-width: 0;
}
.uline {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.uname {
  flex: 1;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
}
.uprice {
  flex: none;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.uprice.ask {
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.udesc {
  margin: 4px 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.uvars {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 5px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.uvars b {
  color: var(--orange);
  font-weight: 700;
}
.umeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 6px;
}
.umeta .tag {
  margin-left: 0;
}
.umeta .alg-row {
  margin: 0;
}
.urow.is-out .urow-main > :not(.uline):not(.umeta),
.urow.is-out .uname,
.urow.is-out .urow-img {
  opacity: 0.5;
}
.urow.is-out .uprice {
  text-decoration: line-through;
  opacity: 0.5;
}

/* ================= layout: retro =================
   The seventies: a rainbow of three thick stripes rising behind the name, rounded letters with an
   offset shadow, round photos ringed in stripes and prices in rounded pills. */
.lay-retro {
  --rt-a: var(--orange);
  --rt-b: var(--warm);
  --rt-c: color-mix(in srgb, var(--orange) 55%, var(--ink));
  --page: color-mix(in srgb, var(--warm) 13%, var(--surface));
}
.lay-retro .u-head {
  padding-top: 52px;
}
.u-sun {
  display: block;
  width: min(86%, 340px);
  aspect-ratio: 2 / 1;
  margin-bottom: -46px;
  background: radial-gradient(circle at 50% 100%, transparent 0 30%, var(--rt-b) 30.5% 47%, var(--rt-a) 47.5% 64%, var(--rt-c) 64.5% 81%, transparent 81.5%);
}
.lay-retro .u-logo {
  width: 70px;
  height: 70px;
  box-shadow: 0 0 0 4px var(--page);
}
.lay-retro .u-sub {
  color: var(--rt-c);
  font-family: "Fredoka", var(--sans);
  font-weight: 600;
  letter-spacing: 0.16em;
}
.lay-retro .u-name {
  font-family: "Fredoka", var(--sans);
  font-weight: 700;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-shadow: 2px 2px 0 var(--rt-b);
}
.lay-retro .u-quote {
  font-family: "Fredoka", var(--sans);
}
.lay-retro .u-cover {
  margin: 16px 0 20px;
}
.lay-retro .u-cover img {
  border-radius: 26px;
  box-shadow:
    0 8px 0 var(--rt-b),
    0 16px 0 var(--rt-a),
    0 24px 0 var(--rt-c);
}
.snav-retro .chip {
  border: 1.5px solid var(--rt-a);
  color: var(--ink);
  font-family: "Fredoka", var(--sans);
  font-weight: 600;
}
.snav-retro .chip.is-active {
  background: var(--rt-a);
  color: var(--orange-ink);
}
.lay-retro .usec-title::before {
  content: "";
  width: 30px;
  height: 22px;
  border-radius: 11px 11px 4px 4px;
  background: linear-gradient(var(--rt-b) 0 33%, var(--rt-a) 33% 66%, var(--rt-c) 66%);
}
.lay-retro .usec-name {
  font-family: "Fredoka", var(--sans);
  font-weight: 700;
  font-size: 1.75rem;
}
.lay-retro .urow {
  align-items: center;
  border-bottom: 2px dotted color-mix(in srgb, var(--rt-a) 45%, transparent);
}
.lay-retro .urow-img {
  width: 66px;
  height: 66px;
  margin: 6px;
  border-radius: 50%;
  box-shadow:
    0 0 0 3px var(--page),
    0 0 0 6px var(--rt-a);
}
.lay-retro .uline {
  align-items: center;
}
.lay-retro .uname {
  font-family: "Fredoka", var(--sans);
  font-weight: 600;
  font-size: 1.08rem;
}
.lay-retro .uprice {
  padding: 3px 11px;
  border: 1.5px solid var(--rt-b);
  border-radius: 999px;
  background: color-mix(in srgb, var(--rt-b) 22%, var(--surface));
  color: var(--ink);
  font-family: "Fredoka", var(--sans);
  font-weight: 600;
}
.lay-retro .uprice.ask {
  border: 0;
  background: none;
  color: var(--ink-faint);
}

/* ================= layout: zen =================
   Quiet and airy: a brush-stroke ink circle behind the name, the logo as a red seal, thin spaced
   letters and a lot of white; on a computer each section's name sits in a column on the left. */
.lay-zen {
  --zn-red: var(--orange);
  --page: color-mix(in srgb, var(--warm) 5%, var(--surface));
}
.lay-zen .u-cover img {
  aspect-ratio: 21 / 9;
}
.lay-zen .u-head {
  padding: 0 0 18px;
  gap: 0;
}
.lay-zen .u-head:not(.has-cover) {
  padding-top: 52px;
}
.lay-zen .u-t {
  justify-items: center;
  gap: 10px;
  padding: 44px 24px 6px;
}
.u-enso {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 168px;
  height: 168px;
  margin-left: -84px;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 58%, color-mix(in srgb, var(--ink) 80%, transparent) 59% 66%, transparent 67%);
  -webkit-mask: conic-gradient(from 40deg, transparent 0 4%, rgba(0, 0, 0, 0.35) 10%, #000 30% 92%, transparent 97%);
  mask: conic-gradient(from 40deg, transparent 0 4%, rgba(0, 0, 0, 0.35) 10%, #000 30% 92%, transparent 97%);
  opacity: 0.16;
  z-index: -1;
}
.lay-zen .u-logo {
  order: 9;
  width: 46px;
  height: 46px;
  margin-top: 8px;
  padding: 3px;
  border-radius: 6px;
  background: var(--zn-red);
}
.lay-zen .u-logo img {
  border-radius: 3px;
  background: #fff;
}
.lay-zen .u-name {
  margin-top: 40px;
  font-weight: 400;
  font-size: clamp(2.3rem, 10vw, 3.4rem);
  letter-spacing: 0.08em;
}
.lay-zen .u-sub {
  color: var(--ink-faint);
  font-weight: 500;
  letter-spacing: 0.42em;
}
.lay-zen .u-quote {
  margin-top: 6px;
  font-family: var(--serif);
  font-style: italic;
}
.snav-zen .snav-tab {
  font-weight: 500;
  letter-spacing: 0.2em;
}
.snav-zen .snav-tab.is-active {
  border-bottom-color: var(--zn-red);
}
.lay-zen .usec {
  padding: 40px 22px 6px;
}
.lay-zen .usec-title {
  gap: 4px 14px;
  margin-bottom: 14px;
}
.lay-zen .usec-title::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zn-red);
}
.lay-zen .usec-name {
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lay-zen .usec-title::after {
  content: "";
  flex: 1;
  min-width: 30px;
  height: 1px;
  background: var(--line-2);
}
.lay-zen .usec-title small {
  order: 3;
  flex-basis: 100%;
  padding-left: 22px;
  letter-spacing: 0.24em;
}
.lay-zen .urow {
  gap: 18px;
  padding: 18px 0;
  border-bottom: 0;
}
.lay-zen .urow-img {
  width: 64px;
  height: 64px;
  border-radius: 2px;
}
.lay-zen .uname {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.02em;
}
.lay-zen .uprice {
  color: var(--ink-soft);
  font-weight: 400;
}
.lay-zen .udesc {
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.lay-zen .uvars b {
  color: var(--ink);
  font-weight: 500;
}
@media (min-width: 640px) {
  .lay-zen .usec {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    column-gap: 28px;
    align-items: start;
  }
  .lay-zen .usec-title {
    position: sticky;
    top: 70px;
    grid-row: span 3;
    flex-direction: column;
    align-items: flex-start;
    margin: 18px 0 0;
  }
  .lay-zen .usec-title::after {
    flex: none;
    width: 40px;
  }
  .lay-zen .usec-title small {
    padding-left: 0;
  }
  .lay-zen .usec-list {
    grid-template-columns: 1fr;
  }
}

/* ================= layout: tide (maré) =================
   By the sea: the cover ends in a wave, a line of waves under it, the logo in a porthole, section
   names underlined with a wave and round porthole photos. */
.lay-tide {
  --td-sea: var(--orange);
  --td-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4Q6 0 12 4T24 4' stroke='%23000' stroke-width='1.8' fill='none'/%3E%3C/svg%3E");
  --td-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 14'%3E%3Cpath d='M0 7Q10 0 20 7T40 7V14H0Z'/%3E%3C/svg%3E");
  --page: color-mix(in srgb, var(--td-sea) 6%, var(--surface));
}
.lay-tide .u-head {
  padding: 0 0 12px;
  gap: 0;
}
.lay-tide .u-head:not(.has-cover) {
  padding-top: 56px;
}
.lay-tide .u-cover img {
  aspect-ratio: 16 / 10;
}
.lay-tide .u-cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 20px;
  background: var(--page);
  -webkit-mask: var(--td-fill) repeat-x left bottom / 56px 20px;
  mask: var(--td-fill) repeat-x left bottom / 56px 20px;
}
.u-wave {
  display: block;
  justify-self: stretch;
  height: 26px;
  margin: 4px 0 0;
  background: color-mix(in srgb, var(--td-sea) 55%, transparent);
  -webkit-mask: var(--td-wave) repeat-x 0 0 / 30px 10px, var(--td-wave) repeat-x 15px 16px / 30px 10px;
  mask: var(--td-wave) repeat-x 0 0 / 30px 10px, var(--td-wave) repeat-x 15px 16px / 30px 10px;
}
.lay-tide .u-head.has-cover .u-wave {
  margin-top: -6px;
}
.lay-tide .u-t {
  padding: 10px 20px 0;
}
.lay-tide .u-logo {
  width: 78px;
  height: 78px;
  border: 5px solid var(--surface);
  box-shadow:
    0 0 0 3px var(--td-sea),
    0 4px 14px rgba(0, 30, 60, 0.18);
}
.lay-tide .u-head.has-cover .u-logo {
  margin-top: -64px;
}
.lay-tide .u-sub {
  color: var(--td-sea);
}
.lay-tide .u-name {
  font-size: clamp(2.6rem, 12vw, 4rem);
}
.snav-tide .chip.is-active {
  background: var(--td-sea);
  border-color: var(--td-sea);
}
.lay-tide .usec-title {
  position: relative;
  padding-bottom: 14px;
}
.lay-tide .usec-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 9px;
  background: var(--td-sea);
  -webkit-mask: var(--td-wave) repeat-x 0 0 / 24px 9px;
  mask: var(--td-wave) repeat-x 0 0 / 24px 9px;
}
.lay-tide .usec-name {
  font-size: 1.8rem;
}
.lay-tide .urow {
  align-items: center;
  border-bottom: 1px dashed color-mix(in srgb, var(--td-sea) 30%, transparent);
}
.lay-tide .urow-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid var(--surface);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--td-sea) 60%, transparent);
}
.lay-tide .uname {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.12rem;
}
.lay-tide .uprice {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: var(--td-sea);
}
.lay-tide .uprice.ask {
  font-family: inherit;
}

/* ================= layout: bistro (bistrô) =================
   A Paris bistro: a gingham tablecloth band at the top, the name in italic, the cover in a thin gilt
   frame, section names between two rules and dotted leaders from each dish to its price. */
.lay-bistro {
  --bs-check: color-mix(in srgb, var(--orange) 55%, transparent);
  --page: color-mix(in srgb, var(--warm) 8%, var(--surface));
}
.lay-bistro .u-head {
  padding-top: 0;
}
.u-check {
  display: block;
  justify-self: stretch;
  height: 44px;
  margin: 0 -20px 30px;
  background:
    linear-gradient(90deg, var(--bs-check) 50%, transparent 50%) 0 0 / 22px 22px,
    linear-gradient(var(--bs-check) 50%, transparent 50%) 0 0 / 22px 22px,
    var(--surface);
  border-bottom: 3px solid var(--orange);
}
.lay-bistro .u-top {
  top: 58px;
}
.lay-bistro .u-t {
  padding-top: 16px;
}
.lay-bistro .u-logo {
  width: 68px;
  height: 68px;
  border: 2px solid var(--orange);
  padding: 2px;
}
.lay-bistro .u-logo img {
  border-radius: 50%;
}
.lay-bistro .u-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.26em;
}
.lay-bistro .u-sub::before,
.lay-bistro .u-sub::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}
.lay-bistro .u-name {
  font-family: "Playfair Display", var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
}
.lay-bistro .u-quote {
  font-family: var(--serif);
  font-style: italic;
}
.lay-bistro .u-cover {
  margin: 18px 4px 6px;
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  outline: 4px double color-mix(in srgb, var(--warm) 70%, var(--ink));
  outline-offset: 3px;
  background: var(--surface);
}
.lay-bistro .u-cover img {
  aspect-ratio: 3 / 2;
}
.snav-bistro .chip {
  border-radius: 4px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
}
.snav-bistro .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
}
.lay-bistro .usec {
  padding-top: 34px;
}
.lay-bistro .usec-title {
  justify-content: center;
  text-align: center;
  gap: 2px 14px;
}
.lay-bistro .usec-title::before,
.lay-bistro .usec-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-2);
}
.lay-bistro .usec-title::after {
  order: 2;
}
.lay-bistro .usec-name {
  order: 1;
  font-family: "Playfair Display", var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.9rem;
}
.lay-bistro .usec-title small {
  order: 3;
  flex-basis: 100%;
}
.lay-bistro .urow {
  gap: 12px;
  padding: 12px 0;
  border-bottom: 0;
}
.lay-bistro .urow-img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
}
.lay-bistro .uline::after {
  content: "";
  order: 1;
  flex: 1;
  min-width: 18px;
  border-bottom: 2px dotted color-mix(in srgb, var(--ink) 35%, transparent);
  transform: translateY(-4px);
}
.lay-bistro .uname {
  flex: 0 1 auto;
  font-size: 1.02rem;
}
.lay-bistro .uprice {
  order: 2;
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--ink);
}
.lay-bistro .udesc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
}
.lay-bistro .uvars b {
  color: var(--ink);
}

/* ================= layout: label (rótulo) =================
   Like the label on a bottle of wine: the name in an oval cartouche with a double border, and each
   section a cream label with a fine double frame, dishes centred with the price under the name. */
.lay-label {
  --lb-ink: color-mix(in srgb, var(--warm) 45%, var(--ink));
  --page: color-mix(in srgb, var(--warm) 22%, var(--surface-2, var(--surface)));
}
.lay-label .u-head {
  padding: 56px 18px 6px;
}
.lay-label .u-t {
  width: min(100%, 420px);
  padding: 34px 28px 30px;
  border-radius: 50% / 38%;
  background: var(--surface);
  border: 1.5px solid var(--lb-ink);
  box-shadow:
    inset 0 0 0 5px var(--surface),
    inset 0 0 0 6px var(--lb-ink),
    0 8px 22px rgba(60, 40, 10, 0.14);
}
.lay-label .u-logo {
  width: 54px;
  height: 54px;
  border: 1px solid var(--lb-ink);
}
.lay-label .u-sub {
  color: var(--lb-ink);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: none;
}
.lay-label .u-name {
  font-size: clamp(2.2rem, 10vw, 3.2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.u-rule {
  display: block;
  width: 140px;
  height: 9px;
  background:
    linear-gradient(var(--lb-ink), var(--lb-ink)) left center / 58px 1px no-repeat,
    linear-gradient(var(--lb-ink), var(--lb-ink)) right center / 58px 1px no-repeat,
    linear-gradient(45deg, transparent 32%, var(--lb-ink) 33% 67%, transparent 68%) center / 9px 9px no-repeat;
}
.lay-label .u-quote {
  max-width: 26ch;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lay-label .u-cover {
  margin: 20px 0 4px;
  padding: 7px;
  background: var(--surface);
  border: 1px solid var(--lb-ink);
}
.lay-label .u-cover img {
  aspect-ratio: 2 / 1;
}
.snav-label .snav-tab {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.16em;
}
.snav-label .snav-tab.is-active {
  border-bottom-color: var(--lb-ink);
}
.lay-label .usec {
  margin: 22px 14px 0;
  padding: 26px 18px 12px;
  background: var(--surface);
  border: 1.5px solid var(--lb-ink);
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 5px var(--surface),
    inset 0 0 0 6px color-mix(in srgb, var(--lb-ink) 55%, transparent),
    0 6px 16px rgba(60, 40, 10, 0.1);
}
.lay-label .usec-title {
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
  text-align: center;
}
.lay-label .usec-name {
  font-size: 1.45rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.lay-label .usec-title::after {
  content: "";
  order: 3;
  width: 110px;
  height: 9px;
  margin-top: 6px;
  background:
    linear-gradient(var(--lb-ink), var(--lb-ink)) left center / 44px 1px no-repeat,
    linear-gradient(var(--lb-ink), var(--lb-ink)) right center / 44px 1px no-repeat,
    linear-gradient(45deg, transparent 32%, var(--lb-ink) 33% 67%, transparent 68%) center / 9px 9px no-repeat;
}
.lay-label .usec-title small {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: none;
}
.lay-label .urow {
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 4px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--lb-ink) 22%, transparent);
}
.lay-label .urow:last-child {
  border-bottom: 0;
}
.lay-label .urow-main {
  width: 100%;
}
.lay-label .urow-img {
  width: 92px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--lb-ink);
  padding: 2px;
}
.lay-label .uline {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.lay-label .uname {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.lay-label .uprice {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.08rem;
  color: var(--lb-ink);
}
.lay-label .udesc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
}
.lay-label .uvars,
.lay-label .umeta {
  justify-content: center;
}
.lay-label .uvars b {
  color: var(--lb-ink);
}
@media (min-width: 640px) {
  .lay-label .usec {
    margin: 26px 18px 0;
    padding: 30px 26px 16px;
  }
  .lay-label .urow:nth-last-child(2):nth-child(odd) {
    border-bottom: 0;
  }
}

/* ================= layout: album (álbum) =================
   A photo album: the cover is an instant photo held by tape, each dish is a small instant photo in a
   grid, slightly crooked, with the name written under it; section names on a strip of paper tape. */
.lay-album {
  --al-tape: color-mix(in srgb, var(--warm) 55%, rgba(255, 255, 255, 0.4));
  --page: color-mix(in srgb, var(--warm) 16%, var(--surface-2, var(--surface)));
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px);
  background-size: 18px 18px;
}
.lay-album .u-head {
  padding-top: 60px;
  gap: 4px;
}
.lay-album .u-cover {
  justify-self: center;
  width: min(84%, 380px);
  margin: 10px 0 18px;
  padding: 10px 10px 40px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(40, 30, 20, 0.2);
  transform: rotate(-2deg);
}
.lay-album .u-cover::before,
.lay-album .u-cover::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 80px;
  height: 24px;
  background: var(--al-tape);
  opacity: 0.85;
}
.lay-album .u-cover::before {
  left: -18px;
  transform: rotate(-30deg);
}
.lay-album .u-cover::after {
  right: -18px;
  transform: rotate(32deg);
}
.lay-album .u-cover img {
  aspect-ratio: 1 / 1;
}
.lay-album .u-logo {
  width: 58px;
  height: 58px;
  box-shadow: 0 3px 10px rgba(40, 30, 20, 0.2);
}
.lay-album .u-head.has-cover .u-logo {
  margin-top: -64px;
  transform: rotate(6deg);
}
.lay-album .u-name {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
}
.lay-album .u-sub,
.lay-album .u-quote {
  font-family: "Caveat", cursive;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.lay-album .u-sub {
  color: var(--orange);
}
.snav-album .chip {
  border-radius: 3px;
  background: var(--surface);
}
.snav-album .chip.is-active {
  background: var(--al-tape);
  border-color: transparent;
  color: var(--ink);
}
.lay-album .usec-title {
  margin-bottom: 18px;
}
.lay-album .usec-name {
  display: inline-block;
  padding: 6px 20px;
  background: var(--al-tape);
  font-size: 1.5rem;
  transform: rotate(-1.5deg);
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 100% 0, 96% 12%, 100% 26%, 96% 40%, 100% 56%, 96% 72%, 100% 88%, 96% 100%, 0 100%, 4% 88%, 0 74%, 4% 58%, 0 42%, 4% 26%);
}
.lay-album .usec-title small {
  font-family: "Caveat", cursive;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
}
.lay-album .usec-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}
@media (min-width: 640px) {
  .lay-album .usec-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 18px;
  }
}
.lay-album .urow {
  flex-direction: column;
  gap: 8px;
  padding: 8px 8px 12px;
  border: 0;
  background: #fff;
  color: #2a2420;
  box-shadow: 0 4px 12px rgba(40, 30, 20, 0.16);
  transform: rotate(-1.2deg);
}
.lay-album .urow:nth-child(even) {
  transform: rotate(1.4deg);
}
.lay-album .urow:nth-child(3n) {
  transform: rotate(-0.4deg);
}
.lay-album .urow:not(:has(.urow-img)) {
  padding-top: 22px;
  border-top: 10px solid var(--al-tape);
}
.lay-album .urow-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
}
.lay-album .urow-main {
  width: 100%;
}
.lay-album .uline {
  flex-direction: column;
  gap: 0;
}
.lay-album .uname {
  font-size: 0.92rem;
  line-height: 1.25;
}
.lay-album .uprice {
  color: color-mix(in srgb, var(--orange) 65%, #222);
  font-family: "Caveat", cursive;
  font-size: 1.4rem;
  line-height: 1.1;
}
.lay-album .uprice.ask {
  font-family: inherit;
  font-size: 0.76rem;
}
.lay-album .udesc {
  font-size: 0.76rem;
  color: #6b625a;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lay-album .uvars {
  font-size: 0.78rem;
  color: #6b625a;
}
.lay-album .orig {
  color: #8a8078;
}

/* ================= layout: bauhaus =================
   Bold and geometric: a composition of a circle, a half circle and a square in the menu's colours,
   the name in heavy capitals on the left, a shape before each section and prices in solid circles. */
.lay-bauhaus {
  --bh-a: var(--orange);
  --bh-b: var(--warm);
  --bh-c: var(--ink);
  --page: var(--surface);
}
.lay-bauhaus .u-head {
  justify-items: start;
  text-align: left;
  padding: 0 18px 8px;
  gap: 10px;
}
.u-shapes {
  position: relative;
  display: block;
  justify-self: stretch;
  height: 170px;
  margin: 0 -18px 6px;
  background:
    linear-gradient(var(--bh-c), var(--bh-c)) 74% 100% / 30% 34% no-repeat,
    linear-gradient(90deg, var(--bh-b) 0 100%) 0 0 / 34% 100% no-repeat,
    var(--surface-2, var(--surface));
}
.u-shapes::before {
  content: "";
  position: absolute;
  left: 20%;
  top: 22px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--bh-a);
}
.u-shapes::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 58px;
  width: 84px;
  height: 42px;
  border-radius: 84px 84px 0 0;
  background: var(--bh-a);
  opacity: 0.55;
}
.lay-bauhaus .u-t {
  justify-items: start;
  gap: 10px;
}
.lay-bauhaus .u-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 700;
}
.lay-bauhaus .u-sub::before {
  content: "";
  width: 28px;
  height: 6px;
  background: var(--bh-a);
}
.lay-bauhaus .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: clamp(3rem, 15vw, 5rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.lay-bauhaus .u-quote {
  font-size: 1rem;
}
.lay-bauhaus .u-logo {
  width: 52px;
  height: 52px;
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--bh-a);
}
.lay-bauhaus .u-cover {
  margin-top: 14px;
}
.lay-bauhaus .u-cover img {
  aspect-ratio: 16 / 9;
  border-radius: 0 0 0 160px;
}
.snav-bauhaus .chip {
  border: 1.5px solid var(--ink);
  border-radius: 0;
  color: var(--ink);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.76rem;
}
.snav-bauhaus .chip.is-active {
  background: var(--ink);
  color: var(--page);
}
.lay-bauhaus .usec {
  padding-top: 36px;
}
.lay-bauhaus .usec-title {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
}
.lay-bauhaus .usec-title::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bh-a);
}
.lay-bauhaus .usec:nth-of-type(3n + 2) .usec-title::before {
  border-radius: 0;
  background: var(--bh-b);
}
.lay-bauhaus .usec:nth-of-type(3n) .usec-title::before {
  border-radius: 0;
  background: var(--bh-c);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.lay-bauhaus .usec-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.lay-bauhaus .urow {
  align-items: center;
  border-bottom: 1.5px solid color-mix(in srgb, var(--ink) 18%, transparent);
}
.lay-bauhaus .urow-img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
}
.lay-bauhaus .urow:nth-child(3n + 2) .urow-img {
  border-radius: 0;
}
.lay-bauhaus .urow:nth-child(3n) .urow-img {
  border-radius: 66px 66px 0 0;
}
.lay-bauhaus .uname {
  font-weight: 700;
  font-size: 1.02rem;
}
.lay-bauhaus .uprice {
  display: grid;
  place-items: center;
  align-self: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--bh-a);
  color: var(--orange-ink);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: -0.02em;
}
.lay-bauhaus .urow:nth-child(3n + 2) .uprice {
  border-radius: 0;
  background: var(--bh-b);
  color: #1d1a16;
}
.lay-bauhaus .urow:nth-child(3n) .uprice {
  background: var(--bh-c);
  color: var(--page);
}
.lay-bauhaus .uprice.ask {
  width: auto;
  height: auto;
  background: none;
  color: var(--ink-faint);
  font-weight: 600;
}

/* ================= layout: watercolor (aguarela) =================
   Painted by hand: soft washes of colour behind the name and each section name, and the cover and
   dish photos in loose, rounded shapes. */
.lay-watercolor {
  --wc-a: var(--orange);
  --wc-b: var(--warm);
  --wc-c: var(--hi);
  --page: var(--surface);
}
.lay-watercolor .u-head {
  padding-top: 64px;
}
.u-blob {
  position: absolute;
  left: 50%;
  top: 30px;
  width: 340px;
  height: 230px;
  margin-left: -170px;
  background:
    radial-gradient(closest-side at 32% 46%, color-mix(in srgb, var(--wc-a) 40%, transparent), transparent),
    radial-gradient(closest-side at 66% 40%, color-mix(in srgb, var(--wc-b) 60%, transparent), transparent),
    radial-gradient(closest-side at 52% 72%, color-mix(in srgb, var(--wc-c) 30%, transparent), transparent);
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  filter: blur(6px);
}
.lay-watercolor .u-logo {
  width: 66px;
  height: 66px;
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
}
.lay-watercolor .u-sub {
  color: color-mix(in srgb, var(--wc-a) 75%, var(--ink));
}
.lay-watercolor .u-name {
  font-style: italic;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
}
.lay-watercolor .u-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
}
.lay-watercolor .u-cover {
  margin: 18px 4px 4px;
}
.lay-watercolor .u-cover img {
  aspect-ratio: 4 / 3;
  border-radius: 58% 42% 52% 48% / 44% 52% 48% 56%;
}
.snav-watercolor .chip {
  border-color: transparent;
  background: color-mix(in srgb, var(--wc-b) 18%, transparent);
  color: var(--ink);
}
.snav-watercolor .chip.is-active {
  background: color-mix(in srgb, var(--wc-a) 80%, transparent);
  color: var(--orange-ink);
}
.lay-watercolor .usec {
  padding-top: 36px;
}
.lay-watercolor .usec-name {
  position: relative;
  z-index: 0;
  padding: 2px 10px;
  font-style: italic;
  font-size: 1.95rem;
}
.lay-watercolor .usec-name::before {
  content: "";
  position: absolute;
  inset: -8px -18px -6px -12px;
  z-index: -1;
  background:
    radial-gradient(closest-side at 30% 55%, color-mix(in srgb, var(--wc-b) 70%, transparent), transparent),
    radial-gradient(closest-side at 72% 45%, color-mix(in srgb, var(--wc-b) 55%, transparent), transparent);
  border-radius: 48% 52% 40% 60% / 56% 44% 56% 44%;
  filter: blur(3px);
}
.lay-watercolor .usec:nth-of-type(3n + 2) .usec-name::before {
  background:
    radial-gradient(closest-side at 30% 55%, color-mix(in srgb, var(--wc-a) 45%, transparent), transparent),
    radial-gradient(closest-side at 72% 45%, color-mix(in srgb, var(--wc-a) 32%, transparent), transparent);
}
.lay-watercolor .usec:nth-of-type(3n) .usec-name::before {
  background:
    radial-gradient(closest-side at 30% 55%, color-mix(in srgb, var(--wc-c) 55%, transparent), transparent),
    radial-gradient(closest-side at 72% 45%, color-mix(in srgb, var(--wc-c) 40%, transparent), transparent);
}
.lay-watercolor .urow {
  padding: 14px 0;
  border-bottom: 0;
}
.lay-watercolor .urow-img {
  width: 76px;
  height: 76px;
  border-radius: 54% 46% 58% 42% / 46% 56% 44% 54%;
}
.lay-watercolor .urow:nth-child(even) .urow-img {
  border-radius: 42% 58% 46% 54% / 58% 42% 58% 42%;
}
.lay-watercolor .uname {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.14rem;
}
.lay-watercolor .uprice {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: color-mix(in srgb, var(--wc-a) 80%, var(--ink));
}
.lay-watercolor .uprice.ask {
  font-family: inherit;
}

/* ================= layout: ticket (bilhete) =================
   Admission tickets: the header is a big ticket with notches at the sides, each dish is a ticket
   with the price on a stub behind a perforated line, section names between stars. */
.lay-ticket {
  --tk-paper: color-mix(in srgb, var(--warm) 10%, var(--surface));
  --tk-notch: radial-gradient(circle 11px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  --page: color-mix(in srgb, var(--warm) 26%, var(--surface-2, var(--surface)));
}
.lay-ticket .u-head {
  padding: 58px 16px 12px;
}
.lay-ticket .u-t {
  justify-self: stretch;
  gap: 6px;
  padding: 26px 34px 24px;
  background: var(--brand);
  color: var(--brand-ink);
  -webkit-mask: radial-gradient(circle 16px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 16px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 16px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.lay-ticket .u-t::before {
  content: "";
  position: absolute;
  inset: 8px 22px;
  border: 1.5px dashed color-mix(in srgb, var(--brand-ink) 45%, transparent);
  border-radius: 6px;
  pointer-events: none;
}
.lay-ticket .u-logo {
  width: 54px;
  height: 54px;
}
.lay-ticket .u-sub {
  color: var(--brand-ink);
  opacity: 0.85;
  letter-spacing: 0.32em;
}
.lay-ticket .u-name {
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lay-ticket .u-quote {
  color: var(--brand-ink);
  opacity: 0.85;
}
.lay-ticket .u-cover {
  margin-top: 12px;
  padding: 8px;
  background: var(--tk-paper);
  -webkit-mask: var(--tk-notch);
  mask: var(--tk-notch);
}
.lay-ticket .u-cover img {
  border-radius: 4px;
}
.snav-ticket .chip {
  border-radius: 4px;
  border-style: dashed;
  color: var(--ink);
  font-weight: 700;
}
.snav-ticket .chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  border-style: solid;
  color: var(--brand-ink);
}
.lay-ticket .usec-title {
  justify-content: center;
  text-align: center;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.lay-ticket .usec-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.lay-ticket .usec-name::before,
.lay-ticket .usec-name::after {
  content: "★";
  margin: 0 0.6em;
  color: var(--orange);
  font-size: 0.8em;
}
.lay-ticket .usec-list {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .lay-ticket .usec-list {
    column-gap: 14px;
  }
}
.lay-ticket .urow {
  align-items: center;
  gap: 12px;
  padding: 12px 0 12px 18px;
  border: 0;
  background: var(--tk-paper);
  -webkit-mask: var(--tk-notch);
  mask: var(--tk-notch);
}
.lay-ticket .urow-img {
  width: 62px;
  height: 62px;
  border-radius: 6px;
}
.lay-ticket .uname {
  font-weight: 700;
}
/* the stub with the price, behind a perforated line */
.lay-ticket .uprice {
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 74px;
  margin: -12px 0;
  padding: 0 16px 0 14px;
  border-left: 2px dashed color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.12rem;
}
.lay-ticket .uprice.ask {
  font-family: inherit;
  font-size: 0.74rem;
}
.lay-ticket .urow:not(:has(.uprice)) {
  padding-right: 18px;
}

/* ================= layout: marble (mármore) =================
   Cool and luxurious: a white marble page with soft grey veins, thin gold lines, spaced serif
   capitals and gold prices. */
.lay-marble {
  --mb-gold: color-mix(in srgb, var(--warm) 65%, var(--orange));
  --mb-vein: color-mix(in srgb, var(--ink) 9%, transparent);
  --page: color-mix(in srgb, var(--ink) 2%, var(--surface));
  background-image:
    linear-gradient(118deg, transparent 38%, var(--mb-vein) 39.2%, transparent 40.5%),
    linear-gradient(32deg, transparent 58%, var(--mb-vein) 58.6%, transparent 59.6%),
    linear-gradient(150deg, transparent 70%, var(--mb-vein) 70.4%, transparent 71.2%),
    radial-gradient(ellipse at 20% 30%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 60%),
    radial-gradient(ellipse at 80% 70%, color-mix(in srgb, var(--ink) 4%, transparent), transparent 60%);
  background-size: 420px 640px, 520px 760px, 380px 520px, 100% 100%, 100% 100%;
}
.lay-marble .u-head {
  padding-top: 62px;
}
.lay-marble .u-logo {
  width: 62px;
  height: 62px;
  box-shadow:
    0 0 0 2px var(--page),
    0 0 0 3px var(--mb-gold);
}
.lay-marble .u-sub {
  color: var(--mb-gold);
  letter-spacing: 0.4em;
}
.lay-marble .u-name {
  font-weight: 400;
  font-size: clamp(2.3rem, 10vw, 3.4rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lay-marble .u-quote {
  font-family: var(--serif);
  font-style: italic;
}
.lay-marble .u-t::after {
  content: "";
  width: 120px;
  height: 1px;
  margin-top: 6px;
  background: linear-gradient(90deg, transparent, var(--mb-gold), transparent);
}
.lay-marble .u-cover {
  margin: 18px 6px 6px;
  outline: 1px solid var(--mb-gold);
  outline-offset: 6px;
}
.lay-marble .u-cover img {
  aspect-ratio: 16 / 10;
}
.snav-marble .chip {
  border-color: color-mix(in srgb, var(--mb-gold) 55%, transparent);
  color: var(--ink);
  font-family: var(--serif);
  letter-spacing: 0.06em;
}
.snav-marble .chip.is-active {
  background: var(--mb-gold);
  border-color: var(--mb-gold);
  color: #fff;
}
.lay-marble .usec {
  padding-top: 38px;
}
.lay-marble .usec-title {
  flex-direction: column;
  gap: 2px;
  text-align: center;
  margin-bottom: 14px;
}
.lay-marble .usec-name {
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lay-marble .usec-title small {
  color: var(--mb-gold);
}
.lay-marble .usec-title::after {
  content: "";
  order: 3;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  background: var(--mb-gold);
  transform: rotate(45deg);
}
.lay-marble .urow {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--mb-gold) 30%, transparent);
}
.lay-marble .urow-img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 2px solid var(--page);
  box-shadow: 0 0 0 1px var(--mb-gold);
}
.lay-marble .uname {
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.12rem;
}
.lay-marble .uprice {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.1rem;
  color: var(--mb-gold);
}
.lay-marble .uprice.ask {
  font-family: inherit;
}
.lay-marble .udesc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
}
.lay-marble .uvars b {
  color: var(--mb-gold);
}

/* ================= layout: paper (papel) =================
   Paper cut-out: waves of coloured paper layered under the name, and each section a sheet lying on
   two more sheets in the menu's colours. */
.lay-paper {
  --pp-a: var(--orange);
  --pp-b: var(--warm);
  --pp-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 20' preserveAspectRatio='none'%3E%3Cpath d='M0 10C20 0 40 0 60 10S100 20 120 10V20H0Z'/%3E%3C/svg%3E");
  --page: color-mix(in srgb, var(--warm) 12%, var(--surface));
}
.lay-paper .u-head {
  padding: 58px 20px 18px;
}
.u-layers {
  position: absolute;
  inset: auto 0 0;
  height: 120px;
  background: var(--pp-b);
  -webkit-mask: var(--pp-wave) 0 0 / 100% 40px no-repeat, linear-gradient(#000, #000) 0 39px / 100% 100% no-repeat;
  mask: var(--pp-wave) 0 0 / 100% 40px no-repeat, linear-gradient(#000, #000) 0 39px / 100% 100% no-repeat;
  filter: drop-shadow(0 -3px 4px rgba(0, 0, 0, 0.12));
}
.u-layers::before,
.u-layers::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.u-layers::before {
  height: 80px;
  background: var(--pp-a);
  -webkit-mask: var(--pp-wave) 0 0 / 100% 34px no-repeat, linear-gradient(#000, #000) 0 33px / 100% 100% no-repeat;
  mask: var(--pp-wave) 0 0 / 100% 34px no-repeat, linear-gradient(#000, #000) 0 33px / 100% 100% no-repeat;
  transform: scaleX(-1);
}
.u-layers::after {
  height: 40px;
  background: var(--page);
  -webkit-mask: var(--pp-wave) 0 0 / 100% 28px no-repeat, linear-gradient(#000, #000) 0 27px / 100% 100% no-repeat;
  mask: var(--pp-wave) 0 0 / 100% 28px no-repeat, linear-gradient(#000, #000) 0 27px / 100% 100% no-repeat;
}
.lay-paper .u-t {
  padding-bottom: 96px;
}
.lay-paper .u-head.has-cover .u-t {
  padding-bottom: 0;
}
.lay-paper .u-logo {
  width: 66px;
  height: 66px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.lay-paper .u-name {
  font-size: clamp(2.6rem, 12vw, 4rem);
}
.lay-paper .u-cover {
  z-index: 2;
  margin: 16px 6px 34px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}
.snav-paper .chip {
  border: 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.snav-paper .chip.is-active {
  background: var(--pp-a);
  color: var(--orange-ink);
}
.lay-paper .usec {
  position: relative;
  isolation: isolate;
  margin: 26px 18px 0;
  padding: 22px 18px 10px;
}
/* the top sheet, and under it a sheet in each of two colours */
.lay-paper .usec::before,
.lay-paper .usec::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
}
.lay-paper .usec::before {
  z-index: -1;
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}
.lay-paper .usec::after {
  z-index: -2;
  background: var(--pp-b);
  transform: rotate(-1.6deg) translate(-3px, 5px);
  box-shadow: 9px 6px 0 var(--pp-a);
}
.lay-paper .usec-name {
  font-size: 1.6rem;
}
.lay-paper .urow:last-child {
  border-bottom: 0;
}
.lay-paper .urow-img {
  border-radius: 14px;
}
.lay-paper .uprice {
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pp-a) 14%, var(--surface));
}
.lay-paper .uprice.ask {
  background: none;
}

/* ================= layout: nouveau (arte nova) =================
   Art nouveau: the name under a tall arch drawn with a double line and whiplash curves, flowing
   italic letters and a flourish under each section name. */
.lay-nouveau {
  --nv-line: color-mix(in srgb, var(--orange) 70%, var(--warm));
  --nv-whip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24'%3E%3Cpath d='M4 14C30 2 50 26 76 12S96 4 100 12C104 4 116 0 124 12S170 26 196 14' stroke='%23000' stroke-width='2' fill='none'/%3E%3Ccircle cx='100' cy='16' r='3'/%3E%3C/svg%3E");
  --page: color-mix(in srgb, var(--warm) 12%, var(--surface));
}
.lay-nouveau .u-head {
  padding: 56px 18px 10px;
}
.lay-nouveau .u-t {
  width: min(100%, 400px);
  padding: 56px 26px 26px;
  border: 1.5px solid var(--nv-line);
  border-bottom: 0;
  border-radius: 200px 200px 0 0;
  box-shadow: inset 0 0 0 5px var(--page), inset 0 0 0 6px color-mix(in srgb, var(--nv-line) 60%, transparent);
}
.lay-nouveau .u-logo {
  width: 60px;
  height: 60px;
  border: 1.5px solid var(--nv-line);
}
.lay-nouveau .u-sub {
  color: var(--nv-line);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: none;
}
.lay-nouveau .u-name {
  font-family: "Cormorant Garamond", var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(3rem, 14vw, 4.6rem);
  line-height: 0.95;
}
.lay-nouveau .u-t::after {
  content: "";
  width: 180px;
  height: 22px;
  background: var(--nv-line);
  -webkit-mask: var(--nv-whip) center / contain no-repeat;
  mask: var(--nv-whip) center / contain no-repeat;
}
.lay-nouveau .u-quote {
  font-family: "Cormorant Garamond", var(--serif);
  font-size: 1.12rem;
  font-style: italic;
}
.lay-nouveau .u-cover {
  margin-top: -2px;
  width: min(100%, 400px);
  justify-self: center;
  padding: 0 8px 8px;
  border: 1.5px solid var(--nv-line);
  border-top: 0;
}
.lay-nouveau .u-cover img {
  aspect-ratio: 4 / 3;
}
.snav-nouveau .chip {
  font-family: "Cormorant Garamond", var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}
.snav-nouveau .chip.is-active {
  background: var(--nv-line);
  border-color: var(--nv-line);
  color: #fff;
}
.lay-nouveau .usec {
  padding-top: 36px;
}
.lay-nouveau .usec-title {
  flex-direction: column;
  gap: 0;
  text-align: center;
  margin-bottom: 10px;
}
.lay-nouveau .usec-name {
  font-family: "Cormorant Garamond", var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 2.2rem;
}
.lay-nouveau .usec-title::after {
  content: "";
  order: 3;
  width: 150px;
  height: 18px;
  margin-top: 2px;
  background: var(--nv-line);
  -webkit-mask: var(--nv-whip) center / contain no-repeat;
  mask: var(--nv-whip) center / contain no-repeat;
}
.lay-nouveau .urow {
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--nv-line) 25%, transparent);
}
.lay-nouveau .urow-img {
  width: 64px;
  height: 80px;
  border-radius: 50%;
  border: 1.5px solid var(--nv-line);
  padding: 3px;
}
.lay-nouveau .uname {
  font-family: "Cormorant Garamond", var(--serif);
  font-weight: 700;
  font-size: 1.25rem;
}
.lay-nouveau .uprice {
  font-family: "Cormorant Garamond", var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--nv-line);
}
.lay-nouveau .udesc {
  font-family: "Cormorant Garamond", var(--serif);
  font-size: 1rem;
}
.lay-nouveau .uvars b {
  color: var(--nv-line);
}

/* ================= layout: diner =================
   An American diner: a black-and-white checkerboard, the name in a looping script, section names in
   chrome-edged pills and prices on round red badges. */
.lay-diner {
  --dn-red: var(--orange);
  --dn-mint: color-mix(in srgb, var(--warm) 45%, #fff);
  --dn-check: conic-gradient(var(--ink) 25%, var(--surface) 0 50%, var(--ink) 0 75%, var(--surface) 0) 0 0 / 24px 24px;
  --page: color-mix(in srgb, var(--dn-mint) 18%, var(--surface));
}
.lay-diner .u-head {
  padding: 0 18px 12px;
}
.u-checker {
  display: block;
  justify-self: stretch;
  height: 36px;
  margin: 0 -18px 50px;
  background: var(--dn-check);
}
.lay-diner .u-top {
  top: 50px;
}
.lay-diner .u-logo {
  width: 70px;
  height: 70px;
  border: 3px solid var(--dn-red);
}
.lay-diner .u-name {
  font-family: "Sacramento", var(--script, cursive);
  font-weight: 400;
  font-size: clamp(3.8rem, 18vw, 5.6rem);
  line-height: 0.9;
  color: var(--dn-red);
  text-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 18%, transparent);
}
.lay-diner .u-sub {
  padding: 5px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  letter-spacing: 0.24em;
}
.lay-diner .u-quote {
  font-weight: 600;
}
.lay-diner .u-cover {
  margin-top: 16px;
  border: 6px solid var(--surface);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--ink);
}
.snav-diner .chip {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
}
.snav-diner .chip.is-active {
  background: var(--dn-red);
  border-color: var(--ink);
  color: var(--orange-ink);
}
.lay-diner .usec-title {
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.lay-diner .usec-name {
  padding: 6px 26px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--page), 0 0 0 5px color-mix(in srgb, var(--ink) 40%, #c0c6cc);
}
.lay-diner .urow {
  align-items: center;
  border-bottom: 2px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.lay-diner .urow-img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 2px solid var(--ink);
}
.lay-diner .uline {
  align-items: center;
}
.lay-diner .uname {
  font-weight: 700;
  font-size: 1.04rem;
}
.lay-diner .uprice {
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--dn-red);
  color: var(--orange-ink);
  font-weight: 800;
  font-size: 0.84rem;
  transform: rotate(-8deg);
  box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--dn-red);
}
.lay-diner .uprice.ask {
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--ink-faint);
  transform: none;
}

/* ================= layout: tropical =================
   Holiday colours: palm fans in the corners of the header, round photos, dishes on white cards with
   rounded corners and prices on leaf-green pills. */
.lay-tropical {
  --tp-leaf: color-mix(in srgb, var(--orange) 70%, var(--brand));
  --tp-sun: var(--warm);
  --tp-fan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30' transform='rotate(-70 50 96)'/%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30' transform='rotate(-46 50 96)'/%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30' transform='rotate(-23 50 96)'/%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30'/%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30' transform='rotate(23 50 96)'/%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30' transform='rotate(46 50 96)'/%3E%3Cellipse cx='50' cy='30' rx='5.5' ry='30' transform='rotate(70 50 96)'/%3E%3C/g%3E%3C/svg%3E");
  --page: color-mix(in srgb, var(--tp-sun) 12%, var(--surface));
}
.lay-tropical .u-head {
  padding: 66px 22px 12px;
}
.u-palm {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.u-palm::before,
.u-palm::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  background: var(--tp-leaf);
  -webkit-mask: var(--tp-fan) center / contain no-repeat;
  mask: var(--tp-fan) center / contain no-repeat;
}
.u-palm::before {
  left: -58px;
  top: -40px;
  transform: rotate(140deg);
  opacity: 0.85;
}
.u-palm::after {
  right: -64px;
  top: 120px;
  transform: rotate(-110deg);
  background: var(--tp-sun);
  opacity: 0.8;
}
.lay-tropical .u-logo {
  width: 72px;
  height: 72px;
  box-shadow: 0 0 0 5px var(--tp-sun);
}
.lay-tropical .u-sub {
  color: var(--tp-leaf);
}
.lay-tropical .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
  letter-spacing: -0.02em;
}
.lay-tropical .u-cover {
  margin: 16px 0 4px;
}
.lay-tropical .u-cover img {
  border-radius: 28px;
}
.snav-tropical .chip {
  border-color: color-mix(in srgb, var(--tp-leaf) 40%, transparent);
  color: var(--ink);
  font-weight: 700;
}
.snav-tropical .chip.is-active {
  background: var(--tp-leaf);
  border-color: var(--tp-leaf);
  color: #fff;
}
.lay-tropical .usec-title::before {
  content: "";
  width: 30px;
  height: 30px;
  background: var(--tp-leaf);
  -webkit-mask: var(--tp-fan) center / contain no-repeat;
  mask: var(--tp-fan) center / contain no-repeat;
}
.lay-tropical .usec:nth-of-type(even) .usec-title::before {
  background: var(--tp-sun);
}
.lay-tropical .usec-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 1.6rem;
}
.lay-tropical .usec-list {
  display: grid;
  gap: 10px;
}
@media (min-width: 640px) {
  .lay-tropical .usec-list {
    column-gap: 12px;
  }
}
.lay-tropical .urow {
  align-items: center;
  padding: 12px;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tp-leaf) 14%, transparent);
}
.lay-tropical .urow-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.lay-tropical .uname {
  font-weight: 700;
}
.lay-tropical .uprice {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--tp-leaf);
  color: #fff;
}
.lay-tropical .uprice.ask {
  background: none;
  color: var(--ink-faint);
}
.lay-tropical .uvars b {
  color: var(--tp-leaf);
}

/* ================= layout: glass (vidro) =================
   Modern and soft: big blurred blobs of colour behind frosted-glass panels; the header and each
   section sit on their own panel. */
.lay-glass {
  --gs-a: var(--orange);
  --gs-b: var(--warm);
  --gs-c: var(--hi);
  --gs-pane: color-mix(in srgb, var(--surface) 58%, transparent);
  --page: var(--surface-2, var(--surface));
  background-image:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--gs-a) 75%, transparent), transparent 38%),
    radial-gradient(circle at 92% 22%, color-mix(in srgb, var(--gs-b) 90%, transparent), transparent 36%),
    radial-gradient(circle at 20% 58%, color-mix(in srgb, var(--gs-c) 65%, transparent), transparent 34%),
    radial-gradient(circle at 86% 82%, color-mix(in srgb, var(--gs-a) 60%, transparent), transparent 36%);
  background-attachment: fixed;
}
.lay-glass .u-head {
  padding: 58px 16px 8px;
}
.lay-glass .u-t,
.lay-glass .usec {
  background: var(--gs-pane);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
  border-radius: 26px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.lay-glass .u-t {
  justify-self: stretch;
  padding: 26px 20px;
}
.lay-glass .u-logo {
  width: 62px;
  height: 62px;
}
.lay-glass .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  letter-spacing: -0.03em;
}
.lay-glass .u-sub {
  color: var(--ink-soft);
}
.lay-glass .u-cover {
  margin-top: 12px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #fff 45%, transparent);
}
.lay-glass .snav {
  background: color-mix(in srgb, var(--surface) 50%, transparent);
}
.snav-glass .chip {
  border-color: color-mix(in srgb, #fff 50%, transparent);
  background: var(--gs-pane);
  color: var(--ink);
}
.snav-glass .chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--page);
}
.lay-glass .usec {
  margin: 18px 14px 0;
  padding: 20px 18px 8px;
}
.lay-glass .usec-name {
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}
.lay-glass .urow:last-child {
  border-bottom: 0;
}
.lay-glass .urow {
  border-bottom-color: color-mix(in srgb, var(--ink) 10%, transparent);
}
.lay-glass .urow-img {
  border-radius: 16px;
}
.lay-glass .uprice {
  color: var(--ink);
}

/* ================= layout: fiesta (festa) =================
   A street party: strings of cut-paper flags in the menu's colours, section names on coloured
   labels that change from section to section, prices coloured the same way. */
.lay-fiesta {
  --fs-1: var(--orange);
  --fs-2: var(--warm);
  --fs-3: var(--hi);
  --fs-4: color-mix(in srgb, var(--orange) 50%, var(--warm));
  --fs-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 46'%3E%3Cpath fill-rule='evenodd' d='M3 4H41V38L36 34 32 38 27 34 22 38 17 34 12 38 7 34 3 38Z M12 12h6v6h-6Z M26 12h6v6h-6Z M19 22h6v6h-6Z'/%3E%3C/svg%3E");
  --page: color-mix(in srgb, var(--warm) 10%, var(--surface));
}
.lay-fiesta .u-head {
  padding: 0 18px 12px;
}
.u-flags {
  position: relative;
  display: block;
  justify-self: stretch;
  height: 58px;
  margin: 0 -18px 40px;
  background: repeating-linear-gradient(90deg, var(--fs-1) 0 50px, var(--fs-2) 50px 100px, var(--fs-3) 100px 150px, var(--fs-4) 150px 200px);
  -webkit-mask: var(--fs-flag) 0 0 / 50px 58px repeat-x;
  mask: var(--fs-flag) 0 0 / 50px 58px repeat-x;
}
.lay-fiesta .u-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 3px;
  height: 2px;
  background: color-mix(in srgb, var(--ink) 50%, transparent);
}
.lay-fiesta .u-top {
  top: 70px;
}
.lay-fiesta .u-logo {
  width: 68px;
  height: 68px;
  box-shadow: 0 0 0 4px var(--fs-2);
}
.lay-fiesta .u-sub {
  color: var(--fs-1);
}
.lay-fiesta .u-name {
  font-family: "DM Serif Display", var(--serif);
  font-weight: 400;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
}
.lay-fiesta .u-cover {
  margin-top: 16px;
}
.lay-fiesta .u-cover img {
  border-radius: 14px;
  border: 5px solid var(--surface);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.snav-fiesta .chip {
  color: var(--ink);
  font-weight: 700;
}
.snav-fiesta .chip.is-active {
  background: var(--fs-1);
  border-color: var(--fs-1);
  color: var(--orange-ink);
}
.lay-fiesta .usec {
  --fs-c: var(--fs-1);
}
.lay-fiesta .usec:nth-of-type(4n + 2) {
  --fs-c: var(--fs-2);
}
.lay-fiesta .usec:nth-of-type(4n + 3) {
  --fs-c: var(--fs-3);
}
.lay-fiesta .usec:nth-of-type(4n) {
  --fs-c: var(--fs-4);
}
.lay-fiesta .usec-name {
  padding: 4px 16px;
  border-radius: 8px;
  background: var(--fs-c);
  color: #fff;
  font-family: "DM Serif Display", var(--serif);
  font-weight: 400;
  font-size: 1.55rem;
  transform: rotate(-2deg);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.lay-fiesta .urow {
  border-bottom: 2px dashed color-mix(in srgb, var(--fs-c) 35%, transparent);
}
.lay-fiesta .urow-img {
  border-radius: 50%;
  border: 3px solid var(--fs-c);
}
.lay-fiesta .uname {
  font-weight: 700;
}
.lay-fiesta .uprice {
  color: color-mix(in srgb, var(--fs-c) 75%, var(--ink));
  font-weight: 800;
}
.lay-fiesta .uvars b {
  color: color-mix(in srgb, var(--fs-c) 75%, var(--ink));
}

/* ================= layout: nordic (nórdico) =================
   Scandinavian calm: a strip of pale wood, lower-case letters, soft pastel cards with big rounded
   corners for each section and round photos. */
.lay-nordic {
  --nd-wood: repeating-linear-gradient(90deg, color-mix(in srgb, var(--warm) 55%, #fff) 0 3px, color-mix(in srgb, var(--warm) 70%, #fff) 3px 5px, color-mix(in srgb, var(--warm) 45%, #fff) 5px 11px, color-mix(in srgb, var(--warm) 62%, #fff) 11px 13px);
  --page: var(--surface);
}
.lay-nordic .u-head {
  justify-items: start;
  text-align: left;
  padding: 0 22px 10px;
}
.u-wood {
  display: block;
  justify-self: stretch;
  height: 14px;
  margin: 0 -22px 56px;
  background: var(--nd-wood);
  opacity: 0.9;
}
.lay-nordic .u-top {
  top: 26px;
}
.lay-nordic .u-t {
  justify-items: start;
  gap: 10px;
}
.lay-nordic .u-logo {
  width: 52px;
  height: 52px;
}
.lay-nordic .u-sub {
  color: var(--ink-faint);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.lay-nordic .u-name {
  font-family: "DM Sans", "Figtree", var(--sans);
  font-weight: 600;
  font-size: clamp(2.6rem, 12vw, 4rem);
  letter-spacing: -0.04em;
  text-transform: lowercase;
}
.lay-nordic .u-quote {
  color: var(--ink-soft);
}
.lay-nordic .u-cover {
  margin-top: 16px;
}
.lay-nordic .u-cover img {
  border-radius: 28px;
}
.snav-nordic .chip {
  border: 0;
  background: color-mix(in srgb, var(--warm) 18%, var(--surface));
  color: var(--ink);
  text-transform: lowercase;
}
.snav-nordic .chip.is-active {
  background: var(--ink);
  color: var(--page);
}
.lay-nordic .usec {
  --nd-tone: color-mix(in srgb, var(--warm) 16%, var(--surface));
  margin: 18px 14px 0;
  padding: 22px 20px 8px;
  border-radius: 30px;
  background: var(--nd-tone);
}
.lay-nordic .usec:nth-of-type(3n + 2) {
  --nd-tone: color-mix(in srgb, var(--orange) 9%, var(--surface));
}
.lay-nordic .usec:nth-of-type(3n) {
  --nd-tone: color-mix(in srgb, var(--hi) 12%, var(--surface));
}
.lay-nordic .usec-name {
  font-family: "DM Sans", "Figtree", var(--sans);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}
.lay-nordic .urow {
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}
.lay-nordic .urow:last-child {
  border-bottom: 0;
}
.lay-nordic .urow-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.lay-nordic .uname {
  font-weight: 600;
}
.lay-nordic .uprice {
  padding: 2px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 600;
}
.lay-nordic .uprice.ask {
  border: 0;
}
.lay-nordic .uvars b {
  color: var(--ink);
}

/* ================= layout: stitch (bordado) =================
   A hand-embroidered cloth: the top and each section on light linen with dashed running stitches,
   a row of cross-stitches above the name, photos stitched round and prices in coloured thread. */
.lay-stitch {
  --st-thread: var(--orange);
  --st-thread-2: color-mix(in srgb, var(--warm) 70%, var(--ink));
  --st-linen: color-mix(in srgb, var(--warm) 6%, var(--surface));
  --page: color-mix(in srgb, var(--warm) 14%, var(--surface));
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 1px, transparent 1px 4px),
    var(--page);
}
.lay-stitch .u-head {
  padding: 58px 14px 6px;
}
.lay-stitch .u-t,
.lay-stitch .usec {
  position: relative;
  background: var(--st-linen);
  border-radius: 14px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 8%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--ink) 50%, transparent);
}
.lay-stitch .u-t::after,
.lay-stitch .usec::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed var(--st-thread);
  border-radius: 9px;
  pointer-events: none;
}
.lay-stitch .usec:nth-of-type(even)::after {
  border-color: var(--st-thread-2);
}
.lay-stitch .u-t {
  justify-self: stretch;
  padding: 26px 22px 26px;
}
.lay-stitch .u-t::before {
  content: "";
  display: block;
  width: 110px;
  height: 12px;
  margin-bottom: 2px;
  background:
    linear-gradient(45deg, transparent 42%, var(--st-thread) 42% 58%, transparent 58%),
    linear-gradient(-45deg, transparent 42%, var(--st-thread) 42% 58%, transparent 58%);
  background-size: 12px 12px;
}
.lay-stitch .u-logo {
  width: 62px;
  height: 62px;
  box-shadow: 0 0 0 3px var(--st-linen), 0 0 0 5px var(--st-thread);
}
.lay-stitch .u-sub {
  color: var(--st-thread-2);
}
.lay-stitch .u-name {
  font-family: "Playfair Display", var(--serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 11vw, 3.8rem);
}
.lay-stitch .u-quote {
  font-family: "Caveat", var(--script, cursive);
  font-size: 1.3rem;
  color: var(--st-thread);
}
.lay-stitch .u-cover {
  margin: 14px 0 6px;
  padding: 8px;
  background: var(--st-linen);
  border-radius: 14px;
}
.lay-stitch .u-cover img {
  border-radius: 8px;
  outline: 2px dashed var(--st-thread-2);
  outline-offset: 4px;
}
.snav-stitch .chip {
  border: 2px dashed color-mix(in srgb, var(--st-thread) 55%, transparent);
  background: var(--st-linen);
  color: var(--ink);
}
.snav-stitch .chip.is-active {
  border-style: solid;
  border-color: var(--st-thread);
  background: var(--st-thread);
  color: var(--orange-ink);
}
.lay-stitch .usec {
  margin: 18px 12px 0;
  padding: 26px 22px 12px;
}
.lay-stitch .usec-title {
  justify-content: center;
  text-align: center;
}
.lay-stitch .usec-name {
  font-family: "Playfair Display", var(--serif);
  font-weight: 700;
}
.lay-stitch .usec-title::after {
  content: "";
  flex-basis: 100%;
  height: 8px;
  background:
    linear-gradient(45deg, transparent 40%, var(--st-thread) 40% 60%, transparent 60%) center / 8px 8px repeat-x,
    linear-gradient(-45deg, transparent 40%, var(--st-thread) 40% 60%, transparent 60%) center / 8px 8px repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent calc(50% - 28px), #000 calc(50% - 28px) calc(50% + 28px), transparent calc(50% + 28px));
  mask: linear-gradient(90deg, transparent calc(50% - 28px), #000 calc(50% - 28px) calc(50% + 28px), transparent calc(50% + 28px));
}
.lay-stitch .urow {
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 18%, transparent);
}
.lay-stitch .urow:last-child {
  border-bottom: 0;
}
.lay-stitch .urow-img {
  border-radius: 8px;
  outline: 2px dashed var(--st-thread);
  outline-offset: 3px;
  margin: 4px;
}
.lay-stitch .uprice {
  color: var(--st-thread);
}

/* ================= layout: fair (feira) =================
   A fairground: a striped tent roof with a scalloped edge, the subtitle and section names on folded
   ribbon banners, and stars. */
.lay-fair {
  --fr-red: var(--orange);
  --fr-cream: color-mix(in srgb, var(--warm) 25%, #fff);
  --page: color-mix(in srgb, var(--warm) 14%, var(--surface));
}
.lay-fair .u-head {
  padding: 0 18px 12px;
}
.u-tent {
  display: block;
  justify-self: stretch;
  height: 70px;
  margin: 0 -18px 40px;
  background: repeating-linear-gradient(90deg, var(--fr-red) 0 30px, var(--fr-cream) 30px 60px);
  -webkit-mask: radial-gradient(circle 15px at 15px 55px, #000 98%, transparent) 0 0 / 30px 70px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 55px no-repeat;
  mask: radial-gradient(circle 15px at 15px 55px, #000 98%, transparent) 0 0 / 30px 70px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 55px no-repeat;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18));
}
.lay-fair .u-top {
  top: 82px;
}
.lay-fair .u-t {
  padding-top: 12px;
}
.lay-fair .u-logo {
  width: 70px;
  height: 70px;
  border: 3px solid var(--fr-red);
}
.lay-fair .u-name {
  font-family: "Playfair Display", var(--serif);
  font-weight: 800;
  font-size: clamp(2.2rem, 10.5vw, 4rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.lay-fair .u-name::before,
.lay-fair .u-name::after {
  content: "★";
  margin: 0 0.25em;
  color: var(--fr-red);
  font-size: 0.4em;
  vertical-align: middle;
}
/* a ribbon banner with folded, notched ends */
.lay-fair .u-sub,
.lay-fair .usec-name {
  position: relative;
  padding: 6px 34px;
  background: var(--fr-red);
  color: var(--orange-ink);
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%, 14px 50%);
}
.lay-fair .u-sub {
  order: 3;
  letter-spacing: 0.26em;
}
.lay-fair .u-quote {
  order: 4;
  font-family: var(--serif);
  font-style: italic;
}
.lay-fair .u-cover {
  margin-top: 16px;
}
.lay-fair .u-cover img {
  border-radius: 999px 999px 16px 16px;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--fr-cream);
  box-shadow: 0 0 0 2px var(--fr-red);
}
.snav-fair .chip {
  color: var(--ink);
  font-weight: 700;
}
.snav-fair .chip.is-active {
  background: var(--fr-red);
  border-color: var(--fr-red);
  color: var(--orange-ink);
}
.lay-fair .usec-title {
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.lay-fair .usec-name {
  font-family: "Playfair Display", var(--serif);
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lay-fair .urow {
  border-bottom: 1.5px dotted color-mix(in srgb, var(--fr-red) 40%, transparent);
}
.lay-fair .urow-img {
  border-radius: 50%;
  border: 3px solid var(--fr-cream);
  box-shadow: 0 0 0 2px var(--fr-red);
}
.lay-fair .uname {
  font-weight: 700;
}
.lay-fair .uname::before {
  content: "★ ";
  color: var(--fr-red);
  font-size: 0.8em;
}
.lay-fair .uprice {
  font-family: "Playfair Display", var(--serif);
  font-weight: 800;
}

/* ================= layout: outline (traço) =================
   Drawn with one pen: no fills, only fine lines; the name in outlined letters, each dish in an outlined
   box and photos with a second outline set off to the side. */
.lay-outline {
  --ol-pen: var(--ink);
  --page: var(--surface);
}
.lay-outline .u-head {
  padding: 58px 16px 10px;
}
.lay-outline .u-t {
  justify-self: stretch;
  padding: 30px 18px 26px;
  border: 1.5px solid var(--ol-pen);
  border-radius: 22px;
  box-shadow: 7px 7px 0 -1.5px var(--page), 7px 7px 0 0 var(--ol-pen);
}
.lay-outline .u-logo {
  width: 58px;
  height: 58px;
  border: 1.5px solid var(--ol-pen);
}
.lay-outline .u-sub {
  color: var(--ink);
  font-weight: 600;
}
.lay-outline .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 10.5vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ol-pen);
}
.lay-outline .u-cover {
  margin: 16px 8px 8px 0;
}
.lay-outline .u-cover img {
  border-radius: 18px;
  border: 1.5px solid var(--ol-pen);
}
.lay-outline .u-cover::after {
  content: "";
  position: absolute;
  inset: 8px -8px -8px 8px;
  z-index: -1;
  border: 1.5px solid var(--orange);
  border-radius: 18px;
}
.snav-outline .chip {
  border: 1.5px solid var(--ol-pen);
  color: var(--ink);
}
.snav-outline .chip.is-active {
  background: transparent;
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: inset 0 0 0 1px var(--orange);
}
.lay-outline .usec-name {
  padding: 4px 16px;
  border: 1.5px solid var(--ol-pen);
  border-radius: 999px;
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.lay-outline .usec-list {
  display: grid;
  gap: 12px;
}
@media (min-width: 640px) {
  .lay-outline .usec-list {
    column-gap: 14px;
  }
}
.lay-outline .urow {
  padding: 14px;
  border: 1.5px solid var(--ol-pen);
  border-radius: 18px;
}
.lay-outline .urow-img {
  width: 66px;
  height: 66px;
  margin: 0 6px 6px 0;
  border-radius: 12px;
  border: 1.5px solid var(--ol-pen);
  box-shadow: 5px 5px 0 -1.5px var(--page), 5px 5px 0 0 var(--orange);
}
.lay-outline .uname {
  font-weight: 700;
}
.lay-outline .uprice {
  padding: 1px 9px;
  border: 1.5px solid var(--orange);
  border-radius: 999px;
}
.lay-outline .uprice.ask {
  border: 0;
}

/* ================= layout: candy (doce) =================
   Sweet shop: candy stripes with a scalloped edge, a page of pastel polka dots, rounded letters and
   prices on round pastel sweets. */
.lay-candy {
  --cd-a: color-mix(in srgb, var(--orange) 45%, #fff);
  --cd-b: color-mix(in srgb, var(--warm) 40%, #fff);
  --cd-c: color-mix(in srgb, var(--hi) 35%, #fff);
  --page: color-mix(in srgb, var(--cd-a) 8%, var(--surface));
  background-image:
    radial-gradient(color-mix(in srgb, var(--cd-a) 30%, transparent) 3px, transparent 3.5px),
    radial-gradient(color-mix(in srgb, var(--cd-c) 40%, transparent) 3px, transparent 3.5px);
  background-size: 44px 44px;
  background-position: 0 0, 22px 22px;
}
.lay-candy .u-head {
  padding: 0 0 12px;
  gap: 0;
}
.u-stripes {
  display: block;
  justify-self: stretch;
  height: 64px;
  margin-bottom: 30px;
  background: repeating-linear-gradient(-45deg, var(--cd-a) 0 16px, #fff 16px 26px, var(--cd-c) 26px 42px, #fff 42px 52px);
  -webkit-mask: radial-gradient(circle 12px at 12px 52px, #000 98%, transparent) 0 0 / 24px 64px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 52px no-repeat;
  mask: radial-gradient(circle 12px at 12px 52px, #000 98%, transparent) 0 0 / 24px 64px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 52px no-repeat;
}
.lay-candy .u-top {
  top: 74px;
}
.lay-candy .u-t {
  padding: 18px 20px 0;
}
.lay-candy .u-logo {
  width: 72px;
  height: 72px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 9px var(--cd-a);
}
.lay-candy .u-sub {
  color: color-mix(in srgb, var(--cd-a) 55%, var(--ink));
}
.lay-candy .u-name {
  font-family: "Nunito", "Fredoka", var(--sans);
  font-weight: 800;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
  color: var(--ink);
  text-shadow: 2px 2px 0 var(--cd-a);
}
.lay-candy .u-cover {
  margin: 18px 16px 4px;
  border-radius: 30px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--cd-a) 40%, transparent);
}
.snav-candy .chip {
  border: 1.5px solid var(--cd-a);
  background: var(--surface);
  color: var(--ink);
  font-family: "Nunito", var(--sans);
  font-weight: 700;
}
.snav-candy .chip.is-active {
  background: var(--cd-a);
  color: var(--brand);
}
.lay-candy .usec {
  --cd-t: var(--cd-a);
  margin: 22px 14px 0;
  padding: 26px 18px 10px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 4px 0 var(--cd-t);
}
.lay-candy .usec:nth-of-type(3n + 2) {
  --cd-t: var(--cd-c);
}
.lay-candy .usec:nth-of-type(3n) {
  --cd-t: var(--cd-b);
}
.lay-candy .usec-name {
  padding: 3px 16px;
  border-radius: 999px;
  background: var(--cd-t);
  color: var(--brand);
  font-family: "Nunito", var(--sans);
  font-weight: 800;
  font-size: 1.35rem;
}
.lay-candy .urow {
  align-items: center;
  border-bottom: 2px dotted color-mix(in srgb, var(--cd-t) 70%, transparent);
}
.lay-candy .urow:last-child {
  border-bottom: 0;
}
.lay-candy .urow-img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 4px solid var(--cd-t);
}
.lay-candy .uline {
  align-items: center;
}
.lay-candy .uname {
  font-family: "Nunito", var(--sans);
  font-weight: 700;
}
.lay-candy .uprice {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--cd-t);
  color: var(--brand);
  font-family: "Nunito", var(--sans);
  font-weight: 800;
  font-size: 0.84rem;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}
.lay-candy .uprice.ask {
  height: auto;
  background: none;
  box-shadow: none;
  color: var(--ink-faint);
}
.lay-candy .uvars b {
  color: var(--ink);
}

/* ================= layout: varsity (clube) =================
   A sports club jersey: collar stripes, the name in block capitals with an offset outline, numbered
   sections like shirt numbers and prices on stitched felt patches. */
.lay-varsity {
  --vs-a: var(--brand);
  --vs-b: var(--warm);
  --page: color-mix(in srgb, var(--warm) 8%, var(--surface));
  counter-reset: vs;
}
.lay-varsity .u-head {
  padding: 0 18px 12px;
}
.u-collar {
  display: block;
  justify-self: stretch;
  height: 32px;
  margin: 0 -18px 50px;
  background: linear-gradient(var(--vs-a) 0 10px, var(--vs-b) 10px 16px, var(--vs-a) 16px 22px, var(--vs-b) 22px 28px, transparent 28px);
}
.lay-varsity .u-top {
  top: 44px;
}
.lay-varsity .u-logo {
  width: 70px;
  height: 70px;
  border: 3px solid var(--vs-b);
  box-shadow: 0 0 0 4px var(--vs-a);
}
.lay-varsity .u-sub {
  color: var(--ink);
  font-weight: 800;
}
.lay-varsity .u-sub::before,
.lay-varsity .u-sub::after {
  content: " ★ ";
  color: var(--vs-b);
}
.lay-varsity .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: clamp(2.2rem, 10.5vw, 4rem);
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--vs-a);
  -webkit-text-stroke: 2px var(--vs-a);
  text-shadow: 2px 2px 0 var(--page), 3px 3px 0 var(--vs-b);
}
.lay-varsity .u-cover {
  margin-top: 16px;
  border: 3px solid var(--vs-a);
  box-shadow: 4px 4px 0 var(--vs-b);
}
.snav-varsity .chip {
  border: 1.5px solid var(--vs-a);
  border-radius: 6px;
  color: var(--ink);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
}
.snav-varsity .chip.is-active {
  background: var(--vs-a);
  color: var(--brand-ink);
}
.lay-varsity .usec {
  counter-increment: vs;
}
.lay-varsity .usec-title::before {
  content: counter(vs, decimal-leading-zero);
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 2.4rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--vs-b);
}
.lay-varsity .usec-name {
  font-family: "Figtree", var(--sans);
  font-weight: 800;
  font-size: 1.6rem;
  text-transform: uppercase;
  color: var(--vs-a);
}
.lay-varsity .urow {
  align-items: center;
  border-bottom: 2px solid color-mix(in srgb, var(--vs-a) 14%, transparent);
}
.lay-varsity .urow-img {
  border-radius: 6px;
  border: 2px solid var(--vs-a);
}
.lay-varsity .uline {
  align-items: center;
}
.lay-varsity .uname {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
/* the price on a felt patch with stitching */
.lay-varsity .uprice {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--vs-a);
  color: var(--brand-ink);
  font-weight: 800;
  outline: 1.5px dashed color-mix(in srgb, var(--brand-ink) 70%, transparent);
  outline-offset: -5px;
}
.lay-varsity .uprice.ask {
  background: none;
  outline: 0;
  color: var(--ink-faint);
}

/* ================= layout: swiss (suíço) =================
   A Swiss poster: the top is a solid block in the menu's colour with the name huge and flush left,
   sections numbered in big figures over a thick rule, square photos and no ornaments. */
.lay-swiss .u-head {
  justify-items: stretch;
  padding: 0;
  text-align: left;
}
.lay-swiss .u-t {
  justify-items: start;
  gap: 10px;
  padding: 92px 20px 30px;
  background: var(--orange);
  color: var(--orange-ink);
}
.lay-swiss .u-logo {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 0;
}
.lay-swiss .u-sub {
  color: inherit;
  opacity: 0.85;
  letter-spacing: 0.12em;
}
.lay-swiss .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-size: clamp(3rem, 16vw, 5.4rem);
  letter-spacing: -0.05em;
  line-height: 0.88;
}
.lay-swiss .u-quote {
  color: inherit;
  opacity: 0.85;
  font-weight: 500;
}
.lay-swiss .u-cover img {
  aspect-ratio: 3 / 2;
}
.snav-swiss .chip {
  border-radius: 0;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}
.snav-swiss .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.lay-swiss {
  counter-reset: sw;
}
.lay-swiss .usec {
  counter-increment: sw;
  margin: 26px 16px 0;
  padding: 10px 0 4px;
  border-top: 3px solid var(--ink);
}
.lay-swiss .usec-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.lay-swiss .usec-title::before {
  content: counter(sw, decimal-leading-zero);
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
}
.lay-swiss .usec-name {
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.03em;
}
.lay-swiss .urow {
  border-bottom: 1px solid var(--ink);
}
.lay-swiss .urow-img {
  border-radius: 0;
}
.lay-swiss .uname {
  font-weight: 700;
}
.lay-swiss .uprice,
.lay-swiss .uvars b {
  color: var(--ink);
  font-weight: 700;
}

/* ================= layout: sunburst (raios) =================
   A vintage poster sun: rays in the menu's colours fan out behind the top, the logo ringed twice,
   prices in round badges and round photos ringed in the warm colour. */
.lay-sunburst .u-head {
  padding-top: 62px;
}
.u-rays {
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 38%, color-mix(in srgb, var(--orange) 20%, transparent) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask: radial-gradient(circle at 50% 38%, #000 0 30%, transparent 72%);
  mask: radial-gradient(circle at 50% 38%, #000 0 30%, transparent 72%);
}
.lay-sunburst .u-logo {
  width: 74px;
  height: 74px;
  box-shadow: 0 0 0 4px var(--page), 0 0 0 7px var(--orange), 0 0 0 10px var(--page), 0 0 0 12px var(--warm);
  margin-bottom: 8px;
}
.lay-sunburst .u-sub {
  color: var(--orange);
}
.lay-sunburst .u-name {
  font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 4.2rem);
}
.lay-sunburst .u-cover {
  margin-top: 16px;
}
.lay-sunburst .u-cover img {
  border-radius: 22px;
  border: 4px solid var(--warm);
}
.snav-sunburst .chip {
  border-color: color-mix(in srgb, var(--orange) 40%, transparent);
}
.snav-sunburst .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.lay-sunburst .usec-title {
  justify-content: center;
  text-align: center;
}
.lay-sunburst .usec-title::before,
.lay-sunburst .usec-title::after {
  content: "";
  width: 22px;
  height: 22px;
  background: repeating-conic-gradient(var(--orange) 0 10deg, transparent 10deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 3px, #000 3.5px 11px, transparent 11.5px);
  mask: radial-gradient(circle, transparent 0 3px, #000 3.5px 11px, transparent 11.5px);
}
.lay-sunburst .usec-title small {
  order: 3;
  flex-basis: 100%;
}
.lay-sunburst .urow {
  align-items: center;
  border-bottom-style: dashed;
}
.lay-sunburst .urow-img {
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--warm);
  margin: 5px;
}
.lay-sunburst .uprice {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 52px;
  padding: 0 4px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--orange-ink);
  font-size: 0.8rem;
}
.lay-sunburst .uprice.ask {
  background: transparent;
  color: var(--ink-faint);
  height: auto;
}

/* ================= layout: tasting (degustação) =================
   A tasting menu: quiet centred type, each section a numbered course in a ring, the dishes hung on a
   thin line in the menu's colour with a dot for each, photos on the right. */
.lay-tasting .u-head {
  padding: 66px 26px 14px;
  gap: 10px;
}
.lay-tasting .u-logo {
  width: 54px;
  height: 54px;
}
.lay-tasting .u-sub {
  color: var(--ink-faint);
  letter-spacing: 0.3em;
  font-weight: 600;
}
.lay-tasting .u-name {
  font-weight: 400;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  letter-spacing: 0.02em;
}
.lay-tasting .u-quote {
  font-family: var(--serif);
  font-style: italic;
}
.lay-tasting .u-t::after {
  content: "";
  width: 1px;
  height: 34px;
  margin-top: 8px;
  background: var(--orange);
}
.lay-tasting .u-cover {
  margin-top: 14px;
}
.lay-tasting .u-cover img {
  border-radius: 4px;
}
.snav-tasting .chip {
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 0.95rem;
}
.snav-tasting .chip.is-active {
  background: transparent;
  color: var(--orange);
  box-shadow: inset 0 -2px 0 var(--orange);
  border-radius: 0;
}
.lay-tasting {
  counter-reset: ts;
}
.lay-tasting .usec {
  counter-increment: ts;
  padding: 34px 20px 6px;
}
.lay-tasting .usec-title {
  flex-direction: column;
  gap: 6px;
  text-align: center;
}
.lay-tasting .usec-title::before {
  content: counter(ts, upper-roman);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--orange);
  border-radius: 50%;
  color: var(--orange);
  font-family: var(--serif);
  font-size: 1rem;
}
.lay-tasting .usec-name {
  font-weight: 400;
  font-size: 1.6rem;
}
.lay-tasting .usec-list {
  margin-left: 6px;
  padding-left: 22px;
  border-left: 1px solid color-mix(in srgb, var(--orange) 60%, transparent);
}
.lay-tasting .urow {
  position: relative;
  border-bottom: 0;
}
.lay-tasting .urow::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 21px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--page);
  border: 2px solid var(--orange);
}
.lay-tasting .urow-img {
  border-radius: 50%;
  width: 64px;
  height: 64px;
}
.lay-tasting .uname {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.08rem;
}
.lay-tasting .udesc {
  font-family: var(--serif);
  font-style: italic;
}
.lay-tasting .uprice {
  color: var(--orange);
  font-weight: 600;
}
@media (min-width: 640px) {
  .lay-tasting .usec-list {
    display: block;
  }
}

/* ================= layout: book (livro) =================
   A cloth-bound book: the top is the cover in the menu's dark colour with a spine and a fine border
   in the warm colour, each section a page with a drop capital and its page number. */
.lay-book .u-head {
  padding: 58px 18px 10px;
}
.lay-book .u-t {
  justify-self: stretch;
  padding: 40px 26px 38px 38px;
  border-radius: 4px 14px 14px 4px;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: inset 14px 0 0 color-mix(in srgb, #000 22%, var(--brand)), inset 15px 0 0 color-mix(in srgb, #fff 12%, var(--brand)), 0 14px 30px -16px rgba(0, 0, 0, 0.55);
  outline: 1px solid var(--warm);
  outline-offset: -12px;
}
.lay-book .u-logo {
  width: 58px;
  height: 58px;
  box-shadow: 0 0 0 2px var(--warm);
}
.lay-book .u-sub {
  color: var(--warm);
}
.lay-book .u-name {
  color: var(--brand-ink);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
}
.lay-book .u-quote {
  color: var(--brand-ink-soft, var(--brand-ink));
  font-family: var(--serif);
  font-style: italic;
}
.lay-book .u-cover {
  margin: 16px 0 4px;
}
.lay-book .u-cover img {
  border-radius: 3px;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.55);
}
.snav-book .chip {
  font-family: var(--serif);
}
.snav-book .chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.lay-book {
  counter-reset: bk;
}
.lay-book .usec {
  counter-increment: bk;
  margin: 18px 12px 0;
  padding: 28px 22px 12px;
  background: var(--surface);
  border-radius: 2px;
  box-shadow: 2px 2px 0 var(--line), 4px 4px 0 var(--line), 0 10px 24px -18px rgba(0, 0, 0, 0.5);
}
.lay-book .usec::after {
  content: "— " counter(bk) " —";
  display: block;
  margin-top: 10px;
  text-align: center;
  font-family: var(--serif);
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.lay-book .usec-name {
  font-size: 1.8rem;
}
.lay-book .usec-name::first-letter {
  font-size: 2.6rem;
  line-height: 1;
  color: var(--orange);
}
.lay-book .usec-title small {
  flex-basis: 100%;
}
.lay-book .urow-img {
  border-radius: 2px;
}
.lay-book .uname {
  font-family: var(--serif);
  font-size: 1.08rem;
}
.lay-book .udesc {
  font-family: var(--serif);
  font-style: italic;
}
.lay-book .urow:last-child {
  border-bottom: 0;
}

/* ================= layout: diagonal =================
   Everything on the slant: the top is a tilted band in the menu's colour, section names on slanted
   tags in the dark colour, prices in slanted tabs and the tabs leaning too. */
.lay-diagonal .u-head {
  padding: 58px 0 10px;
}
.lay-diagonal .u-t {
  justify-self: stretch;
  margin: 18px 0 22px;
  padding: 34px 24px 34px;
  background: var(--orange);
  color: var(--orange-ink);
  transform: skewY(-5deg);
}
.lay-diagonal .u-t > * {
  transform: skewY(5deg);
}
.lay-diagonal .u-logo {
  box-shadow: 0 0 0 3px var(--orange-ink);
}
.lay-diagonal .u-sub,
.lay-diagonal .u-quote {
  color: inherit;
}
.lay-diagonal .u-name {
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(2.6rem, 13vw, 4.2rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.lay-diagonal .u-cover {
  margin: 0 18px;
}
.lay-diagonal .u-cover img {
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
}
.snav-diagonal .chip {
  border-radius: 0;
  transform: skewX(-12deg);
  font-weight: 700;
}
.snav-diagonal .chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.lay-diagonal .usec-name {
  display: inline-block;
  padding: 6px 22px 7px 16px;
  background: var(--brand);
  color: var(--brand-ink);
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  font-style: italic;
  font-size: 1.35rem;
  text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.lay-diagonal .urow-img {
  border-radius: 0;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.lay-diagonal .uname {
  font-weight: 700;
}
.lay-diagonal .uprice {
  padding: 3px 12px;
  background: var(--orange);
  color: var(--orange-ink);
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}
.lay-diagonal .uprice.ask {
  background: transparent;
  color: var(--ink-faint);
}

/* ================= layout: frame (moldura) =================
   A gallery wall: the top and the cover in wide frames of the menu's dark colour with a light mat,
   sections in slimmer frames with a small plaque for the name, photos in thin frames. */
.lay-frame .u-head {
  padding: 58px 16px 10px;
}
.lay-frame .u-t,
.lay-frame .u-cover {
  justify-self: stretch;
  border: 8px solid var(--brand);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--warm), inset 0 0 0 12px var(--surface), inset 0 0 0 13px var(--line-2), 0 12px 26px -14px rgba(0, 0, 0, 0.55);
}
.lay-frame .u-t {
  padding: 34px 26px;
}
.lay-frame .u-cover {
  margin-top: 16px;
  padding: 16px;
}
.lay-frame .u-cover img {
  box-shadow: 0 0 0 1px var(--line-2);
}
.lay-frame .u-sub {
  color: var(--orange);
}
.lay-frame .u-name {
  font-size: clamp(2.3rem, 10.5vw, 3.5rem);
}
.snav-frame .chip.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.lay-frame .usec {
  margin: 22px 14px 0;
  padding: 24px 18px 10px;
  border: 4px solid var(--brand-2);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--warm), 0 10px 22px -16px rgba(0, 0, 0, 0.5);
}
.lay-frame .usec-title {
  justify-content: center;
  text-align: center;
}
.lay-frame .usec-name {
  padding: 4px 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--warm) 55%, #fff), var(--warm));
  color: var(--brand);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.lay-frame .usec-title small {
  flex-basis: 100%;
  text-align: center;
}
.lay-frame .urow-img {
  border-radius: 0;
  padding: 3px;
  background: var(--surface);
  border: 3px solid var(--brand-2);
}
.lay-frame .urow:last-child {
  border-bottom: 0;
}

/* ================= layout: fold (dobra) =================
   Folded paper: the top and each section on a card with its top corner folded over in the menu's
   colours (a different one for each section), and section names on a folded tab. */
.lay-fold {
  --page: color-mix(in srgb, var(--warm) 22%, var(--surface-2));
}
.lay-fold .u-head {
  padding: 58px 16px 10px;
}
.lay-fold .u-t,
.lay-fold .usec {
  --fd: var(--orange);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.lay-fold .u-t::before,
.lay-fold .usec::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  background: linear-gradient(225deg, transparent 50%, var(--fd) 50%);
  border-bottom-left-radius: 6px;
  box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.18);
}
.lay-fold .u-t {
  justify-self: stretch;
  padding: 32px 24px;
}
.lay-fold .u-sub {
  color: var(--orange);
}
.lay-fold .u-cover {
  margin-top: 14px;
}
.lay-fold .u-cover img {
  border-radius: 6px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 34px, 100% 100%, 0 100%);
}
.snav-fold .chip {
  border-radius: 4px 12px 4px 4px;
}
.snav-fold .chip.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--orange-ink);
}
.lay-fold .usec {
  margin: 18px 14px 0;
  padding: 24px 20px 10px;
}
.lay-fold .usec:nth-of-type(3n + 2) {
  --fd: var(--warm);
}
.lay-fold .usec:nth-of-type(3n) {
  --fd: var(--brand-2);
}
.lay-fold .usec-name {
  position: relative;
  padding: 3px 14px 4px 12px;
  margin-left: -20px;
  background: color-mix(in srgb, var(--fd) 18%, var(--surface));
  border-left: 4px solid var(--fd);
}
.lay-fold .urow-img {
  border-radius: 6px;
}
.lay-fold .urow:last-child {
  border-bottom: 0;
}

/* ================= layout: aurora =================
   Northern lights: the top glows with soft bands of the menu's colours over its dark colour, and the
   menu sits on large rounded sheets with a gradient bar under each section name. */
.lay-aurora .u-head {
  padding: 62px 20px 26px;
  color: var(--brand-ink);
  background: var(--brand);
  border-radius: 0 0 30px 30px;
}
.u-aurora {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 15% 20%, color-mix(in srgb, var(--accent) 80%, transparent), transparent 70%),
    radial-gradient(55% 45% at 85% 30%, color-mix(in srgb, var(--warm) 70%, transparent), transparent 70%),
    radial-gradient(70% 50% at 50% 95%, color-mix(in srgb, var(--hi) 55%, transparent), transparent 70%);
  filter: blur(18px);
  opacity: 0.85;
}
.lay-aurora .u-logo {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-ink) 60%, transparent);
}
.lay-aurora .u-sub {
  color: var(--brand-ink);
  opacity: 0.85;
}
.lay-aurora .u-name {
  color: var(--brand-ink);
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 20px color-mix(in srgb, var(--brand) 60%, transparent);
}
.lay-aurora .u-quote {
  color: var(--brand-ink);
  opacity: 0.9;
}
.lay-aurora .u-cover {
  margin-top: 16px;
}
.lay-aurora .u-cover img {
  border-radius: 22px;
}
.snav-aurora .chip.is-active {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--brand)));
  border-color: transparent;
  color: #fff;
}
.lay-aurora .usec {
  margin: 18px 12px 0;
  padding: 24px 20px 10px;
  background: var(--surface);
  border-radius: 26px;
  box-shadow: var(--shadow);
}
.lay-aurora .usec-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.lay-aurora .usec-title::after {
  content: "";
  order: 2;
  width: 48px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--warm));
}
.lay-aurora .usec-title small {
  order: 3;
}
.lay-aurora .usec-name {
  font-family: "Figtree", var(--sans);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lay-aurora .urow-img {
  border-radius: 18px;
}
.lay-aurora .urow:last-child {
  border-bottom: 0;
}

/* ---------- dark mode: tinted pages stay dark ----------
   Many styles tint their page with a palette colour (usually --warm). That colour stays light in
   dark mode, so the same mix would give a pale brown page: there the tint is a few percent over the
   palette's dark page instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lay-pop {
    --page: color-mix(in srgb, var(--warm) 9%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-deco {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-market {
    --page: color-mix(in srgb, var(--mk-kraft) 8%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-garden {
    --page: color-mix(in srgb, var(--gd-leaf) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-postcard {
    --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-bento {
    --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-retro {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-zen {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-tide {
    --page: color-mix(in srgb, var(--td-sea) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-bistro {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-label {
    --page: color-mix(in srgb, var(--warm) 6%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-album {
    --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-ticket {
    --page: color-mix(in srgb, var(--warm) 6%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-paper {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-nouveau {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-diner {
    --page: color-mix(in srgb, var(--dn-mint) 4%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-tropical {
    --page: color-mix(in srgb, var(--tp-sun) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-fiesta {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-stitch {
    --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-fair {
    --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-candy {
    --page: color-mix(in srgb, var(--cd-a) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-varsity {
    --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-fold {
    --page: color-mix(in srgb, var(--warm) 6%, color-mix(in srgb, var(--brand) 75%, #000));
  }
  :root:not([data-theme="light"]) .lay-ticket {
    --tk-paper: color-mix(in srgb, var(--warm) 5%, var(--surface));
  }
  :root:not([data-theme="light"]) .lay-market {
    --mk-kraft: color-mix(in srgb, var(--warm) 35%, var(--brand));
  }
  :root:not([data-theme="light"]) .lay-marble {
    --page: color-mix(in srgb, var(--brand) 75%, #000);
  }
  :root:not([data-theme="light"]) .lay-glass {
    --page: color-mix(in srgb, var(--brand) 75%, #000);
    --gs-a: color-mix(in srgb, var(--orange) 50%, var(--brand));
    --gs-b: color-mix(in srgb, var(--warm) 35%, var(--brand));
    --gs-c: color-mix(in srgb, var(--hi) 40%, var(--brand));
  }
  :root:not([data-theme="light"]) .lay-album .u-cover,
  :root:not([data-theme="light"]) .lay-album .urow {
    background: var(--surface-2);
    color: var(--ink);
  }
  :root:not([data-theme="light"]) .lay-album .udesc,
  :root:not([data-theme="light"]) .lay-album .uvars,
  :root:not([data-theme="light"]) .lay-album .orig {
    color: var(--ink-soft);
  }
  /* Clube draws its name, section names and price patches in --brand, which is dark in both modes */
  :root:not([data-theme="light"]) .lay-varsity {
    --vs-a: var(--orange);
  }
  :root:not([data-theme="light"]) .lay-varsity .uprice {
    color: var(--orange-ink);
    outline-color: color-mix(in srgb, var(--orange-ink) 60%, transparent);
  }
}
:root[data-theme="dark"] .lay-pop {
  --page: color-mix(in srgb, var(--warm) 9%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-deco {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-market {
  --page: color-mix(in srgb, var(--mk-kraft) 8%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-garden {
  --page: color-mix(in srgb, var(--gd-leaf) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-postcard {
  --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-bento {
  --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-retro {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-zen {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-tide {
  --page: color-mix(in srgb, var(--td-sea) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-bistro {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-label {
  --page: color-mix(in srgb, var(--warm) 6%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-album {
  --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-ticket {
  --page: color-mix(in srgb, var(--warm) 6%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-paper {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-nouveau {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-diner {
  --page: color-mix(in srgb, var(--dn-mint) 4%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-tropical {
  --page: color-mix(in srgb, var(--tp-sun) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-fiesta {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-stitch {
  --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-fair {
  --page: color-mix(in srgb, var(--warm) 4%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-candy {
  --page: color-mix(in srgb, var(--cd-a) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-varsity {
  --page: color-mix(in srgb, var(--warm) 3%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-fold {
  --page: color-mix(in srgb, var(--warm) 6%, color-mix(in srgb, var(--brand) 75%, #000));
}
:root[data-theme="dark"] .lay-ticket {
  --tk-paper: color-mix(in srgb, var(--warm) 5%, var(--surface));
}
:root[data-theme="dark"] .lay-market {
  --mk-kraft: color-mix(in srgb, var(--warm) 35%, var(--brand));
}
:root[data-theme="dark"] .lay-marble {
  --page: color-mix(in srgb, var(--brand) 75%, #000);
}
:root[data-theme="dark"] .lay-glass {
  --page: color-mix(in srgb, var(--brand) 75%, #000);
  --gs-a: color-mix(in srgb, var(--orange) 50%, var(--brand));
  --gs-b: color-mix(in srgb, var(--warm) 35%, var(--brand));
  --gs-c: color-mix(in srgb, var(--hi) 40%, var(--brand));
}
:root[data-theme="dark"] .lay-album .u-cover,
:root[data-theme="dark"] .lay-album .urow {
  background: var(--surface-2);
  color: var(--ink);
}
:root[data-theme="dark"] .lay-album .udesc,
:root[data-theme="dark"] .lay-album .uvars,
:root[data-theme="dark"] .lay-album .orig {
  color: var(--ink-soft);
}
/* Clube draws its name, section names and price patches in --brand, which is dark in both modes */
:root[data-theme="dark"] .lay-varsity {
  --vs-a: var(--orange);
}
:root[data-theme="dark"] .lay-varsity .uprice {
  color: var(--orange-ink);
  outline-color: color-mix(in srgb, var(--orange-ink) 60%, transparent);
}

/* ---------- admin: style picker ---------- */
.layout-picks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.layout-pick {
  display: grid;
  gap: 8px;
  align-content: start;
  text-align: left;
  border: 1.5px solid var(--line-2);
  background: var(--surface);
  border-radius: 18px;
  padding: 12px;
  color: var(--ink);
}
.layout-pick[aria-pressed="true"] {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px var(--orange-soft);
}
.layout-pick svg {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 120/150;
  border-radius: 12px;
  background: var(--page);
  border: 1px solid var(--line);
}
.lp-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
}
.lp-desc {
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.lp-dark {
  fill: var(--brand);
}
.lp-ring {
  stroke: var(--page);
  stroke-width: 3;
}
.lp-acc {
  fill: var(--orange);
}
.lp-warm {
  fill: var(--caramel);
}
.lp-ink {
  fill: var(--ink);
}
.lp-soft {
  fill: var(--surface-2);
}
.lp-line {
  fill: var(--line-2);
}
.lp-brand-ink {
  fill: var(--brand-ink);
}
.lp-card {
  fill: var(--surface);
}
.lp-acc-soft {
  fill: var(--orange-soft);
}
.lp-brand-soft {
  fill: var(--brand-ink);
  opacity: 0.45;
}
.lp-chalk {
  fill: none;
  stroke: var(--brand-ink);
  stroke-width: 1;
  stroke-dasharray: 2.5 2;
  opacity: 0.6;
}
.lp-dots {
  stroke: var(--ink-faint);
  stroke-width: 1.2;
  stroke-dasharray: 1.5 2.5;
}

/* ---------- privacy / cookies notice ---------- */
.consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.consent-card {
  pointer-events: auto;
  width: 100%;
  max-width: 600px;
  background: var(--page);
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 16px;
  box-shadow: 0 12px 36px -12px rgba(0, 0, 0, 0.4);
  padding: 12px 12px 10px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 14px;
  align-items: center;
}
/* a short strip: text on the left, the button on the right, so it hides as little of the menu as possible */
.consent-title {
  grid-column: 1;
  font-size: 0.88rem;
  font-weight: 800;
}
.consent-card p {
  grid-column: 1;
  margin: 0;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.consent-details {
  display: none;
  grid-column: 1 / -1;
  grid-row: 4;
  margin: 4px 0 0;
  font-size: 0.8rem;
  gap: 2px 0;
}
.consent.is-open .consent-details {
  display: grid;
}
.consent-details dt {
  font-weight: 800;
  color: var(--ink);
  margin-top: 6px;
}
.consent-details dd {
  margin: 0;
  color: var(--ink-soft);
}
.consent-acts {
  grid-column: 2;
  grid-row: 1 / span 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.consent-acts.one {
  grid-template-columns: 1fr;
}
.consent-btn {
  min-height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--page);
  font-weight: 800;
  font-size: 0.86rem;
  padding: 8px 18px;
}
.consent-more {
  grid-column: 1;
  justify-self: start;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 2px 0;
}
button.staff-link {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
}
/* console: contact requests from the landing page */
.mgr-main > .hint {
  margin: 0 0 12px;
}
.lead-msg {
  margin: 6px 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.lead.is-handled {
  opacity: 0.7;
}
/* plans: features the company's plan doesn't include */
.plan-pill {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.plan-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.plan-lock svg {
  width: 14px;
  height: 14px;
}
.layout-pick.is-locked {
  cursor: not-allowed;
  border-style: dashed;
}
.layout-pick.is-locked svg {
  opacity: 0.45;
  filter: grayscale(1);
}
/* the live phone preview beside the styles (above them on phones, where the styles scroll sideways) */
.style-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.style-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}
.style-prev {
  --sp-s: 0.6;
  order: -1;
  display: grid;
  justify-items: center;
  gap: 10px;
}
.sp-phone {
  padding: 7px;
  border-radius: 32px;
  background: #17130f;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 18px 40px -18px rgba(0, 0, 0, 0.45);
}
.sp-screen {
  position: relative;
  width: calc(375px * var(--sp-s));
  height: calc(720px * var(--sp-s));
  border-radius: 25px;
  overflow: hidden;
  background: var(--page);
}
.sp-screen iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 720px;
  border: 0;
  transform: scale(var(--sp-s));
  transform-origin: 0 0;
}
.sp-cap {
  margin: 0;
  max-width: 330px;
  text-align: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.sp-cap b {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
}
@media (max-width: 899px) {
  .style-split .layout-picks {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 4px 4px 8px;
    margin: 0 -4px;
  }
  .style-split .layout-pick {
    flex: 0 0 120px;
    scroll-snap-align: start;
  }
  .style-split .lp-desc {
    display: none;
  }
  .style-split .lp-name {
    flex-wrap: wrap;
  }
  .style-prev {
    --sp-s: 0.56;
  }
}
@media (min-width: 900px) {
  .style-split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }
  .style-split .layout-picks {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
  .style-prev {
    --sp-s: 0.8;
    order: 0;
    position: sticky;
    top: 20px;
  }
  .sp-cap .sp-desc {
    display: none;
  }
}
.colors.is-locked,
.swatches.is-locked {
  opacity: 0.5;
}
.colors.is-locked label,
.swatches.is-locked button {
  cursor: not-allowed;
}
.mgr-cat.is-locked {
  display: grid;
  gap: 8px;
}
.plan-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plan-tag {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.plan-tag.plan-completo {
  background: var(--orange-soft);
  color: var(--orange);
}
.demo-tag {
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px dashed var(--line);
}
.plan-tag.plan-premium {
  background: var(--orange);
  color: var(--orange-ink);
}
.plan-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.88rem;
}
.plan-confirm span {
  flex: 1 1 260px;
}
.toggle[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.toggle svg {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
}
/* admin: "Combina com" in the dish form */
.pair-ed .toggle svg {
  margin-left: 6px;
  width: 11px;
  height: 11px;
  vertical-align: -1px;
}
.pair-ed .pair-pick {
  flex: 1 1 100%;
  max-width: 360px;
  margin: 0;
}
.pair-ed .hint {
  flex-basis: 100%;
  margin: 2px 0 0;
}

/* admin: labels tab */
.tag-sec {
  margin: 22px 0 10px;
  font-size: 0.95rem;
}
.tag-pick {
  padding: 4px 6px;
}
.tag-pick .tag,
.tag-row .tag,
.mgr-cat-top h3 .tag {
  margin-left: 0;
}
.tag-bi + .tag-bi {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-2);
}
.tag-icons {
  margin-top: 8px;
}
.tag-own {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.tag-own input[type="color"] {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* ---------- admin: guided tour (assets/tour.js) ---------- */
/* Ajuda, language, "Ver menu" and "Sair": kept together at the end of the tab row */
.mgr-tools {
  margin-left: auto;
  display: flex;
  gap: 2px;
}
.mgr-help {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mgr-help-q {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.72rem;
  line-height: 1;
}
.tour-offer {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
}
.tour-offer > span:first-child {
  flex: 1 1 220px;
}
.tour-offer-acts {
  display: flex;
  gap: 8px;
}
.tour {
  position: fixed;
  inset: 0;
  z-index: 60;
}
.tour.is-center {
  background: rgba(20, 10, 4, 0.55);
}
.tour-hole {
  position: fixed;
  border-radius: 10px;
  box-shadow:
    0 0 0 3px var(--hi),
    0 0 0 9999px rgba(20, 10, 4, 0.55);
  pointer-events: none;
  transition:
    left 0.25s ease,
    top 0.25s ease,
    width 0.25s ease,
    height 0.25s ease;
}
.tour-card {
  position: fixed;
  width: min(340px, calc(100vw - 32px));
  background: var(--surface);
  color: var(--ink);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px 14px;
  transition:
    left 0.25s ease,
    top 0.25s ease;
}
.tour-count {
  margin: 0 0 4px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-faint);
}
.tour-title {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: var(--display-weight);
  font-size: 1.2rem;
}
.tour-body {
  margin: 0 0 14px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
.tour-acts {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.tour-skip {
  margin-right: auto;
  border: 0;
  background: none;
  padding: 6px 0;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .tour-hole,
  .tour-card {
    transition: none;
  }
}

/* ---------- first steps and import the menu (admin) ---------- */
.mgr-head-acts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mgr-empty-acts {
  justify-content: center;
  margin-top: 12px;
}
.start-card {
  padding: 14px 16px;
}
.start-top {
  display: flex;
  align-items: center;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.start-top h3 {
  margin: 0;
  font-size: 1rem;
}
.start-top .spacer {
  flex: 1;
}
.start-steps {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.start-steps li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  font-size: 0.9rem;
}
.start-steps li > span:nth-child(2) {
  flex: 1;
}
.start-steps li.is-done > span:nth-child(2) {
  color: var(--ink-faint);
  text-decoration: line-through;
}
.start-mark {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--field-line);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
}
.is-done .start-mark {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}
.imp-grid {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}
.imp-grid .fld {
  margin: 0;
}
@media (min-width: 800px) {
  .imp-grid {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    align-items: start;
  }
  .imp-grid .imp-ex {
    order: 2;
  }
}
.imp-ex {
  padding: 10px 14px;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  background: var(--surface-2);
}
.imp-ex-title {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.imp-ex pre {
  margin: 0;
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
}
.imp-card textarea {
  min-height: 180px;
  font-family: inherit;
}
.imp-list {
  margin: 6px 0 0;
  padding-left: 18px;
  font-size: 0.86rem;
  display: grid;
  gap: 4px;
}
.imp-list span {
  color: var(--ink-faint);
}

/* light/dark switch (Mode in core.js): icon in the admin/console tab row and next to the menu's language switch */
.mgr-mode {
  display: inline-flex;
  align-items: center;
}
.mgr-mode:hover {
  color: var(--brand-ink);
}
.seg-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.seg-solo .seg-mode {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
}
.seg-solo .seg-mode svg {
  width: 15px;
  height: 15px;
}

/* ---------- Premium extras in the admin: specials star, category hours, change requests ---------- */
.star-btn {
  flex: none;
  border-color: transparent;
  background: transparent;
  color: var(--ink-faint);
}
.star-btn[aria-pressed="true"] {
  color: var(--orange);
}
.eye-btn[aria-pressed="true"] {
  color: var(--warn);
}
.star-btn svg {
  width: 18px;
  height: 18px;
}
.tag-time {
  background: var(--surface-2);
  color: var(--ink-soft);
}
.sched {
  display: grid;
  gap: 8px;
}
.sched-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sched-row .fld {
  display: grid;
  gap: 4px;
  flex: 0 1 150px;
}
.sched-row .fld > span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.sched-days .toggle {
  min-width: 48px;
}
.edits-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.edits-note > span {
  flex: 1 1 240px;
}
/* admin > Contacto: the message box and the messages already sent */
.contact-card textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
}
.contact-card h4 {
  margin: 14px 0 0;
}
.contact-card .mgr-actions .hint {
  margin: 0;
}
/* the chat of a conversation (admin > Contacto and console > Mensagens): mine on the right, theirs on the left */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.chat-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
}
.chat-head h3 {
  margin: 0;
}
.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 12px;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: min(85%, 560px);
}
.chat-msg.is-me {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-msg.is-them {
  align-self: flex-start;
  align-items: flex-start;
}
.chat-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 0.94rem;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.is-me .chat-bubble {
  background: var(--hi);
  color: var(--hi-ink);
  border-bottom-right-radius: 5px;
}
.chat-msg.is-them .chat-bubble {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.chat-meta {
  margin-top: 3px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}
.chat-reply {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.chat-reply textarea {
  flex: 1;
  min-height: 44px;
  resize: vertical;
}
.msg-item .btn-quiet {
  margin-top: 6px;
  padding-left: 0;
}
.msg-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.msg-item {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.msg-item:first-child {
  border-top: 0;
  padding-top: 4px;
}
.msg-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.msg-top time {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.msg-body {
  margin: 6px 0 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sup-form input[type="date"] {
  flex: 0 1 160px;
}
.sup-form {
  margin-bottom: 8px;
}

/* ---------- admin: professional look ----------
   Neutral chrome (the menu's own colours stay on the buttons and accents), a left sidebar on computers,
   a slim top bar with sideways tabs on phones, a summary card on Items and calmer cards. */
body.is-admin {
  --admin-bg: color-mix(in srgb, var(--bg) 25%, #f3f3f1);
  background: var(--admin-bg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.is-admin {
    --admin-bg: color-mix(in srgb, var(--bg) 60%, #0d0d0d);
  }
}
:root[data-theme="dark"] body.is-admin {
  --admin-bg: color-mix(in srgb, var(--bg) 60%, #0d0d0d);
}
#admin .ico,
#console .ico {
  flex: none;
  display: block;
}
/* bar: logo, name and status; Pré-visualizar and Publicar */
.is-admin .mgr-bar {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.is-admin .mgr-bar-in {
  padding: 12px 16px 8px;
  gap: 10px;
}
.is-admin .mgr-title {
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.mgr-ava {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}
.mgr-ava img,
.mgr-ov-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.is-admin .mgr-title-t {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.is-admin .mgr-title-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.is-admin .mgr-status {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.is-admin .mgr-status.dirty {
  color: var(--orange);
}
.is-admin .mgr-status::before,
.live-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f9e55;
}
.is-admin .mgr-status::before {
  display: inline-block;
  margin-right: 6px;
  vertical-align: 1px;
}
.is-admin .mgr-status.dirty::before {
  background: var(--orange);
}
.is-admin .role-pill {
  border-color: var(--line-2);
  color: var(--ink-soft);
}
.mgr-acts {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.is-admin .mgr-bar .btn-quiet {
  background: var(--surface);
  border-color: var(--line-2);
  color: var(--ink);
}
.is-admin .mgr-bar .btn-quiet:hover {
  background: var(--surface-2);
}
/* tabs: icon and label, the open one on a soft accent */
.is-admin .mgr-tabs {
  gap: 2px;
  padding: 0 12px 8px;
}
.is-admin .mgr-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 8px;
  border-bottom: 0;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.86rem;
  transition:
    background 0.12s,
    color 0.12s;
}
.is-admin .mgr-tab .ico {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}
.is-admin .mgr-tab:hover {
  color: var(--ink);
  background: var(--surface-2);
}
.is-admin .mgr-tab[aria-selected="true"] {
  color: var(--ink);
  font-weight: 700;
  background: color-mix(in srgb, var(--orange) 11%, transparent);
}
.is-admin .mgr-tab[aria-selected="true"] .ico {
  color: var(--orange);
  opacity: 1;
}
/* phones: with changes to publish (Descartar, Pré-visualizar, Publicar) or the "discard?" question,
   the buttons get a row of their own under the name instead of squeezing it */
@media (max-width: 640px) {
  .is-admin .mgr-bar-in:has(> .mgr-acts > :nth-child(3)) .mgr-acts {
    flex: 1 1 100%;
    margin-left: 0;
    flex-wrap: nowrap;
  }
  .is-admin .mgr-bar-in:has(> .mgr-acts > :nth-child(3)) .mgr-acts > .btn {
    flex: 1 1 auto;
  }
  .is-admin .mgr-acts > .confirm {
    flex: 1 1 auto;
    min-width: 0;
  }
}
/* computers: the bar becomes a sidebar on the left */
@media (min-width: 1000px) {
  #admin:has(> .mgr-bar),
  #console:has(> .mgr-bar) {
    padding-left: 248px;
  }
  .is-admin .mgr-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 248px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--line);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .is-admin .mgr-bar-in {
    max-width: none;
    margin: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
    padding: 18px 14px 16px;
    border-bottom: 1px solid var(--line);
  }
  .is-admin .mgr-title {
    flex: none;
  }
  .mgr-acts {
    margin: 0;
  }
  .mgr-acts > * {
    flex: 1 1 0;
  }
  .mgr-acts > .btn-primary,
  .mgr-acts > .confirm {
    flex-basis: 100%;
  }
  .is-admin .mgr-tabs {
    flex: 1;
    max-width: none;
    margin: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: visible;
    gap: 2px;
    padding: 12px 10px;
  }
  .is-admin .mgr-tabs > .mgr-tab {
    width: 100%;
    padding: 9px 12px;
  }
  .is-admin .mgr-tools {
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
  }
  .is-admin .mgr-tools .mgr-tab {
    padding: 7px 10px;
  }
}
/* page titles with their tab's icon */
.is-admin .mgr-head h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.mgr-h-ico {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--orange);
}
.mgr-h-ico .ico {
  width: 19px;
  height: 19px;
}
/* cards, notes and rows: calm surfaces, thin borders, one accent */
:is(#admin, #console) .card {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 16, 12, 0.05);
}
:is(#admin, #console) .mgr-cat {
  padding: 20px;
  gap: 14px;
}
:is(#admin, #console) .mgr-cat > h3:first-child,
:is(#admin, #console) .mgr-cat > .mgr-cat-top:first-child {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
:is(#admin, #console) .mgr-cat h3,
:is(#admin, #console) .start-top h3 {
  font-weight: 700;
  letter-spacing: -0.01em;
}
:is(#admin, #console) .mgr-note {
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  color: var(--ink);
}
:is(#admin, #console) .mgr-note.warn {
  background: var(--warn-bg);
  border-left-color: var(--warn);
  color: var(--warn);
}
:is(#admin, #console) .mgr-row {
  border-radius: 14px;
  transition: background 0.12s;
}
:is(#admin, #console) .mgr-item:not(.is-open) .mgr-row:hover {
  background: var(--surface-2);
}
:is(#admin, #console) .mgr-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
}
:is(#admin, #console) .btn {
  border-radius: 10px;
}
:is(#admin, #console) .btn-sm {
  border-radius: 8px;
}
@media (min-width: 720px) {
  .mgr-main {
    padding-top: 24px;
    gap: 16px;
  }
}
/* the summary card on the Items tab */
.mgr-ov {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 20px;
  padding: 20px;
  align-items: start;
}
.mgr-ov-logo {
  width: 96px;
  height: 96px;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1;
}
.mgr-ov-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}
.mgr-ov-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mgr-ov-top h2 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #2f9e55 12%, transparent);
  color: #2a8a4b;
  font-size: 0.76rem;
  font-weight: 700;
}
:root[data-theme="dark"] .live-pill {
  color: #7fd39b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .live-pill {
    color: #7fd39b;
  }
}
.mgr-ov-sub {
  margin: -6px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.mgr-ov-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mgr-ov-tile {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--admin-bg);
  min-width: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.mgr-ov-tile .ico {
  color: var(--ink-faint);
  margin-top: 2px;
}
.mgr-ov-tile > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1;
  min-width: 0;
}
.mgr-ov-tile small {
  font-size: 0.72rem;
  color: var(--ink-faint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mgr-ov-tile b,
.mgr-ov-tile a {
  color: var(--ink);
  font-weight: 700;
}
.mgr-ov-tile a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
}
.mgr-ov-side {
  display: grid;
  gap: 8px;
  width: 164px;
}
.mgr-ov-code {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  display: block;
}
.mgr-ov-code canvas {
  display: block;
  width: 100%;
  height: auto;
}
.mgr-ov-side .btn .ico {
  width: 16px;
  height: 16px;
}
@media (max-width: 1240px) and (min-width: 1000px), (max-width: 860px) {
  .mgr-ov {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .mgr-ov-side {
    grid-column: 1 / -1;
    width: auto;
    grid-template-columns: 1fr 1fr;
  }
  .mgr-ov-code {
    display: none;
  }
}
@media (max-width: 560px) {
  .mgr-ov {
    gap: 14px;
    padding: 16px;
  }
  .mgr-ov-logo {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    font-size: 1.4rem;
  }
  .mgr-ov-top h2 {
    font-size: 1.15rem;
  }
  .mgr-ov-main {
    display: contents;
  }
  .mgr-ov-top {
    align-self: center;
  }
  .mgr-ov-sub,
  .mgr-ov-tiles {
    grid-column: 1 / -1;
  }
  .mgr-ov-sub {
    margin: -4px 0 0;
  }
  .mgr-ov-tiles {
    gap: 8px;
  }
  .mgr-ov-tile {
    padding: 9px 10px;
    gap: 8px;
    font-size: 0.82rem;
  }
  .mgr-ov-tile .ico {
    width: 16px;
    height: 16px;
  }
  /* phones: the address gets a whole row, so it shows in full (or ends in … when very long); the style too, so long names fit */
  .mgr-ov-tile:first-child,
  .mgr-ov-tile:last-child {
    grid-column: 1 / -1;
  }
  .mgr-ava {
    width: 34px;
    height: 34px;
  }
  .mgr-h-ico {
    width: 32px;
    height: 32px;
  }
  :is(#admin, #console) .mgr-cat {
    padding: 16px;
  }
}
/* the Dashboard tab: shortcuts, last week's visits and recently edited dishes */
.home-quick-card .hint {
  margin: -6px 0 0;
}
.home-quick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.home-q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--admin-bg, var(--surface-2));
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.home-q .ico {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hi) 14%, transparent);
  color: var(--hi);
}
.home-q span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-q:hover {
  border-color: var(--line-2);
}
.home-q:active {
  transform: scale(0.98);
}
.home-q:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}
.home-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 900px) {
  .home-grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }
}
.home-visits-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.home-nums {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.home-num {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--admin-bg, var(--surface-2));
  min-width: 0;
}
.home-num span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-num b {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
@media (max-width: 560px) {
  .home-nums {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.home-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}
.home-day {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
}
.home-day-n {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.home-day-bar {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 44px;
  height: 96px;
}
.home-day-bar i {
  display: block;
  width: 100%;
  border-radius: 6px 6px 3px 3px;
  background: var(--hi);
  opacity: 0.55;
}
.home-day:last-child .home-day-bar i {
  opacity: 1;
}
.home-day small {
  font-size: 0.72rem;
  color: var(--ink-faint);
  text-transform: capitalize;
}
.home-rows {
  display: grid;
  gap: 6px;
}
.home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--admin-bg, var(--surface-2));
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.home-row:hover {
  border-color: var(--line-2);
}
.home-row:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}
.home-row-t {
  flex: 1;
  display: grid;
  min-width: 0;
}
.home-row-t b,
.home-row-t small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-row-t b {
  font-size: 0.92rem;
}
.home-row-t small {
  font-size: 0.78rem;
  color: var(--ink-faint);
}
/* a dish opened from the Dashboard scrolls to its top, clear of the sticky bar */
.mgr-item {
  scroll-margin-top: 150px;
}
@media (min-width: 1000px) {
  .mgr-item {
    scroll-margin-top: 24px;
  }
}
/* "Adicionar prato" on the Dashboard: which category the dish goes in */
.home-pick {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.home-pick h4 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.home-pick .hint {
  margin: 0 0 10px;
}
.home-pick .home-q {
  justify-content: space-between;
}
.home-pick .home-q small {
  flex: none;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.75rem;
  text-align: center;
}
.home-pick .home-q.is-last {
  border-color: var(--hi);
}
.home-pick .mgr-actions {
  margin-top: 10px;
}
/* the dish's category, first in its form */
.fld-cat select {
  max-width: 360px;
}
/* "+ Adicionar prato em …" at the end of a category's list */
.mgr-add-end {
  min-height: 52px;
  padding: 12px 16px;
  border: 1.5px dashed var(--line-2, var(--field-line));
  border-radius: 16px;
  background: transparent;
  color: var(--hi, var(--ink));
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.mgr-add-end:hover {
  border-color: var(--hi, var(--ink));
}
.mgr-add-end:focus-visible {
  outline: 2px solid var(--hi);
  outline-offset: 2px;
}
/* Itens: "Mudar preços" (a button under the search box that opens a panel) */
.bulk-open {
  margin-top: -6px;
}
.bulk {
  display: grid;
  gap: 12px;
  padding: 18px 20px;
}
.bulk-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bulk-h h3 {
  margin: 0;
}
.bulk-f {
  display: grid;
  gap: 12px;
}
@media (min-width: 700px) {
  .bulk-f {
    grid-template-columns: 1.3fr 1fr 1fr;
    align-items: end;
  }
}
.bulk-prev {
  display: grid;
  gap: 8px;
  justify-items: start;
}
.bulk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  gap: 4px;
  font-size: 0.92rem;
}
.bulk-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.bulk-list b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Itens: the search box above the list, and the category names over its results */
.item-q {
  position: relative;
  display: flex;
  align-items: center;
}
.item-q > svg {
  position: absolute;
  left: 16px;
  color: var(--ink-faint);
  pointer-events: none;
}
.item-q input {
  width: 100%;
  min-height: 50px;
  padding: 12px 48px 12px 44px;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  -webkit-appearance: none;
  appearance: none;
}
.item-q input::-webkit-search-cancel-button {
  display: none;
}
.item-q .icon-btn {
  position: absolute;
  right: 6px;
}
.item-q-cat {
  margin: 6px 0 -6px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Itens: the categories. Phones: one dropdown above the list; computers: a list down the left */
.items-layout {
  display: grid;
  gap: 14px;
}
.items-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}
.cat-rail {
  display: none;
}
.cat-pick {
  display: grid;
  gap: 6px;
}
.cat-pick label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.cat-pick select {
  width: 100%;
  min-height: 54px;
  padding: 12px 44px 12px 16px;
  border: 1.5px solid var(--field-line);
  border-radius: 14px;
  background: var(--field)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  color: var(--ink);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  appearance: none;
  -webkit-appearance: none;
}
/* on phones the dropdown already names the category; the add button takes the whole row */
.items-main > .mgr-head h2 {
  display: none;
}
.items-main > .mgr-head .btn {
  flex: 1;
}
@media (min-width: 1000px) {
  .items-layout {
    grid-template-columns: 230px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
  }
  .cat-rail {
    position: sticky;
    top: 16px;
    display: grid;
    gap: 2px;
    padding: 12px;
  }
  .cat-rail h3 {
    margin: 2px 8px 8px;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
  }
  .cat-rail-btn,
  .cat-rail-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 42px;
    padding: 8px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .cat-rail-btn span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .cat-rail-btn small {
    flex: none;
    min-width: 24px;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 0.75rem;
    text-align: center;
  }
  .cat-rail-btn:hover {
    background: var(--line);
  }
  .cat-rail-btn.is-active {
    background: color-mix(in srgb, var(--hi) 14%, transparent);
    color: var(--hi);
    font-weight: 800;
  }
  .cat-rail-btn.is-hidden span {
    opacity: 0.55;
    text-decoration: line-through;
  }
  .cat-rail-add {
    margin-top: 6px;
    border-top: 1px solid var(--line);
    border-radius: 0 0 10px 10px;
    color: var(--ink-soft);
  }
  .cat-rail-add:hover {
    color: var(--ink);
  }
  .cat-rail button:focus-visible {
    outline: 2px solid var(--hi);
    outline-offset: 1px;
  }
  .cat-pick {
    display: none;
  }
  .items-main > .mgr-head h2 {
    display: block;
  }
  .items-main > .mgr-head .btn {
    flex: none;
  }
}

/* ---------- console: the landing's neutral colours (white/near-black, the brand orange on buttons) ---------- */
:root.is-console {
  --page: #ffffff;
  --bg: #f6f6f4;
  --surface: #ffffff;
  --surface-2: #f7f7f5;
  --ink: #17171a;
  --ink-soft: #53535c;
  --ink-faint: #85858e;
  --line: rgba(17, 17, 20, 0.09);
  --line-2: rgba(17, 17, 20, 0.16);
  --field: #ffffff;
  --field-line: rgba(17, 17, 20, 0.18);
  --orange-soft: #fbece2;
  --shadow: 0 1px 2px rgba(17, 17, 20, 0.05), 0 12px 32px -16px rgba(17, 17, 20, 0.22);
  --brand: #17171a;
  --brand-ink: #ffffff;
  --hi: #f08a4b;
  --hi-ink: #1a0f08;
}
@media (prefers-color-scheme: dark) {
  :root.is-console:not([data-theme="light"]) {
    --page: #0f0f11;
    --bg: #0b0b0c;
    --surface: #18181b;
    --surface-2: #131316;
    --ink: #f4f4f5;
    --ink-soft: #b4b4bc;
    --ink-faint: #82828c;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --field: #111113;
    --field-line: rgba(255, 255, 255, 0.16);
    --orange-soft: #32211a;
    --orange-ink: #1a0f08;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 36px -18px rgba(0, 0, 0, 0.8);
    --brand: #26262b;
  }
}
:root.is-console[data-theme="dark"] {
  --page: #0f0f11;
  --bg: #0b0b0c;
  --surface: #18181b;
  --surface-2: #131316;
  --ink: #f4f4f5;
  --ink-soft: #b4b4bc;
  --ink-faint: #82828c;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.16);
  --field: #111113;
  --field-line: rgba(255, 255, 255, 0.16);
  --orange-soft: #32211a;
  --orange-ink: #1a0f08;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 36px -18px rgba(0, 0, 0, 0.8);
  --brand: #26262b;
}
.is-console body.is-admin {
  --admin-bg: var(--bg);
}
/* the signed-in email under "Consola", like the status line under a menu's name in gestão */
.mgr-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  overflow: hidden;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.mgr-sub svg {
  flex: none;
  width: 12px;
  height: 12px;
}
.is-console .mgr-ava img {
  padding: 4px;
  object-fit: contain;
}

/* ---------- status badges (conversations, contact requests): a dot and a word, coloured by state ---------- */
.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: 0.1em;
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid transparent;
}
.st::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.st-wait {
  background: #fff3df;
  color: #a35a00;
  border-color: #f3dcb6;
}
.st-ok {
  background: #e6f4ea;
  color: #1e7a3c;
  border-color: #c6e6cf;
}
.st-err {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 22%, transparent);
}
.st-off {
  background: var(--surface-2);
  color: var(--ink-faint);
  border-color: var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .st-wait {
    background: #33240f;
    color: #f2b660;
    border-color: #4a3416;
  }
  :root:not([data-theme="light"]) .st-ok {
    background: #13291a;
    color: #6fd08e;
    border-color: #1d3d27;
  }
}
:root[data-theme="dark"] .st-wait {
  background: #33240f;
  color: #f2b660;
  border-color: #4a3416;
}
:root[data-theme="dark"] .st-ok {
  background: #13291a;
  color: #6fd08e;
  border-color: #1d3d27;
}

/* a conversation as a row that opens and closes (chevron on the right), instead of a separate Ver/Esconder button */
.conv-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.conv-toggle > .conv-main {
  flex: 1;
  min-width: 0;
}
.conv-chev {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.15s;
}
.conv-toggle:hover .conv-chev {
  background: var(--surface-2);
}
.conv-toggle[aria-expanded="true"] .conv-chev {
  transform: rotate(180deg);
}
.conv-preview {
  display: block;
  margin-top: 4px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co.conv {
  padding: 14px 16px;
}
.conv .co-name,
.conv .co-meta {
  display: block;
}
.conv .co-meta {
  margin-top: 2px;
}
.conv .chat {
  margin-top: 14px;
}
.co-name .st,
.msg-top .st {
  margin-left: 4px;
}
.conv-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* the partners' page (/parceiro): what they earned, received and are owed */
.pt-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.pt-stat {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pt-stat span {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pt-stat strong {
  font-size: clamp(1rem, 4.2vw, 1.35rem);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 520px) {
  .pt-stats {
    gap: 6px;
  }
  .pt-stat {
    padding: 10px;
    border-radius: 12px;
  }
  .pt-stat span {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
  }
}
.pt-stat.is-main {
  background: var(--orange-soft, var(--surface-2));
}
/* the partners' sales guide */
.guide p {
  margin: 0 0 8px;
  line-height: 1.55;
}
.guide-list {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 6px;
  line-height: 1.5;
}
.guide a {
  color: var(--accent);
}
.guide,
.guide .co-sec {
  min-width: 0;
}
.guide-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: 8px;
}
@media (max-width: 520px) {
  .guide-table th,
  .guide-table td {
    padding: 6px 5px;
    font-size: 0.86rem;
  }
}
.guide-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.guide-table th,
.guide-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.guide-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.guide-sub {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.guide-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.guide-plan {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.guide-plan h5 {
  margin: 0 0 4px;
  font-size: 1rem;
}
.guide-qa {
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.guide-qa summary {
  cursor: pointer;
  font-weight: 700;
}
.guide-qa p {
  margin: 6px 0 2px;
}