/* ============================================================================
   Mobile optimizations — wyłącza efekty scroll i poprawia układ <=767px.
   Ładuje się PO głównym CSS Webflow, żeby nadpisać reguły.
   ============================================================================ */

/* === System typograficzny Przystań & Marina ==============================
   Poppins      — nagłówki, nawigacja i przyciski
   Satoshi      — akapity, opisy, formularze i mikrocopy
   Sentient     — cytaty i eleganckie akcenty redakcyjne
   Gowun Batang — wyłącznie wielki napis hero

   Satoshi i Sentient są hostowane lokalnie. Nie dodajemy nowych rodzin
   dla pojedynczych modułów — komponent ma korzystać z jednej z ról. */
:root {
  --font-heading: 'Poppins', 'Satoshi', Arial, sans-serif;
  --font-body: 'Satoshi', Arial, sans-serif;
  --font-editorial: 'Sentient', Georgia, serif;
  --font-hero: 'Gowun Batang', 'Sentient', Georgia, serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--font-body);
}

/* Mocne elementy strukturalne zachowują pisownię autora. Wersaliki są
   decyzją komponentu, a nie globalnym efektem ubocznym. */
.h1-style-2,
.h2-style-2,
.h2-style-2-lang,
.h2-style-2-lang2,
.h3-style-2,
.h3-style-lang,
.h4-style-2,
.gt-caption {
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
}

/* UI */
.button,
.button-zarezerwuj,
.button-zarezerwuj-rewers {
  font-family: var(--font-heading) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
}

/* Tekst ciągły. Wyrównanie do lewej zapobiega przypadkowym dużym odstępom
   pomiędzy słowami w krótkich i responsywnych kolumnach. */
.h5-style-1,
.h5-style-1-copy,
.h5-style-1-slider,
.h5-style-kontakt,
.h6-style-1,
.h7-style-1,
.form-field,
.style-3-collage-text,
.bio-text,
.gt-text {
  font-family: var(--font-body) !important;
  text-align: left;
}

/* Akcent redakcyjny */
.h4-style-3-front,
.h4-style-front,
.bio-quote {
  font-family: var(--font-editorial) !important;
}

/* === Jeden spójny KSZTAŁT przycisku "Zarezerwuj stolik" wszędzie na stronie
   głównej - trzy różne klasy (.button-zarezerwuj w hero, .button w
   stopce/Google Maps, .button-zarezerwuj-rewers w rozwijanym panelu
   rezerwacji) wszystkie dziedziczyły border-radius:0 z bazowej .w-button
   (Webflow) - stąd ostre, kwadratowe rogi wszędzie. Lekko zaokrąglone rogi
   (15px, nie pełna "pigułka" jak .ev-btn na innych stronach - to świadomie
   inny, delikatniejszy kształt tylko dla tego CTA) ujednolicone na
   wszystkich trzech.

   Kolor NIE ujednolicony do jednego wariantu: .button i .button-zarezerwuj
   już wcześniej współdzieliły ten sam brąz/kremowy tekst (#a55a2c/#f2f1e2,
   patrz DESIGN.md) na jasnym tle - to zostaje. .button-zarezerwuj-rewers
   ("rewers" = odwrócone kolory) celowo ma kremowe tło z ciemnym tekstem,
   bo pokazuje się w pełnoekranowym brązowym panelu menu (hamburger) - na
   tym samym brązowym tle brązowy przycisk był niemal niewidoczny. To
   różne dopasowanie tego samego kształtu do dwóch teł, nie niespójność. */
.button,
.button-zarezerwuj {
  background-color: #a55a2c !important;
  color: #f2f1e2 !important;
}
.button:hover,
.button-zarezerwuj:hover {
  background-color: #8d8f81 !important;
  color: #f2f1e2 !important;
}
.button,
.button-zarezerwuj,
.button-zarezerwuj-rewers {
  border-radius: 15px !important;
  transition: background-color 0.2s ease;
}
.button-zarezerwuj-rewers:hover {
  background-color: #e4dfd0 !important;
}

/* === Sekcje "Szef kuchni" i "Gospodarze" - edytorialny układ oparty na
   istniejącym systemie marki: Sentient w nazwiskach i cytacie, Poppins w
   małych etykietach oraz Satoshi w tekście ciągłym. Lżejszy krój nazwisk
   rozdziela wizualnie wyrazy i pasuje do eleganckich akcentów strony.
   Obie sekcje korzystają z tego samego dwukolumnowego układu tekst+portret.
   Te same role zastosowano w .gt-caption/.gt-text niżej, żeby cała ta część
   strony (bio + trójka zdjęć galerii) była spójna typograficznie.

   border-top na .bio-section (współdzielona przez sekcję szefa I gospodarzy)
   oraz na .gallery-trio poniżej - subtelna linia oddzielająca każdy blok
   od poprzedniego, w kolorze hairline z DESIGN.md (#ddd6c6). Efekt: jedna
   linia między tekstem o Forbes/Michelin a szefem, jedna między szefem a
   gospodarzami, jedna między gospodarzami a trójką zdjęć - stały rytm bez
   dodatkowego markupu, zamiast polegania samą przerwą (jak w homepage's
   collage sections wcześniej) - tu użytkownik chciał wyraźniejszego podziału. */
.bio-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 2.2rem);
  border-top: 1px solid #ddd6c6;
}
.bio-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a5e35;
  margin-bottom: 1rem;
}
.bio-heading {
  font-family: var(--font-editorial) !important;
  font-size: clamp(1.85rem, 3vw, 2.55rem);
  font-weight: 300 !important;
  letter-spacing: -0.025em;
  color: #1a1b1f;
  max-width: 700px;
  margin: 0 0 1.4rem;
  line-height: 1.08;
}
.bio-quote {
  border-left: 2px solid #a55a2c;
  padding-left: 1.25rem;
  margin: 0 0 1.6rem;
  max-width: 620px;
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 1.45vw, 1.25rem);
  line-height: 1.45;
  color: #3d382c;
}
.bio-text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.94rem, 0.95vw, 1rem);
  line-height: 1.65;
  color: #61533a;
  max-width: 700px;
}
.bio-text p {
  margin: 0 0 1.1rem;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.bio-text p:last-child {
  margin-bottom: 0;
}
.bio-split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4.5vw, 3.75rem);
  align-items: start;
}
/* Odwrócone kolumny (zdjęcie|tekst zamiast tekst|zdjęcie) - naprzemienny
   układ zdjęcie/tekst między sekcją szefa i gospodarzy, jak w innych
   miejscach na tej stronie (patrz historia zmian "alternate photo/text in
   Forbes section"), zamiast dwóch identycznie zorientowanych sekcji z rzędu. */
.bio-split-reverse {
  grid-template-columns: 0.9fr 1.1fr;
}
.bio-split-image {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.bio-split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 900px) {
  .bio-split {
    grid-template-columns: 1fr;
  }
  .bio-split-image {
    order: -1;
    max-width: 420px;
  }
}

/* Stały przycisk "zadzwoń" - bottom-left, po przeciwnej stronie niż
   .floating-nav (logo+hamburger, pinned top/right, z-index:100). Szczególnie
   przydatny na mobile - jedno tapnięcie do zadzwonienia, np. w trakcie
   jazdy samochodem, bez szukania numeru w stopce. Na najwęższych ekranach
   (<480px) zwężamy do samej ikony w kółku - większy, łatwiejszy cel dotyku,
   nie trzeba czytać numeru żeby wiedzieć co robi przycisk. Kolor/hover jak
   .ev-btn z innych stron (patrz DESIGN.md: fill #a55a2c, hover #8d8f81).

   Domyślnie ukryty (opacity:0) - .is-visible pokazuje go, przełączane przez
   JS w index.html wg jednej reguły: na mobile (<=767px) widoczny od razu,
   na desktopie dopiero po przescrollowaniu poza hero (żeby nie konkurował
   wizualnie z "Zarezerwuj stolik" na pierwszym ekranie - patrz DESIGN.md,
   ten CTA ma zawsze priorytet). W obu przypadkach znika też, gdy stopka
   wchodzi w widok - inaczej zasłaniał Copyright/informację o dofinansowaniu
   na samym dole strony (position:fixed nie respektuje przepływu dokumentu,
   więc bez tego zawsze siedziałby na wierzchu tego, co akurat jest w tym
   rogu ekranu). Cała logika widoczności jest scalona w jedną flagę JS
   (.is-visible), żeby nie żonglować kilkoma niezależnymi klasami w CSS. */
.call-fab {
  position: fixed;
  left: clamp(1rem, 3vw, 1.5rem);
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #a55a2c;
  color: #f2f1e2;
  text-decoration: none;
  border-radius: 100px;
  padding: 0.85rem 1.3rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
  transition: background-color 0.2s ease, transform 0.3s ease, opacity 0.3s ease;
}
.call-fab.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.call-fab:hover {
  background-color: #8d8f81;
  transform: translateY(-1px);
}
.call-fab-icon {
  flex: none;
}
.call-fab-text {
  white-space: nowrap;
}

@media (max-width: 479px) {
  .call-fab {
    padding: 0.9rem;
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  }
  .call-fab-text {
    display: none;
  }
}

/* Podpisy pod zdjęciami w galerii (kategoria + numer). */
.gallery-image-wrap {
  width: 100%;
}
.gallery-caption {
  margin-top: 0.5rem;
  font-family: Satoshi, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: #8a8062;
  text-transform: uppercase;
}

/* Trzy małe zdjęcia dań pod bio szefa - wypełniają pustą przestrzeń pod
   krótszą kolumną tekstu obok wysokiego portretu. */
.szef-dish-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.8vw;
  width: 100%;
  margin-top: 2vw;
  clear: both;
}
.szef-dish-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  float: none;
}
.szef-dish-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.szef-dish-item:hover img {
  transform: scale(1.06);
}
@media (max-width: 767px) {
  .szef-dish-row {
    gap: 2vw;
    margin-top: 4vw;
  }
}

/* === 2026 visual-system refinement ======================================
   The Forbes/Michelin statement is the typographic reference approved for
   the site: Sentient Light for editorial copy, Satoshi for interface text. */
.style-3-collage-text {
  font-family: var(--font-editorial) !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
}

/* One CTA system. Colour may reverse on a dark/brown surface, while shape,
   type, spacing and interaction remain identical. */
.button,
.button-copy,
.button-zarezerwuj,
.button-zarezerwuj-rewers,
.button-style,
.button-style-large,
.button-primary,
.ev-btn,
.form-button,
.pm-button {
  box-sizing: border-box !important;
  min-height: 48px !important;
  border: 1px solid #a55a2c !important;
  border-radius: 999px !important;
  padding: 0.82rem 1.45rem !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  justify-content: center !important;
  align-items: center !important;
  background: #a55a2c !important;
  color: #f7f3e8 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease,
    color 0.2s ease, transform 0.2s ease !important;
}

