/*
Theme Name: The Box Berlin
Theme URI: https://thebox.dev-com-wp.hu
Author: The Box Berlin
Description: Custom theme for The Box Berlin — square donuts & specialty coffee.
Version: 0.21.16
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thebox-theme
*/

/* -------------------------------------------------------------------------
   Design tokens
   Colours sampled from DESIGN/01.png + DESIGN/detailed.png.
   Type scale and spacing per FONT/BOX_DONUT_BERLIN_FONT_GUIDE.md.
   ------------------------------------------------------------------------- */
:root {
  /* Brand colours */
  --tb-cream: #f8f8f6;
  --tb-cream-deep: #efe9dc;
  --tb-ink: #231f20;       /* brand black — text, dark sections, buttons */
  --tb-ink-soft: #373334;  /* lifted black — hover states */
  --tb-accent: #95b5bf;      /* brand accent — CTAs, highlights, rating card */
  --tb-accent-deep: #839fa8; /* darker accent — hover states */

  /* Surfaces — central definitions */
  --tb-white: #f8f8f6;    /* background white: page, header, light sections */
  --tb-surface: #f8f8f6;  /* raised surface: cards, panels */
  --tb-product-media: transparent; /* product card image panel — no coloured background
                                      (was #e6e2da from DESIGN/product_listing.png) */

  /* Effects — central definitions */
  --tb-drop-shadow: drop-shadow(0 0.05em 0.12em rgba(35, 31, 32, 0.28));

  /* Typography (font guide §5) */
  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --text-h1: clamp(3.5rem, 1.5rem + 8vw, 9rem);
  --text-h2: clamp(2.5rem, 1.4rem + 4.5vw, 5.5rem);
  --text-h3: clamp(2rem, 1.4rem + 2.5vw, 3.5rem);
  --text-h4: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
  --text-h5: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-h6: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-small: clamp(0.875rem, 0.85rem + 0.125vw, 0.9375rem);
  --text-ui: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  --text-eyebrow: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-manifesto: clamp(2rem, 0.6rem + 7.5vw, 7.5rem);
  --text-hero: clamp(2.5rem, 1rem + 5.8vw, 7rem);

  /* Spacing (font guide §5) */
  --gap-eyebrow: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --gap-heading: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  --gap-subheading: clamp(0.75rem, 0.6rem + 0.6vw, 1.25rem);
  --gap-cta: clamp(1.5rem, 1rem + 2vw, 3rem);
  --space-section: clamp(3.5rem, 2rem + 6vw, 8rem);

  /* Layout */
  --tb-content: 1180px;
  --tb-manifesto: 1500px;
  --tb-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Corner radii — echo the rounded corners of the square donut
     (measured ≈9% of the donut width; kept subtler for UI). */
  --tb-radius: 8px;
  --tb-radius-media: 16px;
}

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

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  /* header height plus a small breath, so anchor jumps do not land flush under the bar */
  scroll-padding-top: calc(var(--tb-header-h, 7.5rem) + 0.9rem);
}

body {
  margin: 0;
  background: var(--tb-white);
  color: var(--tb-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Display headings — Anton is single-weight: never synthesise bold. */
:where(h1, h2, h3, h4, .display-1, .display-2, .display-3, .display-4) {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  text-wrap: balance;
}

:where(h1, .display-1) { font-size: var(--text-h1); line-height: 1.02; letter-spacing: -0.015em; }
:where(h2, .display-2) { font-size: var(--text-h2); line-height: 1.04; letter-spacing: -0.01em; }
:where(h3, .display-3) { font-size: var(--text-h3); line-height: 1.08; letter-spacing: 0; }
:where(h4, .display-4) { font-size: var(--text-h4); line-height: 1.12; letter-spacing: 0; }

:where(h5, h6) {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: none;
}

h5 { font-size: var(--text-h5); line-height: 1.3; letter-spacing: -0.01em; }
h6 { font-size: var(--text-h6); line-height: 1.35; letter-spacing: 0; }

.copy { max-inline-size: 62ch; }
.copy p { margin: 0; }
.copy p + p { margin-block-start: 1em; }

.lead {
  font-size: var(--text-lead);
  font-weight: 500;
  line-height: 1.5;
  max-inline-size: 42ch;
}

.text-small {
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.5;
}

.eyebrow {
  margin: 0 0 var(--gap-eyebrow);
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section { padding-block: var(--space-section); }
.section-copy { margin-block-start: var(--gap-heading); }
.subheading-copy { margin-block-start: var(--gap-subheading); }
.small-heading-copy { margin-block-start: 0.75rem; }
.cta-group { margin-block-start: var(--gap-cta); }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

.skip-link:focus {
  z-index: 100;
  top: 1rem;
  left: 1rem;
  width: auto;
  height: auto;
  clip: auto;
  padding: 0.5rem 1rem;
  background: var(--tb-ink);
  color: var(--tb-cream);
}

/* -------------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------------- */
.site-main {
  max-width: var(--tb-content);
  margin: 0 auto;
  padding-inline: var(--tb-gutter);
  padding-block: var(--space-section);
  min-height: 40vh;
}

/* Homepage: sections manage their own width and vertical rhythm. */
.site-main--home,
.site-main--flow {
  max-width: none;
  padding: 0;
}

/* -------------------------------------------------------------------------
   Header / nav
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  padding-inline: var(--tb-gutter);
  border-bottom: 1px solid color-mix(in srgb, var(--tb-ink) 10%, transparent);
  background: var(--tb-white);
}

.site-header__inner {
  max-width: var(--tb-manifesto); /* the sections' content column, so the header edges line up with the page content */
  margin-inline: auto;
  position: relative;
  z-index: 75; /* above the mobile panel (z 70), which sits inside the header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  /* compact band: the logo artwork is trimmed to its ink, so this padding is the
     header's real breathing room (was clamp(0.25rem, 0.45vw, 0.45rem) while the
     untrimmed logo still carried ~60 px of transparent padding) */
  padding-block: clamp(0.4rem, 0.6vw, 0.6rem);
}

/* --- brand ------------------------------------------------------------- */
.site-logo {
  display: block;
  text-decoration: none;
}

.site-logo__img {
  display: block;
  /* the horizontal lockup keeps its own top/bottom padding, so it is sized by
     width (the transparent padding is part of the artwork's proportions) */
  inline-size: clamp(7rem, 4.5rem + 13.5vw, 16rem);
  block-size: auto;
}

/* --- desktop navigation (DESIGN/MENU_DESIGN.png) ----------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.6rem);
  margin-inline-start: auto;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 2.6vw, 2.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__menu a {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tb-ink);
  text-decoration: none;
}

.site-nav__menu a:hover,
.site-nav__menu a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* the header's accent buttons carry brand black type (request of 2026-09-21) */
.site-header .tb-button--accent {
  color: var(--tb-ink);
}

.site-header .site-nav__cta {
  min-block-size: 2.625rem;
  padding-block: 0.6rem; /* ~30% less vertical padding than the button default */
  padding-inline: clamp(1.4rem, 2.2vw, 2.1rem);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* --- language switch (EN / DE) ----------------------------------------- */
.lang-switch {
  display: flex;
}

.lang-switch__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lang-switch__list li + li {
  margin-inline-start: 0.55rem;
  padding-inline-start: 0.55rem;
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-ink) 22%, transparent);
}

.lang-switch a {
  color: color-mix(in srgb, var(--tb-ink) 55%, transparent);
  text-decoration: none;
}

.lang-switch a:hover {
  color: var(--tb-ink);
}

.lang-switch .is-active a {
  color: var(--tb-ink);
  text-decoration: underline;
  text-decoration-color: var(--tb-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

/* inside the mobile panel it sits under the catering button */
.lang-switch--panel {
  margin-block-start: clamp(1.5rem, 5vw, 2.25rem);
}

.lang-switch--panel .lang-switch__list {
  font-size: 1rem;
}

/* --- mobile controls --------------------------------------------------- */
.site-header__actions {
  display: none;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.site-header .site-header__cta {
  min-block-size: 2.9rem;
  padding: 0.5rem clamp(0.9rem, 2.4vw, 1.25rem);
  font-size: var(--text-ui);
  font-weight: 600;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--tb-ink);
  font: 600 var(--text-small) / 1 var(--font-body);
  cursor: pointer;
}

.nav-toggle__icon {
  position: relative;
  display: block;
  inline-size: 1.6rem;
  block-size: 0.85rem;
  background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
}

.nav-toggle__icon::before,
.nav-toggle__icon::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  background: currentColor;
  transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease;
}

.nav-toggle__icon::before {
  top: 0;
}

.nav-toggle__icon::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon {
  background: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after {
  bottom: calc(50% - 1px);
  transform: rotate(-45deg);
}

/* --- mobile menu panel ------------------------------------------------- */
.site-menu {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  background: var(--tb-white);
}

.site-menu:not([hidden]) {
  animation: tb-menu-in 0.22s ease both;
}

@keyframes tb-menu-in {
  from { opacity: 0; transform: translateY(-0.6rem); }
  to   { opacity: 1; transform: none; }
}

.site-menu__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
  /* starts below the header row (its height is set by the script on open) */
  padding: calc(var(--tb-header-h, 5.25rem) + clamp(1rem, 4vw, 1.75rem)) var(--tb-gutter) clamp(2.5rem, 6vw, 4rem);
}

.site-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: 1px solid color-mix(in srgb, var(--tb-ink) 16%, transparent);
}

.site-menu__list li {
  border-block-end: 1px solid color-mix(in srgb, var(--tb-ink) 16%, transparent);
}

.site-menu__list a:focus-visible {
  outline: 2px solid var(--tb-ink);
  outline-offset: 3px;
}

.site-menu__list a {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: clamp(1rem, 3.4vw, 1.35rem);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.2rem + 2.2vw, 2.1rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--tb-ink);
  text-decoration: none;
}

.site-header .site-menu__cta {
  inline-size: 100%;
  margin-block-start: clamp(1.5rem, 5vw, 2.25rem);
  min-block-size: 3.35rem;
  font-size: var(--text-ui);
  font-weight: 600;
}

.site-menu__meta {
  display: grid;
  gap: 0.85rem;
  margin: clamp(1.75rem, 5vw, 2.5rem) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-body);
  font-weight: 500;
}

.site-menu__meta li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.site-menu__icon {
  flex: none;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  color: var(--tb-ink);
}

.site-menu__meta a {
  color: inherit;
  text-decoration: none;
}

.site-menu__meta a:hover,
.site-menu__meta a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* keep the header row (logo + close) above the open panel */
body.menu-open {
  overflow: hidden;
}

body.menu-open .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: var(--tb-white);
}

