/* 2.0 template family: TEA, COFFEE & BAKERY ('bakery'), drawn by public/tpl/bakery.js on the shared kit.
   A restrained, expensive tea-house: bone paper, near-black ink, the takeaway's colour as a muted gold accent and a
   dusty-rose tint. Bodoni Moda (italic phrases) for display, Jost for words, small capitals with wide tracking for
   labels, hairline rules and roman-numeral markers. Boxless dish cards with a thin inset frame; a masonry gallery.
   Motion: slow fades only (no rise, no bounce), a very slow drift on the portrait; none of it with reduced motion.
   Every rule is scoped to this template; #app keeps the shared parts' and older templates' rules from showing through. */

/* ---------- tokens */
body.site-body[data-template="bakery"] {
  --t-head: "Bodoni Moda", "Didot", "Bodoni 72", "Times New Roman", serif; --t-body: "Jost", "Futura", system-ui, -apple-system, sans-serif;
  --t-weight: 500; --fs-hw: 500; --t-case: none; --t-track: -.005em; --t-style: normal;
  --bg: #f2ede4; --card: #f8f4ee; --soft: #e8e0d3; --line: #d6ccbd; --ink: #1c1b19; --muted: #615b52;
  --bk-rose: #d9c2b8; --bk-rose-soft: #ebdcd4;
  --bk-gold: color-mix(in srgb, var(--brand-text) 78%, var(--ink)); /* words in the accent: AA on bone */
  --bk-gold-light: color-mix(in srgb, var(--brand) 55%, #ffffff); /* the accent on near-black */
  --bk-label: 500 .72rem/1.4 var(--t-body);
  --bk-slow: cubic-bezier(.25, .1, .25, 1);
  --bk-head: 64px;
  --fs-deep: #1c1b19; --fs-on-deep: #f2ede4; --fs-on-deep-muted: rgba(242, 237, 228, .72);
  font-family: var(--t-body); letter-spacing: .01em;
}
@media (min-width: 1024px) { body.site-body[data-template="bakery"] { --bk-head: 121px; } }
body.site-body[data-template="bakery"][data-buttons="rounded"] { --t-btn-r: 2px; }
body.site-body[data-template="bakery"][data-theme="dark"] {
  --bg: #151412; --card: #1c1b19; --soft: #24221f; --line: #36322d; --ink: #efe9df; --muted: #b5ada1;
  --bk-rose-soft: #2a2321; --bk-gold: color-mix(in srgb, var(--brand-text) 80%, #ffffff); --fs-deep: #0d0c0b;
}

.site-body[data-template="bakery"] #app {
  & :focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
  & .fs-kicker, & .bk-mark { font: var(--bk-label); letter-spacing: .26em; text-transform: uppercase; color: var(--bk-gold); }
  & .bk-mark { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
  & .bk-num { font-family: var(--t-head); font-style: italic; font-size: 1.1rem; letter-spacing: .04em; text-transform: none; color: var(--ink); }
  & .bk-rule { flex: none; width: 44px; height: 1px; background: currentColor; opacity: .7; }
  & :is(h1, h2, h3) em { font-style: italic; color: var(--bk-gold); }
  & .fs-cta { border-radius: var(--t-btn-r); font: 500 .8rem/1 var(--t-body); letter-spacing: .2em; text-transform: uppercase; transition: background-color .6s ease, color .6s ease; }
  & .fs-cta:hover { transform: none; box-shadow: none; background: var(--ink); color: var(--bg); }
  & .fs-cta:active { transform: none; }
  & .bk-more, & .fs-more { min-height: 44px; font: var(--bk-label); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); border-bottom: 0; }
  & .bk-more:hover, & .fs-more:hover { color: var(--bk-gold); }

  /* ---------- header: the wordmark centred over a hairline and spaced small-caps links */
  & .bk-head { position: sticky; top: 0; z-index: 70; background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
  & .bk-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 8px; height: 64px; transition: height .8s var(--bk-slow); }
  & .bk-left, & .bk-right { display: flex; align-items: center; gap: 4px; min-width: 0; }
  & .bk-right { justify-content: flex-end; }
  & .bk-brand { justify-self: center; color: var(--ink); }
  & .bk-brand .fs-word { font-family: var(--t-head); font-size: clamp(1.25rem, 5.4vw, 1.6rem); letter-spacing: .02em; }
  & .bk-brand .fs-logo { border-radius: 0; background: transparent; }
  & .bk-head .fs-hbtn { border: 0; border-radius: 0; color: var(--ink); font: var(--bk-label); letter-spacing: .2em; text-transform: uppercase; }
  & .bk-head .fs-hbtn:hover { background: transparent; color: var(--bk-gold); }
  & .bk-basket { border: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: var(--bk-label); letter-spacing: .2em; text-transform: uppercase; transition: background-color .6s ease, color .6s ease; }
  & .bk-basket:hover { background: var(--ink); color: var(--bg); }
  & .bk-basket .fs-basket-count { background: var(--brand); color: var(--brand-ink); font: 500 .72rem/1 var(--t-body); letter-spacing: 0; }
  & .fs-menu-btn { border-radius: 0; color: var(--ink); }
  & .bk-nav { display: none; }
  @media (max-width: 759px) { & .bk-left .fs-call { display: none; } & .bk-basket { border-color: transparent; } }
  @media (min-width: 1024px) {
    & .bk-top { height: 72px; }
    & .bk-brand .fs-word { font-size: clamp(1.8rem, 1.2rem + 1vw, 2.4rem); }
    & .bk-nav { display: flex; justify-content: center; gap: 48px; height: 48px; border-top: 1px solid var(--line); }
  }
  & .bk-nav-a { position: relative; display: inline-flex; align-items: center; color: var(--muted); font: var(--bk-label); letter-spacing: .28em; text-transform: uppercase; text-decoration: none; transition: color .6s ease; }
  & .bk-nav-a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 12px; height: 1px; background: var(--bk-gold); transition: left .8s var(--bk-slow), right .8s var(--bk-slow); }
  & .bk-nav-a:hover, & .bk-nav-a[aria-current="page"] { color: var(--ink); }
  & .bk-nav-a:hover::after, & .bk-nav-a[aria-current="page"]::after { left: 0; right: .28em; }

  /* ---------- hero: an editorial spread (asymmetric grid, a tall portrait, a smaller offset photo) */
  & .bk-hero { padding: 40px 0 88px; border-bottom: 1px solid var(--line); }
  & .bk-spread { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; row-gap: 40px; }
  & .bk-hero-copy { grid-column: 1 / -1; min-width: 0; }
  & .bk-hero h1 { margin: 0; font-family: var(--t-head); font-weight: 500; font-size: clamp(2.8rem, 1.5rem + 5vw, 6rem); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; }
  & .bk-hero-name { margin: 18px 0 0; font: var(--bk-label); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
  & .bk-standfirst { margin: 22px 0 0; max-width: 38ch; font-size: clamp(1.08rem, 1rem + .35vw, 1.28rem); line-height: 1.7; color: var(--muted); }
  & .bk-hero-order { display: grid; gap: 18px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 560px; }
  & .bk-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  & .bk-hero .fs-status { padding: 0; background: none; font: var(--bk-label); letter-spacing: .2em; text-transform: uppercase; }
  & .fs-toggle { padding: 0; border: 1px solid var(--line); border-radius: 0; background: transparent; }
  & .fs-toggle button { border-radius: 0; font: var(--bk-label); letter-spacing: .2em; text-transform: uppercase; }
  & .fs-toggle button.on { background: var(--ink); color: var(--bg); }
  & .bk-go { min-width: 220px; }
  @media (max-width: 479px) { & .bk-hero-row > * { flex: 1 1 100%; } & .bk-hero-row .fs-toggle { display: flex; } & .bk-hero-row .fs-toggle button { flex: 1; } }
  & .bk-hero figure { position: relative; margin: 0; }
  & .bk-frame-in { display: block; padding: 7px; border: 1px solid var(--line); background: var(--card); overflow: hidden; transition: border-color .9s ease; }
  & .bk-frame-in img { display: block; width: 100%; height: 100%; object-fit: cover; }
  & .bk-portrait { grid-column: 1 / 10; grid-row: 2; }
  & .bk-hero:not(.has-dish) .bk-portrait { grid-column: 1 / -1; }
  & .bk-portrait .bk-frame-in { aspect-ratio: 4 / 5.2; }
  & .bk-hero.size-medium .bk-portrait .bk-frame-in { aspect-ratio: 4 / 4.2; }
  & .bk-portrait .t-sample-tag { top: 14px; bottom: auto; }
  & .bk-offset { grid-column: 7 / 13; grid-row: 2; align-self: end; z-index: 1; margin-bottom: -40px !important; }
  & .bk-offset .bk-frame-in { aspect-ratio: 1; box-shadow: 0 0 0 10px var(--bg); }
  & .bk-offset figcaption { display: grid; gap: 2px; margin-top: 14px; font-family: var(--t-head); font-style: italic; font-size: .98rem; color: var(--ink); }
  & .bk-offset figcaption .bk-num { font: var(--bk-label); font-style: normal; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
  & .bk-hero.no-photo .bk-offset { grid-column: 1 / 7; grid-row: 2; margin-bottom: 0 !important; }
  @media (min-width: 960px) {
    & .bk-hero { padding: 72px 0 120px; }
    & .bk-spread { column-gap: 24px; row-gap: 0; align-items: center; }
    & .bk-hero-copy { grid-column: 1 / 7; grid-row: 1; padding-right: 24px; }
    & .bk-portrait, & .bk-hero:not(.has-dish) .bk-portrait { grid-column: 8 / 13; grid-row: 1; }
    & .bk-offset { grid-column: 6 / 9; grid-row: 1; margin-bottom: -72px !important; }
    & .bk-hero.no-photo .bk-offset { grid-column: 9 / 13; grid-row: 1; margin-bottom: 0 !important; }
    & .bk-hero.no-photo:not(.has-dish) .bk-hero-copy { grid-column: 1 / 11; }
  }

  /* ---------- offers: one line between rules */
  & .bk-offers { border-bottom: 1px solid var(--line); }
  & .bk-offers-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 40px; margin: 0; padding: 20px 0; list-style: none; text-align: center; }
  & .bk-offers-list li { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 12px; }
  & .bk-offers-list b { font-family: var(--t-head); font-style: italic; font-weight: 500; font-size: 1.12rem; }
  & .bk-offers-list span { font: var(--bk-label); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
  & .bk-offers-list .is-later { opacity: .72; }

  /* ---------- sections */
  & .fs-sec { padding-top: clamp(88px, 10vw, 152px); }
  & .fs-main > .fs-sec:last-child { padding-bottom: clamp(88px, 10vw, 152px); }
  & .bk-sec-head { display: block; margin-bottom: 48px; }
  & .bk-sec-head h2, & .bk-promo h2 { margin: 0; font-family: var(--t-head); font-weight: 500; font-size: clamp(2.3rem, 1.5rem + 3vw, 4.4rem); line-height: 1.04; letter-spacing: -.012em; max-width: 18ch; }
  & .bk-sec-head .bk-more { margin-top: 18px; }

  /* ---------- dish cards: no box; a thin inset frame, a caption, the price in small capitals */
  & .bk-feat { display: grid; gap: 56px; }
  & .bk-feat-rest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; }
  & .bk-cell { display: flex; min-width: 0; }
  @media (min-width: 960px) {
    & .bk-feat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
    & .bk-feat-lead { position: sticky; top: calc(var(--bk-head) + 32px); }
    & .bk-feat-rest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 28px; }
    & .bk-feat.is-single { grid-template-columns: minmax(0, 640px); }
  }
  & :is(.items, .popular-track) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 16px; margin-top: 0; padding: 0; background: none; }
  @media (max-width: 339px) { & :is(.items, .popular-track), & .bk-feat-rest { grid-template-columns: minmax(0, 1fr); } }
  @media (min-width: 700px) { & :is(.items, .popular-track) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 64px 28px; } }
  @media (min-width: 1024px) and (max-width: 1199px) { & :is(.items, .popular-track) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  & .bk-card { display: flex; flex-direction: column; gap: 18px; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); box-shadow: none; text-align: left; }
  & .bk-card:hover { box-shadow: none; }
  & .bk-card:focus-visible { outline: 1px solid var(--ink); outline-offset: 6px; }
  & .bk-frame { display: block; }
  & .bk-frame .bk-frame-in { aspect-ratio: 4 / 5; padding: 6px; }
  & .bk-card.k-feature .bk-frame .bk-frame-in { aspect-ratio: 4 / 3.4; padding: 8px; }
  & .bk-frame img { border-radius: 0; transition: transform 1.8s var(--bk-slow), opacity .9s ease; }
  & .bk-card:not(.soldout):hover .bk-frame-in { border-color: color-mix(in srgb, var(--ink) 45%, var(--line)); }
  & .bk-card:not(.soldout):hover .bk-frame img { transform: scale(1.025); }
  & .bk-cap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  & .bk-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  & .bk-card .mi-name { font-family: var(--t-head); font-weight: 500; font-size: clamp(1.08rem, 1rem + .4vw, 1.3rem); line-height: 1.22; letter-spacing: -.005em; }
  & .bk-card.k-feature .mi-name { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); line-height: 1.1; }
  & .bk-card .mi-add { position: static; flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 1px; border: 1px solid var(--line); border-radius: 50%; background: transparent; color: var(--ink);
    font: 400 1rem/1 var(--t-body); box-shadow: none; transition: background-color .6s ease, color .6s ease, border-color .6s ease; }
  & .bk-card:not(.soldout):hover .mi-add { transform: none; border-color: var(--ink); }
  & .bk-card .mi-add.has { background: var(--ink); border-color: var(--ink); color: var(--bg); font-size: .8rem; font-weight: 500; }
  & .bk-card .mi-desc { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  & .bk-card.k-feature .mi-desc { font-size: 1.02rem; -webkit-line-clamp: 4; }
  & .bk-cardfoot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
  & .bk-card .mi-price { margin: 0; padding: 0; background: none; color: var(--ink); font: 500 .8rem/1.4 var(--t-body); letter-spacing: .16em; text-transform: uppercase; }
  & .bk-card .mi-opts { font-family: var(--t-head); font-style: italic; font-weight: 500; font-size: .92rem; color: var(--muted); letter-spacing: 0; }
  & .bk-card .mi-allergens { font-size: .74rem; letter-spacing: .04em; color: var(--muted); }
  & .bk-card .fs-mark { border-color: var(--line); border-radius: 0; font-weight: 500; letter-spacing: .12em; }
  & .bk-card.noimg { padding-top: 20px; border-top: 1px solid var(--ink); }
  & .bk-card.soldout { cursor: default; }
  & .bk-card.soldout .bk-frame img { filter: grayscale(1); opacity: .5; }
  & .bk-card.soldout .mi-add { display: none; }
  & .bk-card.soldout .mi-price { color: var(--muted); }
  @media (max-width: 479px) { & .bk-card .mi-allergens { display: none; } & .bk-card .mi-desc { font-size: .84rem; } & .bk-card .mi-add { width: 28px; height: 28px; } }

  /* ---------- the menu index as a table of contents */
  & .bk-toc { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
  & .bk-toc a { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: baseline; gap: 12px; min-height: 76px; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  & .bk-toc-no { font-family: var(--t-head); font-style: italic; color: var(--bk-gold); }
  & .bk-toc-name { font-family: var(--t-head); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem); line-height: 1.1; transition: color .7s ease, letter-spacing .9s var(--bk-slow); }
  & .bk-toc a:hover .bk-toc-name { font-style: italic; color: var(--bk-gold); }
  & .bk-toc-n { font: var(--bk-label); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
  @media (min-width: 960px) { & .bk-toc { columns: 2; column-gap: 64px; } & .bk-toc li { break-inside: avoid; } }

  /* ---------- story: a drop capital, the photo in its frame */
  & .bk-story { display: grid; gap: 48px; align-items: start; }
  & .bk-story-text { margin: 0 0 18px; max-width: 58ch; font-size: clamp(1.06rem, 1rem + .3vw, 1.2rem); line-height: 1.85; }
  & .bk-story-text::first-letter { float: left; margin: 6px 12px 0 0; font-family: var(--t-head); font-size: 4.6em; line-height: .78; color: var(--bk-gold); }
  & .bk-story-media { margin: 0; }
  & .bk-story-media .bk-frame-in { aspect-ratio: 4 / 5; }
  @media (min-width: 960px) { & .bk-story.has-photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 96px; } & .bk-story-media { margin-top: 96px; } }

  /* ---------- promo: a dark editorial band with a gold rule */
  & .bk-promo { padding: clamp(72px, 9vw, 128px) 0; border-top: 1px solid var(--brand); background: var(--fs-deep); color: var(--fs-on-deep); }
  & .bk-promo-in { display: grid; gap: 48px; align-items: center; }
  & .bk-promo .bk-mark { color: var(--bk-gold-light); }
  & .bk-promo .bk-num { color: var(--fs-on-deep); }
  & .bk-promo h2 em { color: var(--bk-gold-light); }
  & .bk-promo-text { max-width: 46ch; margin: 22px 0 0; font-size: 1.08rem; line-height: 1.75; color: var(--fs-on-deep-muted); }
  & .bk-promo-go { margin-top: 32px; background: var(--fs-on-deep); color: var(--fs-deep); }
  & .bk-promo-go:hover { background: var(--brand); color: var(--brand-ink); }
  & .bk-promo-media { margin: 0; }
  & .bk-promo-media .bk-frame-in { aspect-ratio: 4 / 3; border-color: rgba(255, 255, 255, .2); background: transparent; }
  & .bk-promo :focus-visible { outline-color: var(--fs-on-deep); }
  @media (min-width: 960px) { & .bk-promo-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; } }

  /* ---------- gallery: an asymmetric masonry */
  & .bk-gallery { columns: 2; column-gap: 14px; margin: 0; padding: 0; list-style: none; }
  & .bk-gal-li { position: relative; break-inside: avoid; margin: 0 0 14px; }
  & .bk-gal-li figure { margin: 0; }
  & .bk-gal-li .bk-frame-in { padding: 6px; }
  & .bk-gal-li.is-tall .bk-frame-in { aspect-ratio: 3 / 4; } & .bk-gal-li.is-square .bk-frame-in { aspect-ratio: 1; } & .bk-gal-li.is-wide .bk-frame-in { aspect-ratio: 4 / 3; }
  & .bk-gal-li img { transition: transform 1.8s var(--bk-slow); }
  & .bk-gal-li:hover img { transform: scale(1.02); }
  & .bk-gal-li figcaption { margin-top: 10px; font-family: var(--t-head); font-style: italic; font-size: .92rem; color: var(--muted); }
  @media (min-width: 960px) { & .bk-gallery { columns: 3; column-gap: 32px; } & .bk-gal-li { margin-bottom: 32px; } & .bk-gallery.n3 { columns: 3; } & .bk-gallery .bk-gal-li:nth-child(2) { padding-top: 64px; } }

  /* ---------- info (shared parts), with its heading shown as a numbered marker */
  & .bk-info-h { position: static; width: auto; height: auto; margin: 0 0 32px; overflow: visible; clip: auto; white-space: normal; }
  & .fs-info { border-top: 1px solid var(--ink); }
  & .fs-info-cell h3 { font: var(--bk-label); letter-spacing: .24em; }
  & .fs-info-cell > .fs-ico { color: var(--bk-gold); }
  & .fs-info-cell .fs-info-big { font-family: var(--t-head); font-weight: 500; font-size: 1.55rem; }

  /* ---------- page heads and the other pages: centred, between rules */
  & .fs-pagehead { padding: 64px 0 48px; border-bottom: 1px solid var(--line); text-align: center; }
  & .fs-pagehead .fs-pagehead-order { justify-content: center; }
  & .fs-pagehead .fs-status { padding: 0; background: none; font: var(--bk-label); letter-spacing: .2em; text-transform: uppercase; }
  & .fs-pagehead h1 { font-family: var(--t-head); font-weight: 500; letter-spacing: -.015em; }
  & .fs-pagehead.has-photo { margin-top: 0; padding-top: 140px; text-align: left; }
  & .fs-pagehead-lead { margin-inline: auto; }
  & .fs-about-text .fs-lead { font-family: var(--t-head); font-style: italic; }
  & .fs-about-facts, & .fs-find-card { border: 1px solid var(--line); border-radius: 0; background: var(--card); }
  & .fs-mosaic li { border-radius: 0; }

  /* ---------- the menu page */
  & .menu-nav.bk-menunav { top: calc(var(--bk-head) - 1px); border-bottom: 1px solid var(--line); }
  & .bk-menunav .cat-tabs { gap: 32px; }
  & .bk-menunav .cat-tabs a { font: var(--bk-label); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
  & .bk-menunav .fs-ink { height: 1px; bottom: 8px; background: var(--bk-gold); transition: transform .9s var(--bk-slow), width .9s var(--bk-slow); }
  & .bk-menunav .search input { border-radius: 0; }
  & .cat { scroll-margin-top: calc(var(--bk-head) + 80px); padding-top: 80px; }
  & .bk-cathead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 16px; margin-bottom: 40px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
  & .bk-cathead .bk-num { color: var(--bk-gold); }
  & .bk-cathead h2 { margin: 0; display: block; background: none; font-family: var(--t-head); font-weight: 500; font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.05; }
  & .bk-cathead .fs-catcount { font: var(--bk-label); letter-spacing: .22em; }
  & .basket-panel { border-radius: 0; box-shadow: none; border: 1px solid var(--line); background: var(--card); }
  & .allergy-note { border-radius: 0; background: var(--bk-rose-soft); }

  /* ---------- drinks: a quiet tea-room list, a small framed photo, the choices hint in italics */
  & .cat.drinks .items { grid-template-columns: minmax(0, 1fr); gap: 0; }
  @media (min-width: 700px) { & .cat.drinks .items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; } }
  & .cat.drinks .bk-card { flex-direction: row; align-items: flex-start; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  & .cat.drinks .bk-card.noimg { border-top: 0; }
  & .cat.drinks .bk-frame { flex: none; width: 76px; }
  & .cat.drinks .bk-frame .bk-frame-in { aspect-ratio: 1; padding: 4px; }
  & .cat.drinks .bk-cap { flex: 1; }
  & .cat.drinks .bk-card .mi-desc { -webkit-line-clamp: 1; }
  & .cat.drinks .bk-card .mi-allergens { display: block; }
  & .cat.drinks .bk-card .mi-opts::before { content: "— "; }

  /* ---------- footer: near-black, the wordmark centred between gold rules */
  & .bk-foot { margin-top: 0; padding: 88px 0 calc(128px + env(safe-area-inset-bottom)); background: var(--fs-deep); color: var(--fs-on-deep); }
  @media (min-width: 1024px) { & .bk-foot { padding-bottom: 48px; } }
  & .bk-foot a { color: var(--fs-on-deep); }
  & .bk-foot-brand { display: grid; justify-items: center; gap: 16px; padding: 0 0 56px; text-align: center; }
  & .bk-foot-name { position: relative; margin: 0; padding: 22px 0; font-family: var(--t-head); font-size: clamp(2.4rem, 1.4rem + 4.4vw, 5.2rem); line-height: 1; letter-spacing: .01em; overflow-wrap: anywhere;
    border-block: 1px solid color-mix(in srgb, var(--bk-gold-light) 55%, transparent); }
  & .bk-foot-tag { margin: 0; font-family: var(--t-head); font-style: italic; font-size: 1.15rem; color: var(--fs-on-deep-muted); }
  & .bk-foot-brand .fs-cta { margin-top: 12px; background: var(--fs-on-deep); color: var(--fs-deep); }
  & .bk-foot-brand .fs-cta:hover { background: var(--brand); color: var(--brand-ink); }
  & .bk-foot-cols { display: grid; gap: 40px; padding: 48px 0; border-top: 1px solid rgba(255, 255, 255, .14); }
  @media (min-width: 760px) { & .bk-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } & .bk-foot-cols > div { padding: 0 32px; } & .bk-foot-cols > div + div { border-left: 1px solid rgba(255, 255, 255, .14); } & .bk-foot-cols > div:first-child { padding-left: 0; } }
  & .bk-foot-cols h2 { margin: 0 0 16px; font: var(--bk-label); letter-spacing: .26em; text-transform: uppercase; color: var(--bk-gold-light); }
  & .bk-foot-cols p { margin: 0 0 6px; }
  & .bk-foot-cols a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .22); }
  & .bk-foot-links { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
  & .bk-foot .fs-hours :is(th, td) { padding: 6px 0; border-bottom-color: rgba(255, 255, 255, .1); color: var(--fs-on-deep-muted); font-size: .9rem; font-weight: 400; }
  & .bk-foot .fs-hours tr.is-today :is(th, td) { color: var(--fs-on-deep); }
  & .bk-foot .fs-today { border-radius: 0; }
  & .bk-foot .fs-socials a { border-radius: 0; border-color: rgba(255, 255, 255, .25); }
  & .bk-foot-base { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .84rem; letter-spacing: .03em; color: var(--fs-on-deep-muted); text-align: center; }
  & .bk-foot-base p { margin: 0; }
  & .bk-foot-base b { color: var(--fs-on-deep); font-weight: 500; }
  & .bk-foot :focus-visible { outline-color: var(--fs-on-deep); }
}