.button:hover,
.button-copy:hover,
.button-zarezerwuj:hover,
.button-style:hover,
.button-style-large:hover,
.button-primary:hover,
.ev-btn:hover,
.pm-button:hover {
  background: #211d19 !important;
  border-color: #211d19 !important;
  color: #f7f3e8 !important;
  transform: translateY(-1px);
}

.button-zarezerwuj-rewers {
  background: #f2f1e2 !important;
  border-color: #f2f1e2 !important;
  color: #211d19 !important;
}

.form-button {
  width: auto !important;
  display: inline-flex !important;
}

.form-button .h4-style-2 {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

.form-button .submit-button {
  display: none !important;
}

.form-button:hover {
  background: #211d19 !important;
  border-color: #211d19 !important;
  color: #f7f3e8 !important;
  transform: translateY(-1px);
}

/* Newsletter: the email field and CTA stay on one row; explicit marketing
   consent always occupies a calm, readable row below them. */
.newsletter-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem 1rem;
  align-items: center;
}

.newsletter-form .form-field {
  min-width: 0;
  margin: 0;
}

.newsletter-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  max-width: 42rem;
  color: #61594f;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.newsletter-consent input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.08rem 0 0;
  flex: 0 0 auto;
  accent-color: #a55a2c;
}

.newsletter-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media screen and (max-width: 767px) {
  .newsletter-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.85rem 0.75rem;
  }

  .newsletter-form .form-button {
    min-width: 6.5rem;
  }

  .newsletter-consent {
    font-size: 0.76rem;
  }

  /* Frequently used contact/footer links get a reliable touch target without
     changing their visual typography. */
  .section-footer a[href^="tel:"],
  .section-footer a[href^="mailto:"],
  .contact-info-footer a[href^="tel:"],
  .contact-info-footer a[href^="mailto:"],
  .privacy-footer a,
  .privacy-toc a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Hero CTA follows the same left edge as the introductory copy. The copy has
   a 40px editorial indent on desktop/tablet and no indent on mobile. */
.big-logo-text-wrapper .button-zarezerwuj {
  margin-left: 40px !important;
}

@media (max-width: 767px) {
  .big-logo-text-wrapper .button-zarezerwuj {
    margin-left: 0 !important;
  }
}

.button-zarezerwuj-rewers:hover {
  background: #211d19 !important;
  border-color: #211d19 !important;
  color: #f7f3e8 !important;
  transform: translateY(-1px);
}

.button:focus-visible,
.button-copy:focus-visible,
.button-zarezerwuj:focus-visible,
.button-zarezerwuj-rewers:focus-visible,
.button-style:focus-visible,
.button-style-large:focus-visible,
.button-primary:focus-visible,
.ev-btn:focus-visible,
.pm-button:focus-visible {
  outline: 3px solid #c87848 !important;
  outline-offset: 3px !important;
}

.button-zarezerwuj,
.button-zarezerwuj-rewers {
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
}

@media (max-width: 479px) {
  .button,
  .button-copy,
  .button-zarezerwuj,
  .button-zarezerwuj-rewers,
  .button-style,
  .button-style-large,
  .button-primary,
  .ev-btn,
  .pm-button {
    min-height: 50px !important;
    padding: 0.9rem 1.3rem !important;
    font-size: 0.88rem !important;
  }
}

/* === Minimal privacy policy ============================================= */
.privacy-page {
  margin: 0;
  background: #f2f1e2;
  color: #211d19;
  font-family: var(--font-body);
}

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

.privacy-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  padding: 0.9rem clamp(1.25rem, 4vw, 4.5rem);
  background: rgba(242, 241, 226, 0.94);
  border-bottom: 1px solid #d8d0be;
  backdrop-filter: blur(12px);
}

.privacy-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  color: inherit;
  text-decoration: none;
}

.privacy-brand img {
  width: 52px;
  height: 52px;
  object-fit: contain;
}

.privacy-brand span,
.privacy-home,
.privacy-languages a {
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: inherit;
}

.privacy-top-actions,
.privacy-languages {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.privacy-home,
.privacy-languages a {
  border-bottom: 1px solid transparent;
}

.privacy-home:hover,
.privacy-languages a:hover,
.privacy-languages a[aria-current='page'] {
  border-bottom-color: currentColor;
}

.privacy-main {
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: clamp(4.5rem, 9vw, 8.5rem) 0 clamp(5rem, 9vw, 9rem);
}

.privacy-hero {
  max-width: 900px;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid #d8d0be;
}

.privacy-eyebrow {
  margin: 0 0 1.1rem;
  color: #9a5e35;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.privacy-title {
  max-width: 850px;
  margin: 0;
  font-family: var(--font-editorial);
  font-size: clamp(3rem, 7vw, 6.6rem);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

.privacy-intro {
  max-width: 720px;
  margin: clamp(1.8rem, 3vw, 2.6rem) 0 0;
  color: #61594f;
  font-family: var(--font-editorial);
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.018em;
}

.privacy-updated {
  margin: 1.5rem 0 0;
  color: #7d7469;
  font-size: 0.78rem;
}

.privacy-layout {
  display: grid;
  grid-template-columns: minmax(180px, 0.28fr) minmax(0, 0.72fr);
  gap: clamp(3rem, 8vw, 8rem);
  padding-top: clamp(3rem, 6vw, 5.5rem);
  align-items: start;
}

.privacy-toc {
  position: sticky;
  top: 108px;
}

.privacy-toc-label {
  margin: 0 0 1rem;
  color: #9a5e35;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.privacy-toc a {
  display: block;
  padding: 0.35rem 0;
  color: #61594f;
  font-size: 0.84rem;
  line-height: 1.4;
  text-decoration: none;
}

.privacy-toc a:hover {
  color: #211d19;
}

.privacy-content {
  min-width: 0;
}

.privacy-section {
  scroll-margin-top: 110px;
  padding: 0 0 clamp(2.6rem, 5vw, 4.5rem);
  margin: 0 0 clamp(2.6rem, 5vw, 4.5rem);
  border-bottom: 1px solid #d8d0be;
}

.privacy-section:last-child {
  margin-bottom: 0;
}

.privacy-section h2 {
  margin: 0 0 1.35rem;
  font-family: var(--font-editorial);
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.privacy-section h3 {
  margin: 1.8rem 0 0.55rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.privacy-section p,
.privacy-section li {
  color: #61594f;
  font-size: clamp(0.95rem, 1.05vw, 1.04rem);
  line-height: 1.68;
}

.privacy-section p {
  margin: 0 0 1rem;
}

.privacy-section ul {
  margin: 0.7rem 0 1.2rem;
  padding-left: 1.15rem;
}

.privacy-section li + li {
  margin-top: 0.55rem;
}

.privacy-section a,
.privacy-footer a {
  color: inherit;
  text-underline-offset: 3px;
}

.privacy-note {
  margin-top: 1.5rem !important;
  padding: 1.25rem 1.35rem;
  background: #e9e4d5;
  border-left: 2px solid #a55a2c;
}

.privacy-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.privacy-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 4.5rem);
  background: #211d19;
  color: #f2f1e2;
}

.privacy-footer p {
  margin: 0.25rem 0;
  color: #d7d0c5;
  font-size: 0.84rem;
  line-height: 1.5;
}

.privacy-footer #pm-cookie-settings {
  color: #f2f1e2;
}

@media (max-width: 800px) {
  .privacy-topbar {
    min-height: 68px;
  }
  .privacy-brand span,
  .privacy-home {
    display: none;
  }
  .privacy-brand img {
    width: 46px;
    height: 46px;
  }
  .privacy-main {
    width: min(100% - 2rem, 680px);
    padding-top: 3.75rem;
  }
  .privacy-layout {
    grid-template-columns: 1fr;
    gap: 2.8rem;
  }
  .privacy-toc {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #d8d0be;
  }
  .privacy-toc-label {
    grid-column: 1 / -1;
  }
  .privacy-footer {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 420px) {
  .privacy-top-actions {
    gap: 0.65rem;
  }
  .privacy-languages {
    gap: 0.75rem;
  }
  .privacy-title {
    font-size: clamp(2.7rem, 15vw, 4.1rem);
  }
  .privacy-toc {
    grid-template-columns: 1fr;
  }
  .privacy-contact-row .pm-button {
    width: 100%;
  }
}

/* Zdjęcie zespołu z wyróżnieniem Michelin Guide 2026 (sekcja Forbes/Michelin
   na stronie głównej) - proste, samodzielne zdjęcie z podpisem, celowo poza
   złożoną siatką .section-collage żeby nie ruszać jej wyliczeń wysokości na
   desktopie. Działa tak samo na każdej szerokości poza wysokością zdjęcia,
   którą zwężamy na mobile niżej. */
.michelin-team-photo {
  width: 100%;
  margin: 0 0 2.5vw;
}
.michelin-team-photo-img {
  width: 100%;
  height: auto;
  display: block;
}
.michelin-team-photo-caption {
  margin-top: 0.8vw;
}

/* Zdjęcia szefa kuchni (.s3-image, używana zarówno dla zdjęcia w akcji jak
   i przy drzwiach) i zdjęcie sali (.s1-image-copy) mają w oryginalnym CSS
   sztywną wysokość w vw niezależną od proporcji zdjęcia (np. 27vw przy
   zdjęciu 2:3), więc przy object-fit:cover obcinały większość kadru.
   Wszystkie trzy pliki są w proporcji 2:3 (portret) - wymuszamy tę samą
   proporcję przez aspect-ratio zamiast zgadywać wysokość w vw, więc całe
   zdjęcie zostaje widoczne bez zniekształceń na każdej szerokości. */
.s3-image,
.s1-image-copy,
.s2-image {
  aspect-ratio: 2 / 3;
  height: auto !important;
}
.s3-image img,
.s1-image-copy img,
.s2-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  position: static !important;
  top: 0 !important;
}
/* Zdjęcie szefa (chef-maciej.jpg) i zdjęcie właścicieli (ludzie-01.jpg) są
   w proporcji 4:5, nie 2:3 jak reszta portretów - własna proporcja, żeby się
   nie kadrowały niepotrzebnie i żeby oba zdjęcia w parach tekst+portret
   wyglądały na tej samej stronie spójnie, w tym samym formacie. */
.szef-photo-image,
.s2-image {
  aspect-ratio: 4 / 5 !important;
}

/* Dzielniki kolumn (.scg-divider) w sekcji Forbes/Chmielewscy - na desktopie
   miały sens jako cienkie linie MIĘDZY wąskimi kolumnami oryginalnego
   układu. Po dodaniu pełnoszerokiego zdjęcia zespołu z tabliczką Michelin
   linia i tak przecina je na środku, więc chowamy dzielniki wszędzie, nie
   tylko na mobile. */
.scg-divider {
  display: none !important;
}

/* Webflow IX2 aplikuje scroll-driven transform/opacity na te elementy,
   przez co tekst "wjeżdżał" dopiero po sporym przescrollowaniu w dół -
   użytkownik widział pusty kafelek zanim treść się w pełni pojawiła.
   Wyłączamy ten efekt na każdej szerokości, nie tylko na mobile, żeby
   tekst i zdjęcia były widoczne od razu. */
.hero,
.collage-statement,
.collage-statement > *,
.collage-statement-text,
.style-3-collage-text,
.image.scale-in,
.image.scale-in-copy,
.image-szef.scale-in,
.image-szef.scale-in-copy,
.image-szef-copy.scale-in,
.image-szef-copy.scale-in-copy,
.image-szef-copy.scale-in-copy-copy,
[data-w-id="4253887f-93c0-ee2b-1cbb-469dc11882c6"],
[data-w-id="57a502d1-af12-c9ef-0180-a1ed756f801c"] {
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
}

/* Trójka zdjęć zastępująca pojedyncze zdjęcie uniwersytetu przed sekcją
   "Więcej chwil znad Odry" - trzy równe kolumny (zdjęcie / cienka linia /
   podpis / krótki akapit), układ zainspirowany triadą zdjęć na stronie
   disfrutarbarcelona.com (Restauracja / Kuchnia / Miejsce). Typografia
   zostaje przy krojach już używanych na stronie (Poppins na podpisach jak
   inne bold/uppercase etykiety z DESIGN.md, Satoshi na akapitach jako
   workhorse body copy) - fonty disfrutar (Canela, Graphik) to płatne kroje
   Commercial Type, nie mamy do nich licencji. Każde zdjęcie linkuje osobno
   do galeria.html (nie cały wiersz jednym linkiem) - dzięki temu hover
   powiększa tylko to jedno zdjęcie pod kursorem, nie całą trójkę naraz. */
.gallery-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.2rem);
  border-top: 1px solid #ddd6c6;
}
.gt-image {
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
}
.gt-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.gt-image:hover img {
  transform: scale(1.12);
}
.gt-caption {
  margin-top: clamp(0.7rem, 1.4vw, 1rem);
  padding-top: clamp(0.7rem, 1.4vw, 1rem);
  border-top: 1px solid #ddd6c6;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  color: #1a1b1f;
}
.gt-text {
  margin-top: clamp(0.6rem, 1vw, 0.8rem);
  font-family: var(--font-body);
  /* Rozmiar/interlinia/kolor dopasowane do odpowiedzi FAQ (.local-discovery-item
     p: 16px, line-height 1.65, prawie czarny) - użytkownik wskazał FAQ jako
     wzór dla reszty strony. Wcześniej ten podpis był mniejszy i w
     przyciemnionym brązie (#61533a); to jedyne miejsce na stronie głównej,
     które dziedziczyło ten konkretny odcień - zmiana nie rusza innych
     komponentów (np. .ev-card-desc na osobnej stronie wydarzeń zostaje
     bez zmian). */
  font-size: clamp(0.95rem, 1.15vw, 1rem);
  line-height: 1.65;
  color: #1a1b1f;
}

