/* ATELIER DOUGH — purist, editorial styles. Plain CSS, no build step. */

:root {
  --ink: #111111;
  --paper: #ffffff;
  --muted: #6b6b6b;
  --line: #e4e2df;
  --placeholder-bg: #f2f0ed;
  --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1);
  --tracking-wide: 0.28em;
  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Safety net: nothing on the page should ever be able to scroll the whole
     document sideways. The doughnut slider scrolls internally (its own
     overflow-x: auto), independent of this. Only set on html, not body —
     setting it on both breaks position:sticky in some browsers. */
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p, dl, dd, dt {
  margin: 0;
}

.wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) {
  .wrap { padding: 0 2rem; }
}
@media (min-width: 768px) {
  .wrap { padding: 0 2.5rem; }
}

.uppercase-label {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-size: 0.72rem;
  color: var(--muted);
}

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

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  z-index: 100;
  transition: top 0.2s var(--ease-editorial);
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 4px;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: transparent;
  transition: background-color 0.5s var(--ease-editorial), backdrop-filter 0.5s var(--ease-editorial);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1600px;
  margin: 0 auto;
  padding: 1.5rem 1rem;
}
@media (min-width: 640px) {
  .site-header__inner { padding: 2rem 2rem; }
}
@media (min-width: 768px) {
  .site-header__inner { padding: 2rem 2.5rem; }
}
.site-header__logo {
  grid-column: 2;
  /* Spans every row of the header grid (just row 1 on desktop, two rows on
     mobile where status+language stack in column 3) so it always centers
     on the full header height, never just the first row. */
  grid-row: 1 / -1;
  align-self: center;
  text-align: center;
  font-size: 1.15rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  color: var(--ink);
}
@media (min-width: 640px) {
  .site-header__logo { font-size: 1.35rem; }
}
@media (min-width: 768px) {
  .site-header__logo { font-size: 1.6rem; }
}

/* ---------- "Open now" status indicator ---------- */
.site-header__status {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  white-space: nowrap;
}
.site-header__status-dot {
  position: relative;
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c7c5c1;
}
.site-header__status.is-open .site-header__status-dot {
  background: #7ed957;
}
.site-header__status.is-open .site-header__status-dot::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: #7ed957;
  opacity: 0.6;
  animation: status-pulse 2.4s ease-out infinite;
}
.site-header__status.is-open .site-header__status-label { color: var(--ink); }

.site-header__status-label--full { display: none; }
@media (min-width: 1024px) {
  .site-header__status-label--short { display: none; }
  .site-header__status-label--full { display: inline; }
}

@keyframes status-pulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  70% { transform: scale(2); opacity: 0; }
  100% { transform: scale(2); opacity: 0; }
}

/* ---------- Language switcher ---------- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
/* Scoped to the header specifically (.lang-switch is reused, unaffected,
   in the footer) so it can be placed independently in the header grid. */
.site-header__inner > .lang-switch {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  align-self: center;
}
.lang-switch button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  font: inherit;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  transition: color 0.3s var(--ease-editorial);
}
.lang-switch button[aria-pressed="true"] {
  color: var(--ink);
}
.lang-switch button:hover {
  color: var(--ink);
}
.lang-switch__sep {
  color: var(--line);
  font-size: 0.72rem;
}

/* ========================================================================
   HERO / DOUGHNUT SLIDER — rebuilt clean.

   The one rule that matters: the image is always a fixed, uniform height
   — never derived from the text below it. That's what keeps the hairline
   under the photo landing at exactly the same height on every slide, no
   matter how long that doughnut's description happens to be. Everything
   else (inset, gap, slide width) is driven by three custom properties set
   on .hero, so the whole hero can be retuned from one place.
   ======================================================================== */
