/* ==========================================================================
   Tastari Mediterrani - standard design layer

   Loaded on every page, after premium.css. It gives all pages the same
   plain, readable structure as the menu page: a page head with real text,
   white cards on the cream canvas, one button style, one FAQ, one booking
   band.

   Titles: the thin serif (Playfair Display at weight 300) was hard to read,
   above all on phones and over photos. Titles now use the same family as the
   text, Plus Jakarta Sans, in bold. Changing --font-display below is what
   switches every existing title; the rest of section 1 fixes their weight.

   New markup uses the `st-` prefix. The mobile drawer is still styled by
   premium.css; the header bar is restyled in section 14, the footer in 20.

   1. Tokens and titles      6. Home                 11. Gallery
   2. Base and buttons       7. Cards and photos     12. Group / event pages
   3. Page head              8. Forms                13. Small screens
   4. Sections               9. FAQ                  14. Header and banner
   5. Rating and facts       10. Booking band        15. Offer banner
                                                     16. Events
                                                     17. Reserving
                                                     18. Event / group pages
                                                     19. Logo size
                                                     20. Footer
                                                     21. Language switcher
                                                     22. Close buttons
   ========================================================================== */

/* ---------- 1. Tokens and titles ---------- */

:root {
  --font-display: 'Plus Jakarta Sans', 'Montserrat', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --st-ink: #1A1817;
  --st-soft: #55504B;
  --st-mute: #7D766F;
  --st-line: #E7E0D3;
  --st-line-strong: #D6CDBD;
  --st-card: #FFFFFF;
  --st-tint: #EFE9DE;
  --st-navy: #0B104A;
  --st-navy-soft: #1A2063;
  --st-gold: #C6892C;
  --st-gold-text: #8A5D14; /* gold dark enough to read as text on cream */
  --st-radius: 16px;
  --st-radius-lg: 20px;
  --st-shadow: 0 1px 2px rgba(26, 24, 23, .04), 0 14px 30px -20px rgba(11, 16, 74, .28);
}

h1, h2, h3, h4, h5, h6,
.pm-title,
.page-header-content h1,
.pm-menu-group-head h2,
.pm-menus-banner-brand,
.pm-menu-card-title,
.pm-menu-card-price,
.pm-event-highlight-title,
.pm-event-copy h2,
.pm-event-copy h3,
.pm-feature-card-body h3,
.pm-reserve-form-panel h2,
.page .entry-content h1,
.page .entry-content h2,
.page .entry-content h3,
.page .entry-content h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
}

.pm-title em,
.slide-content .pm-title em { font-style: normal; font-weight: 700; }

/* Navigation and footer tagline used the display face too. */
body #header .main-nav .MenuUl li a,
body.home #header .main-nav .MenuUl li a { font-weight: 500; }
body #header .main-nav .MenuUl li.current-menu-item a { font-weight: 700; }
body #header .main-nav ul li:last-child a,
body #header .main-nav ul li:last-child a:hover { font-weight: 600 !important; }
.pm-footer-tagline p { font-style: normal; font-weight: 600; letter-spacing: -.02em; }

/* The header no longer sits on a photo, so the menu button is always the
   solid version: on phones it had white bars on a cream button. */
body #header .mobile-menu-toggle { background: var(--cream-deep, #EFE9DE); border-color: var(--line, #E0D7C6); backdrop-filter: none; }
body #header .mobile-menu-toggle span { background: var(--ink, #1A1817); }

/* Tablets (767-900px): the root style.css hides the wrapper that holds the
   menu button from 767px up, but the navigation only becomes a row above
   900px - in between there was no way to open the menu at all. */
@media (min-width: 767px) and (max-width: 900px) {
  #header .tableBooking { display: flex !important; }
}

/* ---------- 2. Base and buttons ---------- */

/* style.css set Cinzel on body and on every button, and other rules only
   replaced it piece by piece. Cinzel is no longer loaded at all, so anything
   still asking for it would fall back to a system serif. */
body,
button,
input,
select,
textarea { font-family: var(--font-body, "Plus Jakarta Sans", sans-serif); }

.st-page {
  display: block;
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--st-ink);
}

.st-page p { margin: 0; font-size: inherit; }
.st-page ul { list-style: none; margin: 0; padding: 0; }
.st-page figure { margin: 0; }
.st-page img { max-width: 100%; }
.st-page button { font-family: inherit; }
.st-page [hidden] { display: none !important; }

.st-page :focus-visible,
.st-lightbox :focus-visible {
  outline: 2px solid var(--st-navy);
  outline-offset: 2px;
}

.st-page .st-h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.03em;
  color: var(--st-ink);
  text-wrap: balance;
}

.st-page .st-h2 {
  margin: 0;
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--st-ink);
  text-wrap: balance;
}

.st-page .st-h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--st-ink);
}

.st-page .st-eyebrow {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--st-gold-text);
}

.st-page .st-lede {
  max-width: 60ch;
  margin-top: 16px;
  font-size: clamp(1.02rem, 1.4vw, 1.15rem);
  line-height: 1.6;
  color: var(--st-soft);
}

.st-page .st-text {
  max-width: 62ch;
  margin-top: 10px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--st-soft);
}
.st-text a { color: var(--st-navy); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

.st-prose { font-size: 16.5px; line-height: 1.7; color: var(--st-soft); }
.st-page .st-prose p { margin: 0 0 1em; }
.st-page .st-prose p:empty { display: none; }
.st-prose strong, .st-prose b { color: var(--st-ink); }
.st-prose a { color: var(--st-navy); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
.st-page .st-prose h2 { margin: 1.6em 0 .5em; font-size: 1.5rem; color: var(--st-ink); }
.st-page .st-prose h3 { margin: 1.4em 0 .4em; font-size: 1.2rem; color: var(--st-ink); }
.st-page .st-prose ul { list-style: disc; margin: 0 0 1em 1.2em; }
.st-prose--page { max-width: 760px; }
.st-prose iframe { max-width: 100%; border-radius: var(--st-radius); }

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--st-line-strong);
  border-radius: 12px;
  background: var(--st-card);
  color: var(--st-ink);
  font-family: var(--font-body, sans-serif);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.st-btn:hover { border-color: var(--st-ink); color: var(--st-ink); }
.st-btn:focus-visible { border-radius: 12px; }
.st-btn--lg { min-height: 52px; padding: 0 24px; font-size: 15.5px; }
.st-btn--block { width: 100%; }

.st-btn.st-btn--primary { background: var(--st-navy); border-color: var(--st-navy); color: #fff; }
.st-btn.st-btn--primary:hover { background: var(--st-navy-soft); border-color: var(--st-navy-soft); color: #fff; }

.st-btn.st-btn--whatsapp { background: #F0FAF4; border-color: #BDE3CC; color: #0F7A3F; }
.st-btn.st-btn--whatsapp:hover { background: #E2F5EA; border-color: #0F7A3F; color: #0F7A3F; }

.st-btn.st-btn--light { background: #fff; border-color: #fff; color: var(--st-navy); }
.st-btn.st-btn--light:hover { background: var(--st-tint); border-color: var(--st-tint); color: var(--st-navy); }

.st-btn.st-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.st-btn.st-btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

.st-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.st-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--st-navy);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.st-link i { font-size: 12px; transition: transform .2s ease; }
.st-link:hover { color: var(--st-navy); text-decoration: underline; text-underline-offset: 4px; }
.st-link:hover i { transform: translateX(3px); }

.st-page .st-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 14px;
  border: 1px solid #EAD8B2;
  border-radius: 999px;
  background: #FBF3E2;
  color: #74500F;
  font-size: 14px;
  font-weight: 650;
}

/* ---------- 3. Page head ---------- */

.st-pagehead { padding: 8px 0 40px; }

.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--st-mute);
}
.st-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.st-crumbs a:hover { color: var(--st-ink); }

.st-page .st-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  margin-top: 18px;
  font-size: 14.5px;
  color: var(--st-soft);
}
.st-meta li { display: inline-flex; align-items: center; gap: 8px; }
.st-meta i { color: var(--st-gold); font-size: 13px; }

/* ---------- 4. Sections ---------- */

.st-section { padding: 72px 0; }
.st-section--white { background: var(--st-card); }
.st-section--flush { padding-top: 0; }

.st-section-head { margin-bottom: 32px; }
.st-section-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
}