@media (max-width: 767px) {
  .gallery-trio {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding: 4rem 4vw;
  }
  .gt-image {
    aspect-ratio: 3 / 4;
  }
}

@media (max-width: 767px) {
  .michelin-team-photo {
    margin: 0 0 6vw;
  }
  .michelin-team-photo-caption {
    margin-top: 3vw;
  }


  /* --- 1. Wyłącz animację text-reveal ----------------------------------- */
  /* Bez tego tekst „pojawiał się" maską translateY i podczas scrollowania
     na iOS Safari potrafił zostawać w stanie ucięcia (vide „ań & Marina"). */
  .animated-span-mask {
    overflow: visible !important;
  }
  .animated-span {
    transform: none !important;
    transition: none !important;
  }

  /* --- 3. Sekcja Forbes / Chmielewscy ------------------------------------ */
  /* mix-blend-mode: difference sprawiał, że biały tekst „prześwitywał"
     przez zdjęcie tworząc ducha. Wyłączamy + dajemy normalny kontrast. */
  .collage-statement {
    mix-blend-mode: normal !important;
    padding: 0 4vw !important;
    margin-top: 4vw !important;
  }
  .collage-statement-text {
    width: 100% !important;
    margin-right: 0 !important;
    line-height: 1.25em !important;
  }
  .style-3-collage-text {
    color: #000 !important;
    line-height: 1.3em !important;
  }

  /* --- 4. Wysokości sekcji collage -------------------------------------- */
  /* Stałe 50vh na sekcjach collage nie mieściły contentu na mobile,
     w efekcie zdjęcia nachodziły na tekst. Niech rosną wraz z treścią. */
  .collage-section,
  .collage-section.section-1,
  .collage-section.section-1-copy,
  .collage-section.section-2,
  .collage-section.section-3 {
    height: auto !important;
    min-height: 0 !important;
  }
  .collage-section.section-3 {
    margin-top: 4vw !important;
  }

  /* --- 5. Czytelność opisu w hero --------------------------------------- */
  /* Domyślny line-height był ciasny, na mobile teksty nachodziły na
     siebie szczególnie po polsku z diakrytykami. */
  .big-logo-text .h5-style-1.inline {
    line-height: 1.45em !important;
  }
  .big-logo-text-wrapper {
    margin-top: 3vw;
  }

  /* --- 6. Reset poziomego overflow -------------------------------------- */
  /* Webflow IX2 czasem zostawia translate3d wystający poza viewport,
     co tworzy horizontal scroll. */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* --- 7. Touch-friendly bottom spacing przycisku --------------------- */
  /* "Zarezerwuj stolik" był ciasno przy tekście — luźniej. */
  .button-zarezerwuj {
    margin-top: 4vw;
  }

  /* --- 8. Hero: kolumna z nawigacją (.big-logo-column-2) ---------------- */
  /* Kolumna rezerwuje 23-37.5vw szerokości na linki Menu/Galeria/Info/
     Wydarzenia/Kontakt (.main-menu.show-on-mobile), ale w tak wąskiej
     kolumnie tekst linków się zawija i nakłada nieczytelnie jeden na
     drugi. Ta nawigacja i tak duplikuje działający hamburger w prawym
     górnym rogu, więc na telefonie chowamy całą kolumnę i oddajemy jej
     miejsce zdjęciu/opisowi w kolumnie 1. */
  .big-logo-column-2:not(.godziny) {
    display: none !important;
  }
  .big-logo-column-1 {
    width: 100% !important;
  }

  /* --- 9. Hero na mobile: z fixed cover na normalny blok ----------------- */
  /* .hero-big-logo to `position: fixed; height: 100%` - zaprojektowany jako
     pełnoekranowa "okładka" na desktopie, gdzie zdjęcie i tekst mieszczą się
     obok siebie w jednej kolumnie o wysokości 50% ekranu. Na mobile, po
     schowaniu kolumny z nawigacją (patrz punkt 8), zdjęcie i tekst układają
     się jedno pod drugim i razem są wyższe niż połowa wysokości telefonu -
     w sztywnym `height:100%` z `overflow:hidden` to się przycina i nachodzi
     (zdjęcie znika, tekst wjeżdża pod logo). Zamiast tego na mobile hero ma
     płynąć normalnie (position:relative, height:auto), żeby rozciągnął się
     na tyle, ile faktycznie potrzebuje - `relative` (nie `static`) zostaje
     bo .home-logo-wrapper jest position:absolute i musi się kotwiczyć
     względem tego kontenera, inaczej odleci względem całej strony. Spacer
     `margin-top:100vh` na .content-sections istniał tylko po to, żeby treść
     nie chowała się pod fixed hero - skoro hero już nie jest fixed, spacer
     jest zbędny. */
  .hero-big-logo {
    position: relative !important;
    height: auto !important;
  }
  /* Logo-znaczek jest position:absolute i na desktopie leży jako mała
     plakietka w rogu dużego zdjęcia na całym ekranie - przy dużo mniejszym
     zdjęciu na mobile nachodzi na kadr i traci czytelność. Wypychamy go
     z powrotem do normalnego przepływu, nad zdjęcie, jako osobna linijka. */
  .home-logo-wrapper {
    position: static !important;
    margin: 0 0 3vw !important;
  }
  .content-sections.margin-top {
    margin-top: 0 !important;
  }

  /* --- 10. Sekcje 2/3/1-copy: podpis + zdjęcie w kolumnie ---------------- */
  /* .section-2-image-wrapper i .szef-kuchni trzymają podpis i zdjęcie w
     flex-direction:row na KAŻDEJ szerokości - nigdy nie przechodzą w
     column, więc na wąskim telefonie tekst i zdjęcie ściskają się obok
     siebie w ułamkach procenta szerokości. .section-1-image-wrapper-copy
     ma dodatkowo margin-left:45%, które nigdy nie resetuje się na mobile,
     więc to zdjęcie wisi w prawej połowie ekranu z martwą przestrzenią po
     lewej. Stawiamy wszystko w jednej kolumnie na pełną szerokość -
     kolejność w HTML (podpis/zdjęcie) zostaje bez zmian. */
  .section-2-image-wrapper,
  .szef-kuchni,
  .szef-kuchni-copy1 {
    flex-direction: column !important;
    width: 100% !important;
  }
  .s2-caption,
  .s3-caption {
    width: 100% !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-bottom: 3vw;
  }
  .s2-image,
  .s3-image {
    width: 100% !important;
  }
  .section-1-image-wrapper-copy {
    width: 100% !important;
    margin-left: 0 !important;
  }
  .s1-image-copy {
    width: 100% !important;
  }
}

/* ============================================================================
   Disable scroll-driven animations on systems that prefer reduced motion.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .animated-span-mask { overflow: visible !important; }
  .animated-span {
    transform: none !important;
    transition: none !important;
  }
  .hero,
  .collage-statement,
  .collage-statement > *,
  .image.scale-in,
  .image.scale-in-copy,
  .image-szef.scale-in,
  .image-szef.scale-in-copy,
  .image-szef-copy.scale-in,
  .image-szef-copy.scale-in-copy,
  .image-szef-copy.scale-in-copy-copy,
  [data-w-id="4253887f-93c0-ee2b-1cbb-469dc11882c6"],
  [data-w-id="57a502d1-af12-c9ef-0180-a1ed756f801c"] {
    transform: none !important;
  }
}

/* === Widoczny moduł opinii Google =======================================
   Samodzielna, lekka karuzela prawdziwych opinii 5★. Zastępuje zewnętrzny
   embed Elfsight, który znikał po wyczerpaniu limitu odsłon. */
.reviews-section {
  margin: 0;
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2.2rem);
  background-color: #f2f1e2;
}

.reviews-shell {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
}

.reviews-section .heading-copy {
  margin: 0 0 clamp(2.25rem, 5vw, 4rem);
  color: #1a1b1f;
}