/* Outside the page column: the phone menu and the sheets, square and quiet */
.site-body[data-template="bakery"] {
  & .fs-drawer-nav a { font-family: var(--t-head); font-weight: 500; }
  & .fs-drawer-nav a[aria-current="page"] { font-style: italic; color: var(--bk-gold); }
  & .fs-drawer-close { border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
  & .fs-drawer-foot .btn { border-radius: var(--t-btn-r); }
  & .sheet-panel { border-radius: 0; }
  & .sheet-panel :is(.sheet-head h2), & .item-body h2, & :is(.basket-panel, .basket-sheet) .basket-head h2 { font-family: var(--t-head); font-weight: 500; }
  & .item-price { font: 500 .9rem/1.4 var(--t-body); letter-spacing: .16em; text-transform: uppercase; }
  & .opt-group.is-one label.opt, & .opt-group.is-many label.opt { border-radius: 2px; }
  & .opt-group.is-one.is-size label.opt, & .opt-group.is-one.is-size label.opt::after { border-radius: 0 !important; }
  & #view-basket, & .fs-bar-go, & .fs-bar-call { border-radius: var(--t-btn-r); }
  & .checkout-sheet .co-card { border-radius: 0; }
  & .basket-panel { border-radius: 0; }
}

/* ---------- motion: slow fades only */
@media (prefers-reduced-motion: no-preference) {
  .site-body[data-template="bakery"]:not(.fs-painted) #app {
    & .bk-hero-copy > * { animation: bk-fade 1.6s var(--bk-slow) both; }
    & .bk-hero-copy > :nth-child(2) { animation-delay: .15s; } & .bk-hero-copy > :nth-child(3) { animation-delay: .3s; }
    & .bk-hero-copy > :nth-child(4) { animation-delay: .45s; } & .bk-hero-copy > :nth-child(5) { animation-delay: .6s; }
    & .bk-portrait { animation: bk-fade 2s var(--bk-slow) both .2s; }
    & .bk-offset { animation: bk-fade 2s var(--bk-slow) both .8s; }
  }
  .site-body[data-template="bakery"] #app .bk-drift { animation: bk-drift 40s ease-in-out infinite alternate; transform-origin: 50% 30%; }
  .site-body[data-template="bakery"] .fs-rv, .site-body[data-template="bakery"] .fs-rv.is-in { transform: none; }
  .site-body[data-template="bakery"] .fs-rv { transition: opacity 1.4s var(--bk-slow); transition-delay: calc(var(--i, 0) * 120ms); }
}
@keyframes bk-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bk-drift { from { transform: scale(1.01); } to { transform: scale(1.05); } }