/* ---------- 5. Rating and facts ---------- */

.st-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--st-ink);
  font-size: 14.5px;
  text-decoration: none;
}
.st-rating-score {
  padding: 5px 8px;
  border-radius: 8px;
  background: var(--st-navy);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1;
}
.st-stars { font-size: 15px; line-height: 1; letter-spacing: 1px; }
.st-stars::before {
  content: '\2605\2605\2605\2605\2605';
  background: linear-gradient(90deg, var(--st-gold) calc(var(--rating, 5) / 5 * 100%), #D9D1C3 calc(var(--rating, 5) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.st-rating-count { color: var(--st-soft); text-decoration: underline; text-decoration-color: var(--st-line-strong); text-underline-offset: 3px; }
.st-rating:hover .st-rating-count { color: var(--st-ink); text-decoration-color: currentColor; }

.st-rating--lg { gap: 12px; padding: 12px 16px; border: 1px solid var(--st-line); border-radius: 14px; background: var(--st-card); }
.st-rating--lg .st-rating-score { padding: 9px 11px; border-radius: 10px; font-size: 18px; }
.st-rating--lg > span:last-child { display: grid; gap: 4px; }

.st-page .st-facts {
  display: grid;
  gap: 13px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--st-soft);
}
.st-facts li { display: flex; gap: 12px; }
.st-facts i { flex: none; width: 16px; margin-top: 3px; color: var(--st-gold); text-align: center; }
.st-facts strong { color: var(--st-ink); }
.st-facts a { color: var(--st-navy); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.st-info-card {
  padding: 24px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  background: var(--st-card);
  box-shadow: var(--st-shadow);
}
.st-info-card .st-h3 { margin-bottom: 16px; }
.st-info-card .st-text { margin: -8px 0 16px; font-size: 14.5px; }
.st-info-card--accent { background: var(--st-tint); box-shadow: none; }

.st-info-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.st-info-actions .st-btn { padding: 0 10px; white-space: nowrap; }
.st-info-actions + .st-facts { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--st-line); }

.st-hours { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--st-line); font-size: 14.5px; }
.st-page .st-hours h3 { margin: 0 0 8px; font-size: 14.5px; font-weight: 700; letter-spacing: 0; color: var(--st-ink); }
.st-hours dl { display: grid; gap: 6px; margin: 0; }
.st-hours dl > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 14px; }
.st-hours dt { color: var(--st-soft); font-weight: 400; }
.st-hours dd { margin: 0; color: var(--st-ink); font-weight: 650; white-space: nowrap; }

.st-map { border-radius: var(--st-radius-lg); overflow: hidden; background: var(--st-tint); min-height: 380px; }
.st-map iframe { display: block; width: 100% !important; height: 100% !important; min-height: 380px; border: 0; }
.st-map--wide, .st-map--wide iframe { min-height: 440px; }

.st-location-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 24px; align-items: stretch; }
.st-location-grid .st-info-card { box-shadow: none; }

/* ---------- 6. Home ---------- */

.st-hero { padding: 16px 0 72px; }

/* Text and photos share the site's container (.pm-container), like the
   banner of every other page: both edges line up with the content below.
   The text column is as narrow as the title and the quick form allow, so
   the photos get the rest. */
.st-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
}
.st-hero-text { min-width: 0; }

.st-hero .st-rating { margin-bottom: 20px; }
.st-hero .st-h1 { max-width: none; font-size: clamp(2rem, 3.5vw, 3rem); }
.st-hero .st-lede { max-width: 48ch; }
.st-hero .st-actions { margin-top: 28px; }

.st-page .st-hero-facts {
  display: grid;
  gap: 14px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--st-line);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--st-soft);
}
.st-hero-facts li { display: flex; gap: 14px; }
.st-hero-facts i { flex: none; width: 18px; margin-top: 3px; color: var(--st-gold); text-align: center; }
.st-hero-facts strong { color: var(--st-ink); font-weight: 650; }
.st-hero-facts a { color: inherit; text-decoration: none; }
.st-hero-facts li > span > strong:first-child,
.st-hero-facts li > span > a:first-child { margin-right: 6px; }
/* Days on the left, hours on the right, always with a gap between them.
   The gap used to be a fixed width for the Spanish text; in a translation
   the days are longer ("Sunday to Thursday") and ran into the hours. */
.st-hero-hours { display: flex; flex-wrap: wrap; gap: 0 14px; }
.st-hero-hours strong { min-width: 132px; }

.st-hero-media {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
  height: clamp(420px, 46vw, 640px);
}
.st-hero-media figure { min-height: 0; border-radius: var(--st-radius-lg); overflow: hidden; background: var(--st-tint); }
.st-hero-media figure:first-child { grid-row: 1 / span 2; }
.st-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-hero-media--1 { grid-template-columns: 1fr; }
.st-hero-media--2 { grid-template-rows: 1fr; }
.st-hero-media--2 figure:first-child { grid-row: auto; }