.hero {
  --hero-inset: 1.25rem;   /* left inset shared by eyebrow, slider and info */
  --hero-gap: 1.5rem;      /* gap between slides */
  --hero-slide-w: 88vw;    /* active slide width */
  --hero-img-h: 42vh;      /* fixed image height — identical on every slide */
  padding-bottom: 2rem;
}
@media (min-width: 480px) {
  .hero { --hero-img-h: 46vh; }
}
@media (min-width: 640px) {
  .hero { --hero-inset: 2rem; --hero-gap: 1.75rem; --hero-slide-w: 78vw; --hero-img-h: 52vh; }
}
@media (min-width: 768px) {
  .hero { --hero-inset: 2.75rem; --hero-gap: 2rem; --hero-slide-w: 64vw; --hero-img-h: 58vh; }
}

.hero-eyebrow {
  text-align: center;
  padding: 0 var(--hero-inset) 1.5rem;
}

.slider {
  display: flex;
  align-items: flex-start;
  gap: var(--hero-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Left inset for the peek effect. Right side gets a matching "phantom"
     padding so the last slide has enough scroll room to snap flush to
     the left inset just like every slide before it (otherwise the
     scroll container simply runs out of scrollable width one slide
     early and the last slide stalls short of the shared start position). */
  padding: 0 calc(100vw - var(--hero-slide-w) - var(--hero-inset)) 0 var(--hero-inset);
  cursor: grab;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.slider::-webkit-scrollbar { display: none; }
.slider:active { cursor: grabbing; }

.slide {
  flex: 0 0 auto;
  width: var(--hero-slide-w);
  scroll-snap-align: start;
}

.slide__image {
  position: relative;
  width: 100%;
  height: var(--hero-img-h);
  min-height: 220px;
  overflow: hidden;
  background: var(--paper);
}
.slide__image img {
  width: 100%;
  height: 100%;
  /* Always shows the whole doughnut — never cropped. Letterboxes on
     white if the frame's proportions don't exactly match the photo's. */
  object-fit: contain;
}
/* Generic fallback shown by mountImage() when an image fails to load —
   used by the doughnut slider, bakery photo and Instagram grid alike. */
.placeholder-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--placeholder-bg);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  text-align: center;
  padding: 1rem;
}

.slide__info {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: 1.5rem;
  padding: 1.5rem 0.75rem 0 30px;
}

.slide__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}
.slide__tags li {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.slide__tags-flavor {
  color: var(--ink) !important;
  font-weight: 500;
}

.slide__name {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0;
}
@media (min-width: 640px) { .slide__name { font-size: 1.85rem; } }

.slide__body {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: flex-start;
}

.slide__desc {
  flex: 1 1 260px;
  max-width: 46ch;
  font-size: 0.9rem;
  line-height: 1.7;
  color: rgba(17, 17, 17, 0.8);
}

.slide__meta {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.9rem;
  font-size: 0.75rem;
  color: var(--muted);
}
.slide__meta dt {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.slide__meta dd {
  margin-top: 0.25rem;
  color: rgba(17, 17, 17, 0.7);
}

.slide__calories {
  font-size: 0.75rem;
  color: var(--muted);
}

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  padding: 0 var(--hero-inset);
}
.slider-controls button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  transition: opacity 0.3s var(--ease-editorial);
}
.slider-controls button:hover { opacity: 0.6; }
.slider-controls button:disabled { opacity: 0.2; pointer-events: none; }
.slider-controls__counter {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}

/* ---------- Bakery section ---------- */
.bakery {
  padding: 5rem 1rem;
}
@media (min-width: 640px) { .bakery { padding: 7rem 2rem; } }
@media (min-width: 768px) { .bakery { padding: 9rem 2.5rem; } }

.bakery__grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .bakery__grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; align-items: center; }
}
@media (min-width: 1024px) {
  .bakery__grid { grid-template-columns: 1.6fr 1fr; }
}