/* the open panel carries the catering CTA, so the header's compact one goes */
body.menu-open .site-header__cta {
  display: none;
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.tb-button,
.wp-block-button__link,
input[type="submit"],
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  box-sizing: border-box;
  min-block-size: 3rem;
  max-inline-size: 100%;
  padding: 0.875rem 1.5rem;
  border: 0;
  border-radius: var(--tb-radius);
  background: var(--tb-ink);
  color: var(--tb-cream);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.tb-button:hover,
.tb-button:focus,
.wp-block-button__link:hover,
input[type="submit"]:hover,
.button:hover {
  background: var(--tb-ink-soft);
}

.tb-button--accent {
  background: var(--tb-accent);
  color: var(--tb-ink);
}

.tb-button--accent:hover {
  background: var(--tb-accent-deep);
}

input,
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

.field-label {
  font: 600 var(--text-ui) / 1.4 var(--font-body);
}

/* -------------------------------------------------------------------------
   Homepage — section 01: hero (DESIGN/hero.png)
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  /* the gutter lives on the section (like the product listing section), so the
     hero copy lines up with "PICK YOUR HAPPY." at every width */
  padding-inline: var(--tb-gutter);
  min-height: clamp(32rem, 82vh, 54rem);
  overflow: hidden;
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* the <picture> wrapper must fill the media box so the img's percentage
   height resolves and object-fit: cover always fills the hero */
.hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 66% center;
}

/* dark scrim so the copy stays legible over the photograph */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(20, 22, 18, 0.82) 0%,
    rgba(20, 22, 18, 0.6) 34%,
    rgba(20, 22, 18, 0.12) 68%,
    rgba(20, 22, 18, 0) 100%
  );
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* same container as the product listing section, so the hero copy lines up
     with "PICK YOUR HAPPY." and the grid below */
  max-width: var(--tb-manifesto);
  min-height: inherit;
  margin-inline: auto;
  padding-block: clamp(2rem, 5vh, 3.5rem);
}

.hero__content {
  margin-block: auto; /* vertically centred; the footer stays at the bottom */
  max-width: 42rem;
}

.hero__eyebrow {
  color: color-mix(in srgb, var(--tb-cream) 82%, transparent);
}

.hero__title {
  margin: 0 0 1.5rem;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--tb-cream);
}

.hero__lead {
  margin: 0 0 2.25rem;
  max-inline-size: 34ch;
  color: color-mix(in srgb, var(--tb-cream) 88%, transparent);
}

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

.tb-button--ghost {
  border: 1px solid color-mix(in srgb, var(--tb-cream) 65%, transparent);
  background: transparent;
  color: var(--tb-cream);
}

.tb-button--ghost:hover,
.tb-button--ghost:focus {
  background: var(--tb-cream);
  color: var(--tb-ink);
}

.tb-button__arrow {
  font-size: 0.9em;
  line-height: 1;
}

.hero__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.hero__location {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--text-small);
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-cream) 85%, transparent);
}

.hero__note {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-cream) 78%, transparent);
}

@media (max-width: 60rem) {
  .hero {
    min-height: clamp(34rem, 90vh, 46rem);
  }

  .hero::after {
    background: linear-gradient(
      180deg,
      rgba(20, 22, 18, 0.8) 0%,
      rgba(20, 22, 18, 0.62) 55%,
      rgba(20, 22, 18, 0.75) 100%
    );
  }

  .hero__media img {
    /* the portrait mobile crop is centred; the tall ≤ 60 rem box slices the
       top/bottom, so bias the window slightly downwards to keep the box whole */
    object-position: center 62%;
  }

  .hero__lead {
    max-inline-size: none;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 02: image-interrupted manifesto (font guide §4)
   ------------------------------------------------------------------------- */
.section--manifesto {
  padding-inline: var(--tb-gutter);
  /* the small print sits vertically centred between the section edge and the
     statement — the total spacing is split evenly above and below it */
  padding-block-start: calc((var(--space-section) + var(--gap-eyebrow)) / 2);
  padding-block-end: calc((var(--space-section) + var(--gap-heading)) / 2);
  text-align: center;
}

.section--manifesto .eyebrow {
  margin-block-end: calc((var(--space-section) + var(--gap-eyebrow)) / 2);
}

.section--manifesto__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.manifesto {
  display: grid;
  gap: 0.18em;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-manifesto);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.manifesto__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.12em;
  min-inline-size: 0;
}

.manifesto__image {
  display: block;
  flex: 0 0 auto;
  /* +50% image size vs. the original 0.95em; the symmetric negative block
     margins cancel the growth in layout, so the type scale and the line
     rhythm stay exactly as they were — the image just overlaps its line box,
     like in the design. */
  block-size: 1.425em;
  margin-block: -0.2375em;
  inline-size: auto;
  max-inline-size: 100%;
  object-fit: contain;
  /* soft shadow that follows the cutout shape (alpha), not the image box */
  filter: var(--tb-drop-shadow);
}

.manifesto__image--split {
  block-size: 1.2em;
  margin-block: -0.2em;
}

.manifesto__image--coffee {
  block-size: 1.725em;
  margin-block: -0.2875em;
}

.manifesto__tagline {
  margin: calc((var(--space-section) + var(--gap-heading)) / 2) 0 0;
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.5;
  color: color-mix(in srgb, var(--tb-ink) 72%, transparent);
}

@media (max-width: 40rem) {
  .manifesto { row-gap: 0.3em; }
  .manifesto__line { row-gap: 0.12em; }
}

/* -------------------------------------------------------------------------
   Homepage — section 03: product listing (DESIGN/product_listing.png)
   ------------------------------------------------------------------------- */
.section--products {
  padding-inline: var(--tb-gutter);
}

.section--products__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.products-head__row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 1.5rem 3rem;
  align-items: end;
  margin-block-start: 0.5rem;
}

.products-head__title {
  margin: 0;
}

.products-head__intro {
  margin-inline-start: auto;
  max-width: 36ch;
}

.products-head__intro p {
  margin: 0 0 0.5rem;
}

.products-head__intro .text-small {
  margin: 0;
  color: color-mix(in srgb, var(--tb-ink) 62%, transparent);
}

.products-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-block-start: var(--gap-heading);
  padding-block: 1rem;
  border-block: 1px solid color-mix(in srgb, var(--tb-ink) 12%, transparent);
}

.products-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.products-chips__label {
  margin-inline-end: 0.5rem;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 62%, transparent);
}

.products-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  border: 1px solid color-mix(in srgb, var(--tb-ink) 22%, transparent);
  border-radius: 999px;
  font-size: var(--text-ui);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.products-chip:hover,
.products-chip:focus {
  border-color: var(--tb-ink);
}

.products-chip.is-active {
  background: var(--tb-ink);
  border-color: var(--tb-ink);
  color: var(--tb-cream);
}

.products-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 16rem;
  max-width: 24rem;
}

.products-search input[type="search"] {
  width: 100%;
  padding: 0.6875rem 2.75rem 0.6875rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--tb-ink) 22%, transparent);
  border-radius: var(--tb-radius);
  background: transparent;
  color: inherit;
}

.products-search button {
  position: absolute;
  right: 0.25rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: none;
  color: var(--tb-ink);
  cursor: pointer;
}

/* Live search: dim the results while a new listing is being fetched. */
.products-results {
  transition: opacity 0.15s ease;
}

.products-results[aria-busy="true"] {
  opacity: 0.45;
}

.products-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 1rem;
  padding-block: 0.875rem;
  font-size: var(--text-small);
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-ink) 70%, transparent);
}

.products-meta p {
  margin: 0;
}

.products-meta a {
  color: inherit;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.25rem 1.25rem;
}

.product-card {
  position: relative;
  text-align: center;
}

.product-card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  /* image → category: 20–24 px */
  margin-block-end: 1.375rem;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-product-media);
}

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

.product-card__collection {
  /* category: Manrope 600, 11–12 px, uppercase, wide tracking; category → name: 6 px */
  margin: 0 0 0.375rem;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 65%, transparent);
}

.product-card__name {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1.25rem, 1rem + 0.625vw, 1.625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-wrap: balance;
  text-transform: none;
}

.product-card__desc {
  /* ingredients: Manrope 400, 14–16 px, one continuous comma separated sentence */
  max-width: 32ch;
  margin: 0.5rem auto 0;
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  color: color-mix(in srgb, var(--tb-ink) 70%, transparent);
}

/* Product quick-view trigger — mobile listing only (see @media 820 px below). */
.product-card__trigger {
  display: none;
}

.products-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-block-start: 2.5rem;
  padding-block-start: 1.25rem;
  border-top: 1px solid color-mix(in srgb, var(--tb-ink) 12%, transparent);
}

.products-pagination__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.products-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.25rem;
  padding: 0.375rem 0.625rem;
  font-size: var(--text-ui);
  font-weight: 600;
  text-decoration: none;
}

.products-pagination .page-numbers.current {
  border-radius: var(--tb-radius);
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.products-pagination .page-numbers.dots {
  opacity: 0.55;
}

@media (max-width: 1100px) {
  .products-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .products-head__row {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .products-head__intro {
    margin-inline-start: 0;
  }

  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Mobile listing: the ingredient line would dominate the 2-column cards,
     so it moves behind a tap — the card opens the quick-view modal. */
  .product-card__desc {
    display: none;
  }

  .product-card__trigger {
    display: inline-block;
    margin-block-start: 0.5rem;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    color: color-mix(in srgb, var(--tb-ink) 60%, transparent);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* the whole card is the tap target */
  .product-card__trigger::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .product-card__trigger:focus-visible {
    outline: 2px solid var(--tb-ink);
    outline-offset: 3px;
  }
}

@media (max-width: 480px) {
  .products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 0.75rem;
  }
}

/* Product quick-view modal (mobile listing) — hidden by default, opened by
   assets/js/theme.js from the card's trigger button. */
.tb-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  align-items: end;
  justify-items: center;
}

.tb-modal[hidden] {
  display: none;
}

.tb-modal__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--tb-ink) 62%, transparent);
  animation: tb-modal-fade 0.2s ease both;
}

.tb-modal__dialog {
  position: relative;
  width: min(100%, 32rem);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.875rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
  border-radius: var(--tb-radius-media) var(--tb-radius-media) 0 0;
  background: var(--tb-white);
  box-shadow: 0 -1.25rem 3rem rgba(35, 31, 32, 0.28);
  animation: tb-modal-up 0.24s ease both;
}

.tb-modal__close {
  position: absolute;
  top: 1.375rem;
  right: 1.25rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tb-ink) 82%, transparent);
  color: var(--tb-cream);
  cursor: pointer;
}

.tb-modal__close:hover,
.tb-modal__close:focus-visible {
  background: var(--tb-ink);
}

.tb-modal__close:focus-visible {
  outline: 2px solid var(--tb-ink);
  outline-offset: 2px;
}

.tb-modal__media {
  margin: 0 0 1rem;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-product-media);
}

.tb-modal__media img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.tb-modal__collection {
  margin: 0 0 0.375rem;
}