.st-page .st-dishes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-dish a {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  color: var(--st-ink);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-dish a:hover { border-color: var(--st-line-strong); box-shadow: var(--st-shadow); color: var(--st-ink); }
.st-dish a:focus-visible { border-radius: var(--st-radius); }
.st-dish-photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--st-tint); }
.st-dish-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.st-dish a:hover .st-dish-photo img { transform: scale(1.05); }
.st-dish-body { display: flex; flex-direction: column; gap: 2px; flex: 1; padding: 13px 15px 15px; }
.st-dish-name { font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.st-dish-alt { font-size: 13px; line-height: 1.4; color: var(--st-mute); }
.st-dish-price { margin-top: auto; padding-top: 8px; font-size: 15px; font-weight: 700; color: var(--st-navy); }

.st-page .st-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* Square: the photos of the sections are square or close to it, so a wide
   tile cut off the top and bottom of every dish. */
.st-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  color: var(--st-ink);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-tile:hover { border-color: var(--st-line-strong); box-shadow: var(--st-shadow); color: var(--st-ink); }
.st-tile:focus-visible { border-radius: var(--st-radius); }
.st-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.st-tile:hover img { transform: scale(1.05); }
.st-tile-body { position: relative; display: grid; gap: 2px; width: 100%; padding: 16px 18px; }
.st-tile-name { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.st-tile-count { font-size: 13px; color: var(--st-mute); }
.st-tile.has-image { border: 0; color: #fff; }
.st-tile.has-image:hover { color: #fff; }
.st-tile.has-image .st-tile-body { background: linear-gradient(180deg, rgba(7, 10, 48, 0) 0%, rgba(7, 10, 48, .86) 78%); padding-top: 72px; }
.st-tile.has-image .st-tile-count { color: rgba(255, 255, 255, .82); }

.st-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.st-split-media { border-radius: var(--st-radius-lg); overflow: hidden; background: var(--st-tint); aspect-ratio: 4 / 3; }
.st-split-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-split-text .st-prose { margin-top: 16px; }
.st-split-text > .st-btn { margin-top: 10px; }

.st-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.st-way {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  background: var(--st-card);
}
.st-way > i { font-size: 22px; color: var(--st-gold); margin-bottom: 4px; }
.st-way p { font-size: 15px; line-height: 1.6; color: var(--st-soft); }
.st-way .st-btn { margin-top: auto; }
.st-way p + .st-btn { margin-top: 10px; }
.st-way--featured { background: var(--st-navy); border-color: var(--st-navy); }
.st-page .st-way--featured .st-h3 { color: #fff; }
.st-way--featured p { color: rgba(255, 255, 255, .82); }
.st-way--featured > i { color: #E7B866; }

.st-reviews-widget { max-width: 100%; overflow-x: auto; }

/* ---------- 7. Cards and photos ---------- */

.st-cards { display: grid; gap: 16px; }
.st-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  background: var(--st-bg, #F7F4EE);
}
.st-card > i { font-size: 22px; color: var(--st-gold); margin-bottom: 4px; }
.st-card p { font-size: 15px; line-height: 1.6; color: var(--st-soft); }
.st-card .st-link { margin-top: auto; padding-top: 6px; }

.st-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.st-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-photos--1 { grid-template-columns: 1fr; }
.st-photos figure { aspect-ratio: 4 / 3; border-radius: var(--st-radius); overflow: hidden; background: var(--st-tint); }
.st-photos img { display: block; width: 100%; height: 100%; object-fit: cover; }

.st-cover { margin-bottom: 32px !important; border-radius: var(--st-radius-lg); overflow: hidden; aspect-ratio: 21 / 9; background: var(--st-tint); }
.st-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Contact channels */
.st-channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 28px; }
.st-channel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  color: var(--st-ink);
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-channel:hover { border-color: var(--st-line-strong); box-shadow: var(--st-shadow); color: var(--st-ink); }
.st-channel:focus-visible { border-radius: var(--st-radius); }
.st-channel i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--st-tint);
  color: var(--st-navy);
  font-size: 16px;
}
.st-channel--whatsapp i { background: #E2F5EA; color: #0F7A3F; font-size: 20px; }
.st-channel-label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-mute); }
.st-channel-value { font-size: 15.5px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }

.st-social { display: grid; gap: 8px; }
.st-social a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--st-line);
  border-radius: 12px;
  color: var(--st-ink);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
}
.st-social a:hover { border-color: var(--st-ink); color: var(--st-ink); }
.st-social a:focus-visible { border-radius: 12px; }
.st-social i { width: 18px; color: var(--st-navy); text-align: center; }

/* ---------- 8. Forms ---------- */

.st-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.st-form-aside { display: grid; gap: 16px; }

.st-panel {
  padding: 32px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  background: var(--st-card);
  box-shadow: var(--st-shadow);
}

.st-notice {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 16px;
  border: 1px solid #BDE3CC;
  border-radius: 12px;
  background: #F0FAF4;
  color: #0B5C30;
  font-size: 14.5px;
  line-height: 1.5;
}
.st-notice i { margin-top: 3px; }

.st-form { margin-top: 24px; }
.st-form .wpcf7 form > p { margin: 0; }
.st-form br { display: none; }

.st-form .st-field { margin-bottom: 18px; }
.st-form .st-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.st-form .st-field-row--3 { grid-template-columns: 1.3fr 1fr 1fr; }
.st-form .st-field p { margin: 0; }

.st-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 650;
  color: var(--st-ink);
}
.st-form label small { font-weight: 400; color: var(--st-mute); font-size: 13px; }
.st-form .wpcf7-form-control-wrap { display: block; }

.st-form input[type="text"],
.st-form input[type="email"],
.st-form input[type="tel"],
.st-form input[type="date"],
.st-form input[type="number"],
.st-form select,
.st-form textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid var(--st-line-strong);
  border-radius: 12px;
  background: #fff;
  color: var(--st-ink);
  font-family: var(--font-body, sans-serif);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-form textarea { min-height: 120px; resize: vertical; }
.st-form select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1817' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.st-form input:focus,
.st-form select:focus,
.st-form textarea:focus {
  border-color: var(--st-navy);
  border-radius: 12px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 16, 74, .12);
}
.st-form ::placeholder { color: var(--st-mute); }
.st-form .wpcf7-not-valid { border-color: #B3261E; }
.st-form .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 13px; color: #B3261E; }

.st-form .st-submit,
.st-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 54px;
  margin-top: 6px;
  padding: 0 24px;
  border: 1px solid var(--st-navy);
  border-radius: 12px;
  background: var(--st-navy);
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease;
}
.st-form .st-submit:hover,
.st-form input[type="submit"]:hover { background: var(--st-navy-soft); }
.st-form .st-submit:focus-visible { border-radius: 12px; }
.st-form .wpcf7-spinner { display: block; margin: 10px auto 0; }
.st-form .wpcf7 form .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 14.5px;
}
.st-form-note { margin-top: 12px !important; font-size: 13px !important; color: var(--st-mute); text-align: center; }

/* ---------- 9. FAQ ---------- */

.st-faq { background: var(--st-card); }
.st-faq-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 56px; align-items: start; }
.st-faq-intro { position: sticky; top: calc(var(--pm-header-h, 68px) + 90px); }
.st-faq-list { display: grid; gap: 10px; }

.st-faq-item {
  border: 1px solid var(--st-line);
  border-radius: 14px;
  background: #FBFAF7;
  transition: border-color .2s ease, background .2s ease;
}
.st-faq-item[open] { border-color: var(--st-line-strong); background: var(--st-card); }
.st-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
}
.st-faq-item summary::-webkit-details-marker { display: none; }
.st-faq-item summary:focus-visible { border-radius: 14px; }
.st-page .st-faq-q {
  margin: 0;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--st-ink);
}
.st-faq-icon { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--st-tint); }
.st-faq-icon::before,
.st-faq-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  margin: -1px 0 0 -5.5px;
  border-radius: 2px;
  background: var(--st-ink);
  transition: transform .2s ease;
}
.st-faq-icon::after { transform: rotate(90deg); }
.st-faq-item[open] .st-faq-icon::after { transform: rotate(0deg); }
.st-faq-a { padding: 0 64px 20px 20px; }
.st-faq-a p { font-size: 15.5px; line-height: 1.65; color: var(--st-soft); }

/* ---------- 10. Booking band ---------- */

.st-cta { padding: 72px 0; }
.st-faq + .st-cta { background: var(--st-card); padding-top: 0; }