.bakery__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--placeholder-bg);
}
@media (min-width: 640px) { .bakery__image { aspect-ratio: 16 / 11; } }
@media (min-width: 768px) { .bakery__image { aspect-ratio: 4 / 3; } }
.bakery__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bakery__text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.bakery__text h2 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.bakery__text p {
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(17,17,17,0.8);
}
@media (min-width: 640px) { .bakery__text p { font-size: 1.05rem; } }

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s var(--ease-editorial), transform 0.9s var(--ease-editorial);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Drinks menu ---------- */
.drinks {
  padding: 5rem 1rem;
}
@media (min-width: 640px) { .drinks { padding: 7rem 2rem; } }
@media (min-width: 768px) { .drinks { padding: 9rem 2.5rem; } }

.drinks__heading {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  max-width: 1600px;
  margin: 0 auto;
}

.drinks__grid {
  max-width: 1600px;
  margin: 3.5rem auto 0;
  display: grid;
  gap: 4rem;
}
@media (min-width: 768px) {
  .drinks__grid { grid-template-columns: 1fr 1fr; gap: 5rem; }
}

.drinks__category h3 {
  margin-bottom: 2rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.drinks__subgroup {
  margin-bottom: 2.5rem;
}
.drinks__subgroup:last-child { margin-bottom: 0; }
.drinks__subgroup h4 {
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: rgba(17,17,17,0.6);
}
.drinks__subgroup ul li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.drinks__subgroup ul li:last-child { border-bottom: none; }
.drinks__subgroup .item-note {
  margin-left: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}
.drinks__subgroup .item-sizes {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.drinks__subgroup .item-sizes .item-sizes__name {
  font-size: 0.9rem;
}
.drinks__subgroup .item-sizes .item-sizes__row {
  display: flex;
  justify-content: space-between;
  color: rgba(17,17,17,0.7);
  font-size: 0.85rem;
}

.drinks__note {
  margin-top: 3.5rem;
  text-align: center;
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
}

/* ---------- Instagram feed ---------- */
.instagram {
  padding: 5rem 1rem;
}
@media (min-width: 640px) { .instagram { padding: 7rem 2rem; } }
@media (min-width: 768px) { .instagram { padding: 9rem 2.5rem; } }

.instagram__heading {
  text-align: center;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  max-width: 1600px;
  margin: 0 auto;
}
.instagram__handle {
  display: block;
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  text-decoration: none;
}
.instagram__handle:hover { color: var(--ink); }

/* Instagram's own embed.js renders each blockquote into its native widget
   (handles photos, carousels and reels/video alike) — we just lay the three
   out in a centered, wrapping row and leave their internal styling to
   Instagram. */
.instagram__grid {
  max-width: 1600px;
  margin: 3rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.instagram__grid > * {
  flex: 1 1 326px;
  max-width: 400px;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 4.5rem 1rem;
}
@media (min-width: 640px) { .site-footer { padding: 5.5rem 2rem; } }
@media (min-width: 768px) { .site-footer { padding: 6.5rem 2.5rem; } }

.site-footer__grid {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 3rem; }
}

.site-footer__hours { margin-bottom: 1.5rem; }
@media (min-width: 768px) {
  .site-footer__hours { margin-bottom: 0; margin-right: 1.5rem; }
}

.site-footer h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.site-footer__brand span {
  display: block;
  font-size: 0.9rem;
}
.site-footer__brand .brand-name {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.site-footer__brand .brand-city,
.site-footer__brand .brand-claim {
  color: var(--muted);
}
.site-footer ul,
.site-footer nav {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: rgba(17,17,17,0.8);
}
.site-footer li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.site-footer a {
  text-decoration: none;
  transition: color 0.3s var(--ease-editorial);
}
.site-footer a:hover { color: var(--ink); }
.site-footer .instagram-link {
  margin-top: 0.75rem;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
  display: inline-block;
}
.site-footer__bottom {
  max-width: 1600px;
  margin: 4.5rem auto 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.site-footer__design {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  max-width: 1600px;
  margin: 3.5rem auto 0;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.site-footer__design-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.site-footer__design-logo {
  height: 20px;
  width: auto;
  display: block;
}

/* ---------- Simple content pages (contact / jobs / imprint) ---------- */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 5rem 1rem;
}
@media (min-width: 640px) { .page { padding: 7rem 2rem; } }

.page h1 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.page__intro {
  margin-top: 1.5rem;
  max-width: 46ch;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(17,17,17,0.8);
}
.page__notice {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--muted);
}
.page dl {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.page dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.page dd {
  margin-top: 0.5rem;
  font-size: 1rem;
  color: rgba(17,17,17,0.8);
  line-height: 1.6;
}
.page dd.small {
  font-size: 0.85rem;
  color: rgba(17,17,17,0.7);
}
.page__legal-text {
  max-width: 60ch;
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(17,17,17,0.75);
  white-space: pre-line;
}
.page a {
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 4px;
}
.page a:hover { color: rgba(17,17,17,0.7); }
.page .hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.opening-hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.15rem 0;
}

/* ---------- Custom cursor ---------- */
#custom-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
  display: none;
  will-change: transform;
}
body.custom-cursor-active,
body.custom-cursor-active * {
  cursor: none !important;
}
#custom-cursor svg {
  transition: transform 0.3s var(--ease-editorial);
}
#custom-cursor.is-interactive svg {
  transform: scale(1.25) rotate(25deg);
}
#custom-cursor svg circle {
  stroke: var(--ink);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Custom cursor: hard off on touch devices ----------
   initCustomCursor() in site.js already gates on (pointer:fine) and
   (hover:hover) before ever activating it, so touch devices never get it in
   the first place. This is a second, CSS-only guarantee that holds even if
   JS misbehaves — it can't match a desktop mouse, so desktop is unaffected. */