.tb-modal__title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: left;
  text-wrap: balance;
  text-transform: none;
}

.tb-modal__desc {
  margin: 0.625rem 0 0;
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  color: color-mix(in srgb, var(--tb-ink) 75%, transparent);
}

@keyframes tb-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tb-modal-up {
  from { transform: translateY(1.5rem); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tb-modal__backdrop,
  .tb-modal__dialog {
    animation: none;
  }
}

body.tb-modal-open {
  overflow: hidden;
}

/* the cookie-settings widget floats above the sheet (z 999998) — the modal
   takes over the corner while it is open */
body.tb-modal-open .lw-cookie-floating-btn {
  display: none;
}

/* -------------------------------------------------------------------------
   Homepage — section 04: catering & special occasions (DESIGN/CATERING.png)
   ------------------------------------------------------------------------- */
.section--catering {
  --tb-catering-gap: clamp(0.75rem, 1.2vw, 1.25rem);
  padding-inline: var(--tb-gutter);
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.section--catering__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-catering__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.25rem, 4vw, 3.5rem) clamp(2.5rem, 4.5vw, 4.5rem);
  align-items: start;
}

.tb-catering__eyebrow {
  color: color-mix(in srgb, var(--tb-cream) 78%, transparent);
}

.tb-catering__title {
  max-width: 12ch;
  line-height: 1;
}

.tb-catering__lead {
  margin: var(--gap-heading) 0 0;
  max-inline-size: 42ch;
  color: color-mix(in srgb, var(--tb-cream) 86%, transparent);
}

.tb-catering__list {
  margin: var(--gap-cta) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catering__list li {
  padding-block: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--tb-cream) 24%, transparent);
  font-size: var(--text-body);
  font-weight: 500;
  line-height: 1.4;
}

.tb-catering__list li:last-child {
  border-bottom: 1px solid color-mix(in srgb, var(--tb-cream) 24%, transparent);
}

.tb-catering__actions {
  margin-block-start: var(--gap-cta);
}

.tb-catering__note {
  margin: 0.9rem 0 0;
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--tb-cream) 70%, transparent);
}

/* Media collage — the video tile sets the row height (its aspect ratio), the
   two photos split the right column into equal halves, like the design. */
.tb-catering__media {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: var(--tb-catering-gap);
}

.tb-catering__tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-ink-soft);
}

.tb-catering__tile img,
.tb-catering__tile video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* bottom scrim so the white captions stay legible on any frame */
.tb-catering__tile::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(rgba(24, 22, 22, 0) 0%, rgba(24, 22, 22, 0.55) 100%);
}

.tb-catering__tile--video {
  aspect-ratio: 940 / 1710; /* the still poster (portrait) */
  align-self: start;
}

.tb-catering__stack {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--tb-catering-gap);
  min-height: 0;
}

/* Click-to-play overlay — shown only once JS has taken over playback
   (without JavaScript the native video controls stay available). */
.tb-catering__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tb-cream);
  cursor: pointer;
}

.tb-catering__tile--video.is-ready .tb-catering__play {
  display: grid;
}

.tb-catering__play-icon {
  display: grid;
  place-items: center;
  inline-size: clamp(3.75rem, 6vw, 4.75rem);
  block-size: clamp(3.75rem, 6vw, 4.75rem);
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--tb-cream) 85%, transparent);
  background: rgba(24, 22, 22, 0.45);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tb-catering__play-icon svg {
  width: clamp(1.1rem, 1.8vw, 1.4rem);
  height: auto;
  margin-inline-start: 0.3rem; /* optical centring of the triangle */
}

.tb-catering__play:hover .tb-catering__play-icon,
.tb-catering__play:focus-visible .tb-catering__play-icon {
  transform: scale(1.08);
  background: rgba(24, 22, 22, 0.62);
}

.tb-catering__tile--video.is-playing .tb-catering__play-icon {
  opacity: 0;
}

.tb-catering__tile--video.is-playing .tb-catering__play:hover .tb-catering__play-icon,
.tb-catering__tile--video.is-playing .tb-catering__play:focus-visible .tb-catering__play-icon {
  opacity: 1;
}

.tb-catering__play:focus-visible {
  outline: 2px solid var(--tb-cream);
  outline-offset: -6px;
  border-radius: var(--tb-radius-media);
}

.tb-catering__caption {
  position: absolute;
  z-index: 3;
  inset-inline: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem 1rem;
  pointer-events: none;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.4;
  color: var(--tb-cream);
}

/* Closing occasion row — label + matching magnet artwork (request of 2026-09-20) */
.tb-catering__labels {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2.25rem);
  margin: 0;
  padding: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--tb-cream) 26%, transparent);
  list-style: none;
}

.tb-catering__label-img {
  display: block;
  width: 100%;
  height: auto;
  /* the magnet artwork's caption band is cropped off — the photos are 800×580 */
  aspect-ratio: 800 / 580;
  object-fit: cover;
  border-radius: var(--tb-radius-media);
}

/* the occasion name as real text (translatable), where the baked-in band was */
.tb-catering__label-title {
  margin: 0.9rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--tb-cream);
}

@media (max-width: 980px) {
  .tb-catering__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .tb-catering__labels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .tb-catering__media {
    grid-template-columns: 1fr;
  }

  .tb-catering__tile--video {
    aspect-ratio: 376 / 544; /* the video's native frame on phones */
  }

  .tb-catering__stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }

  .tb-catering__stack .tb-catering__tile {
    aspect-ratio: 1.06;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 05: coffee & good company / behind the scenes
   (DESIGN/BEHIND_THE_SCENES_REDESIGN.png)
   ------------------------------------------------------------------------- */
.section--bts {
  --tb-bts-gap: clamp(0.75rem, 1.1vw, 1.1rem);
  padding-inline: var(--tb-gutter);
  background: var(--tb-cream);
}

.section--bts__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-bts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.09fr) minmax(0, 1.01fr) minmax(0, 0.99fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.tb-bts__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* the statement column keeps the generous column gap of the sections above
     (the tiles stay on the tighter 1.6vw rhythm) */
  padding-inline-start: clamp(1.25rem, 2.9vw, 2.75rem);
}

.tb-bts__title {
  max-width: 12ch;
  line-height: 1;
}

.tb-bts__lead {
  margin: var(--gap-heading) 0 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--tb-ink) 82%, transparent);
}

/* pushed towards the bottom of the column, like the design */
.tb-bts__hello {
  margin-block-start: auto;
  padding-block-start: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
}

.tb-bts__social {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.4rem);
  align-items: center;
  width: 100%;
  margin-block-start: clamp(1.4rem, 2.2vw, 2rem);
  padding: clamp(1.25rem, 1.8vw, 1.6rem);
  border-radius: var(--tb-radius-media);
  background: var(--tb-accent);
}

.tb-bts__social-icon {
  color: var(--tb-ink);
}

.tb-bts__social-icon svg {
  display: block;
  width: clamp(2.75rem, 3.6vw, 3.5rem);
  height: auto;
}

.tb-bts__social-body {
  padding-inline-start: clamp(1rem, 1.5vw, 1.4rem);
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-ink) 30%, transparent);
}

.tb-bts__social-title {
  margin: 0;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.05;
}

.tb-bts__social-text {
  margin: 0.5rem 0 0;
  font-size: var(--text-small);
  line-height: 1.5;
}

.tb-bts__social-link {
  display: inline-block;
  margin-block-start: 0.65rem;
  font-size: var(--text-small);
  font-weight: 700;
}

.tb-bts__social-handle {
  margin: 0.15rem 0 0;
  font-size: var(--text-small);
}

/* the grand opening video — portrait tile, click-to-play with sound; it
   stretches to the row height (the statement column is the tallest) */
.tb-bts__video-tile {
  position: relative;
  height: 100%;
  aspect-ratio: 451 / 848; /* design proportions of the tile */
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-ink-soft);
}

.tb-bts__video-tile video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-bts__video-tile::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  pointer-events: none;
  background: linear-gradient(rgba(24, 22, 22, 0) 0%, rgba(24, 22, 22, 0.62) 100%);
}

.tb-bts__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tb-cream);
  cursor: pointer;
}

.tb-bts__video-tile.is-ready .tb-bts__play {
  display: grid;
}

.tb-bts__play-icon svg {
  display: block;
  width: clamp(4.5rem, 7vw, 6.25rem);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(24, 22, 22, 0.45));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tb-bts__play:hover .tb-bts__play-icon svg,
.tb-bts__play:focus-visible .tb-bts__play-icon svg {
  transform: scale(1.06);
}

.tb-bts__video-tile.is-playing .tb-bts__play-icon svg {
  opacity: 0;
}

.tb-bts__video-tile.is-playing .tb-bts__play:hover .tb-bts__play-icon svg,
.tb-bts__video-tile.is-playing .tb-bts__play:focus-visible .tb-bts__play-icon svg {
  opacity: 1;
}

.tb-bts__play:focus-visible {
  outline: 2px solid var(--tb-cream);
  outline-offset: -6px;
  border-radius: var(--tb-radius-media);
}

.tb-bts__video-caption {
  position: absolute;
  z-index: 3;
  inset-inline: 1rem;
  bottom: clamp(1.1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  text-align: center;
  pointer-events: none;
  color: var(--tb-cream);
}

.tb-bts__video-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.tb-bts__video-sub {
  font-size: var(--text-small);
  font-weight: 500;
}

/* the storefront photograph fills the video tile's height */
.tb-bts__stack {
  display: grid;
  min-height: 0;
}

.tb-bts__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-bts__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* closing caption row: ————— A LITTLE LOOK INSIDE THE BOX. ————— */
.tb-bts__foot {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 70%, transparent);
}

.tb-bts__foot::before,
.tb-bts__foot::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--tb-ink) 22%, transparent);
}