.st-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  flex-wrap: wrap;
  padding: 44px 48px;
  border-radius: 24px;
  background: var(--st-navy);
  color: #fff;
}
.st-cta-text { flex: 1 1 380px; }
.st-page .st-cta-box .st-h2 { color: #fff; }
.st-cta-text p { margin-top: 10px; max-width: 52ch; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.st-cta-text .st-cta-note { color: #E7B866; font-weight: 650; }
.st-cta-box .st-actions { margin-top: 0; }

/* ---------- 11. Gallery ---------- */

.st-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.st-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--st-line-strong);
  border-radius: 999px;
  background: var(--st-card);
  color: var(--st-soft);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.st-filter span { font-size: 12.5px; font-weight: 600; color: var(--st-mute); }
.st-filter:hover { border-color: var(--st-ink); color: var(--st-ink); }
.st-filter:focus-visible { border-radius: 999px; }
.st-filter.is-active { background: var(--st-navy); border-color: var(--st-navy); color: #fff; }
.st-filter.is-active span { color: rgba(255, 255, 255, .75); }

.st-gallery-group + .st-gallery-group { margin-top: 48px; }
.st-page .st-gallery-title { margin-bottom: 18px; font-size: clamp(1.3rem, 2vw, 1.6rem); }
.st-gallery.is-filtered .st-gallery-title { display: none; }

.st-page .st-gallery-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
.st-shot a {
  display: block;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--st-tint);
  cursor: zoom-in;
}
.st-shot a:focus-visible { border-radius: 14px; }
.st-shot img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.st-shot a:hover img { transform: scale(1.05); }
.st-shot figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: var(--st-soft); }

.st-lightbox {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(10, 10, 20, .94);
  color: #fff;
  font-family: var(--font-body, sans-serif);
}
.st-lightbox[open] {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  /* One row exactly as tall as the screen: without it the row grew with a
     tall photo, which pushed the photo off the bottom and the arrows with it. */
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  overflow: hidden;
}
.st-lightbox::backdrop { background: rgba(10, 10, 20, .94); }
.st-lightbox figure {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 56px 0 24px;
  box-sizing: border-box;
}
/* The whole photo, never cropped and never taller than the screen: the
   150px is the room kept for the close button above and the caption below. */
.st-lightbox img {
  flex: 0 1 auto;
  width: auto;
  height: auto;
  min-height: 0;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  object-fit: contain;
  border-radius: 10px;
}
.st-lightbox figcaption { max-width: 70ch; padding: 0 8px; font-size: 14.5px; line-height: 1.5; text-align: center; color: rgba(255, 255, 255, .9); }
.st-lightbox button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s ease;
}
.st-lightbox button:hover { background: rgba(255, 255, 255, .28); }
.st-lightbox button:focus-visible { outline-color: #fff; border-radius: 50%; }
.st-lightbox-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.st-lightbox-prev { grid-column: 1; grid-row: 1; justify-self: center; }
.st-lightbox-next { grid-column: 3; grid-row: 1; justify-self: center; }

/* ---------- 12. Group / event pages (premium.css sections) ---------- */

/* Event and group-menu pages are styled in section 18. */

/* ---------- 13. Small screens ---------- */

@media (max-width: 1080px) {
  .st-page .st-dishes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-page .st-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-form-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .st-faq-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; }
  .st-hero-grid { gap: 32px; }
}

@media (max-width: 1150px) {
  .st-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .st-section, .st-cta { padding: 56px 0; }
  .st-section--flush { padding-top: 0; }
  .st-faq + .st-cta { padding-top: 0; }

  .st-hero { padding-bottom: 56px; }
  /* One column: title, buttons, then the photos, then the practical details.
     `display: contents` lets the photos sit between two parts of the text. */
  .st-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .st-hero-text { display: contents; }
  .st-hero-media { order: 1; margin-top: 28px; }
  .st-page .st-hero-facts { order: 2; }
  .st-hero .st-rating { justify-self: start; }
  .st-hero .st-h1 { max-width: 18ch; font-size: clamp(2rem, 4.4vw, 3.25rem); }
  .st-hero-media { height: clamp(320px, 66vw, 520px); }

  .st-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .st-location-grid { grid-template-columns: minmax(0, 1fr); }
  .st-form-grid { grid-template-columns: minmax(0, 1fr); }
  .st-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .st-faq-intro { position: static; }
  .st-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .st-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-cta-box { padding: 36px 32px; }
}

@media (max-width: 640px) {
  .st-section, .st-cta { padding: 44px 0; }
  .st-section--flush { padding-top: 0; }
  .st-faq + .st-cta { padding-top: 0; }
  .st-section-head { margin-bottom: 24px; }
  .st-pagehead { padding-bottom: 28px; }

  .st-actions .st-btn--lg { flex: 1 1 100%; }
  .st-hero .st-actions .st-btn--lg { flex: 1 1 calc(50% - 5px); padding: 0 12px; }

  .st-hero { padding: 8px 0 44px; }
  .st-hero-media { height: 360px; gap: 8px; }
  .st-page .st-hero-facts { margin-top: 24px; padding-top: 22px; }
  .st-hero-hours strong { min-width: 0; }
  .st-hero-facts li > span > strong:first-child,
  .st-hero-facts li > span > a:first-child { display: block; }
  .st-hero-hours strong:first-child { display: inline !important; margin-right: 0; }

  .st-page .st-dishes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-dish-body { padding: 11px 12px 13px; }
  .st-dish-name { font-size: 14.5px; }
  .st-dish-alt { display: none; }

  .st-page .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Two columns: a ninth tile would sit alone, so it takes the whole row. */
  .st-tiles li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .st-tiles li:last-child:nth-child(odd) .st-tile { aspect-ratio: 2 / 1; }
  .st-tile-body { padding: 12px 14px; }
  .st-tile.has-image .st-tile-body { padding-top: 40px; }
  .st-tile-name { font-size: 15px; }

  .st-photos, .st-photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .st-photos--3 figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

  .st-way, .st-card { padding: 22px; }
  .st-panel { padding: 22px 18px; border-radius: var(--st-radius); }
  .st-info-card { padding: 20px; }
  .st-form .st-field-row { grid-template-columns: minmax(0, 1fr); }
  .st-form .st-field-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-form .st-field-row--3 > :first-child { grid-column: 1 / -1; }

  .st-map, .st-map iframe { min-height: 300px; }
  .st-map--wide, .st-map--wide iframe { min-height: 320px; }

  .st-faq-item summary { padding: 16px; }
  .st-page .st-faq-q { font-size: 15.5px; }
  .st-faq-a { padding: 0 16px 18px; }

  .st-cta-box { padding: 30px 22px; border-radius: 20px; }
  .st-cta-box .st-actions { width: 100%; }

  .st-page .st-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .st-shot figcaption { font-size: 12.5px; }
  .st-filters { flex-wrap: nowrap; margin: 0 -24px 22px; padding: 0 24px; overflow-x: auto; scrollbar-width: none; }
  .st-filters::-webkit-scrollbar { display: none; }
  .st-filter { flex: none; }

  .st-lightbox[open] { grid-template-columns: minmax(0, 1fr); }
  .st-lightbox figure { grid-column: 1; padding: 64px 12px 84px; }
  .st-lightbox img { max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); }
  .st-lightbox-prev, .st-lightbox-next { position: absolute; bottom: 20px; grid-column: auto; grid-row: auto; }
  .st-lightbox-prev { left: calc(50% - 56px); }
  .st-lightbox-next { left: calc(50% + 10px); }
}