@media (hover: none), (pointer: coarse) {
  #custom-cursor { display: none !important; }
  body.custom-cursor-active,
  body.custom-cursor-active * {
    cursor: auto !important;
  }
}

/* ---------- Mobile-only interactive toggles: neutral base reset ----------
   These two <button> elements (ingredients/allergens/calories on a doughnut
   slide, and each drinks category heading) are new — they didn't exist
   before, so stripping the browser's default button chrome here is purely
   neutral: it makes them look like plain text everywhere, matching what was
   already on screen. The min-width:768px block further down forces their
   associated content permanently open and hides the buttons outright, so
   desktop can't change even if this reset were somehow wrong. */
.slide__meta-toggle,
.drinks__category-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.drinks__category-toggle {
  justify-content: space-between;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--muted);
}
.slide__meta-toggle-chevron,
.drinks__category-chevron {
  transition: transform 0.3s var(--ease-editorial);
}

/* ---------- Desktop safety net (>=768px) ----------
   Whatever the mobile-only accordion/toggle JS does to these classes, this
   guarantees the desktop layout that already exists today keeps rendering
   exactly as before. */
@media (min-width: 768px) {
  .slide__meta-toggle { display: none !important; }
  .slide__meta { display: flex !important; }
  .slide__calories { display: block !important; }

  .drinks__category-toggle .drinks__category-chevron { display: none; }
  .drinks__category-group,
  .drinks__subgroup {
    display: block !important;
  }
}

/* ========================================================================
   MOBILE ONLY (max-width: 767px)
   Everything below here is strictly additive and scoped to phones. It never
   fires at tablet/desktop widths (>=768px), so none of the existing rules
   above — which the desktop layout relies on — are touched or overridden
   outside of this query.
   ======================================================================== */