@media (max-width: 1024px) {
  .tb-bts__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* the statement leads on narrow screens */
  .tb-bts__content {
    grid-row: 1;
    grid-column: 1 / -1;
    padding-inline-start: 0;
  }

  .tb-bts__video-tile {
    grid-row: 2;
    grid-column: 1;
  }

  .tb-bts__stack {
    grid-row: 2;
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .tb-bts__grid {
    grid-template-columns: 1fr;
  }

  .tb-bts__content {
    grid-row: 1;
    grid-column: 1;
  }

  .tb-bts__video-tile {
    grid-row: 2;
    grid-column: 1;
    aspect-ratio: 1072 / 1920; /* the video's native frame on phones */
  }

  .tb-bts__stack {
    grid-row: 3;
    grid-column: 1;
  }

  .tb-bts__stack .tb-bts__photo {
    aspect-ratio: 1.02;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 06: testimonials (DESIGN/TESTIMONIAL.png)
   ------------------------------------------------------------------------- */
.section--testimonials {
  padding-inline: var(--tb-gutter);
  background: var(--tb-cream);
}

.section--testimonials__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.testimonials-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.25rem 3rem;
  align-items: end;
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
}

.testimonials-head__title {
  max-width: 13ch;
  line-height: 0.98;
}

.testimonials-head__intro {
  margin: 0 0 0.4rem;
  margin-inline-start: auto;
  font-size: var(--text-lead);
  color: color-mix(in srgb, var(--tb-ink) 82%, transparent);
}

/* Waterfall — the reviews flow through CSS columns, never a slider. */
.tb-testimonials {
  columns: 3;
  column-gap: clamp(0.75rem, 1.1vw, 1.1rem);
}

.tb-testimonial {
  break-inside: avoid;
  margin: 0 0 clamp(0.75rem, 1.1vw, 1.1rem);
  padding: clamp(1.1rem, 1.6vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--tb-ink) 10%, transparent);
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

/* stars — two stacked rows, the fill row clipped to the rating width */
.tb-stars {
  position: relative;
  display: inline-flex;
  color: var(--tb-ink);
}

.tb-stars__row {
  display: inline-flex;
  gap: 0.12em;
}

.tb-stars__row--fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--tb-rating-fill, 100%)) 0 0);
}

.tb-stars--big {
  margin-block-start: 1rem;
}

.tb-stars--big .tb-star {
  width: clamp(1.35rem, 1.9vw, 1.7rem);
  height: auto;
}

.tb-testimonial__rating .tb-star {
  width: 0.85rem;
  height: auto;
}

/* rating summary card */
.tb-testimonial--rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--tb-accent);
  border-color: transparent;
}

.tb-rating__score {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
}

.tb-rating__value {
  font-size: clamp(3.25rem, 5.5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.tb-rating__base {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.tb-rating__source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  font-size: var(--text-body);
  font-weight: 700;
}

.tb-rating__g {
  display: block;
}

.tb-rating__place {
  margin: 0.35rem 0 0;
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--tb-ink) 78%, transparent);
}

.tb-rating__cta {
  width: 100%;
  margin-block-start: 1.1rem;
  justify-content: space-between;
}

.tb-rating__note {
  margin: 0.8rem 0 0;
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--tb-ink) 68%, transparent);
}

/* review cards */
.tb-testimonial__rating {
  display: inline-flex;
  gap: 0.1rem;
  align-items: center;
  margin: 0;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tb-ink) 7%, transparent);
  color: var(--tb-ink);
}

.tb-testimonial__quote {
  margin: 0.9rem 0 0;
  font-size: 3rem;
  line-height: 0.6;
  color: color-mix(in srgb, var(--tb-ink) 38%, transparent);
}

.tb-testimonial__text {
  margin: 0.45rem 0 0;
  font-size: var(--text-body);
  line-height: 1.55;
}

.tb-testimonial__author {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-block-start: 1.1rem;
  padding-block-start: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--tb-ink) 12%, transparent);
}

.tb-testimonial__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

/* review photo — only rendered for reviews that carry a real attachment */
.tb-testimonial__photo {
  margin: 1.1rem 0 0;
  overflow: hidden;
  border-radius: var(--tb-radius);
}

.tb-testimonial__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
}

.tb-testimonial__name {
  font-weight: 700;
}

.tb-testimonials__foot {
  margin-block-start: clamp(1.25rem, 2vw, 2rem);
}

.tb-testimonials__share {
  font-weight: 600;
}

@media (max-width: 1100px) {
  .tb-testimonials {
    columns: 2;
  }
}

@media (max-width: 900px) {
  .testimonials-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .testimonials-head__intro {
    margin-inline-start: 0;
  }
}

@media (max-width: 700px) {
  .tb-testimonials {
    columns: 1;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 07: delivery platforms (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.section--delivery {
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 5rem);
  padding-inline: var(--tb-gutter);
  background: var(--tb-accent);
}

.section--delivery__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-delivery__copy {
  min-width: 0;
}

.tb-delivery__title {
  margin: 0;
}

.tb-delivery__lead {
  margin: var(--gap-subheading) 0 0;
  max-inline-size: 68ch;
}

/* The three partner marks, separated by hairline rules. */
.tb-delivery__platforms {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-platform {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
  min-width: 0;
  padding-inline: clamp(0.5rem, 1.2vw, 1.25rem);
  text-align: center;
}

.tb-platform + .tb-platform {
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-ink) 32%, transparent);
}

/* Official brand logos, sized to read at the same width on the band — the
   intrinsic ratios differ a lot (Wolt 2.75:1, Uber Eats 6.2:1, Lieferando 4.4:1),
   so each gets its own width and max-width keeps it inside the cell. */
.tb-platform__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(1.6rem, 1.1rem + 1.6vw, 2.9rem);
}

.tb-platform__logo--wolt {
  width: clamp(4.6rem, 0.6rem + 7.6vw, 8rem);
}

.tb-platform__logo--uber-eats {
  width: clamp(5.6rem, 0.6rem + 9vw, 9.6rem);
}

.tb-platform__logo--lieferando {
  width: clamp(5.6rem, 0.6rem + 9vw, 9.6rem);
}

.tb-platform__caption {
  font-size: var(--text-small);
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-ink) 78%, transparent);
}

/* -------------------------------------------------------------------------
   Homepage — section 08: find us (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.section--find-us {
  padding-inline: var(--tb-gutter);
  background: var(--tb-cream);
}

.section--find-us__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-find__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.tb-find__title {
  margin: 0;
}

.tb-find__lead {
  margin: var(--gap-subheading) 0 0;
  font-size: var(--text-lead);
  font-weight: 500;
  max-inline-size: 40ch;
}

.tb-find__address {
  margin: 1.35rem 0 0;
  font-style: normal;
  font-weight: 500;
}

/* Opening hours — a compact day/time list, today highlighted (site timezone). */
.tb-find__hours {
  margin-block-start: clamp(1.5rem, 2.5vw, 2rem);
}

.tb-find__hours-title {
  margin: 0 0 0.7rem;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 72%, transparent);
}

.tb-find__hours-list {
  margin: 0;
  max-inline-size: 19rem;
}

.tb-find__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.32rem;
  font-size: var(--text-small);
}

.tb-find__hours-row dt {
  font-weight: 500;
}

.tb-find__hours-row dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tb-find__hours-row.is-today dt,
.tb-find__hours-row.is-today dd {
  font-weight: 700;
}

.tb-find__hours-row.is-today dt::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: var(--tb-accent);
  vertical-align: 0.08em;
}

.tb-find__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--gap-cta);
}

/* Outlined button on light surfaces (the inverse of .tb-button--ghost). */
.tb-button--outline {
  border: 1px solid color-mix(in srgb, var(--tb-ink) 55%, transparent);
  background: transparent;
  color: var(--tb-ink);
}

.tb-button--outline:hover,
.tb-button--outline:focus {
  background: var(--tb-ink);
  color: var(--tb-cream);
}

/* Embedded Google Maps preview — the one third-party request on the page.
   A 4:3 box reserves the space while the iframe lazy-loads. */
.tb-find__map {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #e9e6e1;
  aspect-ratio: 4 / 3;
}