@media (prefers-reduced-motion: reduce) {
  .st-page *, .st-lightbox * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   14. HEADER AND BANNER - two separate blocks on every page

   Before, the header and the page head were both cream and read as one area.
   Now the header is a white bar with a rule under it, and the banner (page
   title, intro, actions) is a navy band directly below it.

   The header stays `position: fixed`, as premium.css and the mobile drawer
   expect. The banner therefore starts at the very top of the page, *behind*
   the header, and clears it with its own top padding: if the header is a few
   pixels taller or shorter than --st-header-h, the only effect is a few
   pixels more or less navy above the breadcrumb - never a gap between the two.
   ========================================================================== */

/* Measured header heights (see section 19 for the logo that sets them):
   138px on a desktop, 131px on a tablet, 73px on a phone. premium.css changes
   to the phone header at 767px, so the same breakpoint is used here. */
:root { --st-header-h: 138px; }
@media (max-width: 900px) { :root { --st-header-h: 131px; } }
@media (max-width: 767px) { :root { --st-header-h: 73px; --pm-header-h: 73px; } }

body #header,
body #header.pm-scrolled {
  background: #fff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--st-line);
  box-shadow: none !important;
}
body #header.pm-scrolled { box-shadow: 0 8px 24px -18px rgba(11, 16, 74, .45) !important; }

/* The language button was a dark glass pill made for photo heroes. */
body #header #flags { background: var(--cream-deep, #EFE9DE); border-color: var(--line, #E0D7C6); }
body #header #flags::before,
body #header #flags::after { color: var(--ink-soft, #5C5652); }

/* The logo sat on a white card so it could be read over a photo. On a white
   bar the card is only a stray shadow. */
body #header .logo { background: none; box-shadow: none; padding-left: 0; padding-right: 0; border-radius: 0; }

/* Every page opens with a banner that clears the header by itself. */
html body.page { padding-top: 0; }

.st-banner {
  position: relative;
  padding-top: calc(var(--st-header-h) + 34px);
  padding-bottom: 44px;
  background:
    radial-gradient(900px 380px at 88% 0%, rgba(198, 137, 44, .2), rgba(198, 137, 44, 0) 70%),
    var(--st-navy);
  color: #fff;
}