@media (max-width: 767px) {

  /* --- Header: logo centered, status directly beneath it, language
     switcher on the far right, showing only the next language in the
     EN -> DE -> FR -> EN cycle. Tapping it switches straight to that
     language (see nextLocaleInCycle() in site.js). --- */
  .site-header__logo {
    grid-row: 1;
  }
  .site-header__status {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    align-self: start;
    margin-top: 0.3rem;
    font-size: 0.62rem;
    gap: 0.4rem;
  }
  .site-header__inner > .lang-switch {
    grid-column: 3;
    grid-row: 1 / -1;
    justify-self: end;
    align-self: center;
  }
  .site-header__inner > .lang-switch .lang-switch__sep {
    display: none;
  }
  .site-header__inner > .lang-switch button {
    display: none;
  }
  .site-header__inner > .lang-switch button.lang-switch__next {
    display: block;
  }

  /* --- Hero: image + text never clipped, ingredients/allergens/calories collapsible --- */
  .hero {
    --hero-inset: 1.1rem;
    --hero-gap: 1.25rem;
  }
  .slide__name {
    overflow-wrap: break-word;
  }
  .slide__desc {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }
  .slide__body {
    min-width: 0;
  }

  .slide__meta,
  .slide__calories {
    display: none;
  }
  .slide__info.is-meta-open .slide__meta {
    display: flex;
  }
  .slide__info.is-meta-open .slide__calories {
    display: block;
  }
  .slide__meta-toggle {
    margin-top: 0.4rem;
    padding: 0.85rem 0;
    border-top: 1px solid var(--line);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--muted);
    justify-content: space-between;
  }
  .slide__info.is-meta-open .slide__meta-toggle-chevron {
    transform: rotate(180deg);
  }

  /* The ingredients/allergens panel content was sized for the desktop
     side-by-side layout; on mobile it's the whole panel width, so it can
     afford — and needs — larger, more readable text. */
  .slide__meta {
    gap: 1.15rem;
    font-size: 0.85rem;
  }
  .slide__meta dt {
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
  }
  .slide__meta dd {
    line-height: 1.55;
    overflow-wrap: break-word;
  }
  .slide__calories {
    margin-top: 1rem;
    font-size: 0.8rem;
  }

  /* --- Drinks menu: each category becomes a collapsible dropdown --- */
  .drinks__grid {
    gap: 0;
  }
  .drinks__category {
    border-bottom: 1px solid var(--line);
  }
  .drinks__category:first-child {
    border-top: 1px solid var(--line);
  }
  .drinks__category-toggle {
    padding: 1.25rem 0;
  }
  .drinks__category.is-open .drinks__category-chevron {
    transform: rotate(180deg);
  }
  .drinks__category-group {
    display: none;
    padding-bottom: 1.75rem;
  }
  .drinks__category.is-open .drinks__category-group {
    display: block;
  }
  .drinks__subgroup:first-child {
    margin-top: 0.25rem;
  }

  /* Long drink names wrap instead of pushing the price out of view. */
  .drinks__subgroup ul li {
    align-items: baseline;
  }
  .drinks__item-name,
  .item-sizes__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
  }
  .drinks__item-price,
  .item-sizes__price {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .item-sizes__row {
    min-width: 0;
  }

  /* --- Bakery + footer: stack cleanly, never overflow ---
     Grid/flex items default to min-width:auto, which sizes them to their
     content's intrinsic minimum and can force the container wider than the
     viewport. min-width:0 lets them shrink and wrap properly instead. */
  .bakery__grid > *,
  .drinks__grid > *,
  .site-footer__grid > * {
    min-width: 0;
  }
  .bakery__text p {
    overflow-wrap: break-word;
  }
  .site-footer li {
    flex-wrap: wrap;
    row-gap: 0.15rem;
  }
  .site-footer__brand,
  .site-footer nav,
  .site-footer ul {
    min-width: 0;
  }

  /* --- Instagram: horizontal swipeable slider, same idea as the doughnut
     slider. Instagram's own widget enforces a ~326px minimum width via
     inline styles, which is exactly why this works well as a slider on
     mobile rather than trying to force it to shrink/wrap. --- */
  .instagram__grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1.25rem;
    padding: 0 1.1rem;
    margin: 3rem 0 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .instagram__grid::-webkit-scrollbar {
    display: none;
  }
  .instagram__grid > * {
    flex: 0 0 88%;
    max-width: 400px;
    scroll-snap-align: start;
  }
}