.reviews-overview {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

.reviews-google {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #3d382c;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
}

.review-google-mark {
  flex: 0 0 auto;
  background: conic-gradient(from -45deg, #4285f4 0 25%, #34a853 0 42%, #fbbc05 0 66%, #ea4335 0 83%, #4285f4 0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: Arial, sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
}

.reviews-rating {
  margin-top: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.reviews-rating strong {
  color: #1a1b1f;
  font-family: var(--font-editorial);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.review-stars {
  color: #f4a621;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.reviews-count {
  margin-top: 0.5rem;
  color: #61533a;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.45;
}

.reviews-google-link {
  min-height: 44px;
  padding: 0.9rem 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 100px;
  background-color: #a55a2c;
  color: #f2f1e2;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.reviews-google-link:hover,
.reviews-google-link:focus-visible {
  background-color: #8d8f81;
  color: #f2f1e2;
  transform: translateY(-2px);
}

.reviews-google-link:focus-visible,
.reviews-track:focus-visible,
.reviews-arrow:focus-visible {
  outline: 2px solid #1a1b1f;
  outline-offset: 3px;
}

.reviews-slider-controls {
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.reviews-position {
  min-width: 3.4rem;
  margin-right: 0.25rem;
  color: #7a705e;
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1;
  text-align: center;
}

.reviews-arrow {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid #cfc7b6;
  border-radius: 50%;
  background: transparent;
  color: #1a1b1f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.reviews-arrow:hover:not(:disabled) {
  border-color: #a55a2c;
  background-color: #a55a2c;
  color: #f2f1e2;
}

.reviews-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.reviews-track {
  padding: 0 0 0.5rem;
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: none;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review-card {
  flex: 0 0 46%;
  min-height: clamp(14rem, 20vw, 16rem);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  scroll-snap-align: start;
  border: 1px solid #ddd6c6;
  border-radius: 12px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0.4rem 1.4rem rgba(61, 56, 44, 0.06);
}

.review-card-head {
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
}

.review-card-head strong,
.review-card-head span {
  display: block;
}

.review-card-head strong {
  overflow: hidden;
  color: #1a1b1f;
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.review-card-head div > span {
  margin-top: 0.2rem;
  color: #7a705e;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.3;
}

.review-card > .review-stars {
  margin-bottom: 1.15rem;
}

.review-card blockquote {
  margin: 0;
  color: #3d382c;
  font-family: var(--font-editorial);
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  font-style: normal;
  line-height: 1.5;
}

@media (max-width: 900px) {
  .review-card {
    flex-basis: 68%;
  }
}

@media (max-width: 600px) {
  .reviews-overview {
    align-items: flex-start;
    flex-direction: column;
  }

  .reviews-google-link {
    width: 100%;
  }

  .review-card {
    flex-basis: 88%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-google-link,
  .reviews-arrow {
    transition: none;
  }

  .reviews-google-link:hover,
  .reviews-google-link:focus-visible {
    transform: none;
  }
}

/* === Mobilny panel nawigacji ============================================
   Webflow przenosił na telefon desktopowe wysokości (10vh/ujemne marginesy)
   i zostawiał floating-nav ponad otwartym panelem. Rezultatem były nachodzące
   na siebie nazwy oraz druga biała plakietka na środku menu.

   100dvh -> 100svh (z 100vh jako fallbackiem dla starszych przeglądarek):
   zgłoszenie "po otwarciu menu ucina dół" na telefonie. dvh (dynamic) potrafi
   przy PIERWSZYM otwarciu paska hamburgera zwrócić wysokość liczoną zanim
   pasek adresu przeglądarki się w pełni pokazał/schował - treść wewnątrz
   panelu wtedy zakłada więcej miejsca niż faktycznie widoczne, i dolna
   część (stopka z telefonem/mailem) wypada poza realnie widoczny ekran.
   svh (small) to gwarantowany najgorszy/najmniejszy wariant wysokości -
   bezpieczniejszy dla treści widocznej od razu po interakcji użytkownika.

   Zakres 767px -> 991px: na tablecie (np. iPad) ten sam panel spadał na
   oryginalny, niedopracowany desktopowy wygląd - zwykły czarny tekst
   "PL EN DE" bez tła/obramowania, każdy o innej szerokości zależnej od
   liczby liter (PL węższe niż EN/DE), więc wyglądały na "niewyrównane"
   mimo poprawnego wyrównania do lewej krawędzi. Reszta panelu (pełna
   szerokość linków, przyciski) też korzystała z niedostosowanych
   wymiarów desktopu w tym zakresie - ten sam "tablet gap" wzorzec co w
   innych miejscach tego pliku. Rozszerzamy sprawdzony układ mobilny na
   cały zakres telefon+tablet, zamiast tylko telefonu. */
@media screen and (max-width: 991px) {
  .overlay-menu {
    z-index: 2000 !important;
    overflow: hidden;
  }

  .overlay-menu .om-content-holder {
    width: 100% !important;
    height: 100vh;
    height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .overlay-menu .om-content {
    min-height: 100vh;
    min-height: 100svh;
    background-color: #a55a2c;
  }

  .overlay-menu .om-column-1 {
    display: none !important;
  }

  .overlay-menu .om-column-2 {
    width: 100% !important;
    min-height: 100vh;
    min-height: 100svh;
    padding: max(4.75rem, calc(env(safe-area-inset-top) + 4rem))
      clamp(1.25rem, 6vw, 2rem)
      max(1.25rem, env(safe-area-inset-bottom)) !important;
    border-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .overlay-menu .main-menu-links {
    width: 100%;
    margin: 0;
    gap: 0;
  }

  .overlay-menu .main-menu-link,
  .overlay-menu .main-menu-link.tight {
    width: 100%;
    min-height: 3.35rem;
    margin: 0 !important;
    border-bottom: 1px solid rgba(242, 241, 226, 0.32);
    justify-content: center;
  }

  .overlay-menu .main-menu-link:first-child {
    border-top: 1px solid rgba(242, 241, 226, 0.32);
  }

  .overlay-menu .main-menu-mask,
  .overlay-menu .main-menu-mask.large {
    width: 100%;
    height: auto !important;
    min-height: 3.35rem;
    margin: 0 !important;
    overflow: visible;
    justify-content: center;
  }

  .overlay-menu .main-menu-adjective {
    transform: none !important;
  }

  .overlay-menu .main-menu-noun {
    display: none !important;
  }

  .overlay-menu .h2-style-2.om-style,
  .overlay-menu .h2-style-2.om-style.text-color-white {
    color: #f2f1e2 !important;
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.12;
    white-space: normal;
  }

  .overlay-menu .main-menu-links-lang {
    width: 100%;
    margin: 1.25rem 0 0;
    gap: 0.65rem;
    align-items: center;
  }

  .overlay-menu .main-menu-links-lang a {
    min-width: 3rem;
    min-height: 2.75rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid rgba(242, 241, 226, 0.38);
    border-radius: 100px;
    color: #f2f1e2 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.9rem !important;
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1 !important;
    text-decoration: none;
  }

  .overlay-menu .float-top-right {
    top: max(1rem, env(safe-area-inset-top));
    right: clamp(1.25rem, 6vw, 2rem);
    margin: 0 !important;
  }

  .overlay-menu .close-menu {
    width: 2.75rem;
    height: 2.75rem;
  }

  .overlay-menu .cm-line {
    background-color: #f2f1e2;
  }

  .overlay-menu .contact-info-middle {
    width: 100%;
    margin: 1rem 0 0;
    opacity: 1;
    align-items: stretch;
  }

  .overlay-menu .button-zarezerwuj-rewers {
    width: 100%;
    min-height: 3.25rem;
    margin: 0 !important;
    padding: 0.85rem 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
  }

  .overlay-menu .contact-info-footer {
    width: 100%;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(242, 241, 226, 0.25);
    opacity: 1;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
  }

  .overlay-menu .contact-info-footer > .h5-style-1-slider {
    display: none;
  }

  .overlay-menu .contact-info-footer .footer-link,
  .overlay-menu .contact-info-footer .h5-style-1-slider {
    color: #f2f1e2;
    font-family: var(--font-body);
    font-size: 0.78rem;
    line-height: 1.35;
    text-decoration: none;
  }

  /* Zwinięty nagłówek karty dań: bez dekoracyjnego zdjęcia i bez pustej
     przestrzeni 120vw. Nazwa strony zostaje jako krótka orientacja. */
  .sub-section-header:has(.menu-category-image) {
    display: none !important;
  }

  .sub-section-header .menu-category-image {
    display: none !important;
  }

  .sub-section-header .ms-title.menu-category-title {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .sub-section-header .menu_header.mobilka {
    margin: 0;
    transform: none !important;
    font-family: var(--font-heading);
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: -0.05em;
  }

  .menu-intro-quote {
    display: none !important;
  }

  .sub-section-list.no-margin.dania-glowne {
    margin-top: 0 !important;
  }

  .sub-section-list .trigger-wrapper {
    min-height: 5.25rem;
    padding: 1rem 1.25rem !important;
  }

  .sub-section-list .trigger-content.trigger-narrow,
  .sub-section-list .trigger-column-1 {
    width: 100%;
    gap: 0.35rem;
  }

  .sub-section-list .trigger-title.menu .h5-style {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    line-height: 1.25;
  }

  .sub-section-list .trigger-ingredients .h5-style-1 {
    font-family: var(--font-body);
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .sub-section-list .h5-style-2-cena {
    margin-top: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    line-height: 1.25;
  }
}

@media screen and (max-width: 767px) and (max-height: 700px) {
  .overlay-menu .om-column-2 {
    padding-top: max(4rem, calc(env(safe-area-inset-top) + 3.5rem)) !important;
  }

  .overlay-menu .main-menu-link,
  .overlay-menu .main-menu-link.tight,
  .overlay-menu .main-menu-mask,
  .overlay-menu .main-menu-mask.large {
    min-height: 2.8rem;
  }

  .overlay-menu .h2-style-2.om-style,
  .overlay-menu .h2-style-2.om-style.text-color-white {
    font-size: 1.35rem;
  }

  .overlay-menu .main-menu-links-lang {
    margin-top: 0.75rem;
  }

  .overlay-menu .contact-info-middle {
    margin-top: 0.75rem;
  }

  .overlay-menu .contact-info-footer {
    display: none;
  }
}

/* Final cascade lock for the approved editorial type and CTA component. */
.style-3-collage-text {
  font-family: var(--font-editorial) !important;
  font-weight: 300 !important;
  letter-spacing: -0.025em !important;
}

.button,
.button-copy,
.button-zarezerwuj,
.button-zarezerwuj-rewers,
.button-style,
.button-style-large,
.button-primary,
.ev-btn,
.form-button,
.pm-button {
  box-sizing: border-box !important;
  min-height: 48px !important;
  border: 1px solid #a55a2c !important;
  border-radius: 999px !important;
  padding: 0.82rem 1.45rem !important;
  font-family: var(--font-body) !important;
  font-size: clamp(0.78rem, 0.9vw, 0.9rem) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.025em !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
  justify-content: center !important;
  align-items: center !important;
  background: #a55a2c !important;
  color: #f7f3e8 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

.button-zarezerwuj-rewers {
  background: #f2f1e2 !important;
  border-color: #f2f1e2 !important;
  color: #211d19 !important;
}

.form-button {
  width: auto !important;
  display: inline-flex !important;
}

.form-button .h4-style-2 {
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
}

.form-button .submit-button {
  display: none !important;
}

.form-button:hover {
  background: #211d19 !important;
  border-color: #211d19 !important;
  color: #f7f3e8 !important;
  transform: translateY(-1px);
}

/* === Menu restauracyjne - płaski układ w stylu karty drukowanej ===========
   Zastępuje dawny akordeon (accordion-item/w-dropdown) prostą, jednokolumnową
   listą: nazwa dania (Sentient) + gramatura/cena po prawej, opis pod spodem
   (Satoshi, wyciszony). Eyebrow sekcji w tym samym rdzawym kolorze i kroju
   co .bio-eyebrow (Poppins, 600, uppercase, #9a5e35) - ta sama rola wizualna,
   więc ten sam token, żeby całość strony pozostała spójna typograficznie. */
.menu-flat {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.2rem);
}
.menu-set-banner {
  text-align: center;
  max-width: 760px;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}
.menu-set-title {
  font-family: var(--font-editorial);
  font-weight: 600;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  color: #1a1b1f;
  margin: 0 0 1rem;
}
.menu-set-desc {
  font-family: var(--font-body);
  color: #61533a;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.menu-set-hours {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: #9a5e35;
}
.menu-flat-section {
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.menu-flat-eyebrow {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a5e35;
  margin: 0 0 1.5rem;
}
.menu-flat-section-intro {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
  color: #3d382c;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  margin: -0.5rem 0 1.75rem;
  max-width: 640px;
}
.menu-flat-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid #ddd6c6;
}
.menu-flat-item:last-child {
  border-bottom: none;
}
.menu-flat-item-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}
.menu-flat-item-name {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  color: #1a1b1f;
  margin: 0;
  line-height: 1.25;
}
.menu-flat-item-tag {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.85rem;
  color: #a55a2c;
  margin-left: 0.5rem;
  white-space: nowrap;
}
.menu-flat-item-price {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: #61533a;
  white-space: nowrap;
  flex: none;
  padding-top: 0.2em;
}
.menu-flat-item-desc {
  font-family: var(--font-body);
  color: #61533a;
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0.35rem 0 0;
  max-width: 640px;
}
.menu-flat-note {
  font-family: var(--font-body);
  font-style: italic;
  color: #8a7c5e;
  font-size: 0.85rem;
  margin-top: -0.75rem;
}
@media (max-width: 600px) {
  .menu-flat-item-row {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* === Tablet gap (480-991px) - luka między breakpointami =================
   Oryginalny Webflow CSS ma solidne reguły dla desktopu (>991px) i wąskiego
   telefonu (<=479px), ale pomija pełnoprawną adaptację dla wszystkiego
   pomiędzy. .big-logo-column-2/.big-logo-column-1/.hero-big-logo mają swój
   fix w bloku "Hero na mobile" wyżej, ale on jest ograniczony do <=767px I
   NIE dotyka samych .big-logo-image/.big-logo-text/.big-logo-content -
   te dziedziczą @media 991px Webflow, który ustawia je na wąskie 31.5vw
   zamiast pełnej szerokości (błąd projektowy w oryginalnym CSS, nie literówka
   - kolumna z duplikatem nawigacji przy nich ZOSTAJE widoczna, więc 31.5vw
   miało sens tylko obok niej; sama w sobie, po ukryciu tej kolumny, zostaje
   wąska szpalta tekstu/zdjęcia z martwą przestrzenią po prawej). Efekt jest
   identyczny na całej szerokości 480-991px (potwierdzone pomiarem: dopiero
   @media 479px Webflow daje poprawną pełną szerokość) - to obejmuje więc nie
   tylko "prawdziwe" tablety (768-1024px), ale i duże telefony w poziomie.
   Zakres poniżej pokrywa się częściowo z istniejącym blokiem <=767px -
   to celowe i nieszkodliwe (te same wartości, więc idempotentne), bo
   pojedynczy spójny zakres jest czytelniejszy niż dwa nachodzące na siebie.
   (Analogiczna luka na stronach menu - .menu-category-image - ma OSOBNY,
   węższy blok 768-991 tuż poniżej, z innym powodem zawężenia - patrz jego
   komentarz.) */
@media (min-width: 480px) and (max-width: 991px) {
  /* --- Hero strony głównej (.hero-big-logo) ------------------------------ */
  /* Ten sam problem co na mobile: position:fixed + height:100% obcina
     złożoną (dwie kolumny + kolumna nawigacji) zawartość, która na tej
     szerokości i tak musi się już złożyć w jedną kolumnę. */
  .hero-big-logo {
    position: relative !important;
    height: auto !important;
  }
  .home-logo-wrapper {
    position: static !important;
    margin: 0 0 2vw !important;
  }
  .content-sections.margin-top {
    margin-top: 0 !important;
  }
  /* Kolumna z duplikatem nawigacji (Menu/Galeria/.../Kontakt) zabiera
     23-30vw i tak nie mieści się obok zdjęcia + tekstu - hamburger w rogu
     już pełni tę funkcję. */
  .big-logo-column-2:not(.godziny) {
    display: none !important;
  }
  .big-logo-column-1 {
    width: 100% !important;
  }
  /* .big-logo-content dziedziczy z base display:flex bez ustawionego
     flex-direction (czyli row) - stąd zdjęcie i tekst, mimo width:100%
     nadanego już w oryginalnym 991px bloku Webflow, walczyły o miejsce w
     jednym rzędzie zamiast się złożyć jedno pod drugim. */
  .big-logo-content {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .big-logo-image {
    width: 100% !important;
    height: 60vw !important;
    margin-bottom: 2rem;
  }
  .big-logo-text {
    width: 100% !important;
  }
}

/* Hero stron menu (.menu-category-image) - WĄŻSZY zakres niż powyżej,
   celowo 768-991 zamiast 480-991: poniżej 768px cały ten dekoracyjny
   nagłówek (zdjęcie + tytuł) jest już ukrywany przez istniejącą regułę
   ".sub-section-header:has(.menu-category-image) { display:none }" w bloku
   <=767px wyżej (zostaje sam tytuł tekstowy) - więc tam nie ma czego
   naprawiać. Tutaj, 768-991, ten dekoracyjny nagłówek WCIĄŻ się renderuje,
   ale bez odpowiadającej wysokości kontenera: reguły "kontenerowe" istnieją
   tylko w base (desktop) i w @media 479px (telefon), 991px ma jedynie
   połowiczny override rozmiaru zdjęcia bez wysokości .sub-section-header -
   w efekcie zdjęcie (jako position:absolute) wystaje poza kontener i
   nachodzi na treść poniżej (cytat, sekcje menu). Dajemy kontenerowi
   wysokość dopasowaną do pomniejszonego zdjęcia zamiast dziedziczonego
   z base min-height:40vw. */
@media (min-width: 768px) and (max-width: 991px) {
  .sub-section-header {
    min-height: 70vw;
  }
  .menu-category-image {
    width: 55vw;
    height: 55vw;
  }
  .menu-category-image-wrapper {
    margin-top: 0;
    margin-left: 40%;
  }
}

/* === Menu główne / Śniadania: minimalny nagłówek bez zdjęcia ==============
   Usunięto dekoracyjne zdjęcie dania (.menu-category-image) z nagłówka obu
   podstron menu - użytkownik chce po prostu czytać menu, bez zbędnej grafiki
   na wejściu. .sub-section-content/.sub-section-header dziedziczą z base
   min-height:100vh / 40vw (zaprojektowane z myślą o dużym zdjęciu
   wypełniającym ekran) - bez zdjęcia zostawiałoby to pustą przestrzeń nad
   treścią menu. .no-hero-image scopuje reset do tych dwóch stron (menu
   główne, śniadania - PL/EN/DE). */
.sub-section-content.no-hero-image {
  min-height: 0 !important;
  height: auto !important;
}
.sub-section-header.no-hero-image {
  min-height: 0 !important;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.25rem, 4vw, 2.2rem) clamp(1rem, 3vw, 1.5rem) !important;
}
.sub-section-header.no-hero-image .menu_header.mobilka {
  transform: none !important;
  position: static !important;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem) !important;
}

/* === Naprawa: hamburger znika na wąskich telefonach (<=479px) ============
   Odkryte podczas zgłoszenia "ikona menu nic nie robi po kliknięciu" na
   telefonie. Przyczyna NIE jest związana z podmianą loga (sprawdzone: ten
   sam błąd istnieje już na produkcji, w oryginalnym, nietkniętym dzisiaj
   przystanimarina.webflow.css) - to preexistujący błąd projektowy w samym
   Webflow CSS: .side-nav dostaje display:none w @media (max-width:479px),
   a WEWNĄTRZ niego (.side-nav-links > .sn-menu-icon-wrapper) siedzi drugi
   hamburger, który MIAŁ być tym widocznym na telefonie (ma własny override
   display:block na tej samej szerokości) - ale display:none na rodzicu
   zawsze wygrywa z display:block dziecka, więc oba warianty hamburgera
   (ten w .side-nav-logo I ten w .side-nav-links) są niewidoczne i
   nieklikalne. Naprawiamy przywracając .side-nav do jego zwykłego display
   (tego samego co działa poprawnie >=480px - potwierdzone testem) i
   chowając tylko zbędny duplikat w .side-nav-links (który i tak nie
   zawiera nic poza drugą kopią tej samej ikony, żadnych dodatkowych
   linków). Zostaje jeden, działający hamburger (.side-nav-logo), ten sam
   który już działa na szerszych ekranach - żadna funkcjonalność się nie
   zmienia, tylko wraca do działania na najwęższych telefonach. */
@media (max-width: 479px) {
  .side-nav {
    display: flex !important;
  }
  .side-nav-links {
    display: none !important;
  }
  .sn-menu-icon-holder {
    display: block !important;
  }
}
/* .side-nav i .side-nav-logo mają wbudowaną animację Webflow IX2 "wjazd przy
   wejściu w viewport" (inline transform/opacity ustawiane przez JS). Dopóki
   .side-nav był display:none na tej szerokości, ten trigger nigdy się nie
   odpalił (JS IX2 sprawdza widoczność elementu) - stąd nawet po naprawieniu
   samego display, .side-nav-logo zostaje uwięziony w swoim stanie
   "przed animacją" (opacity:0). Tak jak w istniejącym fixie dla .hero/
   .collage-statement wyżej, neutralizujemy to na stałe zamiast liczyć na
   spóźniony trigger IX2, który już przepadł. */
.side-nav,
.side-nav-logo,
.side-nav-links {
  transform: none !important;
  opacity: 1 !important;
}

/* === Contact desktop: scroll the landing hero out naturally ============
   Generic landing pages keep their hero fixed while the next section slides
   over it. On Contact this left the oversized title pinned in an empty strip at
   intermediate scroll positions. Preserve the 100vh opening composition, but
   let only the Contact hero leave the viewport with the page. */
@media screen and (min-width: 992px) {
  body:has(.location-map) .hero.hero-landing {
    position: absolute;
    height: 100vh;
  }
}

/* === Overlay menu: short desktop and landscape-safe overflow ===========
   The split desktop panel previously assumed its viewport-relative content
   would always fit inside height:100%. On short laptop viewports the final
   email painted below the fixed holder, which had no scroll contract. Keep
   the approved split composition, but let its content grow and make the
   holder the vertical scroll container. The redundant last address <br> is
   suppressed, and desktop/tablet language controls receive explicit 44px
   targets. On phone/tablet layouts, a real trailing flex item preserves
   bottom safe-area clearance when the panel must scroll in landscape. */
@media screen and (min-width: 992px) {
  .overlay-menu .om-content-holder {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .overlay-menu .om-content {
    height: auto;
    min-height: 100%;
  }

  .overlay-menu .om-column-1,
  .overlay-menu .om-column-2 {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .overlay-menu .main-menu-links-lang a {
    min-width: 44px;
    min-height: 44px;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .overlay-menu .contact-info-footer > .h5-style-1-slider br:last-of-type {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .overlay-menu .om-column-2::after {
    content: "";
    width: 100%;
    flex: 0 0 max(1rem, env(safe-area-inset-bottom));
  }
}

.overlay-menu.overlay-menu-fallback-closing {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 180ms ease !important;
}

.overlay-menu.overlay-menu-fallback-hidden {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .overlay-menu.overlay-menu-fallback-closing {
    transition: none !important;
  }
}


/* Local discovery and About page — 2026-08-20 */
.local-discovery {
  padding: clamp(64px, 7vw, 112px) max(24px, 4vw);
  background: #f3f0e2;
  color: #111;
}
.local-discovery-inner { max-width: 1280px; margin: 0 auto; }
.local-discovery-eyebrow,
.about-eyebrow { margin: 0 0 18px; font-family: Poppins, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.local-discovery h2 { max-width: 1050px; margin: 0; font-size: clamp(38px, 5.2vw, 76px); line-height: .98; letter-spacing: -.045em; }
.local-discovery-intro { max-width: 720px; margin: 28px 0 44px; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.55; }
.local-discovery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid rgba(0,0,0,.25); }
.local-discovery-item { border-top: 1px solid rgba(0,0,0,.25); }
.local-discovery-item:nth-child(odd) { border-right: 1px solid rgba(0,0,0,.25); }
.local-discovery-item summary { min-height: 88px; padding: 24px 54px 24px 0; display: flex; align-items: center; position: relative; cursor: pointer; font-family: Poppins, sans-serif; font-size: clamp(16px, 1.35vw, 20px); font-weight: 600; line-height: 1.35; list-style: none; }
.local-discovery-item:nth-child(even) summary,
.local-discovery-item:nth-child(even) p { padding-left: 32px; }
.local-discovery-item summary::-webkit-details-marker { display: none; }
.local-discovery-item summary::after { content: '+'; position: absolute; right: 20px; top: 50%; translate: 0 -50%; font-size: 28px; font-weight: 300; }
.local-discovery-item[open] summary::after { content: '−'; }
.local-discovery-item p { margin: -4px 0 0; padding: 0 44px 28px 0; max-width: 650px; font-size: 16px; line-height: 1.65; }
.local-discovery-links { display: flex; flex-wrap: wrap; gap: 18px 36px; margin-top: 34px; }
.local-discovery-links a,
.about-actions a { color: inherit; font-family: Poppins, sans-serif; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.about-content-reset { margin-top: 0 !important; }
.about-page { background: #f3f0e2; color: #111; }
.about-hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, .82fr); border-bottom: 1px solid rgba(0,0,0,.3); }
.about-hero-copy { padding: clamp(130px, 15vw, 220px) max(32px, 5vw) clamp(64px, 8vw, 120px); display: flex; flex-direction: column; justify-content: flex-end; }
.about-hero h1 { margin: 0; font-size: clamp(72px, 11vw, 170px); line-height: .82; letter-spacing: -.065em; }
.about-lead { max-width: 760px; margin: 40px 0 0; font-size: clamp(20px, 2.1vw, 32px); line-height: 1.35; }
.about-actions { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 42px; }
.about-hero-image { min-height: 620px; margin: 0; overflow: hidden; }
.about-hero-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 53% center; }
.about-story { padding: clamp(72px, 9vw, 144px) max(32px, 5vw); display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(48px, 8vw, 140px); border-bottom: 1px solid rgba(0,0,0,.3); }
.about-story h2,
.about-facts h2 { margin: 0; font-size: clamp(38px, 5vw, 74px); line-height: 1; letter-spacing: -.045em; }
.about-story-copy p,
.about-facts article > p:last-child { margin: 0 0 24px; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.65; }
.about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-facts article { padding: clamp(64px, 7vw, 112px) max(32px, 5vw); }
.about-facts article:first-child { border-right: 1px solid rgba(0,0,0,.3); }
.about-facts h2 { margin-bottom: 32px; font-size: clamp(32px, 3.8vw, 58px); }
@media screen and (max-width: 991px) {
  .local-discovery { padding: 64px 24px; }
  .local-discovery-grid { grid-template-columns: 1fr; }
  .local-discovery-item:nth-child(odd) { border-right: 0; }
  .local-discovery-item:nth-child(even) summary,
  .local-discovery-item:nth-child(even) p { padding-left: 0; }
  .about-hero { min-height: 0; grid-template-columns: 1fr; }
  .about-hero-copy { padding: 140px 24px 64px; }
  .about-hero h1 { font-size: clamp(68px, 18vw, 132px); }
  .about-hero-image { min-height: 0; aspect-ratio: 4 / 3; }
  .about-story { padding: 72px 24px; grid-template-columns: 1fr; gap: 42px; }
  .about-facts { grid-template-columns: 1fr; }
  .about-facts article { padding: 64px 24px; }
  .about-facts article:first-child { border-right: 0; border-bottom: 1px solid rgba(0,0,0,.3); }
}
@media screen and (max-width: 479px) {
  .local-discovery h2 { font-size: 38px; }
  .local-discovery-item summary { min-height: 76px; padding-right: 42px; font-size: 16px; }
  .local-discovery-item summary::after { right: 8px; }
  .local-discovery-links,
  .about-actions { align-items: flex-start; flex-direction: column; }
  .about-hero-copy { padding-top: 118px; }
  .about-hero h1 { font-size: 70px; }
  .about-lead { font-size: 20px; }
}

/* === Śniadania: baner "tylko w weekendy" ==================================
   Od 1 września 2026 śniadania serwowane są wyłącznie w soboty i niedziele
   (wcześniej: wtorek-niedziela). Strona z ofertą śniadaniową nie miała
   wcześniej ŻADNEJ widocznej informacji o dniach/godzinach - tylko w meta
   description (niewidoczne dla gościa na stronie). Baner umieszczony tuż
   pod nagłówkiem "Śniadania", nad listą dań, żeby każdy odwiedzający od
   razu widział aktualne dni serwowania, zanim zacznie przeglądać menu. */
.breakfast-notice {
  max-width: 640px;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: 0.9rem 1.5rem;
  border: 1px solid #ddd6c6;
  border-radius: 100px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.4vw, 0.95rem);
  color: #9a5e35;
  letter-spacing: 0.01em;
}

/* === Godziny otwarcia (hero): dłuższy tekst dni się zawijał ===============
   Po rozszerzeniu z "poniedziałek" na "poniedziałek - piątek" tekst przestał
   mieścić się w wąskiej kolumnie 1fr oryginalnej siatki 2-kolumnowej (siatka
   dzieli dostępną szerokość na sztywne pół-na-pół, niezależnie od długości
   treści) i zawijał się na dwie linie w środku zdania. Kolumny dopasowane
   do treści (max-content) zamiast sztywnego 1fr - każda linia dostaje tyle
   miejsca, ile faktycznie potrzebuje, plus nowrap jako zabezpieczenie na
   wypadek kolejnych zmian długości tekstu w przyszłości. */
.big-logo-column-2.godziny .grid-2 {
  grid-template-columns: max-content max-content;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  width: auto;
}
.big-logo-column-2.godziny .grid-2 .bold-text-3 {
  white-space: nowrap;
}
@media (max-width: 991px) {
  .big-logo-column-2.godziny .grid-2 {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
  .big-logo-column-2.godziny .grid-2 .bold-text-3 {
    white-space: normal;
  }
}

/* === Spójność wagi czcionek na stronie głównej =============================
   Zgłoszenie: "za dużo różnych fontów, za grube mniejsze nagłówki". Rodzin
   czcionek jest właściwie tylko 3 (Poppins/Satoshi/Sentient), ale WAGA była
   niespójna - drugorzędne nagłówki sekcji (Godziny otwarcia, podpisy galerii,
   Opinie klientów, newsletter) używały tej samej grubości (600-700) co duży,
   wyróżniony nagłówek FAQ (75px), więc wszystko "krzyczało" na równi zamiast
   budować hierarchię. Duży nagłówek FAQ (#local-discovery-title) zostaje
   bez zmian - to jedyny element, który MA być tak gruby.
   Waga 600 (nie 500) - użytkownik wskazał sekcję FAQ jako wzór do
   naśladowania dla reszty strony; to dokładnie waga jej własnych pytań
   (.local-discovery-item summary), więc reszta drugorzędnych nagłówków
   dorównuje TEMU konkretnemu, już polubionemu wzorcowi zamiast dowolnie
   wybranej wartości pośredniej. */
strong.bold-text-3:not(.godziny) {
  font-weight: 600 !important;
}
.gt-caption {
  font-weight: 600 !important;
}
.heading-copy {
  font-weight: 600 !important;
}
h2.h3-style-2 {
  font-weight: 600 !important;
}
.h5-style-kontakt {
  font-weight: 600 !important;
}

/* Link do Przystań Tu w tekście o gospodarzach - dziedziczy kolor/font z
   .bio-text (Satoshi, #61533a), tylko podkreślenie jako wskaźnik interakcji,
   spójne z resztą linków w treści (np. .local-discovery-links). */
.bio-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.bio-text a:hover {
  color: #9a5e35;
}

/* Strony podkategorii menu (śniadania, menu restauracyjne): Webflow eksportuje
   nagłówek kategorii i listę dań z inline transform (przygotowane pod animację
   IX2 "page load" - obrót zdjęcia, przesunięcie o 100% w dół). Ten skrypt
   animacji nie odpala się niezawodnie na statycznym eksporcie, więc treść
   zostaje wizualnie przesunięta poza układ, tworząc pustą przestrzeń nad
   menu. Wymuszamy stan docelowy (bez transformacji), żeby treść była zawsze
   widoczna od razu, niezależnie od tego czy JS animacji zadziała. Dekoracyjne
   zdjęcie kategorii (menu-category-image) chowamy całkowicie - po wymuszeniu
   stanu docelowego ląduje w prawym górnym rogu i nachodzi na treść. */
.sub-section-header .menu-category-image {
  display: none !important;
}
.sub-section-header .ms-title,
.sub-section-header .ms-price,
.sub-section-list.dania-glowne {
  transform: none !important;
  opacity: 1 !important;
}

/* === Śniadania: jeden tytuł zamiast dwóch =================================
   Webflow generuje na tej stronie DWA identyczne tytuły "Śniadania":
   dekoracyjny w .sub-section-header oraz prawdziwy <h1 id="zupy"> na czele
   listy dań. Wcześniej pierwszy był niewidoczny (zepchnięty o 120% w dół
   przez inline transform animacji IX2, przycięty przez overflow), więc
   duplikat nie rzucał się w oczy. Po wymuszeniu stanu docelowego animacji
   (blok wyżej) oba stały się widoczne.
   Zostawiamy <h1> z listy: to jedyny <h1> na stronie (SEO) i kotwica
   #zupy dla nawigacji bocznej. Cały .sub-section-header chowamy - poza
   duplikatem tytułu nie ma już w nim nic (zdjęcie ukryte, .ms-price pusty),
   więc generowałby tylko pustą przestrzeń nad menu.
   Scope po slugu strony: na "Menu główne" tytuł w .sub-section-header jest
   jedynym tytułem strony i musi zostać. */
html[data-wf-item-slug="sniadania"] .sub-section-header {
  display: none !important;
}

/* Nagłówki: Webflow ustawia sztywne 60px i skaluje dopiero poniżej 479px,
   więc na ekranach 480-991px nagłówek wychodził poza układ. Dodatkowo tytuł
   strony i nagłówki sekcji (Dodatki, Przystań w południe, Nasze klasyki)
   miały identyczny rozmiar - bez hierarchii czytelnik nie widzi, gdzie
   kończy się jedna sekcja, a zaczyna druga. h1 zostaje duży, h2 mniejsze.
   Baner z godzinami serwowania wyrównany do tytułu i listy (był wyśrodkowany
   przy lewo-wyrównanej treści) - tytuł, godziny i dania czytają się teraz
   jako jeden blok. */
html[data-wf-item-slug="sniadania"] h1.h2-style-2-podkategorie-sekcja {
  font-size: clamp(2.4rem, 6vw, 3.75rem);
  line-height: 1.05em;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
html[data-wf-item-slug="sniadania"] h2.h2-style-2-podkategorie-sekcja {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.1em;
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}

/* Oddech u góry i między sekcjami: po ukryciu .sub-section-header lista dań
   przykleiła się do górnej krawędzi okna (nagłówek dotykał paska
   przeglądarki), a kolejne sekcje startowały tuż pod ostatnim daniem
   poprzedniej - nagłówek "Dodatki" sklejał się z wierszem nad nim.
   Odstęp dajemy KAŻDEJ liście i zdejmujemy go z pierwszej: między sekcjami
   siedzą puste .seperator i sekcje ukryte przez w-condition-invisible
   (display:none), więc selektor sąsiada "+" złapałby tylko część z nich. */
html[data-wf-item-slug="sniadania"] .sub-section-list.dania-glowne {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}
html[data-wf-item-slug="sniadania"] .sub-section-header + .sub-section-list.dania-glowne {
  margin-top: 0;
  padding-top: clamp(2rem, 5vw, 3.5rem);
}
html[data-wf-item-slug="sniadania"] .breakfast-notice {
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
  text-align: left;
}
@media screen and (max-width: 991px) and (min-width: 480px) {
  html[data-wf-item-slug="sniadania"] .breakfast-notice {
    margin-left: 40px;
  }
}

/* === Dodatki: sekcja rozwijana =============================================
   Dodatki to treść drugoplanowa (5 krótkich pozycji z ceną) rozdzielająca
   właściwe sekcje śniadaniowe - domyślnie zwinięta, rozwijana kliknięciem.
   Natywny <details>: działa bez JS, obsługa klawiatury i czytników ekranu
   z pudełka, a treść zostaje w DOM (indeksowana przez Google). <h2> siedzi
   w <summary>, więc nagłówek i kotwica #dodatki zostają nietknięte.
   Domyślny trójkącik przeglądarki chowamy - zamiast niego własny szewron
   po prawej, spójny z resztą strony. */
.dodatki-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.5rem, 1.4vw, 0.9rem);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}
/* Margines nagłówka przenosimy na <summary> - w kontenerze flex rozjeżdżał
   pionowe wyrównanie znaku +/- względem tekstu. */
.dodatki-summary > h2 {
  margin-bottom: 0 !important;
}
.dodatki-toggle[open] .dodatki-summary {
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
}
/* Safari trzyma trójkącik na własnym pseudo-elemencie */
.dodatki-summary::-webkit-details-marker {
  display: none;
}
.dodatki-summary:hover {
  color: #9a5e35;
}
.dodatki-summary:focus-visible {
  outline: 2px solid #9a5e35;
  outline-offset: 4px;
}
/* Znak +/- jak w FAQ na stronie głównej (.local-discovery-item) - ten sam
   język wizualny dla "kliknij, żeby rozwinąć". Tutaj tuż obok nagłówka,
   a nie przy prawej krawędzi: sekcja jest na całą szerokość, więc znak
   przy krawędzi odkleiłby się wizualnie od słowa "Dodatki".
   Rozmiar podajemy własnym clampem, NIE w em: duża czcionka siedzi na
   <h2> w środku, a nie na <summary>, więc em liczyłby się od odziedziczonych
   ~16px i znak wychodził malutki przy 40px nagłówku. Skala tuż pod
   nagłówkiem, waga 300 - jak cienki plus w FAQ; kolor to brąz akcentowy
   z cen w menu (#9a5e35). */
.dodatki-summary::after {
  content: "+";
  flex: none;
  font-family: Poppins, sans-serif;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.4vw, 2.35rem);
  line-height: 1;
  color: #9a5e35;
  translate: 0 -0.05em;
  transition: transform 0.2s ease;
}
.dodatki-toggle[open] .dodatki-summary::after {
  content: "−";
}
.dodatki-summary:hover::after {
  transform: scale(1.12);
}
/* Delikatne wejście listy po rozwinięciu - <details> nie animuje natywnie */
.dodatki-toggle[open] > .w-dyn-list {
  animation: dodatki-reveal 0.28s ease;
}
@keyframes dodatki-reveal {
  from {
    opacity: 0;
    transform: translateY(-0.4rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dodatki-summary::after,
  .dodatki-toggle[open] > .w-dyn-list {
    transition: none;
    animation: none;
  }
}

/* === Karty menu na telefonie: odzyskana szerokość ==========================
   Webflow zagnieżdża procentowe szerokości: .trigger-content 90% ORAZ
   .trigger-column-1 76% wewnątrz niego. Te procenty się mnożą (0.9 x 0.76),
   więc na telefonie opis dania dostawał ~195px z ~316px kolumny treści i
   łamał się co 3 słowa. Zamiast procentów: opis bierze całą przestrzeń,
   która zostaje po cenie (flex:1 + min-width:0, bez którego długie słowa
   rozpychają wiersz). Do tego .trigger-column-1 miał gap 35px między nazwą
   a opisem - przy kilkunastu daniach to setki pikseli pustego scrolla.
   Scope .dania-glowne = tylko listy dań (śniadania i menu główne, PL/EN/DE);
   nie rusza .nav-trigger-wrapper ani innych stron. */
@media screen and (max-width: 479px) {
  .dania-glowne .trigger-content,
  .dania-glowne .trigger-content.trigger-narrow {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .dania-glowne .trigger-column-1 {
    grid-row-gap: 0.5rem;
    grid-column-gap: 0.5rem;
    width: 100%;
  }
  .dania-glowne .trigger-wrapper {
    grid-column-gap: 0.75rem;
    padding: 4vw 15px;
  }
  /* Cena nie zawija się do dwóch linii przy dłuższych kwotach */
  .dania-glowne .h5-style-2-cena {
    white-space: nowrap;
  }
  /* Baner godzin: przy pełnej szerokości kolumny mieści się w 2 liniach,
     a przy zawijaniu owal 100px wyglądał jak kleks - łagodniejszy promień. */
  html[data-wf-item-slug="sniadania"] .breakfast-notice {
    display: block;
    margin-right: 15px;
    padding: 0.75rem 1.1rem;
    border-radius: 16px;
  }
}

/* === Kontakt: przeprojektowany, bez zdjęcia restauracji ====================
   Jedna jasna, statyczna sekcja zastępuje pełnoekranowy hero, martwe
   kolekcje CMS, zduplikowaną nawigację i zależne od scrolla pozycjonowanie.
   Selektor strony ogranicza wyjątki dla nawigacji i stopki do PL/EN/DE
   kontakt.html (wszystkie trzy eksporty mają ten sam data-wf-page). */
html[data-wf-page="684dc110fbd87746896b8701"] .side-nav-holder {
  position: fixed;
  top: .75rem;
  right: .75rem;
  width: auto;
  z-index: 30;
}
html[data-wf-page="684dc110fbd87746896b8701"] .side-nav-holder .side-nav {
  border: none;
  width: auto;
  height: auto;
  padding: 0;
}
html[data-wf-page="684dc110fbd87746896b8701"] .side-nav-holder .side-nav-logo {
  position: static;
}

html[data-wf-page="684dc110fbd87746896b8701"] body {
  background: #fff;
}
.kt-main {
  padding: clamp(6.5rem, 10vw, 9rem) 0 clamp(4.5rem, 7vw, 6.5rem);
  background: #fff;
}
.kt-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.2rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(18rem, .78fr) minmax(24rem, 1.22fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: stretch;
}
.kt-info {
  align-self: center;
  min-width: 0;
}
.kt-eyebrow {
  margin: 0 0 .75rem;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9a5e35;
}
.kt-info h1 {
  margin: 0 0 1.25rem;
  font-family: Poppins, sans-serif;
  font-size: clamp(3.25rem, 5.2vw, 5rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.055em;
  color: #1a1b1f;
}
.kt-address {
  margin: 0 0 clamp(2rem, 3vw, 2.75rem);
  font-family: Satoshi, sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: #3d382c;
}
.kt-contact-links {
  display: flex;
  flex-direction: column;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid #ddd6c6;
}
.kt-contact-link {
  min-width: 0;
  padding: .9rem 0;
  border-bottom: 1px solid #ddd6c6;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.25;
  color: #1a1b1f;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color .2s ease, padding-left .2s ease;
}
.kt-contact-label {
  display: block;
  margin-bottom: .2rem;
  font-family: Satoshi, sans-serif;
  font-size: .72rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #786f61;
}
.kt-contact-link:hover {
  color: #9a5e35;
  padding-left: .25rem;
}
.kt-contact-link:focus-visible,
.kt-actions .kt-btn:focus-visible {
  outline: 3px solid #9a5e35;
  outline-offset: 4px;
}
.kt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.kt-actions .kt-btn {
  box-sizing: border-box;
  min-height: 48px;
  margin: 0 !important;
  padding: .85rem 1.35rem !important;
  border: 1px solid #a55a2c !important;
  border-radius: 100px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-family: Poppins, sans-serif !important;
  font-size: .875rem !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.kt-actions .button-zarezerwuj {
  background: #a55a2c !important;
  color: #f2f1e2 !important;
}
.kt-actions .button-zarezerwuj:hover {
  background: #8b4825 !important;
  border-color: #8b4825 !important;
}
.kt-actions .button-style {
  background: transparent !important;
  color: #1a1b1f !important;
}
.kt-actions .button-style .h6-style-1-trasa {
  margin: 0 !important;
  font: inherit !important;
  color: inherit !important;
}
.kt-actions .button-style:hover {
  background: #1a1b1f !important;
  border-color: #1a1b1f !important;
  color: #fff !important;
}
.kt-hours {
  max-width: 30rem;
}
.kt-hours h2 {
  width: auto;
  height: auto;
  margin: 0 0 .8rem;
  display: block;
  overflow: visible;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #1a1b1f;
}
.kt-hours-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem 0;
  border-bottom: 1px solid #e4dfd2;
  font-family: Satoshi, sans-serif;
  font-size: .95rem;
  line-height: 1.4;
  color: #3d382c;
}
.kt-hours-row:last-child {
  border-bottom: none;
}
.kt-hours-row span:first-child {
  color: #61533a;
}

.kt-map {
  position: relative;
  width: 100%;
  min-height: 620px;
  border-radius: 18px;
  overflow: hidden;
  background: #f2f1e2;
}
.kt-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

html[data-wf-page="684dc110fbd87746896b8701"] .section-footer {
  margin-top: 0;
}

@media screen and (max-width: 900px) {
  .kt-main {
    padding-top: clamp(6rem, 14vw, 7.5rem);
  }
  .kt-wrap {
    grid-template-columns: 1fr;
    gap: clamp(2.75rem, 8vw, 4rem);
  }
  .kt-info {
    max-width: 38rem;
  }
  .kt-map {
    min-height: clamp(22rem, 70vw, 30rem);
  }
}

@media screen and (max-width: 767px) {
  html[data-wf-page="684dc110fbd87746896b8701"] #w-node-f861b3cc-85b1-cb63-23c4-72f3c6c87372-896b8701 {
    display: none;
  }
}

@media screen and (max-width: 479px) {
  .kt-main {
    padding-bottom: 3.5rem;
  }
  .kt-info h1 {
    font-size: clamp(2.75rem, 15vw, 3.5rem);
  }
  .kt-actions {
    flex-direction: column;
  }
  .kt-actions .kt-btn {
    width: 100%;
  }
  .kt-hours-row {
    align-items: baseline;
    font-size: .9rem;
  }
}

/* === Menu pages: one visual system and four clear destinations ===========
   The former category navigation mixed individual courses with separate
   menus, and disappeared on phones. The side navigation now contains only
   the four useful menu destinations; a compact equivalent is visible on
   tablet and mobile. Restaurant and breakfast dishes share the same flat,
   print-menu rhythm for faster scanning. */
.curtain {
  background-color: #a55a2c !important;
}

.main-menu-podkategorie.is-structured {
  gap: clamp(.85rem, 1.5vw, 1.25rem);
  max-width: 18rem;
}

.main-menu-podkategorie.is-structured .h3-style-2-podkategoria {
  color: #1a1b1f;
  font-family: var(--font-heading) !important;
  font-size: clamp(.95rem, 1.45vw, 1.25rem);
  font-weight: 600 !important;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.main-menu-podkategorie.is-structured .h3-style-2-podkategoria:hover,
.main-menu-podkategorie.is-structured .h3-style-2-podkategoria:focus-visible,
.main-menu-podkategorie.is-structured .h3-style-2-podkategoria[aria-current="page"] {
  color: #9a5e35;
}

.main-menu-podkategorie.is-structured small {
  display: block;
  margin-top: .25rem;
  color: #61533a;
  font-family: var(--font-body);
  font-size: .7rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
}

.menu-suite-nav {
  display: none;
}

html[data-wf-item-slug="menu-restauracyjne"] body,
html[data-wf-item-slug="sniadania"] body,
html[data-wf-item-slug="menu-restauracyjne"] .sub-section-column,
html[data-wf-item-slug="sniadania"] .sub-section-column {
  background: #f2f1e2;
}

html[data-wf-item-slug="menu-restauracyjne"] .sub-section-header.no-hero-image,
html[data-wf-item-slug="sniadania"] .sub-section-header.no-hero-image {
  min-height: auto;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 4vw, 2.2rem) clamp(2rem, 4vw, 3.5rem);
  background: #f2f1e2;
}

html[data-wf-item-slug="menu-restauracyjne"] .sub-section-header .menu_header,
html[data-wf-item-slug="sniadania"] .sub-section-header .menu_header {
  color: #1a1b1f;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

html[data-wf-item-slug="menu-restauracyjne"] .sub-section-header.no-hero-image {
  padding-right: 0;
  padding-left: 0;
}

html[data-wf-item-slug="menu-restauracyjne"] .sub-section-header .menu_header {
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(1.25rem, 4vw, 2.2rem);
  padding-left: clamp(1.25rem, 4vw, 2.2rem);
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-flat {
  width: 100%;
  max-width: 900px;
  padding: 0 clamp(1.25rem, 4vw, 2.2rem);
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-intro-quote {
  box-sizing: border-box;
  width: 100%;
  max-width: 900px;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  padding: 0 clamp(1.25rem, 4vw, 2.2rem);
  text-align: left;
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-set-banner {
  max-width: 42rem;
  margin-right: 0;
  margin-left: 0;
  text-align: left;
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-set-desc {
  max-width: 40rem;
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item-name,
html[data-wf-item-slug="menu-restauracyjne"] .menu-set-title {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -.02em;
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item-name {
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item,
html[data-wf-item-slug="menu-restauracyjne"] .menu-footnotes {
  border-color: #ddd6c6;
}

html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item-desc,
html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item-price,
html[data-wf-item-slug="menu-restauracyjne"] .menu-set-desc,
html[data-wf-item-slug="menu-restauracyjne"] .menu-footnotes {
  color: #61533a;
  font-family: var(--font-body);
}

/* Older exported menu markup (all breakfast pages and EN/DE main menus)
   receives the same typography, dividers and price alignment as .menu-flat. */
html[data-wf-item-slug="menu-restauracyjne"] .sub-section-list.dania-glowne,
html[data-wf-item-slug="sniadania"] .sub-section-list.dania-glowne {
  width: 100%;
  max-width: 900px;
  margin-right: auto;
  margin-left: auto;
  padding-right: clamp(1.25rem, 4vw, 2.2rem);
  padding-left: clamp(1.25rem, 4vw, 2.2rem);
  background: transparent;
}

html[data-wf-item-slug="menu-restauracyjne"] .sub-section-list.dania-glowne:not(.w-condition-invisible),
html[data-wf-item-slug="sniadania"] .sub-section-list.dania-glowne:not(.w-condition-invisible) {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
}

html[data-wf-item-slug="menu-restauracyjne"] .sub-section-list.dania-glowne > h2,
html[data-wf-item-slug="sniadania"] .sub-section-list.dania-glowne > h2,
html[data-wf-item-slug="sniadania"] .dodatki-summary > h2 {
  margin: 0 0 1.25rem;
  color: #9a5e35;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.35rem, 2.6vw, 1.8rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: -.025em !important;
}

html[data-wf-item-slug="sniadania"] .sub-section-list.dania-glowne > h1 {
  margin: 0 0 1rem;
  color: #1a1b1f;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.8rem, 6.5vw, 5.5rem) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  letter-spacing: -.05em !important;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item,
html[data-wf-item-slug="sniadania"] .accordion-item {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-wrapper,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: start;
  width: 100%;
  min-height: 0;
  padding: 1.1rem 0;
  border-top: 0;
  border-bottom: 1px solid #ddd6c6;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-content,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-content,
html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-column-1,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-column-1 {
  display: block;
  width: auto;
  padding: 0;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-title.menu,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-title.menu {
  width: auto;
  margin: 0;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-title.menu .h5-style,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-title.menu .h5-style {
  margin: 0;
  color: #1a1b1f;
  font-family: var(--font-heading) !important;
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.02em;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-ingredients,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-ingredients {
  width: auto;
  margin: .35rem 0 0;
  padding: 0;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-ingredients .h5-style-1,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-ingredients .h5-style-1 {
  margin: 0;
  color: #61533a;
  font-family: var(--font-body) !important;
  font-size: .92rem;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .h5-style-2-cena,
html[data-wf-item-slug="sniadania"] .accordion-item .h5-style-2-cena {
  position: static;
  width: auto;
  margin: 0;
  padding: .15rem 0 0;
  color: #61533a;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}

html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-arrow,
html[data-wf-item-slug="sniadania"] .accordion-item .trigger-arrow,
html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .accordion-content,
html[data-wf-item-slug="sniadania"] .accordion-item .accordion-content {
  display: none !important;
}

html[data-wf-item-slug="sniadania"] .breakfast-notice {
  display: block;
  max-width: 42rem;
  margin: 0 0 1.25rem;
  padding: .85rem 1rem;
  background: #ebe6dd;
  color: #61533a;
  border: 0;
  border-left: 2px solid #a55a2c;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

@media screen and (max-width: 991px) {
  .menu-suite-nav {
    position: relative;
    z-index: 6;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    background: #f2f1e2;
    border-bottom: 1px solid #ddd6c6;
  }

  .menu-suite-nav a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 4.5rem;
    padding: .85rem 1rem;
    color: #1a1b1f;
    font-family: var(--font-heading);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
  }

  .menu-suite-nav a + a { border-left: 1px solid #ddd6c6; }

  .menu-suite-nav a:hover,
  .menu-suite-nav a:focus-visible,
  .menu-suite-nav a[aria-current="page"] {
    background: #ebe6dd;
    color: #9a5e35;
  }

  .menu-suite-nav small {
    margin-top: .2rem;
    color: #61533a;
    font-family: var(--font-body);
    font-size: .66rem;
    font-weight: 400;
  }

  html[data-wf-item-slug="menu-restauracyjne"] .sub-section-header.no-hero-image,
  html[data-wf-item-slug="sniadania"] .sub-section-header.no-hero-image {
    padding-top: clamp(2.75rem, 8vw, 5rem);
  }
}

@media screen and (max-width: 640px) {
  .menu-suite-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .menu-suite-nav a {
    min-height: 4rem;
    padding: .7rem .8rem;
  }

  .menu-suite-nav a:nth-child(3) { border-left: 0; }

  .menu-suite-nav a:nth-child(n + 3) { border-top: 1px solid #ddd6c6; }

  html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .trigger-wrapper,
  html[data-wf-item-slug="sniadania"] .accordion-item .trigger-wrapper {
    grid-template-columns: 1fr;
    gap: .25rem;
  }

  html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item-row {
    align-items: flex-start;
  }

  html[data-wf-item-slug="menu-restauracyjne"] .menu-flat-item-price,
  html[data-wf-item-slug="menu-restauracyjne"] .accordion-item .h5-style-2-cena,
  html[data-wf-item-slug="sniadania"] .accordion-item .h5-style-2-cena {
    color: #9a5e35;
  }
}