.st-banner .st-crumbs,
.carta .carta-banner .carta-crumbs { color: rgba(255, 255, 255, .62); }
.st-banner .st-crumbs a:hover,
.carta .carta-banner .carta-crumbs a:hover { color: #fff; }

.st-page .st-banner .st-eyebrow { color: #E7B866; }
.st-page .st-banner .st-h1,
.carta .carta-banner .carta-title { color: #fff; }
.st-page .st-banner .st-lede,
.carta .carta-banner .carta-intro { color: rgba(255, 255, 255, .82); }

.st-page .st-banner .st-meta,
.carta .carta-banner .carta-meta { color: rgba(255, 255, 255, .8); }
.st-banner .st-meta i,
.carta-banner .carta-meta i { color: #E7B866; }
.carta .carta-banner .carta-meta a { text-decoration-color: rgba(255, 255, 255, .35); }
.carta .carta-banner .carta-meta a:hover { color: #fff; }

.st-banner .st-rating,
.carta .carta-banner .carta-meta .carta-rating { color: #fff; }
.st-banner .st-rating-score,
.carta-banner .carta-rating-score { background: #fff; color: var(--st-navy); }
.st-banner .st-stars::before,
.carta-banner .carta-stars::before {
  background: linear-gradient(90deg, #E7B866 calc(var(--rating, 5) / 5 * 100%), rgba(255, 255, 255, .3) calc(var(--rating, 5) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
}
.st-banner .st-rating-count,
.carta-banner .carta-rating-count { color: rgba(255, 255, 255, .86); text-decoration-color: rgba(255, 255, 255, .35); }
.st-banner .st-rating:hover .st-rating-count,
.carta-banner .carta-rating:hover .carta-rating-count { color: #fff; }

/* Buttons on navy: the main one turns white, the others become outlines. */
.st-banner .st-btn { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.st-banner .st-btn:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.st-banner .st-btn.st-btn--primary { background: #fff; border-color: #fff; color: var(--st-navy); }
.st-banner .st-btn.st-btn--primary:hover { background: var(--st-tint); border-color: var(--st-tint); color: var(--st-navy); }
.st-banner :focus-visible { outline-color: #fff; }

.st-pagehead.st-banner { padding-bottom: 44px; }

/* Home hero */
.st-hero.st-banner { padding-bottom: 64px; }
.st-page .st-banner .st-hero-facts { border-top-color: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .74); }
.st-banner .st-hero-facts strong { color: #fff; }
.st-banner .st-hero-facts i { color: #E7B866; }

/* Menu page */
.carta-banner { padding-bottom: 36px; }
.carta .carta-banner .carta-head { margin-bottom: 26px; }
.carta-banner + .carta-bar { margin-top: 0; border-top: 0; }

/* What follows a banner needs its own air now that the banner is a block. */
.st-banner + .st-section--flush { padding-top: 48px; }
.st-banner + .st-menus { padding-top: 48px; }

/* Six links in the bar since "Eventos" joined: tighten the gaps a little
   before they would wrap. */
@media (min-width: 901px) and (max-width: 1180px) {
  #header .main-nav ul#main-mobile-menu { gap: 22px; }
  body #header .main-nav .MenuUl li a { font-size: 14.5px; }
}

/* ==========================================================================
   15. OFFER BANNER
   ========================================================================== */

.st-offer { padding: 56px 0; }
.st-section:not(.st-section--white) + .st-offer { padding-top: 0; }
/* The FAQ is white without the --white class, so it keeps its own padding. */
.st-offer + .st-section:not(.st-section--white):not(.st-faq) { padding-top: 0; }
.carta-faq > .st-offer:first-child { padding-top: 0; }

.st-offer-link {
  display: block;
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  background: var(--st-tint);
  box-shadow: var(--st-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.st-offer-link:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(26, 24, 23, .05), 0 22px 40px -22px rgba(11, 16, 74, .45); }
.st-offer-link:focus-visible { outline: 2px solid var(--st-navy); outline-offset: 3px; border-radius: var(--st-radius-lg); }
/* No fixed ratio: the image keeps the shape it was exported in, so nothing
   on it is ever cropped. */
.st-offer img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   16. EVENTS
   ========================================================================== */

.st-page .st-event-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-page .st-event-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-page .st-event-cards--1 { grid-template-columns: minmax(0, 560px); }

.st-event-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  color: var(--st-ink);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-event-card:hover { border-color: var(--st-line-strong); box-shadow: var(--st-shadow); color: var(--st-ink); }
.st-event-card:focus-visible { border-radius: var(--st-radius); }

.st-event-photo { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--st-navy); }
.st-event-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.st-event-card:hover .st-event-photo img { transform: scale(1.04); }
.st-event-label {
  position: absolute;
  left: 12px;
  top: 12px;
  padding: 6px 11px;
  border-radius: 999px;
  background: #fff;
  color: var(--st-navy);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px -6px rgba(7, 10, 48, .5);
}

.st-event-body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 18px 18px; }
.st-event-title { font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.st-event-dates { font-size: 13.5px; font-weight: 650; color: var(--st-gold-text); }
.st-event-text { font-size: 14.5px; line-height: 1.55; color: var(--st-soft); }
.st-event-more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; font-size: 14.5px; font-weight: 650; color: var(--st-navy); }
.st-event-more i { font-size: 12px; transition: transform .2s ease; }
.st-event-card:hover .st-event-more i { transform: translateX(3px); }

.st-events-copy { margin-top: 36px; }
.st-offer + .st-events { padding-top: 0; }

@media (max-width: 900px) {
  .st-banner { padding-top: calc(var(--st-header-h) + 26px); padding-bottom: 36px; }
  .st-hero.st-banner { padding-bottom: 48px; }
  .st-banner + .st-section--flush,
  .st-banner + .st-menus { padding-top: 36px; }
  .st-page .st-event-cards,
  .st-page .st-event-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-offer { padding: 44px 0; }
}

@media (max-width: 640px) {
  .st-banner { padding-top: calc(var(--st-header-h) + 20px); padding-bottom: 30px; }
  .st-hero.st-banner { padding-bottom: 40px; }
  .carta-banner { padding-bottom: 26px; }
  .st-banner + .st-section--flush,
  .st-banner + .st-menus { padding-top: 28px; }
  .st-page .st-event-cards,
  .st-page .st-event-cards--2,
  .st-page .st-event-cards--1 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-event-photo { aspect-ratio: 16 / 9; }
  .st-offer { padding: 36px 0; }
  .st-offer-link { border-radius: var(--st-radius); }
}

/* ==========================================================================
   17. RESERVING - the quick form in the home banner and the desktop
       WhatsApp button

   Everything here exists to shorten the way from "I like this place" to a
   reservation request: the first screen of the home page asks for the day,
   the time and how many people, and WhatsApp is one click away on every page.
   ========================================================================== */

.st-quick {
  display: grid;
  /* Date, time, people; the button takes the row under them. */
  grid-template-columns: minmax(120px, 1fr) 108px 86px;
  gap: 10px;
  align-items: end;
  max-width: 640px;
  margin-top: 28px;
  padding: 14px;
  border-radius: var(--st-radius);
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
}

.st-quick-field { min-width: 0; }
.st-quick label {
  display: block;
  margin: 0 0 5px 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--st-mute);
}
.st-quick input,
.st-quick select {
  display: block;
  width: 100%;
  height: 50px;
  padding: 0 12px;
  border: 1px solid var(--st-line-strong);
  border-radius: 10px;
  background-color: #fff;
  color: var(--st-ink);
  font-family: var(--font-body, sans-serif);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}
.st-quick select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1817' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.st-quick input:focus,
.st-quick select:focus {
  border-color: var(--st-navy);
  border-radius: 10px;
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 16, 74, .14);
}

/* The banner turns its main button white; inside the white card it has to
   be navy again. */
.st-banner .st-quick .st-btn.st-btn--primary {
  height: 50px;
  min-height: 50px;
  grid-column: 1 / -1;
  padding: 0 18px;
  background: var(--st-navy);
  border-color: var(--st-navy);
  color: #fff;
  white-space: nowrap;
}
.st-banner .st-quick .st-btn.st-btn--primary:hover { background: var(--st-navy-soft); border-color: var(--st-navy-soft); color: #fff; }
.st-banner .st-quick :focus-visible { outline-color: var(--st-navy); }

.st-page .st-quick-note {
  margin-top: 10px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, .72);
}

.st-hero .st-actions--secondary { margin-top: 18px; }

/* WhatsApp, always within reach on a desktop (a phone has the bottom bar). */
.st-wa-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 995;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 22px 0 18px;
  border-radius: 999px;
  background: #128C4A;
  color: #fff;
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 12px 28px -10px rgba(18, 140, 74, .7), 0 2px 6px rgba(0, 0, 0, .12);
  transition: background .2s ease, transform .2s ease;
}
.st-wa-fab i { font-size: 24px; }
.st-wa-fab:hover { background: #0F7A3F; color: #fff; transform: translateY(-2px); }
.st-wa-fab:focus-visible { outline: 2px solid var(--st-navy); outline-offset: 3px; border-radius: 999px; }
body.pm-nav-open .st-wa-fab { display: none; }

@media (min-width: 769px) {
  /* The "back to top" arrow moves up to make room. */
  #back-to-top { right: 28px; bottom: 92px; }
}

@media (max-width: 768px) {
  .st-wa-fab { display: none; }
}

/* Links inside FAQ answers (phone, email). */
.st-faq-a a { color: var(--st-navy); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* The reservation form is reached with #formulario from the quick form. */
#formulario { scroll-margin-top: calc(var(--st-header-h) + 20px); }

@media (max-width: 640px) {
  .st-quick {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: 22px;
    padding: 12px;
  }
  .st-quick-field:first-child { grid-column: 1 / -1; }
  .st-quick .st-btn { grid-column: 1 / -1; }
  /* Phone order in the banner: title, quick form, photos, details. */
  .st-quick,
  .st-quick-note,
  .st-hero .st-actions--secondary { order: 0; }
  .st-hero .st-actions--secondary .st-btn { flex: 1 1 calc(50% - 5px); padding: 0 10px; font-size: 14px; }
}

/* ==========================================================================
   18. EVENT AND GROUP-MENU PAGES

   The body of these pages (highlights, "Qué te espera", the menu cards and
   their terms) was still drawn by premium.css: square boxes, thin grey text
   and a dark "TASTARI" strip. It now uses the same cards, type and spacing
   as the rest of the site. Markup: template/event.php, template/group-menus.php
   and template-parts/site/{menus,feature-cards}.php.
   ========================================================================== */

/* ---- Highlights: the four facts right under the banner ---- */

.st-highlights-section { padding: 40px 0; }

.st-page .st-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.st-page .st-highlights--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-page .st-highlights--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-page .st-highlights--1 { grid-template-columns: minmax(0, 1fr); }

.st-highlight {
  display: flex;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
}
.st-highlight > i {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #FBF3E2;
  color: var(--st-gold-text);
  font-size: 16px;
}
.st-page .st-highlight-title {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.005em;
  color: var(--st-ink);
}
.st-highlight p:not(.st-highlight-title) {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--st-soft);
}

/* ---- "Qué te espera" ---- */

.st-features-intro { max-width: 68ch; margin-top: 14px; }
.st-page .st-features-intro p:last-child { margin-bottom: 0; }

.st-feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-feature-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-feature-cards--1 { grid-template-columns: minmax(0, 560px); }

.st-feature-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  background: var(--st-card);
  overflow: hidden;
}
.st-feature-card figure { aspect-ratio: 4 / 3; overflow: hidden; background: var(--st-tint); }
.st-feature-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.st-feature-card-body { padding: 18px 20px 22px; }
.st-feature-card-body p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--st-soft); }

/* ---- Menu cards ---- */

.st-menus { scroll-margin-top: var(--st-header-h); }

.st-menu-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.st-menu-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-menu-cards--1 { grid-template-columns: minmax(0, 640px); }

.st-menu-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  background: var(--st-card);
  box-shadow: var(--st-shadow);
  overflow: hidden;
}

.st-menu-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--st-line);
  background: #FBFAF7;
}
.st-page .st-menu-card-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--st-ink);
}
.st-page .st-menu-card-price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.st-menu-card-price strong { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--st-navy); white-space: nowrap; }
.st-menu-card-price span { margin-top: 5px; font-size: 12.5px; color: var(--st-mute); }

.st-menu-card-body { display: grid; gap: 22px; padding: 24px 26px; }

.st-page .st-course-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--st-gold-text);
}
.st-course-title::after { content: ''; flex: 1; height: 1px; background: var(--st-line); }
.st-page .st-course-note { margin-top: 5px; font-size: 13.5px; color: var(--st-mute); }