.tb-find__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -------------------------------------------------------------------------
   Homepage — section 09: good questions / FAQ (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.section--faq {
  padding-inline: var(--tb-gutter);
  background: var(--tb-white);
}

.section--faq__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-faq__grid {
  display: grid;
  /* the list column keeps the design's wider share (it now leads on the left) */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.tb-faq__title {
  margin: 0;
}

/* The FAQ list leads, the statement follows (request of 2026-09-20: the two
   columns are swapped visually; the DOM keeps the heading first so it is
   announced before the questions). */
.tb-faq__list {
  grid-column: 1;
  grid-row: 1;
  border-block-start: 1px solid color-mix(in srgb, var(--tb-ink) 18%, transparent);
}

.tb-faq__intro {
  grid-column: 2;
}

.tb-faq__item {
  border-block-end: 1px solid color-mix(in srgb, var(--tb-ink) 18%, transparent);
}

.tb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.3rem;
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.tb-faq__question::-webkit-details-marker {
  display: none;
}

.tb-faq__question:focus-visible {
  outline: 2px solid var(--tb-ink);
  outline-offset: 4px;
}

.tb-faq__icon {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.tb-faq__bar {
  position: absolute;
  top: calc(50% - 0.8px);
  left: 0;
  width: 100%;
  height: 1.6px;
  background: currentColor;
}

.tb-faq__bar--vertical {
  top: 0;
  left: calc(50% - 0.8px);
  width: 1.6px;
  height: 100%;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.tb-faq__item[open] .tb-faq__bar--vertical {
  transform: scaleY(0);
  opacity: 0;
}

.tb-faq__answer {
  padding-block-end: 1.4rem;
}

.tb-faq__answer p {
  margin: 0;
}

@media (max-width: 1100px) {
  .section--delivery__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-delivery__platforms {
    max-width: 38rem;
  }
}

@media (max-width: 900px) {
  .tb-find__grid,
  .tb-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-find__map {
    order: 2;
  }

  /* single column: the statement comes first again */
  .tb-faq__list,
  .tb-faq__intro {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .tb-platform {
    gap: 0.85rem;
    padding-inline: 0.6rem;
  }

  .tb-delivery__platforms {
    padding-inline: 0;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 02b: the good stuff inside (USP band, DESIGN/USP.png)
   Rendered on ink (request of 2026-09-21) instead of the design's cream.
   ------------------------------------------------------------------------- */
.section--usp {
  padding-inline: var(--tb-gutter);
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.section--usp__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-usp__head {
  max-inline-size: 66rem;
}

.tb-usp__title {
  margin: 0;
}

.tb-usp__lead {
  margin: var(--gap-subheading) 0 0;
  max-inline-size: 72ch;
  color: color-mix(in srgb, var(--tb-cream) 82%, transparent);
}

.tb-usp__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-usp__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 475 / 359; /* the design's card frame */
  object-fit: cover;
}

.tb-usp__label {
  margin: clamp(1.15rem, 1.8vw, 1.6rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.85rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  text-transform: uppercase;
}

/* the short accent dash above each title (as in the design) */
.tb-usp__label::before {
  content: "";
  display: block;
  width: clamp(2rem, 2.8vw, 2.75rem);
  height: 3px;
  margin-block-end: clamp(0.7rem, 1.1vw, 1rem);
  background: var(--tb-accent);
}

.tb-usp__text {
  margin: 0.55rem 0 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--tb-cream) 78%, transparent);
}

.tb-usp__cta {
  margin: clamp(2rem, 3.4vw, 3rem) 0 0;
}

.tb-usp__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px solid var(--tb-accent);
  color: var(--tb-cream);
  font-weight: 600;
  text-decoration: none;
}

.tb-usp__cta a:hover,
.tb-usp__cta a:focus-visible {
  color: var(--tb-accent);
}

@media (max-width: 900px) {
  .tb-usp__list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 2.75rem);
  }

  .tb-usp__img {
    max-width: 36rem;
  }
}

/* -------------------------------------------------------------------------
   Content
   ------------------------------------------------------------------------- */
.post-list {
  display: grid;
  gap: 1.5rem;
}

.post-card {
  border: 1px solid color-mix(in srgb, var(--tb-ink) 14%, transparent);
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
  padding: 1.5rem;
}

.empty-state {
  padding: 2.5rem 1.5rem;
  border-radius: var(--tb-radius-media);
  background: var(--tb-accent);
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------------------------
   Footer — masthead, three columns, legal bar (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.site-footer {
  padding-inline: var(--tb-gutter);
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.site-footer__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem) 0;
  container-type: inline-size;
}

.site-footer__masthead {
  text-align: center;
}

/* The oversized wordmark fills the content column exactly: "THE BOX DONUT"
   measures 5.414em in Anton, so 18.47cqi tracks the container's content box
   (the vw clamp is the fallback for browsers without container queries). */
.site-footer__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 17vw, 16.2rem);
  font-size: min(18.47cqi, 16.2rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.94;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-footer__city {
  margin: 0.65rem 0 0;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-block-start: clamp(2.25rem, 3.5vw, 3.75rem);
  padding-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

.site-footer__columns > * {
  margin: 0;
}

.site-footer__columns > * + * {
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-cream) 32%, transparent);
  padding-inline-start: clamp(1.25rem, 3vw, 3rem);
}

.site-footer__statement {
  font-size: var(--text-lead);
  font-weight: 500;
  max-inline-size: 16ch;
}

.site-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu li + li {
  margin-block-start: 0.45rem;
}

.site-footer__handle,
.site-footer__follow {
  font-weight: 600;
}

.site-footer__follow {
  margin-block-start: 0.45rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  border-block-start: 1px solid color-mix(in srgb, var(--tb-cream) 32%, transparent);
  padding-block: 1.35rem 1.5rem;
  font-size: var(--text-small);
  font-weight: 500;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  /* keeps the legal links clear of the floating back-to-top button */
  padding: 0 3.25rem 0 0;
  list-style: none;
}

/* Back to top — floats above the content at the bottom right; revealed by
   JavaScript after scrolling (works as a plain anchor jump without it). */
.tb-totop {
  position: fixed;
  z-index: 60;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--tb-cream) 28%, transparent);
  border-radius: 50%;
  background: var(--tb-ink);
  color: var(--tb-cream);
  box-shadow: 0 10px 28px rgba(24, 22, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
    background 0.2s ease, color 0.2s ease;
}

.tb-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tb-totop:hover,
.tb-totop:focus-visible {
  background: var(--tb-accent);
  color: var(--tb-ink);
}

.tb-totop svg {
  display: block;
  width: 1.15rem;
  height: auto;
}

/* -------------------------------------------------------------------------
   Catering page (template-catering.php) — /en/catering, /de/catering
   Built from the homepage design language (DESIGN/CATERING.png, ENDING.png):
   hero with the catering video, what we bring, gallery, how it works and the
   enquiry band. Band rhythm: white → cream → white → ink → accent.
   ------------------------------------------------------------------------- */
.section--catpage-hero,
.section--catpage-offer,
.section--catpage-gallery,
.section--catpage-steps,
.section--catpage-enquiry {
  padding-inline: var(--tb-gutter);
}

.section--catpage-hero {
  background: var(--tb-white);
}

.section--catpage-offer {
  background: var(--tb-cream);
}

.section--catpage-gallery {
  background: var(--tb-white);
}

.section--catpage-steps {
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.section--catpage-enquiry {
  background: var(--tb-accent);
  color: var(--tb-ink);
}

.section--catpage-hero__inner,
.section--catpage-offer__inner,
.section--catpage-gallery__inner,
.section--catpage-steps__inner,
.section--catpage-enquiry__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-catpage__title {
  margin: 0;
}

/* --- hero --------------------------------------------------------------- */
.tb-catpage-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.tb-catpage-hero__title {
  margin: 0;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.015em;
  max-inline-size: 20ch;
}

.tb-catpage-hero__lead {
  margin: var(--gap-subheading) 0 0;
  max-inline-size: 44ch;
}

.tb-catpage-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--gap-cta);
}

/* the portrait catering video (shared tile classes + click-to-play) */
.tb-catpage-hero__media {
  justify-self: center;
  inline-size: 100%;
  max-inline-size: clamp(16rem, 22vw, 21rem);
}

/* --- what we bring ------------------------------------------------------ */
.tb-catpage-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catpage-offer__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-catpage-offer__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tb-catpage-offer__item-title {
  margin: clamp(1.15rem, 1.8vw, 1.6rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.85rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  text-transform: uppercase;
}

/* the short accent dash above each title (as in the USP band) */
.tb-catpage-offer__item-title::before {
  content: "";
  display: block;
  width: clamp(2rem, 2.8vw, 2.75rem);
  height: 3px;
  margin-block-end: clamp(0.7rem, 1.1vw, 1rem);
  background: var(--tb-accent);
}

.tb-catpage-offer__text {
  margin: 0.55rem 0 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--tb-ink) 78%, transparent);
}

/* --- gallery ------------------------------------------------------------ */
.tb-catpage-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catpage-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-catpage-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* the wide donut banner spans the full row in its natural ratio */
.tb-catpage-gallery__item--full {
  grid-column: 1 / -1;
}

.tb-catpage-gallery__item--full img {
  aspect-ratio: 1840 / 450;
}

/* --- how it works ------------------------------------------------------- */
.tb-catpage-steps__eyebrow {
  color: color-mix(in srgb, var(--tb-cream) 78%, transparent);
}

.tb-catpage-steps__title {
  margin: 0;
}

.tb-catpage-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catpage-steps__item {
  padding-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--tb-cream) 26%, transparent);
}

.tb-catpage-steps__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-synthesis: none;
  line-height: 1;
  color: var(--tb-accent);
}

.tb-catpage-steps__text {
  margin: 0.9rem 0 0;
  max-inline-size: 28ch;
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-cream) 88%, transparent);
}

/* --- enquiry ------------------------------------------------------------ */
.tb-catpage-enquiry__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}

@media (min-width: 981px) {
  .tb-catpage-enquiry__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    grid-template-areas:
      "intro form"
      "meta  form";
  }

  .tb-catpage-enquiry__intro {
    grid-area: intro;
  }

  .tb-catpage-enquiry__form {
    grid-area: form;
  }

  .tb-catpage-enquiry__meta {
    grid-area: meta;
    align-self: end;
  }
}

.tb-catpage-enquiry__title {
  margin: 0;
  max-inline-size: 22ch;
}

.tb-catpage-enquiry__lead {
  margin: var(--gap-subheading) 0 0;
}

.tb-catpage-enquiry__meta {
  padding-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
  border-block-start: 1px solid color-mix(in srgb, var(--tb-ink) 28%, transparent);
}

.tb-catpage-enquiry__handle {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 700;
}

.tb-catpage-enquiry__handle a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tb-catpage-enquiry__address {
  margin: 0.5rem 0 0;
  font-weight: 500;
}

.tb-catpage-enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--gap-cta);
}

/* --- enquiry form (FluentForm output, brand-styled) --------------------- */
.tb-ff-form form[class*="fluent_form_"] {
  /* FluentForm themes its widgets from this variable (declared on the form
     element) — point it at the brand */
  --fluentform-primary: var(--tb-ink);
}

.tb-ff-form .fluentform {
  padding: clamp(1.5rem, 2.6vw, 2.5rem);
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-ff-form .ff-el-group {
  margin-block-end: 1.15rem;
}

.tb-ff-form .ff-el-input--label label {
  display: block;
  margin-block-end: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 62%, transparent);
}

/* required marker (FluentForm writes its own; keep it subtle and on-brand) */
.tb-ff-form .ff-el-is-required.asterisk-right label::after,
.tb-ff-form .ff-el-is-required.asterisk-left label::before {
  color: var(--tb-accent-deep);
}

.tb-ff-form .ff-el-form-control {
  inline-size: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid color-mix(in srgb, var(--tb-ink) 22%, transparent);
  border-radius: var(--tb-radius);
  background: var(--tb-white);
  font: inherit;
  font-size: 1rem;
  color: var(--tb-ink);
}

.tb-ff-form .ff-el-form-control:focus {
  outline: 2px solid var(--tb-accent);
  outline-offset: 1px;
  border-color: var(--tb-accent-deep);
}

.tb-ff-form textarea.ff-el-form-control {
  min-block-size: 7rem;
  resize: vertical;
}

/* the name element renders its two sub-fields itself (inside .ff-t-container);
   the wrapper must not halve them again */
.tb-ff-form .ff-name-field-wrapper {
  display: block;
}

/* GDPR consent row */
.tb-ff-form .ff-el-input--content:has(.ff_gdpr_field) {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.tb-ff-form .ff_gdpr_field {
  inline-size: 1.1rem;
  block-size: 1.1rem;
  margin: 0.15rem 0 0;
  accent-color: var(--tb-accent-deep);
  flex: 0 0 auto;
}

.tb-ff-form .ff-el-input--content:has(.ff_gdpr_field) label,
.tb-ff-form .ff_gdpr_field + label,
.tb-ff-form label[for*="gdpr"] {
  font-size: 0.9rem;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-ink) 82%, transparent);
}

.tb-ff-form label[for*="gdpr"] a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* submit button = the site's ink button (specificity above form.fluent_form_N …) */
.tb-ff-form .fluentform .ff-btn.ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-block-size: 2.9rem;
  padding: 0.7rem clamp(1.4rem, 2.2vw, 2.1rem);
  border: 0;
  border-radius: var(--tb-radius);
  background: var(--tb-ink);
  color: var(--tb-cream);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s ease;
}

.tb-ff-form .fluentform .ff-btn.ff-btn-submit:hover,
.tb-ff-form .fluentform .ff-btn.ff-btn-submit:focus-visible {
  background: var(--tb-ink-soft);
}

/* validation + success messages */
.tb-ff-form .ff-el-is-error .ff-el-form-control {
  border-color: #b3261e;
}

.tb-ff-form .error {
  display: block;
  margin-block-start: 0.35rem;
  font-size: 0.86rem;
  color: #b3261e;
}

.tb-ff-form .ff-message-success {
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--tb-accent);
  border-radius: var(--tb-radius);
  background: color-mix(in srgb, var(--tb-accent) 16%, var(--tb-white));
  font-weight: 500;
}