.st-page .st-course-dishes { display: grid; gap: 9px; margin-top: 12px; }
.st-course-dishes li { position: relative; padding-left: 18px; }
.st-course-dishes li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st-gold);
}
.st-course-dish { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--st-ink); }
.st-course-dish-note { display: block; font-size: 13.5px; line-height: 1.45; color: var(--st-mute); }

.st-menu-includes { padding: 16px 18px; border-radius: 14px; background: var(--st-tint); }
.st-page .st-menu-includes-title { margin-bottom: 8px; font-size: 13.5px; font-weight: 700; color: var(--st-ink); }
.st-page .st-menu-includes ul { display: grid; gap: 6px; }
.st-menu-includes li { display: flex; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--st-soft); }
.st-menu-includes i { flex: none; margin-top: 4px; font-size: 12px; color: #0F7A3F; }

.st-menu-card-foot { margin-top: auto; padding: 0 26px 26px; }

/* ---- Terms ---- */

.st-terms {
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius-lg);
  background: var(--st-card);
}
.st-page .st-terms ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin-top: 14px; }
.st-terms li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--st-soft); }
.st-terms i { flex: none; margin-top: 4px; font-size: 14px; color: var(--st-gold); }

.st-page .st-menus-footnote { margin-top: 22px; font-size: 13.5px; text-align: center; color: var(--st-mute); }

@media (max-width: 1000px) {
  .st-page .st-highlights,
  .st-page .st-highlights--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-menu-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .st-feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-highlights-section { padding: 32px 0; }
}

@media (max-width: 760px) {
  .st-menu-cards,
  .st-menu-cards--3 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-page .st-terms ul { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .st-highlights-section { padding: 24px 0; }
  .st-page .st-highlights,
  .st-page .st-highlights--3,
  .st-page .st-highlights--2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-highlight { padding: 16px; }
  .st-feature-cards,
  .st-feature-cards--2 { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .st-menu-card-head { padding: 20px 20px 16px; }
  .st-menu-card-body { padding: 20px; gap: 20px; }
  .st-menu-card-foot { padding: 0 20px 20px; }
  .st-menu-card-price { align-items: flex-start !important; text-align: left !important; }
  .st-terms { padding: 20px; }
}

/* ==========================================================================
   19. LOGO SIZE

   70px high on a desktop, smaller on tablets and phones. premium.css capped
   it at 42px (38px on a phone) inside a box with a fixed height and
   `overflow: hidden`, so the cap, the box and the clipping all go.
   --st-header-h and --pm-header-h below are the header heights that result;
   the banners and the sticky pieces are placed with them.
   ========================================================================== */

body #header .logo {
  max-width: none;
  height: auto;
  overflow: visible;
}
body #header .logo img {
  height: 70px !important;
  max-height: none !important;
  width: auto !important;
  max-width: none;
}

/* A small laptop: at 70px the logo left no room for the six links and the
   button, and the navigation wrapped onto a second line. */
@media (min-width: 901px) and (max-width: 1099px) {
  body #header .logo img { height: 56px !important; }
}

/* Just above the width where the navigation becomes a drawer, the six
   links, the button and the logo only fit on one line when all three give a
   little. */
@media (min-width: 901px) and (max-width: 1010px) {
  body #header .logo img { height: 46px !important; }
  #header .main-nav ul#main-mobile-menu { gap: 15px; }
  body #header .main-nav .MenuUl li a { font-size: 13.5px; }
  body #header .main-nav ul li:last-child a { padding-left: 14px; padding-right: 14px; }
}

@media (max-width: 900px) {
  body #header .logo { max-width: none; padding: 0; }
  body #header .logo img { height: 56px !important; }
}

@media (max-width: 767px) {
  body #header .logo img { height: 50px !important; }
}

/* The narrowest phones: room for the three round buttons beside it. */
@media (max-width: 360px) {
  body #header .logo img { height: 46px !important; }
}

/* ==========================================================================
   20. FOOTER

   Markup: footer.php. The old footer (#footer, styled by premium.css) was a
   near-black block with thin grey text and an animated sentence above it.
   This one uses the brand's deep navy and the same type, buttons and rating
   as the rest of the site, in four columns: brand, pages, carta, visit.
   ========================================================================== */

.st-footer {
  background: var(--navy-deep, #070A30);
  color: rgba(255, 255, 255, .72);
  font-family: var(--font-body, sans-serif);
  font-size: 15px;
  line-height: 1.6;
}
.st-footer p { margin: 0; font-size: inherit; }
.st-footer ul { list-style: none; margin: 0; padding: 0; }
.st-footer a { color: inherit; text-decoration: none; }
.st-footer :focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

.st-footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.5fr);
  gap: 48px;
  padding: 72px 0 56px;
}
.st-footer-main > * { min-width: 0; }

/* ---- Brand ---- */

.st-footer-logo { display: inline-block; }
.st-footer-logo img {
  display: block;
  width: auto;
  height: 58px;
  /* The file is the navy logo; shown white here. */
  filter: brightness(0) invert(1);
}
.st-footer .st-footer-about { max-width: 34ch; margin-top: 18px; }

.st-footer .st-footer-rating {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  padding: 11px 16px 11px 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  color: #fff;
  transition: border-color .2s ease, background .2s ease;
}
.st-footer .st-footer-rating:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .05); }
.st-footer-rating-score {
  padding: 8px 10px;
  border-radius: 10px;
  background: #fff;
  color: var(--st-navy);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}