@media (max-width: 980px) {
  .tb-catering__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .tb-catering__labels {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .tb-catering__media {
    grid-template-columns: 1fr;
  }

  .tb-catering__tile--video {
    aspect-ratio: 376 / 544; /* the video's native frame on phones */
  }

  .tb-catering__stack {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
  }

  .tb-catering__stack .tb-catering__tile {
    aspect-ratio: 1.06;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 05: coffee & good company / behind the scenes
   (DESIGN/BEHIND_THE_SCENES_REDESIGN.png)
   ------------------------------------------------------------------------- */
.section--bts {
  --tb-bts-gap: clamp(0.75rem, 1.1vw, 1.1rem);
  padding-inline: var(--tb-gutter);
  background: var(--tb-cream);
}

.section--bts__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-bts__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.09fr) minmax(0, 1.01fr) minmax(0, 0.99fr);
  gap: clamp(1rem, 1.6vw, 1.5rem);
}

.tb-bts__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* the statement column keeps the generous column gap of the sections above
     (the tiles stay on the tighter 1.6vw rhythm) */
  padding-inline-start: clamp(1.25rem, 2.9vw, 2.75rem);
}

.tb-bts__title {
  max-width: 12ch;
  line-height: 1;
}

.tb-bts__lead {
  margin: var(--gap-heading) 0 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--tb-ink) 82%, transparent);
}

/* pushed towards the bottom of the column, like the design */
.tb-bts__hello {
  margin-block-start: auto;
  padding-block-start: clamp(1.75rem, 3vw, 2.75rem);
  font-weight: 500;
}

.tb-bts__social {
  display: flex;
  gap: clamp(1rem, 1.5vw, 1.4rem);
  align-items: center;
  width: 100%;
  margin-block-start: clamp(1.4rem, 2.2vw, 2rem);
  padding: clamp(1.25rem, 1.8vw, 1.6rem);
  border-radius: var(--tb-radius-media);
  background: var(--tb-accent);
}

.tb-bts__social-icon {
  color: var(--tb-ink);
}

.tb-bts__social-icon svg {
  display: block;
  width: clamp(2.75rem, 3.6vw, 3.5rem);
  height: auto;
}

.tb-bts__social-body {
  padding-inline-start: clamp(1rem, 1.5vw, 1.4rem);
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-ink) 30%, transparent);
}

.tb-bts__social-title {
  margin: 0;
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  line-height: 1.05;
}

.tb-bts__social-text {
  margin: 0.5rem 0 0;
  font-size: var(--text-small);
  line-height: 1.5;
}

.tb-bts__social-link {
  display: inline-block;
  margin-block-start: 0.65rem;
  font-size: var(--text-small);
  font-weight: 700;
}

.tb-bts__social-handle {
  margin: 0.15rem 0 0;
  font-size: var(--text-small);
}

/* the grand opening video — portrait tile, click-to-play with sound; it
   stretches to the row height (the statement column is the tallest) */
.tb-bts__video-tile {
  position: relative;
  height: 100%;
  aspect-ratio: 451 / 848; /* design proportions of the tile */
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-ink-soft);
}

.tb-bts__video-tile video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tb-bts__video-tile::after {
  content: "";
  position: absolute;
  inset: 55% 0 0;
  pointer-events: none;
  background: linear-gradient(rgba(24, 22, 22, 0) 0%, rgba(24, 22, 22, 0.62) 100%);
}

.tb-bts__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  place-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--tb-cream);
  cursor: pointer;
}

.tb-bts__video-tile.is-ready .tb-bts__play {
  display: grid;
}

.tb-bts__play-icon svg {
  display: block;
  width: clamp(4.5rem, 7vw, 6.25rem);
  height: auto;
  filter: drop-shadow(0 4px 18px rgba(24, 22, 22, 0.45));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.tb-bts__play:hover .tb-bts__play-icon svg,
.tb-bts__play:focus-visible .tb-bts__play-icon svg {
  transform: scale(1.06);
}

.tb-bts__video-tile.is-playing .tb-bts__play-icon svg {
  opacity: 0;
}

.tb-bts__video-tile.is-playing .tb-bts__play:hover .tb-bts__play-icon svg,
.tb-bts__video-tile.is-playing .tb-bts__play:focus-visible .tb-bts__play-icon svg {
  opacity: 1;
}

.tb-bts__play:focus-visible {
  outline: 2px solid var(--tb-cream);
  outline-offset: -6px;
  border-radius: var(--tb-radius-media);
}

.tb-bts__video-caption {
  position: absolute;
  z-index: 3;
  inset-inline: 1rem;
  bottom: clamp(1.1rem, 2vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  align-items: center;
  text-align: center;
  pointer-events: none;
  color: var(--tb-cream);
}

.tb-bts__video-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.tb-bts__video-sub {
  font-size: var(--text-small);
  font-weight: 500;
}

/* the storefront photograph fills the video tile's height */
.tb-bts__stack {
  display: grid;
  min-height: 0;
}

.tb-bts__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-bts__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* closing caption row: ————— A LITTLE LOOK INSIDE THE BOX. ————— */
.tb-bts__foot {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 70%, transparent);
}

.tb-bts__foot::before,
.tb-bts__foot::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--tb-ink) 22%, transparent);
}

@media (max-width: 1024px) {
  .tb-bts__grid {
    grid-template-columns: 1fr 1fr;
  }

  /* the statement leads on narrow screens */
  .tb-bts__content {
    grid-row: 1;
    grid-column: 1 / -1;
    padding-inline-start: 0;
  }

  .tb-bts__video-tile {
    grid-row: 2;
    grid-column: 1;
  }

  .tb-bts__stack {
    grid-row: 2;
    grid-column: 2;
  }
}

@media (max-width: 640px) {
  .tb-bts__grid {
    grid-template-columns: 1fr;
  }

  .tb-bts__content {
    grid-row: 1;
    grid-column: 1;
  }

  .tb-bts__video-tile {
    grid-row: 2;
    grid-column: 1;
    aspect-ratio: 1072 / 1920; /* the video's native frame on phones */
  }

  .tb-bts__stack {
    grid-row: 3;
    grid-column: 1;
  }

  .tb-bts__stack .tb-bts__photo {
    aspect-ratio: 1.02;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 06: testimonials (DESIGN/TESTIMONIAL.png)
   ------------------------------------------------------------------------- */
.section--testimonials {
  padding-inline: var(--tb-gutter);
  background: var(--tb-cream);
}

.section--testimonials__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.testimonials-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.25rem 3rem;
  align-items: end;
  margin-block-end: clamp(1.75rem, 3vw, 2.75rem);
}

.testimonials-head__title {
  max-width: 13ch;
  line-height: 0.98;
}

.testimonials-head__intro {
  margin: 0 0 0.4rem;
  margin-inline-start: auto;
  font-size: var(--text-lead);
  color: color-mix(in srgb, var(--tb-ink) 82%, transparent);
}

/* Waterfall — the reviews flow through CSS columns, never a slider. */
.tb-testimonials {
  columns: 3;
  column-gap: clamp(0.75rem, 1.1vw, 1.1rem);
}

.tb-testimonial {
  break-inside: avoid;
  margin: 0 0 clamp(0.75rem, 1.1vw, 1.1rem);
  padding: clamp(1.1rem, 1.6vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--tb-ink) 10%, transparent);
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

/* stars — two stacked rows, the fill row clipped to the rating width */
.tb-stars {
  position: relative;
  display: inline-flex;
  color: var(--tb-ink);
}

.tb-stars__row {
  display: inline-flex;
  gap: 0.12em;
}

.tb-stars__row--fill {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--tb-rating-fill, 100%)) 0 0);
}

.tb-stars--big {
  margin-block-start: 1rem;
}

.tb-stars--big .tb-star {
  width: clamp(1.35rem, 1.9vw, 1.7rem);
  height: auto;
}

.tb-testimonial__rating .tb-star {
  width: 0.85rem;
  height: auto;
}

/* rating summary card */
.tb-testimonial--rating {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--tb-accent);
  border-color: transparent;
}

.tb-rating__score {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
}

.tb-rating__value {
  font-size: clamp(3.25rem, 5.5vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.tb-rating__base {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
}

.tb-rating__source {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.1rem 0 0;
  font-size: var(--text-body);
  font-weight: 700;
}

.tb-rating__g {
  display: block;
}

.tb-rating__place {
  margin: 0.35rem 0 0;
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--tb-ink) 78%, transparent);
}

.tb-rating__cta {
  width: 100%;
  margin-block-start: 1.1rem;
  justify-content: space-between;
}

.tb-rating__note {
  margin: 0.8rem 0 0;
  font-size: var(--text-small);
  color: color-mix(in srgb, var(--tb-ink) 68%, transparent);
}

/* review cards */
.tb-testimonial__rating {
  display: inline-flex;
  gap: 0.1rem;
  align-items: center;
  margin: 0;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tb-ink) 7%, transparent);
  color: var(--tb-ink);
}

.tb-testimonial__quote {
  margin: 0.9rem 0 0;
  font-size: 3rem;
  line-height: 0.6;
  color: color-mix(in srgb, var(--tb-ink) 38%, transparent);
}

.tb-testimonial__text {
  margin: 0.45rem 0 0;
  font-size: var(--text-body);
  line-height: 1.55;
}

.tb-testimonial__author {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  margin-block-start: 1.1rem;
  padding-block-start: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--tb-ink) 12%, transparent);
}

.tb-testimonial__avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  object-fit: cover;
}

/* review photo — only rendered for reviews that carry a real attachment */
.tb-testimonial__photo {
  margin: 1.1rem 0 0;
  overflow: hidden;
  border-radius: var(--tb-radius);
}

.tb-testimonial__photo img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
}

.tb-testimonial__name {
  font-weight: 700;
}

.tb-testimonials__foot {
  margin-block-start: clamp(1.25rem, 2vw, 2rem);
}

.tb-testimonials__share {
  font-weight: 600;
}

@media (max-width: 1100px) {
  .tb-testimonials {
    columns: 2;
  }
}

@media (max-width: 900px) {
  .testimonials-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .testimonials-head__intro {
    margin-inline-start: 0;
  }
}

@media (max-width: 700px) {
  .tb-testimonials {
    columns: 1;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 07: delivery platforms (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.section--delivery {
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 5rem);
  padding-inline: var(--tb-gutter);
  background: var(--tb-accent);
}

.section--delivery__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-delivery__copy {
  min-width: 0;
}

.tb-delivery__title {
  margin: 0;
}

.tb-delivery__lead {
  margin: var(--gap-subheading) 0 0;
  max-inline-size: 68ch;
}

/* The three partner marks, separated by hairline rules. */
.tb-delivery__platforms {
  display: flex;
  align-items: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tb-platform {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.2rem;
  min-width: 0;
  padding-inline: clamp(0.5rem, 1.2vw, 1.25rem);
  text-align: center;
}

.tb-platform + .tb-platform {
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-ink) 32%, transparent);
}

/* Official brand logos, sized to read at the same width on the band — the
   intrinsic ratios differ a lot (Wolt 2.75:1, Uber Eats 6.2:1, Lieferando 4.4:1),
   so each gets its own width and max-width keeps it inside the cell. */
.tb-platform__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(1.6rem, 1.1rem + 1.6vw, 2.9rem);
}

.tb-platform__logo--wolt {
  width: clamp(4.6rem, 0.6rem + 7.6vw, 8rem);
}

.tb-platform__logo--uber-eats {
  width: clamp(5.6rem, 0.6rem + 9vw, 9.6rem);
}

.tb-platform__logo--lieferando {
  width: clamp(5.6rem, 0.6rem + 9vw, 9.6rem);
}

.tb-platform__caption {
  font-size: var(--text-small);
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-ink) 78%, transparent);
}

/* -------------------------------------------------------------------------
   Homepage — section 08: find us (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.section--find-us {
  padding-inline: var(--tb-gutter);
  background: var(--tb-cream);
}

.section--find-us__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-find__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.tb-find__title {
  margin: 0;
}

.tb-find__lead {
  margin: var(--gap-subheading) 0 0;
  font-size: var(--text-lead);
  font-weight: 500;
  max-inline-size: 40ch;
}

.tb-find__address {
  margin: 1.35rem 0 0;
  font-style: normal;
  font-weight: 500;
}

/* Opening hours — a compact day/time list, today highlighted (site timezone). */
.tb-find__hours {
  margin-block-start: clamp(1.5rem, 2.5vw, 2rem);
}

.tb-find__hours-title {
  margin: 0 0 0.7rem;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 72%, transparent);
}

.tb-find__hours-list {
  margin: 0;
  max-inline-size: 19rem;
}

.tb-find__hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.32rem;
  font-size: var(--text-small);
}

.tb-find__hours-row dt {
  font-weight: 500;
}

.tb-find__hours-row dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tb-find__hours-row.is-today dt,
.tb-find__hours-row.is-today dd {
  font-weight: 700;
}

.tb-find__hours-row.is-today dt::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: var(--tb-accent);
  vertical-align: 0.08em;
}

.tb-find__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--gap-cta);
}

/* Outlined button on light surfaces (the inverse of .tb-button--ghost). */
.tb-button--outline {
  border: 1px solid color-mix(in srgb, var(--tb-ink) 55%, transparent);
  background: transparent;
  color: var(--tb-ink);
}

.tb-button--outline:hover,
.tb-button--outline:focus {
  background: var(--tb-ink);
  color: var(--tb-cream);
}

/* Embedded Google Maps preview — the one third-party request on the page.
   A 4:3 box reserves the space while the iframe lazy-loads. */
.tb-find__map {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #e9e6e1;
  aspect-ratio: 4 / 3;
}

.tb-find__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -------------------------------------------------------------------------
   Homepage — section 09: good questions / FAQ (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.section--faq {
  padding-inline: var(--tb-gutter);
  background: var(--tb-white);
}

.section--faq__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-faq__grid {
  display: grid;
  /* the list column keeps the design's wider share (it now leads on the left) */
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.tb-faq__title {
  margin: 0;
}

/* The FAQ list leads, the statement follows (request of 2026-09-20: the two
   columns are swapped visually; the DOM keeps the heading first so it is
   announced before the questions). */
.tb-faq__list {
  grid-column: 1;
  grid-row: 1;
  border-block-start: 1px solid color-mix(in srgb, var(--tb-ink) 18%, transparent);
}

.tb-faq__intro {
  grid-column: 2;
}

.tb-faq__item {
  border-block-end: 1px solid color-mix(in srgb, var(--tb-ink) 18%, transparent);
}

.tb-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.3rem;
  font-size: var(--text-body);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.tb-faq__question::-webkit-details-marker {
  display: none;
}

.tb-faq__question:focus-visible {
  outline: 2px solid var(--tb-ink);
  outline-offset: 4px;
}

.tb-faq__icon {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
}

.tb-faq__bar {
  position: absolute;
  top: calc(50% - 0.8px);
  left: 0;
  width: 100%;
  height: 1.6px;
  background: currentColor;
}

.tb-faq__bar--vertical {
  top: 0;
  left: calc(50% - 0.8px);
  width: 1.6px;
  height: 100%;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.tb-faq__item[open] .tb-faq__bar--vertical {
  transform: scaleY(0);
  opacity: 0;
}

.tb-faq__answer {
  padding-block-end: 1.4rem;
}

.tb-faq__answer p {
  margin: 0;
}

@media (max-width: 1100px) {
  .section--delivery__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-delivery__platforms {
    max-width: 38rem;
  }
}

@media (max-width: 900px) {
  .tb-find__grid,
  .tb-faq__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tb-find__map {
    order: 2;
  }

  /* single column: the statement comes first again */
  .tb-faq__list,
  .tb-faq__intro {
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 560px) {
  .tb-platform {
    gap: 0.85rem;
    padding-inline: 0.6rem;
  }

  .tb-delivery__platforms {
    padding-inline: 0;
  }
}

/* -------------------------------------------------------------------------
   Homepage — section 02b: the good stuff inside (USP band, DESIGN/USP.png)
   Rendered on ink (request of 2026-09-21) instead of the design's cream.
   ------------------------------------------------------------------------- */
.section--usp {
  padding-inline: var(--tb-gutter);
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.section--usp__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-usp__head {
  max-inline-size: 66rem;
}

.tb-usp__title {
  margin: 0;
}

.tb-usp__lead {
  margin: var(--gap-subheading) 0 0;
  max-inline-size: 72ch;
  color: color-mix(in srgb, var(--tb-cream) 82%, transparent);
}

.tb-usp__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-usp__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 475 / 359; /* the design's card frame */
  object-fit: cover;
}

.tb-usp__label {
  margin: clamp(1.15rem, 1.8vw, 1.6rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.85rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  text-transform: uppercase;
}

/* the short accent dash above each title (as in the design) */
.tb-usp__label::before {
  content: "";
  display: block;
  width: clamp(2rem, 2.8vw, 2.75rem);
  height: 3px;
  margin-block-end: clamp(0.7rem, 1.1vw, 1rem);
  background: var(--tb-accent);
}

.tb-usp__text {
  margin: 0.55rem 0 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--tb-cream) 78%, transparent);
}

.tb-usp__cta {
  margin: clamp(2rem, 3.4vw, 3rem) 0 0;
}

.tb-usp__cta a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block-end: 0.45rem;
  border-block-end: 1px solid var(--tb-accent);
  color: var(--tb-cream);
  font-weight: 600;
  text-decoration: none;
}

.tb-usp__cta a:hover,
.tb-usp__cta a:focus-visible {
  color: var(--tb-accent);
}

@media (max-width: 900px) {
  .tb-usp__list {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 2.75rem);
  }

  .tb-usp__img {
    max-width: 36rem;
  }
}

/* -------------------------------------------------------------------------
   Content
   ------------------------------------------------------------------------- */
.post-list {
  display: grid;
  gap: 1.5rem;
}

.post-card {
  border: 1px solid color-mix(in srgb, var(--tb-ink) 14%, transparent);
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
  padding: 1.5rem;
}

.empty-state {
  padding: 2.5rem 1.5rem;
  border-radius: var(--tb-radius-media);
  background: var(--tb-accent);
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------------------------
   Footer — masthead, three columns, legal bar (DESIGN/ENDING.png)
   ------------------------------------------------------------------------- */
.site-footer {
  padding-inline: var(--tb-gutter);
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.site-footer__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
  padding-block: clamp(2.75rem, 2rem + 3.5vw, 4.5rem) 0;
  container-type: inline-size;
}

.site-footer__masthead {
  text-align: center;
}

/* The oversized wordmark fills the content column exactly: "THE BOX DONUT"
   measures 5.414em in Anton, so 18.47cqi tracks the container's content box
   (the vw clamp is the fallback for browsers without container queries). */
.site-footer__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 17vw, 16.2rem);
  font-size: min(18.47cqi, 16.2rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 0.94;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-footer__city {
  margin: 0.65rem 0 0;
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-block-start: clamp(2.25rem, 3.5vw, 3.75rem);
  padding-block-end: clamp(1.75rem, 3vw, 2.5rem);
}

.site-footer__columns > * {
  margin: 0;
}

.site-footer__columns > * + * {
  border-inline-start: 1px solid color-mix(in srgb, var(--tb-cream) 32%, transparent);
  padding-inline-start: clamp(1.25rem, 3vw, 3rem);
}

.site-footer__statement {
  font-size: var(--text-lead);
  font-weight: 500;
  max-inline-size: 16ch;
}

.site-footer__menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__menu li + li {
  margin-block-start: 0.45rem;
}

.site-footer__handle,
.site-footer__follow {
  font-weight: 600;
}

.site-footer__follow {
  margin-block-start: 0.45rem;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  border-block-start: 1px solid color-mix(in srgb, var(--tb-cream) 32%, transparent);
  padding-block: 1.35rem 1.5rem;
  font-size: var(--text-small);
  font-weight: 500;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  /* keeps the legal links clear of the floating back-to-top button */
  padding: 0 3.25rem 0 0;
  list-style: none;
}

/* Back to top — floats above the content at the bottom right; revealed by
   JavaScript after scrolling (works as a plain anchor jump without it). */
.tb-totop {
  position: fixed;
  z-index: 60;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid color-mix(in srgb, var(--tb-cream) 28%, transparent);
  border-radius: 50%;
  background: var(--tb-ink);
  color: var(--tb-cream);
  box-shadow: 0 10px 28px rgba(24, 22, 22, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
    background 0.2s ease, color 0.2s ease;
}

.tb-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.tb-totop:hover,
.tb-totop:focus-visible {
  background: var(--tb-accent);
  color: var(--tb-ink);
}

.tb-totop svg {
  display: block;
  width: 1.15rem;
  height: auto;
}

/* -------------------------------------------------------------------------
   Catering page (template-catering.php) — /en/catering, /de/catering
   Built from the homepage design language (DESIGN/CATERING.png, ENDING.png):
   hero with the catering video, what we bring, gallery, how it works and the
   enquiry band. Band rhythm: white → cream → white → ink → accent.
   ------------------------------------------------------------------------- */
.section--catpage-hero,
.section--catpage-offer,
.section--catpage-gallery,
.section--catpage-steps,
.section--catpage-enquiry {
  padding-inline: var(--tb-gutter);
}

.section--catpage-hero {
  background: var(--tb-white);
}

.section--catpage-offer {
  background: var(--tb-cream);
}

.section--catpage-gallery {
  background: var(--tb-white);
}

.section--catpage-steps {
  background: var(--tb-ink);
  color: var(--tb-cream);
}

.section--catpage-enquiry {
  background: var(--tb-accent);
  color: var(--tb-ink);
}

.section--catpage-hero__inner,
.section--catpage-offer__inner,
.section--catpage-gallery__inner,
.section--catpage-steps__inner,
.section--catpage-enquiry__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-catpage__title {
  margin: 0;
}

/* --- hero --------------------------------------------------------------- */
.tb-catpage-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: center;
}

.tb-catpage-hero__title {
  margin: 0;
  font-size: var(--text-hero);
  line-height: 0.98;
  letter-spacing: -0.015em;
  max-inline-size: 20ch;
}

.tb-catpage-hero__lead {
  margin: var(--gap-subheading) 0 0;
  max-inline-size: 44ch;
}

.tb-catpage-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block-start: var(--gap-cta);
}

/* the portrait catering video (shared tile classes + click-to-play) */
.tb-catpage-hero__media {
  justify-self: center;
  inline-size: 100%;
  max-inline-size: clamp(16rem, 22vw, 21rem);
}

/* --- what we bring ------------------------------------------------------ */
.tb-catpage-offer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catpage-offer__media {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-catpage-offer__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.tb-catpage-offer__item-title {
  margin: clamp(1.15rem, 1.8vw, 1.6rem) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1.05rem + 1.05vw, 1.85rem);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.04;
  text-transform: uppercase;
}

/* the short accent dash above each title (as in the USP band) */
.tb-catpage-offer__item-title::before {
  content: "";
  display: block;
  width: clamp(2rem, 2.8vw, 2.75rem);
  height: 3px;
  margin-block-end: clamp(0.7rem, 1.1vw, 1rem);
  background: var(--tb-accent);
}

.tb-catpage-offer__text {
  margin: 0.55rem 0 0;
  max-inline-size: 36ch;
  color: color-mix(in srgb, var(--tb-ink) 78%, transparent);
}

/* --- gallery ------------------------------------------------------------ */
.tb-catpage-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.25rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catpage-gallery__item {
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-catpage-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* the wide donut banner spans the full row in its natural ratio */
.tb-catpage-gallery__item--full {
  grid-column: 1 / -1;
}

.tb-catpage-gallery__item--full img {
  aspect-ratio: 1840 / 450;
}

/* --- how it works ------------------------------------------------------- */
.tb-catpage-steps__eyebrow {
  color: color-mix(in srgb, var(--tb-cream) 78%, transparent);
}

.tb-catpage-steps__title {
  margin: 0;
}

.tb-catpage-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3.2vw, 2.6rem);
  margin: clamp(2.25rem, 4vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
}

.tb-catpage-steps__item {
  padding-block-start: clamp(1.5rem, 2.5vw, 2.25rem);
  border-top: 1px solid color-mix(in srgb, var(--tb-cream) 26%, transparent);
}

.tb-catpage-steps__number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  font-synthesis: none;
  line-height: 1;
  color: var(--tb-accent);
}