.st-footer-rating > span:last-child { display: grid; gap: 3px; }
.st-footer-rating .st-stars::before {
  background: linear-gradient(90deg, #E7B866 calc(var(--rating, 5) / 5 * 100%), rgba(255, 255, 255, .3) calc(var(--rating, 5) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
}
.st-footer-rating-count { font-size: 13.5px; color: rgba(255, 255, 255, .8); }

.st-footer .st-footer-social { display: flex; gap: 10px; margin-top: 22px; }
.st-footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.st-footer-social a:hover { background: #fff; border-color: #fff; color: var(--st-navy); }
.st-footer-social a:focus-visible { border-radius: 50%; }

/* ---- Columns ---- */

.st-footer .st-footer-title {
  margin: 0 0 18px;
  font-family: var(--font-body, sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #E7B866;
}

.st-footer .st-footer-links { display: grid; gap: 11px; }
.st-footer-links li { margin: 0; }
.st-footer-links a { color: rgba(255, 255, 255, .78); transition: color .2s ease; }
.st-footer-links a:hover,
.st-footer-links .current-menu-item a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

/* ---- Visit ---- */

.st-footer .st-footer-contact { display: grid; gap: 12px; }
.st-footer-contact li { display: flex; gap: 12px; }
.st-footer-contact i { flex: none; width: 16px; margin-top: 5px; color: #E7B866; font-size: 14px; text-align: center; }
.st-footer-contact span { min-width: 0; }
.st-footer-contact a { color: #fff; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.st-footer-contact a:hover { text-decoration-color: #fff; }
.st-footer-contact small { display: block; font-size: 13.5px; color: rgba(255, 255, 255, .6); }

.st-footer-hours {
  display: grid;
  gap: 6px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.st-footer-hours > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 14px; }
.st-footer-hours dt { font-weight: 400; }
.st-footer-hours dd { margin: 0; color: #fff; font-weight: 650; white-space: nowrap; }

.st-footer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.st-footer-actions .st-btn { flex: 1 1 150px; white-space: nowrap; }

/* ---- Bottom line ---- */

.st-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
  padding: 22px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  color: rgba(255, 255, 255, .55);
}

@media (min-width: 769px) {
  /* Room for the fixed WhatsApp button, which sits over this corner when
     the page is scrolled to its end. */
  .st-footer-bottom { padding-right: 260px; min-height: 96px; align-content: center; }
}

@media (max-width: 1100px) {
  .st-footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px 36px; }
  .st-footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 32px; align-items: start; }
  .st-footer-brand .st-footer-logo,
  .st-footer-brand .st-footer-about { grid-column: 1; }
  .st-footer-brand .st-footer-rating { grid-column: 2; grid-row: 1; margin-top: 0; }
  .st-footer-brand .st-footer-social { grid-column: 2; grid-row: 2; justify-content: flex-end; margin-top: 14px; }
}

@media (max-width: 768px) {
  .st-footer-main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px 24px; padding: 48px 0 36px; }
  .st-footer-brand { display: block; }
  .st-footer-brand .st-footer-rating { margin-top: 20px; }
  .st-footer-brand .st-footer-social { justify-content: flex-start; margin-top: 20px; }
  .st-footer-visit { grid-column: 1 / -1; }
  .st-footer-logo img { height: 50px; }
  .st-footer-bottom { padding: 20px 0 24px; }
}

/* ---- Around the footer ---- */

/* premium.css reserves room under the page for the phone's action bar up to
   900px wide, but the bar only exists up to 768px: tablets showed an empty
   cream strip under the footer. */
@media (min-width: 769px) and (max-width: 900px) {
  body { padding-bottom: 0; }
}

/* "Back to top" was a bare dark arrow: it disappeared on the footer. */
#back-to-top {
  width: 44px;
  height: 44px;
  border: 1px solid var(--st-line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--st-navy);
  font-size: 15px;
  box-shadow: 0 8px 20px -10px rgba(7, 10, 48, .55);
}
#back-to-top:hover { background: var(--st-tint); color: var(--st-navy); }
#back-to-top:focus-visible { outline: 2px solid var(--st-navy); outline-offset: 3px; border-radius: 50%; }

/* ==========================================================================
   21. LANGUAGE SWITCHER

   Script: the "LANGUAGE SWITCHER" block of assets/js/premium.js.

   The dropdown opens on click only. premium.css also opened it on :hover and
   on :focus-within; a click focuses the pill, so once opened it stayed open
   whatever was clicked next. Those two triggers are switched off here and
   the `pm-open` class, set by the script, is the only thing that shows it.
   ========================================================================== */

body #flags:hover ul#sortable,
body #flags:focus-within ul#sortable,
body #flags ul#sortable { display: none !important; }
body #flags.pm-open ul#sortable { display: block !important; }

/* The chevron turns when the panel is open, not when the pointer passes. */
body #flags:hover::after,
body #flags:focus-within::after { transform: none; }
body #flags.pm-open::after { transform: rotate(180deg); }

body #header #flags:focus-visible { outline: 2px solid var(--st-navy); outline-offset: 3px; border-radius: 999px; }

/* The language in use, on the pill: its flag takes the place of the globe. */
#flags .st-lang-current { display: none; }
#flags.has-current::before { display: none; }
#flags.has-current .st-lang-current {
  display: block;
  flex: none;
  order: -1;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  background-color: var(--st-tint);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 0 1px rgba(26, 24, 23, .14);
}

/* ...and at the top of the list, set apart from the others, with a tick. */
#flags ul#sortable li.is-active {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft, #ECE4D4);
}
#flags ul#sortable li.is-active a,
#flags ul#sortable li.is-active a.flag { font-weight: 700; }
#flags ul#sortable li.is-active a::before {
  content: '\f00c';
  order: 2;
  margin-left: auto;
  padding-left: 10px;
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 12px;
  color: var(--st-navy);
}
/* All ten languages fit without scrolling inside the panel on a desktop, so
   the site's own language is never hidden below the fold of the list. */
@media (min-width: 901px) {
  #flags ul#sortable { max-height: min(84vh, 560px); }
}

/* ---- Offer banner written as text (template-parts/site/offer.php) ----
   Same look as the finished image it replaces - navy panel, gold highlight,
   white button, photo on the right behind a slanted edge - but every word is
   real text: it is translated with the page and stays sharp at any size. */

.st-offer-card {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(300px, 32vw, 384px);
  background:
    radial-gradient(520px 300px at 0% 0%, rgba(198, 137, 44, .28), rgba(198, 137, 44, 0) 70%),
    var(--st-navy);
  color: #fff;
  text-decoration: none;
}
.st-offer-card:hover { color: #fff; }

.st-offer-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 44px 56px;
}
.st-offer-card.has-photo .st-offer-text { width: 58%; padding-right: 24px; }

.st-offer-eyebrow {
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #E7B866;
}
.st-offer-heading {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.5vw, 3.1rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
  color:#fff;
}
.st-offer-highlight { display: block; color: #E7B866; }
.st-offer-copy {
  margin-top: 14px;
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.45;
  color: rgba(255, 255, 255, .84);
}
.st-offer-button {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  margin-top: 24px;
  padding: 0 24px;
  border-radius: 12px;
  background: #fff;
  color: var(--st-navy);
  font-size: 16px;
  font-weight: 700;
  transition: background .2s ease;
}
.st-offer-card:hover .st-offer-button { background: var(--st-tint); }

.st-offer-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  /* The slanted edge of the original banner. */
  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);
}
.st-offer .st-offer-photo img { width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 900px) {
  .st-offer-text { padding: 36px 32px; }
  .st-offer-card.has-photo .st-offer-text { width: 60%; }
  .st-offer-photo { width: 44%; }
}

/* Phone: the photo on top, the text under it. */
@media (max-width: 640px) {
  .st-offer-card { flex-direction: column-reverse; align-items: stretch; min-height: 0; }
  .st-offer-card.has-photo .st-offer-text,
  .st-offer-text { width: 100%; padding: 24px 22px 26px; }
  .st-offer-photo { position: relative; width: 100%; height: 190px; clip-path: none; }
  .st-offer-eyebrow { font-size: 12.5px; margin-bottom: 8px; }
  .st-offer-button { min-height: 46px; margin-top: 18px; font-size: 15px; }
}
/* ==========================================================================
   22. CLOSE BUTTONS

   The cross was the "×" character. A character sits on the font's baseline,
   not in the middle of its box, so it was never quite centred in the round
   button - a little differently in each font and browser. It is now drawn:
   two bars crossing at the exact centre of the button.
   ========================================================================== */

.st-lightbox-close,
.carta-modal-close,
.carta-search-clear {
  font-size: 0 !important;   /* hides the character kept in the markup */
  line-height: 0;
}
.st-lightbox-close::before,
.st-lightbox-close::after,
.carta-modal-close::before,
.carta-modal-close::after,
.carta-search-clear::before,
.carta-search-clear::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  border-radius: 2px;
  background: currentColor;
}
.st-lightbox-close::before,
.carta-modal-close::before,
.carta-search-clear::before { transform: rotate(45deg); }
.st-lightbox-close::after,
.carta-modal-close::after,
.carta-search-clear::after { transform: rotate(-45deg); }

.carta-search-clear::before,
.carta-search-clear::after { width: 12px; margin-left: -6px; }