.tb-catpage-steps__text {
  margin: 0.9rem 0 0;
  max-inline-size: 28ch;
  font-weight: 500;
  color: color-mix(in srgb, var(--tb-cream) 88%, transparent);
}

@media (max-width: 980px) {
  .tb-catpage-hero__grid {
    grid-template-columns: 1fr;
  }

  .tb-catpage-hero__media {
    max-inline-size: 22rem;
    margin-inline: auto;
  }


}

@media (max-width: 860px) {
  .tb-catpage-offer__grid,
  .tb-catpage-steps__list {
    grid-template-columns: 1fr;
  }

  .tb-catpage-steps__text {
    max-inline-size: 42ch;
  }
}

@media (max-width: 640px) {
  .tb-catpage-gallery__grid {
    grid-template-columns: 1fr;
  }

  .tb-catpage-gallery__item--full img {
    aspect-ratio: 3 / 2;
  }
}

/* -------------------------------------------------------------------------
   Legal pages (template-legal.php) — Impressum/imprint, Datenschutz, terms
   Accent-dash eyebrow, hairline-separated sections with accent numerals and a
   sticky "on this page" card when the page has at least three sections.
   ------------------------------------------------------------------------- */
.section--legal {
  padding-inline: var(--tb-gutter);
  background: var(--tb-white);
}

.section--legal__inner {
  max-width: var(--tb-manifesto);
  margin-inline: auto;
}

.tb-legal__header {
  max-inline-size: 52rem;
  padding-block-end: clamp(1.5rem, 2.6vw, 2.25rem);
  border-bottom: 1px solid color-mix(in srgb, var(--tb-ink) 16%, transparent);
}

.section--legal .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section--legal .eyebrow::before {
  content: "";
  inline-size: clamp(1.5rem, 2.4vw, 2.25rem);
  block-size: 3px;
  background: var(--tb-accent);
}

.tb-legal__title {
  margin: 0;
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  line-height: 1.02;
}

.tb-legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-block-start: clamp(2rem, 3.5vw, 3rem);
}

@media (min-width: 980px) {
  .tb-legal__layout--aside {
    grid-template-columns: 17rem minmax(0, 1fr);
  }
}

/* Imprint pages (EN/DE): the legal text and the contact form split the page
   50/50 — the template swaps the TOC aside for the form there. */
@media (min-width: 980px) {
  .tb-legal__layout--contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.tb-legal__contact {
  min-inline-size: 0;
}

.tb-legal__contact-title {
  margin: 0 0 0.85rem;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  line-height: 1.05;
}

.tb-legal__contact-lead {
  margin: 0 0 1.75rem;
  max-inline-size: 34ch;
  font-size: var(--text-lead);
  line-height: 1.6;
  color: color-mix(in srgb, var(--tb-ink) 80%, transparent);
}

.tb-legal__aside {
  display: none;
}

@media (min-width: 980px) {
  .tb-legal__aside {
    display: block;
  }
}

.tb-legal__toc {
  position: sticky;
  top: calc(var(--tb-header-h, 7rem) + 1.75rem);
  padding: clamp(1.25rem, 1.8vw, 1.75rem);
  border-radius: var(--tb-radius-media);
  background: color-mix(in srgb, var(--tb-accent) 18%, var(--tb-white));
}

.tb-legal__toc-title {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tb-ink) 70%, transparent);
}

.tb-legal__toc-list {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: tb-legal-toc;
}

.tb-legal__toc-list li {
  counter-increment: tb-legal-toc;
}

.tb-legal__toc-list li + li {
  margin-block-start: 0.55rem;
}

.tb-legal__toc-list a {
  display: flex;
  gap: 0.55rem;
  font-size: 0.88rem;
  line-height: 1.35;
  text-decoration: none;
  color: color-mix(in srgb, var(--tb-ink) 82%, transparent);
}

.tb-legal__toc-list a::before {
  content: counter(tb-legal-toc, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: 0.86em;
  line-height: 1.5;
  color: var(--tb-accent-deep);
}

.tb-legal__toc-list a:hover {
  color: var(--tb-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tb-legal__body {
  max-inline-size: 44rem;
  color: color-mix(in srgb, var(--tb-ink) 88%, transparent);
}

.tb-legal__body > * + * {
  margin-block-start: 1.1em;
}

.tb-legal__body p,
.tb-legal__body li {
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
  line-height: 1.65;
}

.tb-legal__body h2 {
  margin-block-start: clamp(2.25rem, 3.5vw, 3rem);
  padding-block-start: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid color-mix(in srgb, var(--tb-ink) 14%, transparent);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  line-height: 1.12;
}

.tb-legal__body h2:first-child,
.tb-legal__body .tb-legal__lead + h2 {
  margin-block-start: 0;
  padding-block-start: 0;
  border-top: 0;
}

.tb-legal__num {
  display: inline-block;
  min-inline-size: 1.7em;
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  color: var(--tb-accent-deep);
}

.tb-legal__body h3 {
  margin-block-start: 1.4em;
  font-size: 1.15rem;
}

.tb-legal__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tb-legal__body a:hover {
  color: var(--tb-accent-deep);
}

.tb-legal__body ul,
.tb-legal__body ol {
  padding-inline-start: 1.25em;
}

.tb-legal__body li + li {
  margin-block-start: 0.4em;
}

.tb-legal__body strong {
  font-weight: 700;
}

.tb-legal__body .tb-legal__lead {
  font-size: var(--text-lead);
  color: var(--tb-ink);
}

/* legal pages without sections (rare): keep the text blocks apart */
.tb-legal__body p + p:not(.tb-legal__lead) {
  padding-block-start: 1.1em;
  border-top: 1px solid color-mix(in srgb, var(--tb-ink) 10%, transparent);
}

/* the address block right under the lead stays plain */
.tb-legal__body .tb-legal__lead + p {
  padding-block-start: 0;
  border-top: 0;
}

/* -------------------------------------------------------------------------
   Small screens
   ------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .site-nav {
    display: none;
  }

  .site-header__actions {
    display: flex;
  }
}

@media (max-width: 720px) {
  .site-footer__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }

  .site-footer__columns > * + * {
    border-inline-start: 0;
    padding-inline-start: 0;
    border-block-start: 1px solid color-mix(in srgb, var(--tb-cream) 22%, transparent);
    padding-block-start: 1.5rem;
  }

  .site-footer__statement {
    max-inline-size: none;
  }

}

/* phones: the section titles run edge to edge — the ch caps above are desktop
   line-break tuning (all three sections are single-column at this width) */
@media (max-width: 640px) {
  .tb-catering__title,
  .tb-bts__title,
  .testimonials-head__title {
    max-width: none;
    width: 100%;
  }
}

/* desktop only: behind the scenes — the storefront photograph steps aside and
   the grand-opening video + statement split the row 50/50 (request 2026-09-24);
   ≤ 1024 px keeps the photograph, and the video tile stops sizing the row so
   it stretches to the statement column like before */
@media (min-width: 1025px) {
  .tb-bts__stack {
    display: none;
  }

  .tb-bts__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .tb-bts__video-tile {
    aspect-ratio: auto;
  }
}

/* catering hero — the portrait video tile is now the donut-wall image
   placeholder (EN + DE, request 2026-09-24), full width at every size, and
   desktop splits the hero 50/50 like the behind-the-scenes band */
.tb-catpage-hero__media {
  justify-self: stretch;
  max-inline-size: none;
  margin: 0;
  overflow: hidden;
  border-radius: var(--tb-radius-media);
  background: var(--tb-surface);
}

.tb-catpage-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 981px) {
  .tb-catpage-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* find us — the shop address sits under the map (request of 2026-09-26),
   on one line and glued to the map frame at every width */
.tb-find__map-col {
  min-inline-size: 0;
}

@media (max-width: 900px) {
  /* single column: the copy stays first and the map + address follow it */
  .tb-find__map-col {
    order: 2;
  }
}

/* German line-break fixes on desktop (request of 2026-09-26): the explicit
   <br>s in the two statements must hold — "Richtig guter Kaffee." is longer
   than the 42 rem hero column, "Gute Gesellschaft." than the 13ch title cap */
@media (min-width: 1025px) {
  .hero__title {
    inline-size: max-content;
    max-inline-size: none;
  }
}

@media (min-width: 641px) {
  .testimonials-head__title {
    max-width: 16ch;
  }
}