/* ==========================================================================
   Tastari Mediterrani — Premium redesign
   Scope: Menu page + Reserve page (+ shared tokens)
   Loaded after style.css, so rules here intentionally override it.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
  /* If you add Adobe Fonts / Typekit with "Canela", it will be picked up
     automatically here — Playfair Display is the official stand-in per the
     client-approved design system. */
  --font-display: 'Canela', 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', 'Montserrat', -apple-system, sans-serif;

  /* Official palette — client-approved design system */
  --ink: #1A1817;              /* roasted espresso slate — body text */
  --ink-soft: #5C5652;         /* ink-muted */
  --cream: #F7F4EE;            /* canvas linen — main background */
  --cream-deep: #EFE9DE;       /* surface sand */
  --white: #FAF8F5;            /* surface cream */
  --gold: #C6892C;             /* saffron gold — secondary */
  --gold-deep: #A9762A;
  --gold-bright: #D8A856;      /* border-accent, hover highlight */
  --olive: #A23E2C;            /* terracotta — tertiary */
  --line: #E0D7C6;             /* border-hairline */
  --line-soft: #ECE4D4;
  --navy: #0B104A;             /* primary — midnight navy */
  --navy-soft: #1A2063;
  --navy-deep: #070A30;
}

/* ---------- shared building blocks ---------- */

.pm-section {
  background: var(--cream);
  padding: 110px 0;
  position: relative;
  overflow: hidden;
}

.pm-section--deep { background: var(--cream-deep); }

.pm-hero {
  position: relative;
  min-height: 56vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.pm-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43,38,32,.15) 0%, rgba(43,38,32,.55) 100%);
}

.pm-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.pm-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 18px;
}

.pm-hero .pm-eyebrow { color: var(--white); opacity: .85; }

.pm-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: inherit;
  margin: 0 0 14px;
}

.pm-title em {
  font-style: italic;
  color: var(--gold);
}

.pm-hero .pm-title em { color: var(--white); text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 8px; }

.pm-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.05rem;
  max-width: 46ch;
  color: var(--ink-soft);
}

.pm-hero .pm-lede { color: rgba(255,255,255,.85); }

/* the oversized rotated watermark word, echoing the reference design */
.pm-watermark {
  position: absolute;
  top: 50%;
  left: -18px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  color: var(--ink);
  opacity: .05;
  white-space: nowrap;
  pointer-events: none;
  letter-spacing: .02em;
  z-index: 0;
}

.pm-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.pm-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 15px 30px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
  text-decoration: none;
}

.pm-btn:hover { background: var(--ink); color: var(--white); }

.pm-btn--gold {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--white);
}

.pm-btn--gold:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--white); }

.pm-btn--ghost {
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}

.pm-btn--ghost:hover { background: var(--white); color: var(--ink); }

.pm-btn--navy {
  border-color: var(--navy);
  background: var(--navy);
  color: var(--white);
  box-shadow: 0 8px 20px -8px rgba(11,16,74,.4);
}
.pm-btn--navy:hover { background: var(--navy-soft); border-color: var(--navy-soft); color: var(--white); }

.pm-btn--text {
  border-color: transparent;
  background: none;
  padding: 15px 6px;
}
.pm-btn--text:hover { background: none; color: var(--gold-bright); }
.pm-btn--text span.underline { text-decoration: underline; text-decoration-color: var(--gold-bright); text-underline-offset: 4px; }


.pm-cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

#header .tableBooking .pm-btn { padding: 13px 24px; font-size: 12px; }

/* Old theme CSS locks .btn-primary/.btn-secondary with !important — this is
   a deliberate matching override for any of those classes we haven't yet
   swapped over to .pm-btn, so nothing is left looking like the old design. */
.btn-primary, .btn-secondary, a.btn-primary, a.btn-secondary {
  background-color: var(--ink) !important;
  color: var(--white) !important;
  padding: 15px 30px !important;
  border-radius: 2px !important;
  border: 1px solid var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.btn-primary:hover, .btn-secondary:hover, a.btn-primary:hover, a.btn-secondary:hover {
  background-color: var(--gold-deep) !important;
  border-color: var(--gold-deep) !important;
}
.btn-primary.outline-btn, a.btn-primary.outline-btn {
  background-color: transparent !important;
  color: var(--white) !important;
  border: 1px solid rgba(255,255,255,.6) !important;
}

/* This is the actual source of the persistent gold "Reserva" pill — it's
   the theme's own built-in styling for whatever the LAST item in the
   WordPress nav menu (Appearance > Menus) happens to be, completely
   independent of the custom header markup above. Forcing it to match. */
.main-nav ul li:last-child a,
.main-nav ul li:last-child a:hover {
  background-color: var(--navy) !important;
  color: var(--white) !important;
  border-radius: 3px !important;
  padding: 12px 22px !important;
  font-family: var(--font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.main-nav ul li:last-child a:hover { background-color: var(--navy-soft) !important; }
.main-nav ul li:last-child a::after { display: none !important; }

/* ==========================================================================
   MENU PAGE
   ========================================================================== */

.pm-menu-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white) !important;
  border-bottom: 1px solid var(--line);
}

.pm-menu-nav .pm-container {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  padding-top: 22px;
  padding-bottom: 22px;
  scrollbar-width: none;
}

.pm-menu-nav .pm-container::-webkit-scrollbar { display: none; }

.pm-tab {
  font-family: var(--font-body) !important;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft) !important;
  background: none !important;
  border: none;
  padding: 4px 0;
  white-space: nowrap;
  cursor: pointer;

  position: relative;
}

.pm-tab::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .25s ease;
}

.pm-tab.active { color: var(--ink) !important; }
.pm-tab.active::after { transform: scaleX(1); }

.pm-menu-group {
  padding: 90px 0;
  position: relative;
  border-bottom: 1px solid var(--line-soft);
}

.pm-menu-group:last-of-type { border-bottom: none; }

.pm-menu-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 48px;
  padding-left: 56px;
}

.pm-menu-group-head h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 3.4vw, 3rem);
  color: var(--ink);
  margin: 0;
}

.pm-menu-group-count {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

.pm-menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  padding-left: 56px;
}

.pm-dish {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 22px 14px;
  margin: 0 -14px;
  border-bottom: 1px dotted var(--line);
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s ease;
}
.pm-dish:hover, .pm-dish:focus-visible { background: var(--cream-deep); outline: none; }
.pm-dish:hover .pm-dish-more { opacity: 1; transform: translateX(0); }

.pm-dish-main { flex: 1; min-width: 0; }

.pm-dish-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.pm-dish-desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}

.pm-dish-desc p { margin: 0; }

.pm-dish-price {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-deep);
  white-space: nowrap;
}

.pm-dish-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-deep);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .2s ease, transform .2s ease;
}
.pm-dish-more i { font-size: 9px; }
@media (max-width: 900px) {
  .pm-dish-more { opacity: .7; transform: none; }
}

/* ---------- dish detail modal ---------- */

.pm-dish-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.pm-dish-modal.pm-open { display: block; }
.pm-dish-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(7,10,48,.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  animation: pm-modal-fade .25s ease forwards;
}
@keyframes pm-modal-fade { to { opacity: 1; } }

.pm-dish-modal-panel {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -46%) scale(.97);
  opacity: 0;
  animation: pm-modal-pop .3s ease forwards;
  width: min(560px, calc(100vw - 32px));
  max-height: 88vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 40px 80px -20px rgba(7,10,48,.5);
}
@keyframes pm-modal-pop { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.pm-dish-modal-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none;
  font-size: 22px; line-height: 1; color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pm-dish-modal-image {
  width: 100%; aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  background-color: var(--cream-deep);
}
.pm-dish-modal-body { padding: 32px; }
.pm-dish-modal-name { font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; color: var(--ink); margin: 6px 0 12px; }
.pm-dish-modal-desc { font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); line-height: 1.6; margin: 0 0 16px; }
.pm-dish-modal-price { display: inline-block; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--gold-deep); margin-bottom: 22px; }
.pm-dish-modal-whatsapp { background: #25D366; border-color: #25D366; color: var(--white); }
.pm-dish-modal-whatsapp:hover { background: #1fb855; border-color: #1fb855; }

@media (max-width: 600px) {
  .pm-dish-modal-body { padding: 24px; }
  .pm-dish-modal-panel { top: auto; bottom: 0; left: 0; transform: translateY(100%); width: 100%; border-radius: 16px 16px 0 0; max-height: 85vh; }
  @keyframes pm-modal-pop { to { transform: translateY(0); opacity: 1; } }
  .pm-cta-row .pm-btn { width: 100%; }
}


.pm-menu-closing {
  text-align: center;
  padding: 100px 24px;
  background: var(--ink);
  color: var(--white);
}

.pm-menu-closing .pm-title { color: var(--white); }
.pm-menu-closing .pm-lede { color: rgba(255,255,255,.75); margin: 0 auto 32px; }
.pm-menu-closing .pm-cta-row { justify-content: center; }

@media (max-width: 860px) {
  .pm-menu-list { grid-template-columns: 1fr; }
  .pm-menu-group-head, .pm-menu-list { padding-left: 28px; }
  .pm-watermark { font-size: 4.2rem; left: -10px; }
}

/* ==========================================================================
   RESERVE PAGE
   ========================================================================== */

.pm-reserve-section { padding: 100px 0; background: var(--cream); }

.pm-reserve-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 72px;
  align-items: start;
}

.pm-reserve-info { padding-left: 56px; }

.pm-info-list { margin: 36px 0 44px; }

.pm-info-row {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}

.pm-info-row:first-child { border-top: 1px solid var(--line-soft); }

.pm-info-label {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  width: 110px;
  flex-shrink: 0;
  padding-top: 3px;
}

.pm-info-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
}

.pm-info-value a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.pm-info-value a:hover { border-color: var(--gold); color: var(--gold-deep); }

.pm-quick-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 46px; }

.pm-quick-actions .pm-btn { padding: 13px 22px; font-size: 12px; }

/* ==========================================================================
   SITE-WIDE: header, popup, footer, reveal animation
   These override the old #header / #footer / .popup-* rules from style.css.
   ========================================================================== */

body { background: var(--cream) !important; color: var(--ink); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 300; letter-spacing: 0; }

#header {
  background: transparent !important;
  backdrop-filter: none;
  border-bottom: none;
  padding: 0;
  transition: background .3s ease;
  box-shadow: none !important;
}

#header .logo {
  background: var(--white);
  border-radius: 10px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px -10px rgba(11,16,74,.25);
  max-width: 190px;
  height: 58px;
  overflow: hidden;
  flex-shrink: 0;
}

#header .header-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  gap: 12px;
}

#header .logo a { display: flex; align-items: center; height: 100%; }
#header .logo img { height: auto; max-height: 42px; width: auto; max-width: 100%; object-fit: contain; filter: none; }

#header .main-nav { display: flex; }
#header .main-nav ul#main-mobile-menu {
  display: flex;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0; padding: 0;
}
#header .main-nav a {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  padding: 4px 0;
  position: relative;
  text-transform: none;
}
body.home #header .main-nav a { color: var(--white); text-shadow: 0 1px 6px rgba(7,10,48,.3); }
body.home #header.pm-scrolled .main-nav a { color: var(--ink); text-shadow: none; }
#header.pm-scrolled {
  background: rgba(247,244,238,.94) !important;
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px -12px rgba(11,16,74,.15) !important;
}

#header .main-nav .current-menu-item a { font-weight: 700; }
#header .main-nav a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transition: transform .25s ease;
}
#header .main-nav a:hover::after,
#header .main-nav .current-menu-item a::after { transform: scaleX(1); }
#header .main-nav { padding-left: 0; }
#header .main-nav li { margin: 0; }

/* Social icons removed from the header entirely per brief — hidden rather
   than deleted from markup, so nothing breaks if they're re-added later. */
#header .social-links { display: none !important; }

#header .phone-quick { display: flex; align-items: center; gap: 7px; color: var(--ink-soft); margin-right: 18px; }
#header .phone-quick i { font-size: 13px; color: var(--gold-deep); }
#header .phone-quick a { font-family: var(--font-body); font-size: 12px; letter-spacing: .08em; color: var(--ink); }
body.home #header .phone-quick a { color: var(--white); }
body.home #header.pm-scrolled .phone-quick a { color: var(--ink); }

#header .lang-pills { display: flex; align-items: center; gap: 2px; background: var(--cream-deep); border-radius: 3px; padding: 3px; margin-right: 16px; }
#header .lang-pills button, #header .lang-pills a {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--ink-soft); background: none; border: none; padding: 5px 9px; border-radius: 2px; cursor: pointer;
}
#header .lang-pills .active, #header .lang-pills button:hover { background: var(--white); color: var(--ink); }

#header .tableBooking { display: flex; align-items: center; gap: 14px; }
#header .tableBooking .pm-btn {
  padding: 13px 26px;
  font-size: 12px;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  box-shadow: 0 4px 14px -4px rgba(11,16,74,.35);
}
#header .tableBooking .pm-btn:hover { background: var(--navy-soft); border-color: var(--navy-soft); }

#header .mobile-menu-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: background .2s ease, border-color .2s ease;
  flex-shrink: 0;
}
body:not(.home) #header .mobile-menu-toggle,
#header.pm-scrolled .mobile-menu-toggle {
  background: var(--cream-deep);
  border-color: var(--line);
}
#header .mobile-menu-toggle span { background: var(--ink); width: 18px; height: 2px; border-radius: 2px; margin: 0; }
body.home #header .mobile-menu-toggle span { background: var(--white); }
body.home #header.pm-scrolled .mobile-menu-toggle span { background: var(--ink); }

/* The hamburger-to-X animation: script.js already toggles these classes on
   click, but the theme never defined the actual transform — that's why no
   close icon ever appeared. */
/* Nudging the outer bars by a fixed translateY never lined them up - the
   flex row they sit in shifts as the middle bar fades, so the two strokes
   met end-to-end and drew a "<" instead of an "x". Pinning both to the exact
   centre of the button makes the cross independent of the layout. */
.mobile-menu-toggle { position: relative; }
#header .mobile-menu-toggle span.rotate-45,
#header .mobile-menu-toggle span.rotate-negative-45,
.mobile-menu-toggle span.rotate-45,
.mobile-menu-toggle span.rotate-negative-45 {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
}
.mobile-menu-toggle span.rotate-45 { transform: translate(-50%, -50%) rotate(45deg) !important; }
.mobile-menu-toggle span.opacity-0 { opacity: 0; }
.mobile-menu-toggle span.rotate-negative-45 { transform: translate(-50%, -50%) rotate(-45deg) !important; }

/* The theme's root style.css (WordPress enqueues it as 'tastari-style',
   separately from assets/css/style.css) carries a legacy
   @media(max-width:767px) block whose !important rules contradict this
   redesign. Neutralised here rather than deleted there, so the override
   layer stays the single place the mobile header is decided.
     - span.rotate-negative-45 { margin-top:-12px !important }  broke the X
     - .main-nav { top:120px !important; padding-left:0 !important }
     - .logo img { height:100px !important }  blew up the header height */
#header .mobile-menu-toggle span.rotate-45,
#header .mobile-menu-toggle span.rotate-negative-45,
.mobile-menu-toggle span.rotate-45,
.mobile-menu-toggle span.rotate-negative-45 {
  margin: 0 !important;
}

@media (max-width: 900px) {
  #header .logo img { height: auto !important; max-height: 38px !important; width: auto !important; }
}

/* ---------- language switcher: toggle button + dropdown panel ---------- */
/* #flags is the raw output of the [google-translator] shortcode — wrapped
   and shown/hidden by premium.js. We don't touch its own markup, only add
   a trigger button and control visibility. */

.pm-lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--white);
  cursor: pointer;
  margin-right: 12px;
  transition: background .2s ease, border-color .2s ease;
}
.pm-lang-toggle span, .pm-lang-toggle i.fa-chevron-down { display: none; }
.pm-lang-toggle:hover { background: rgba(255,255,255,.24); }

body:not(.home) #header .pm-lang-toggle,
#header.pm-scrolled .pm-lang-toggle {
  background: var(--cream-deep);
  border-color: var(--line);
  color: var(--ink-soft);
}
body:not(.home) #header .pm-lang-toggle:hover,
#header.pm-scrolled .pm-lang-toggle:hover { background: var(--line-soft); }

.pm-lang-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 45px -14px rgba(11,16,74,.22);
  padding: 16px;
  z-index: 60;
  width: 210px;
}
.pm-lang-panel::before {
  content: '';
  position: absolute; top: -6px; right: 13px;
  width: 12px; height: 12px;
  background: var(--white);
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: rotate(45deg);
}
.pm-lang-panel.pm-open { display: block; }
.pm-lang-panel #flags ul#sortable { display: grid !important; grid-template-columns: repeat(5, 1fr); gap: 12px; list-style: none; margin: 0; padding: 0; float: none !important; }
.pm-lang-panel #flags li { list-style: none; }
.pm-lang-panel #flags .flag {
  display: block;
  width: 28px; height: 20px;
  margin: 0 auto;
  transform: scale(1.7);
  transform-origin: center;
  border-radius: 2px;
}
.pm-lang-anchor { position: relative; }

/* ---------- CSS-only flags dropdown (zero JS dependency) ----------
   This works on its own, with no script required at all — the JS
   enhancement further down (if it runs) wraps this in a nicer toggle
   button, but this alone already fixes the "10 tiny flags in a row"
   problem even if no JavaScript loads. Spanish stays as the always-
   visible trigger flag; the rest reveal on hover/tap. */
/* Hide the plugin's own native <select> language dropdown entirely — only
   the flag list (#flags below) should be visible as the language switcher.
   Covers every common wrapper/class this type of widget tends to use. */
#google_language_translator,
.goog-te-gadget,
.goog-te-combo,
select.goog-te-combo,
#google_translate_element,
.skiptranslate select,
div.skiptranslate:not(#flags) {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
/* Chrome/Edge sometimes also inject their own translate banner iframe —
   that one lives outside the page DOM entirely and can't be controlled by
   site CSS at all; if it's what's showing, it's a browser feature, not
   something in the code. */

#flags {
  position: relative;
  display: inline-flex !important;
  width: auto !important;
  align-items: center !important;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 9px 16px 9px 14px;
  cursor: pointer;
  gap: 8px;
  transition: background .2s ease, border-color .2s ease;
}
#flags:hover, #flags:focus-within { background: rgba(255,255,255,.24); }

body:not(.home) #flags,
#header.pm-scrolled #flags {
  background: var(--cream-deep);
  border-color: var(--line);
}
body:not(.home) #flags:hover, body:not(.home) #flags:focus-within,
#header.pm-scrolled #flags:hover, #header.pm-scrolled #flags:focus-within {
  background: var(--line-soft);
}

/* Generated trigger: globe icon + chevron. The real flag list becomes the
   dropdown panel below it — always exists, always the same markup, no
   dependency on any specific flag's id. */
#flags::before {
  content: '\f0ac';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 13px;
  color: var(--white);
  order: -1;
}
body:not(.home) #flags::before, #header.pm-scrolled #flags::before { color: var(--ink-soft); }

#flags::after {
  content: '\f078';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  color: var(--white);
  transition: transform .2s ease;
}
body:not(.home) #flags::after, #header.pm-scrolled #flags::after { color: var(--ink-soft); }
#flags:hover::after, #flags:focus-within::after { transform: rotate(180deg); }

#flags ul#sortable {
  display: none !important;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 20px 45px -14px rgba(11,16,74,.25);
  padding: 16px;
  z-index: 60;
  width: 216px;
  list-style: none;
  margin: 0;
  float: none !important;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
#flags:hover ul#sortable, #flags:focus-within ul#sortable { display: grid !important; }
#flags ul#sortable li { list-style: none; }
#flags .flag { display: block; transform: scale(1.5); transform-origin: center; }

@media (max-width: 768px) {
  #flags { padding: 8px 14px; }
  #flags ul#sortable { right: auto; left: 50%; transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .pm-lang-panel { position: fixed; top: auto; bottom: 90px; left: 16px; right: 16px; width: auto; }
}

@media (max-width: 768px) {
  #hero-banner { min-height: unset; aspect-ratio: unset; height: auto; overflow: visible; }
  .hero-slider { height: auto; }
  .slide { position: relative; height: auto; min-height: 88vh; opacity: 1; display: flex; }
  .slide:not(.active) { display: none; }
  .slide-bg, .slide .overlay { position: absolute; inset: 0; }
  #hero-banner .container { padding: 96px 24px 40px; position: relative; z-index: 1; width: 100%; }
  .pm-hero-top-row, .pm-stat-ribbon { display: none; }
  .slide-content .pm-title { font-size: 1.7rem; line-height: 1.15; margin-bottom: 12px; }
  .slide-content .pm-lede { font-size: .88rem; max-width: none; line-height: 1.55; }
  .pm-cta-row .pm-btn--directions {
    background: none; border-color: transparent; color: var(--white);
    text-decoration: underline; text-decoration-color: rgba(250,248,245,.5); text-underline-offset: 4px;
    padding: 8px 6px; justify-content: center; box-shadow: none;
  }
}

@media (max-width: 768px) {
  #header .header-inner { padding: 12px 0; }
  #header .logo img { max-height: 26px; }
  #header .logo { padding: 6px 12px; border-radius: 8px; height: 40px; max-width: 130px; }
  #header .phone-quick { display: none; }
  #header .tableBooking .pm-btn { display: none; }

  .main-nav {
    background: var(--cream) !important;
    top: 68px !important;
    height: calc(100vh - 68px) !important;
  }
  .main-nav ul#main-mobile-menu { gap: 26px !important; }
  #header .main-nav a { font-family: var(--font-display); font-size: 22px; text-transform: none; letter-spacing: 0; color: var(--ink); }
  .main-nav::after {
    content: 'Tastari Mediterrani \2014 Eixample, Barcelona';
    position: absolute; bottom: 40px; left: 0; right: 0; text-align: center;
    font-family: var(--font-body); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  }
}

.popup-content { background: var(--white); border-radius: 2px; }
.popup-content .form-header h2 { font-family: var(--font-display); font-weight: 300; }
.popup-content .wpcf7-form input[type="submit"] {
  background: var(--ink); color: var(--white); border: none; border-radius: 2px;
  font-family: var(--font-body); letter-spacing: .08em; text-transform: uppercase; font-size: 13px;
  padding: 14px 30px;
}
.popup-content .wpcf7-form input[type="submit"]:hover { background: var(--gold-deep); }

/* ---------- footer ---------- */

#footer {
  background: var(--ink);
  color: rgba(255,253,248,.72);
  padding: 0 0 0;
}

.pm-footer-tagline {
  text-align: center;
  padding: 80px 24px;
  border-bottom: 1px solid rgba(255,253,248,.12);
}
.pm-footer-tagline p {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  max-width: 20ch;
  margin: 0 auto;
}
.pm-word-scroll .pm-word {
  color: rgba(255,253,248,.22);
  transition: color .35s ease;
}
.pm-word-scroll .pm-word.pm-lit { color: var(--white); }

#footer .container { padding-top: 70px; }

#footer .footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,253,248,.08);
}

#footer .footer-logo img { height: 34px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.footer-tagline-small { font-family: var(--font-body); font-weight: 300; font-size: 13px; color: rgba(255,253,248,.5); max-width: 26ch; margin: 0; line-height: 1.6; }

#footer h4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(255,253,248,.85);
  margin-bottom: 18px;
}

#footer .footer-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#footer .footer-nav a, #footer .footer-contact p, #footer .footer-contact a {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 13.5px;
  color: rgba(255,253,248,.62);
}
#footer .footer-nav a { display: inline-block; transition: color .2s ease, transform .2s ease; }
#footer .footer-nav a:hover { color: var(--gold-bright); transform: translateX(3px); }
#footer .footer-contact p { margin: 0 0 12px; display: flex; gap: 10px; align-items: baseline; }
#footer .footer-contact i { color: var(--gold-bright); width: 14px; }

#footer .social-icons { display: flex; gap: 18px; margin-bottom: 22px; }
#footer .social-icons a {
  color: rgba(255,253,248,.6);
  font-size: 16px;
  transition: color .2s ease, transform .25s ease;
}
#footer .social-icons a:hover { color: var(--gold-bright); transform: translateY(-3px); }

#footer .whatsapp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 300; font-size: 13.5px;
  color: rgba(255,253,248,.62); background: none; padding: 0; border-radius: 0;
  transition: color .2s ease;
}
#footer .whatsapp-btn i { color: #3ba55c; font-size: 15px; }
#footer .whatsapp-btn:hover { color: var(--white); }

#footer .footer-bottom {
  padding: 22px 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11.5px;
  color: rgba(255,253,248,.4);
}

@media (max-width: 900px) {
  #footer .footer-top { grid-template-columns: 1fr 1fr; }
  #header .main-nav ul#main-mobile-menu { flex-direction: column; align-items: flex-start; gap: 18px; }
}

/* ---------- reveal-on-scroll, single deliberate treatment ---------- */

/* Fail-safe by design: content is visible unless JS has actively proven it
   is running (body.pm-js-ready, set immediately by premium.js). If the
   script never loads or errors out, nothing ever stays permanently hidden —
   worst case, the fade-in animation just doesn't happen. */
.pm-reveal { opacity: 1; transform: none; }
html.pm-js-ready .pm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
html.pm-js-ready .pm-reveal.pm-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pm-reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- homepage sections ---------- */

.pm-home-hero {
  position: relative;
  min-height: 86vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: var(--white);
}
.pm-home-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(43,38,32,.05) 30%, rgba(43,38,32,.6) 100%);
}
.pm-home-hero-inner { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; width: 100%; }
.pm-home-hero .pm-title { font-size: clamp(2.8rem, 6vw, 5.2rem); color: var(--white); }
.pm-home-hero .pm-lede { color: rgba(255,255,255,.85); max-width: 50ch; }

.slide-content { max-width: 1040px; }
#hero-banner { min-height: 92vh; }
#hero-banner .container { max-width: 1320px; padding: 0 0; }
.slide-content .pm-eyebrow { display: none; }
.slide-content .pm-title { color: var(--white); text-shadow: none; margin-bottom: 18px; }
.slide-content .pm-title em { color: var(--gold-bright); font-style: italic; font-weight: 300; display: block; font-size: .75em; margin-top: 4px; }
.slide-content .pm-lede { color: rgba(250,248,245,.88); text-shadow: none; font-size: 1.1rem; max-width: 56ch; font-size:14px; }
.slide .overlay { background: linear-gradient(180deg, rgba(7,10,48,.35) 0%, rgba(7,10,48,.55) 55%, rgba(7,10,48,.85) 100%); }
/* .slide-bg { filter: saturate(.9); } */

@keyframes pm-pulse-glow {
  0%, 100% { box-shadow: 0 8px 20px -8px rgba(11,16,74,.4); }
  50% { box-shadow: 0 8px 26px -4px rgba(198,137,44,.55); }
}
.slide.active .pm-cta-row .pm-btn--navy { animation: pm-pulse-glow 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .slide.active .pm-cta-row .pm-btn--navy { animation: none; }
}

/* ---------- hero pills + stat ribbon ---------- */

.pm-hero-top-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 40px;
}

.pm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(250,248,245,.1);
  backdrop-filter: blur(6px);
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}

.pm-pill--rating { gap: 6px; text-transform: none; letter-spacing: 0; font-size: 13px; }
.pm-pill--rating .stars { color: var(--gold-bright); letter-spacing: 1px; font-size: 12px; }
.pm-pill--rating strong { font-weight: 600; }
.pm-pill--rating span.muted { color: rgba(250,248,245,.65); font-size: 12px; }

.pm-stat-ribbon {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 56px;
}
.pm-stat-ribbon div {
  padding: 16px 18px;
  border-radius: 3px;
  background: rgba(250,248,245,.05);
}
.pm-stat-ribbon span.label {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 6px;
}
.pm-stat-ribbon span.value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--white);
}

@media (max-width: 760px) {
  .pm-stat-ribbon { grid-template-columns: 1fr 1fr; }
}

/* ---------- Tastari Experiences (3-card, reservation featured) ---------- */

.pm-experiences { padding: 100px 0; background: var(--white); position: relative; overflow: hidden; }
.pm-experiences::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 460px; height: 460px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='200' cy='200' r='140' fill='none' stroke='%23C6892C' stroke-width='3'/%3E%3Crect x='38' y='183' width='55' height='32' rx='16' fill='none' stroke='%23C6892C' stroke-width='3'/%3E%3Crect x='307' y='183' width='55' height='32' rx='16' fill='none' stroke='%23C6892C' stroke-width='3'/%3E%3Ccircle cx='165' cy='185' r='7' fill='%23C6892C'/%3E%3Ccircle cx='232' cy='208' r='7' fill='%23C6892C'/%3E%3Ccircle cx='198' cy='165' r='7' fill='%23C6892C'/%3E%3Ccircle cx='210' cy='235' r='7' fill='%23C6892C'/%3E%3Cpath d='M150 235 Q200 268 250 235' stroke='%23C6892C' stroke-width='3' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .07;
  pointer-events: none;
}
.pm-experiences-head { text-align: center; max-width: 640px; margin: 0 auto 50px; }

.pm-exp-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 20px; align-items: stretch; }

.pm-exp-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 40px 32px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pm-exp-card:hover { transform: translateY(-8px); box-shadow: 0 26px 45px -22px rgba(11,16,74,.22); border-color: var(--gold-bright); }
.pm-exp-card--featured:hover { transform: translateY(-22px); }
.pm-exp-card .pm-eyebrow { color: var(--gold-deep); margin-bottom: 14px; }
.pm-exp-card h3 { font-size: 1.4rem; margin: 0 0 12px; }
.pm-exp-card p { font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); line-height: 1.6; flex: 1; margin: 0 0 24px; }
.pm-exp-card .pm-exp-links { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-exp-card .pm-exp-links a { font-family: var(--font-body); font-size: 12px; letter-spacing: .04em; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 9px 14px; }

.pm-exp-card--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
  transform: translateY(-14px);
  box-shadow: 0 24px 50px -18px rgba(11,16,74,.4);
}
.pm-exp-card--featured .pm-eyebrow { color: var(--gold-bright); }
.pm-exp-card--featured h3 { color: var(--white); }
.pm-exp-card--featured p { color: rgba(250,248,245,.78); }
.pm-exp-card--featured .pm-btn { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); font-weight: 600; align-self: flex-start; }
.pm-exp-card--featured .pm-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

@media (max-width: 900px) {
  .pm-exp-grid { grid-template-columns: 1fr; }
  .pm-exp-card--featured { transform: none; }
}

/* ---------- sticky mobile action bar ---------- */

.pm-mobile-bar { display: none; }

@media (max-width: 768px) {
  body { padding-bottom: 64px; }

  .pm-mobile-bar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 998;
    background: var(--white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px -10px rgba(11,16,74,.18);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .pm-mobile-bar a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .03em;
    color: var(--ink-soft);
    border-right: 1px solid var(--line-soft);
  }
  .pm-mobile-bar a:last-child { border-right: none; }
  .pm-mobile-bar a i { font-size: 16px; }
  .pm-mobile-bar-whatsapp { color: #3ba55c !important; }
  .pm-mobile-bar-reserve {
    background: var(--navy);
    color: var(--white) !important;
  }

  #back-to-top { bottom: 76px; right: 16px; width: 42px; height: 42px; }
}

.pm-reviews-band { padding: 90px 0 70px; text-align: center; }

/* ---------- slider controls: right side, vertically centered ---------- */

.slider-controls {
  position: absolute;
  bottom: auto;
  top: 50%;
  left: auto;
  right: 28px;
  width: auto;
  transform: translateY(-50%);
  flex-direction: column;
  gap: 14px;
}
.slider-dots { flex-direction: column; margin: 6px 0; gap: 8px; }
.dot { margin: 0; }
.prev-slide, .next-slide {
  background: rgba(250,248,245,.12);
  border: 1px solid rgba(250,248,245,.35);
  width: 34px; height: 34px;
}
.prev-slide:hover, .next-slide:hover { background: rgba(250,248,245,.28); }

@media (max-width: 768px) {
  .slider-controls { position: static; transform: none; flex-direction: row; justify-content: center; margin-top: 18px; }
  .slider-dots { flex-direction: row; }
}

/* ---------- general small-phone hardening ---------- */

@media (max-width: 600px) {
  .pm-section, .pm-reserve-section, .pm-location, .pm-about, .pm-experiences, .pm-services { padding: 64px 0; }

  .pm-hero-top-row { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 28px; }
  .pm-pill { font-size: 10px; padding: 7px 12px; }
  .pm-pill--rating { font-size: 12px; }

  .pm-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .pm-cta-row .pm-btn { width: 100%; justify-content: center; padding: 15px 20px; }

  .pm-stat-ribbon { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 34px; }
  .pm-stat-ribbon div { padding: 12px 14px; }
  .pm-stat-ribbon span.value { font-size: 1rem; }

  .pm-exp-card--featured { transform: none; margin: 6px 0; }
  .pm-exp-card { padding: 30px 24px; }

  .pm-menu-group-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .pm-dish-price { align-self: flex-start; }

  .pm-reserve-form-panel { padding: 28px 20px; }
  .pm-info-row { flex-direction: column; gap: 4px; }
  .pm-info-label { width: auto; }

  .pm-footer-tagline { padding: 56px 20px; }
  #footer .footer-top { grid-template-columns: 1fr; gap: 40px; }
}
.pm-reviews-band .pm-eyebrow { display: block; }
.pm-reviews-band .pm-title { margin-bottom: 40px; }

.pm-about {
  padding: 110px 0;
  position: relative;
}
.pm-about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }

.pm-about-visual { position: relative; }
.pm-about-image-wrap { position: relative; border-radius: 4px; overflow: hidden; }
.pm-about-image-wrap img { transition: transform .5s ease; }
.pm-about-image-wrap:hover img { transform: scale(1.04); }
.pm-about-image-wrap img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.pm-about-quote-card {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  background: rgba(250,248,245,.94);
  backdrop-filter: blur(4px);
  padding: 18px 20px;
  border-radius: 3px;
}
.pm-about-quote-card .pm-eyebrow { color: var(--gold-deep); display: block; margin-bottom: 4px; }
.pm-about-quote-card p { margin: 0; font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); line-height: 1.3; }

.pm-about-badge {
  position: absolute;
  right: -20px; bottom: -20px;
  background: var(--navy);
  color: var(--white);
  padding: 22px 24px;
  border-radius: 4px;
  max-width: 210px;
  box-shadow: 0 20px 40px -14px rgba(11,16,74,.45);
  display: flex; flex-direction: column; gap: 4px;
}
.pm-about-badge i { color: var(--gold-bright); font-size: 22px; margin-bottom: 4px; }
.pm-about-badge-title { font-family: var(--font-body); font-weight: 600; font-size: 15px; }
.pm-about-badge-sub { font-family: var(--font-body); font-size: 12.5px; color: rgba(250,248,245,.75); }

.pm-eyebrow-rule { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pm-eyebrow-rule span:first-child { width: 32px; height: 1px; background: var(--gold-deep); display: block; }
.pm-eyebrow-rule .pm-eyebrow { margin: 0; }

.pm-about-copy .pm-title { margin: 6px 0 22px; font-size: clamp(1.9rem, 3vw, 2.7rem); }
.pm-about-copy div, .pm-about-copy p { font-family: var(--font-body); font-weight: 300; font-size: .96rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; }

.pm-about-cta-box {
  margin-top: 8px;
  padding: 22px 24px;
  background: var(--cream-deep);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.pm-about-cta-left { display: flex; align-items: center; gap: 16px; }
.pm-about-cta-left i { font-size: 26px; color: var(--gold-deep); }
.pm-about-cta-title { display: block; font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink); }
.pm-about-cta-sub { display: block; font-family: var(--font-body); font-size: 12.5px; color: var(--ink-soft); }
.pm-about-cta-link { font-family: var(--font-body); font-size: 13px; color: var(--ink); white-space: nowrap; }
.pm-about-cta-link:hover { color: var(--gold-deep); }

@media (max-width: 900px) {
  .pm-about-grid { grid-template-columns: 1fr; }
  .pm-about-visual { margin-bottom: 26px; }

  /* Floating overlays only make sense with room to breathe (desktop).
     On mobile, take them out of the image entirely and stack normally —
     this is what was causing the cramped, overlapping mess. */
  .pm-about-quote-card {
    position: static;
    margin-top: 12px;
    background: var(--cream-deep);
    backdrop-filter: none;
  }
  .pm-about-badge {
    position: static;
    margin-top: 12px;
    max-width: none;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    box-shadow: none;
  }
  .pm-about-badge i { margin-bottom: 0; }
}
@media (max-width: 600px) {
  .pm-about { padding: 56px 0 60px; }
  .pm-about-cta-box { flex-direction: column; align-items: flex-start; }
  .pm-about-quote-card p { font-size: .95rem; }
}

.pm-services { padding: 20px 0 110px; }
.pm-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pm-service-card { background: var(--cream); padding: 52px 44px; transition: transform .3s ease, box-shadow .3s ease; }
.pm-service-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -22px rgba(11,16,74,.2); }
.pm-service-card h3 { font-size: 1.5rem; margin-bottom: 14px; }
.pm-service-card p { font-family: var(--font-body); font-weight: 300; color: var(--ink-soft); margin-bottom: 22px; }
.pm-service-card a { font-family: var(--font-body); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep); border-bottom: 1px solid var(--gold); padding-bottom: 2px; }

/* ---------- signature dishes showcase ---------- */

.pm-signature { background: var(--cream-deep); padding: 0; }
.pm-signature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.pm-signature-card {
    position: relative;
    aspect-ratio: 16 / 16;
    background-size: cover;
    background-position: top;
    overflow: hidden;
}
.pm-signature-card::after {
  content: '';
  position: absolute; inset: 0;
  background-size: inherit; background-position: inherit; background-image: inherit;
  transform: scale(1);
  transition: transform .5s ease;
}
.pm-signature-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(7,10,48,.85) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px;
  transition: background .3s ease;
	z-index:1;

}
.pm-signature-overlay .pm-eyebrow { color: var(--gold-bright); margin-bottom: 6px; }
.pm-signature-overlay h3 { color: var(--white); font-size: 1.2rem; margin: 0; }
.pm-signature-card:hover::after { transform: scale(1.08); }
.pm-signature-card:hover .pm-signature-overlay { background: linear-gradient(180deg, rgba(7,10,48,.15) 30%, rgba(7,10,48,.9) 100%); }

@media (max-width: 700px) {
  .pm-signature-grid { grid-template-columns: 1fr; }
  .pm-signature-card { aspect-ratio: 16/10; }
}

.pm-final-cta { padding: 0 0 100px; }
.pm-final-cta-box {
  background: var(--cream-deep);
  border-radius: 4px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
@media (max-width: 700px) {
  .pm-final-cta { padding: 0 0 60px; }
  .pm-final-cta-box { padding: 32px 24px; flex-direction: column; align-items: flex-start; }
  .pm-final-cta-box .pm-cta-row { width: 100%; }
  .pm-final-cta-box .pm-cta-row .pm-btn { width: 100%; }
}

#ambiance-marquee { background: var(--ink); }
.pm-ambiance-head { text-align: center; padding: 90px 0 10px; background: var(--ink); }
.pm-ambiance-head .pm-eyebrow { color: var(--gold); }
.pm-ambiance-head .pm-title { color: var(--white); }

.pm-location { padding: 110px 0; }
.pm-location-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; align-items: stretch; }

.pm-location-card {
  background: var(--navy);
  color: var(--white);
  padding: 48px 44px;
  border-radius: 4px 0 0 4px;
}
.pm-location-card .pm-eyebrow { color: var(--gold-bright); }
.pm-location-card .pm-title { color: var(--white); margin: 10px 0 16px; font-size: 2.1rem; }
.pm-location-card > p { font-family: var(--font-body); font-weight: 300; color: rgba(250,248,245,.8); line-height: 1.6; margin-bottom: 32px; }

.pm-location-rows { display: flex; flex-direction: column; gap: 22px; margin-bottom: 32px; }
.pm-location-row { display: flex; gap: 16px; align-items: flex-start; }
.pm-location-row i { color: var(--gold-bright); font-size: 16px; margin-top: 3px; width: 18px; }
.pm-location-row strong { display: block; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--white); margin-bottom: 3px; }
.pm-location-row span { display: block; font-family: var(--font-body); font-weight: 300; font-size: 13px; color: rgba(250,248,245,.72); line-height: 1.5; }
.pm-location-row{
  h3{
    font-size:18px;
  }
}
.pm-location-whatsapp { background: #25D366; border-color: #25D366; color: var(--white); }
.pm-location-whatsapp:hover { background: #1fb855; border-color: #1fb855; }
.pm-location-card .pm-btn--ghost { border-color: rgba(250,248,245,.35); }

.pm-location .pm-map-frame {
  border-radius: 0 4px 4px 0;
  border: none;
  filter: none;
  margin: 0;
}
.pm-location .pm-map-frame iframe { height: 100%; min-height: 460px; }

@media (max-width: 900px) {
  .pm-about-grid, .pm-location-grid { grid-template-columns: 1fr; }
  .pm-location-card { border-radius: 4px 4px 0 0; }
  .pm-location .pm-map-frame { border-radius: 0 0 4px 4px; }
  .pm-location .pm-map-frame iframe { min-height: 300px; }
}
@media (max-width: 600px) {
  .pm-location { padding: 0 0 56px; }
  .pm-location-card { padding: 40px 24px; }
  .pm-location-card .pm-title { font-size: 1.7rem; }
  .pm-cta-row .pm-btn { width: 100%; }
}

@media (max-width: 900px) {
  .pm-about-grid, .pm-location-grid { grid-template-columns: 1fr; }
  .pm-services-grid { grid-template-columns: 1fr; }
}

.pm-map-frame {
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
  filter: sepia(8%) saturate(85%);
}

.pm-map-frame iframe { display: block; width: 100%; height: 320px; border: 0; }

.pm-reserve-form-panel {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 56px;
}

.pm-reserve-form-panel h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;
  margin: 0 0 10px;
}

.pm-reserve-form-panel > p {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink-soft);
  margin: 0 0 36px;
}

/* Contact Form 7 minimal skin, scoped to the reserve panel only */
.pm-reserve-form-panel .wpcf7-form p { margin: 0 0 0; }

.pm-reserve-form-panel .wpcf7-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
  line-height: 1.4;
}

.pm-reserve-form-panel .wpcf7-form input[type="text"],
.pm-reserve-form-panel .wpcf7-form input[type="email"],
.pm-reserve-form-panel .wpcf7-form input[type="tel"],
.pm-reserve-form-panel .wpcf7-form input[type="date"],
.pm-reserve-form-panel .wpcf7-form input[type="time"],
.pm-reserve-form-panel .wpcf7-form select,
.pm-reserve-form-panel .wpcf7-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 8px 2px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .2s ease;
}

.pm-reserve-form-panel .wpcf7-form input:focus,
.pm-reserve-form-panel .wpcf7-form select:focus,
.pm-reserve-form-panel .wpcf7-form textarea:focus {
  outline: none;
  border-bottom-color: var(--gold);
}

.pm-reserve-form-panel .wpcf7-form textarea { resize: vertical; min-height: 90px; }

.pm-reserve-form-panel .wpcf7-form input[type="submit"] {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--white);
  border: none;
  padding: 16px 38px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s ease;
}

.pm-reserve-form-panel .wpcf7-form input[type="submit"]:hover { background: var(--gold-deep); }

.pm-reserve-form-panel .wpcf7-form-control-wrap { display: block; }

.pm-reviews-strip {
  padding: 70px 0;
  text-align: center;
  border-top: 1px solid var(--line-soft);
}

.pm-reviews-strip .pm-eyebrow { display: block; }

@media (max-width: 940px) {
  .pm-reserve-grid { grid-template-columns: 1fr; gap: 56px; }
  .pm-reserve-info { padding-left: 24px; order:2; }
  .pm-reserve-form-panel { padding: 34px 24px; }
  .pm-watermark { display: none; }
}

/* ==========================================================================
   PART 2 — Mobile navigation, page headers and cross-page polish
   Everything below was added after testing the live site at 390px: an
   unreadable mobile drawer, unreadable page-hero titles, and third-party
   widgets that forced the whole document to scroll sideways.
   ========================================================================== */

:root {
  --pm-header-h: 68px;
  --pm-bar-h: 62px;
  --pm-gutter: 22px;
}

/* Nothing on a phone may scroll the document sideways. The gallery page did,
   because of a review widget with a hard min-width. */
html { overflow-x: hidden; }
body { overflow-x: unset; }

.pm-constrain,
#tripadvisor_stats,
[id^="TA_"] {
  max-width: 100% !important;
  overflow-x: auto !important;
}
.pm-constrain iframe, [id^="TA_"] iframe { max-width: 100% !important; }

/* --------------------------------------------------------------------------
   1. MOBILE HEADER
   The logo, language toggle and hamburger used to stack into two rows, so the
   globe sat directly on top of the burger. One centred row instead.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  #header {
    transition: background .3s ease, box-shadow .3s ease;
  }

  #header .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    min-height: var(--pm-header-h);
  }

  /* the unnamed wrapper holding the language row, the nav and the CTA row */
  #header .header-inner > div:last-child {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }

  #header .text-right { margin-bottom: 0; text-align: right; }
  #header .tableBooking { gap: 8px; }
  #header .phone-quick { display: none; }
  #header .tableBooking .pm-btn { display: none; }

  #header .logo {
    margin: 0;
    flex-shrink: 0;
    background: rgba(250, 248, 245, .95);
    padding: 5px 10px;
    border-radius: 6px;
    max-width: 132px;
    height: auto;
    box-shadow: 0 2px 10px -4px rgba(11, 16, 74, .25);
  }
  #header .logo img {
    height: auto;
    max-height: 38px;
    width: auto;
    display: block;
  }

  /* The burger was white-on-white once you scrolled past the hero, which made
     it invisible over every cream section of the page. */
  #header .mobile-menu-toggle {
    display: flex;
    width: 44px;
    height: 44px;
    margin-left: 0;
    background: rgba(26, 24, 23, .45);
    border: 1px solid rgba(250, 248, 245, .45);
    backdrop-filter: blur(6px);
  }
  body.home #header .mobile-menu-toggle span,
  #header .mobile-menu-toggle span { background: var(--white); }

  #header.pm-scrolled .mobile-menu-toggle,
  body:not(.home) #header.pm-scrolled .mobile-menu-toggle {
    background: var(--cream-deep);
    border-color: var(--line);
  }
  body.home #header.pm-scrolled .mobile-menu-toggle span,
  #header.pm-scrolled .mobile-menu-toggle span { background: var(--ink); }

  .pm-lang-toggle {
    width: 44px;
    height: 44px;
    margin-right: 0;
    background: rgba(26, 24, 23, .45);
    border: 1px solid rgba(250, 248, 245, .45);
    backdrop-filter: blur(6px);
    color: var(--white);
  }
  #header.pm-scrolled .pm-lang-toggle {
    background: var(--cream-deep);
    border-color: var(--line);
    color: var(--ink-soft);
  }
}

/* --------------------------------------------------------------------------
   2. MOBILE DRAWER
   -------------------------------------------------------------------------- */

.pm-nav-extras { display: none; }

.pm-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 48, .5);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  z-index: 985;
}
.pm-nav-backdrop.pm-visible { opacity: 1; visibility: visible; }

body.pm-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

@media (max-width: 900px) {

  /* Header sits above the drawer so the logo and the close button stay
     visible, on solid ground, while the menu is open. */
  #header.pm-nav-is-open {
    background: var(--cream) !important;
    box-shadow: none !important;
    backdrop-filter: none;
  }
  #header.pm-nav-is-open .logo { background: none; box-shadow: none; padding: 5px 0; }

  /* .main-nav is a CHILD of #header, so the drawer's z-index is resolved
     inside the header's own stacking context - it painted straight over the
     logo and the close button. Lift both above the panel. */
  #header .logo,
  #header .header-inner > div:last-child > .text-right,
  #header .tableBooking,
  #header .header-right,
  #header .mobile-menu-toggle,
  #header .pm-lang-toggle {
    position: relative;
    z-index: 990;
  }
  #header.pm-nav-is-open .mobile-menu-toggle,
  #header.pm-nav-is-open .pm-lang-toggle {
    background: var(--cream-deep);
    border-color: var(--line);
    color: var(--ink-soft);
    backdrop-filter: none;
  }
  body.home #header.pm-nav-is-open .mobile-menu-toggle span,
  #header.pm-nav-is-open .mobile-menu-toggle span { background: var(--ink); }

  /* The drawer. The old one slid a bare <ul> in from the left with no padding,
     so every label sat flush against the screen edge. */
  #header .main-nav {
    position: fixed;
    inset: 0;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100% !important;
    max-height: none;
    background: var(--cream) !important;
    z-index: 980;
    padding-top: calc(var(--pm-header-h) + 26px) !important;
    padding-right: var(--pm-gutter) !important;
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: var(--pm-gutter) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    transition: transform .4s cubic-bezier(.22, .8, .28, 1), opacity .3s ease, visibility .4s;
  }

  #header .main-nav.active {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
  }

  /* the old pseudo-element caption overflowed its box; there is a real
     element for it now (.pm-nav-tagline) */
  .main-nav::after { content: none !important; }

  #header .main-nav ul#main-mobile-menu,
  #header .main-nav .MenuUl {
    display: block;
    width: 100%;
    padding: 0 !important;
    margin: 0;
    gap: 0 !important;
    border-top: 1px solid var(--line);
  }

  #header .main-nav .MenuUl li {
    margin: 0 !important;
    width: 100%;
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(14px);
  }

  #header .main-nav.active .MenuUl li {
    animation: pm-nav-item .45s cubic-bezier(.22, .8, .28, 1) forwards;
  }
  #header .main-nav.active .MenuUl li:nth-child(1) { animation-delay: .10s; }
  #header .main-nav.active .MenuUl li:nth-child(2) { animation-delay: .16s; }
  #header .main-nav.active .MenuUl li:nth-child(3) { animation-delay: .22s; }
  #header .main-nav.active .MenuUl li:nth-child(4) { animation-delay: .28s; }
  #header .main-nav.active .MenuUl li:nth-child(5) { animation-delay: .34s; }
  #header .main-nav.active .MenuUl li:nth-child(6) { animation-delay: .40s; }
  #header .main-nav.active .MenuUl li:nth-child(7) { animation-delay: .46s; }

  @keyframes pm-nav-item {
    to { opacity: 1; transform: translateY(0); }
  }

  /* Had to beat `body.home #header .main-nav a { color: white }`, which
     rendered the entire drawer as white text on a cream panel. */
  body #header .main-nav .MenuUl li a,
  body.home #header .main-nav .MenuUl li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 19px 2px;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink) !important;
    text-shadow: none !important;
    text-transform: none;
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
  }

  /* style.css force-styled the last nav item into a yellow pill button */
  body #header .main-nav ul li:last-child a,
  body #header .main-nav ul li:last-child a:hover {
    background: none !important;
    background-color: transparent !important;
    color: var(--ink) !important;
    padding: 19px 2px !important;
    border-radius: 0 !important;
    font-family: var(--font-display) !important;
    font-size: 1.35rem !important;
    font-weight: 300 !important;
    letter-spacing: -.01em !important;
    text-transform: none !important;
  }
  body #header .main-nav ul li:last-child a::after {
    display: block !important;
  }

  body #header .main-nav .MenuUl li a::after {
    content: '\2192';
    position: static;
    width: auto;
    height: auto;
    transform: none;
    background: none;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--gold-deep);
    opacity: 0;
    transition: opacity .25s ease;
  }
  body #header .main-nav .MenuUl li.current-menu-item a { font-weight: 400; }
  body #header .main-nav .MenuUl li.current-menu-item a::after { opacity: 1; }
  body #header .main-nav .MenuUl li.current-menu-item {
    border-left: 2px solid var(--gold);
    padding-left: 12px;
    margin-left: -14px !important;
  }

  /* ---- drawer footer ---- */
  .pm-nav-extras {
    display: block;
    margin-top: auto;
    padding-top: 30px;
  }

  .pm-nav-cta {
    display: block;
    width: 100%;
    padding: 17px 20px;
    background: var(--navy);
    color: var(--white) !important;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-align: center;
    border-radius: 2px;
    box-shadow: 0 10px 24px -12px rgba(11, 16, 74, .55);
  }
  .pm-nav-cta:hover, .pm-nav-cta:focus { background: var(--navy-soft); color: var(--white) !important; }

  .pm-nav-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
  }
  .pm-nav-contact > a {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border: 1px solid var(--line);
    border-radius: 2px;
    background: var(--white);
    font-family: var(--font-body);
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--ink) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pm-nav-contact > a i { color: var(--gold-deep); font-size: 13px; flex-shrink: 0; }
  .pm-nav-contact > a:hover { border-color: var(--gold); }

  .pm-nav-address {
    flex: 1 1 100%;
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 2px 0 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .pm-nav-address i { color: var(--gold-deep); margin-top: 3px; flex-shrink: 0; }

  .pm-nav-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .pm-nav-social a {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink-soft) !important;
    font-size: 14px;
    background: var(--white);
    transition: border-color .2s ease, color .2s ease;
  }
  .pm-nav-social a:hover { border-color: var(--gold); color: var(--gold-deep) !important; }

  .pm-nav-tagline {
    margin: 20px 0 0;
    font-family: var(--font-body);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    opacity: .75;
    text-align: left;
    line-height: 1.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  #header .main-nav { transition: none; }
  #header .main-nav .MenuUl li { opacity: 1; transform: none; animation: none !important; }
  .pm-nav-backdrop { transition: none; }
}

/* --------------------------------------------------------------------------
   3. FLOATING BUTTONS vs THE STICKY ACTION BAR
   The Click-to-Chat bubble sat on top of the bar's "Reservar" button, and the
   back-to-top arrow landed on the same corner. On a phone the bar already
   offers WhatsApp, so the bubble is redundant there.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .ht-ctc.ht-ctc-chat,
  #ht-ctc-chat { display: none !important; }

  #back-to-top {
    bottom: calc(var(--pm-bar-h) + 14px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    width: 42px;
    height: 42px;
    z-index: 990;
  }

  /* The drawer covers the page, so nothing may float above it. */
  body.pm-nav-open #back-to-top,
  body.pm-nav-open .pm-mobile-bar,
  body.pm-nav-open .ht-ctc,
  body.pm-nav-open #ht-ctc-chat { display: none !important; }

  /* The bar overlapped the last few lines of the footer. */
  body { padding-bottom: calc(var(--pm-bar-h) + env(safe-area-inset-bottom, 0px)); }

  .pm-mobile-bar a {
    padding: 11px 4px;
    font-size: 10.5px;
    letter-spacing: .04em;
    min-height: var(--pm-bar-h);
  }
  .pm-mobile-bar-reserve { font-weight: 600; }
}

/* --------------------------------------------------------------------------
   4. PAGE HEROES (about / contact / gallery / default pages)
   The templates set `style="background-image:url(...)"` inline, which killed
   the dark gradient baked into the `background` shorthand in style.css - so
   every title was white text on a bright, busy photo. An overlay layer fixes
   it regardless of which image is set.
   -------------------------------------------------------------------------- */

.page-header {
  position: relative;
  height: auto;
  min-height: 58vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  padding: calc(var(--pm-header-h) + 60px) var(--pm-gutter) 60px;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 10, 48, .55) 0%, rgba(7, 10, 48, .68) 100%);
}

.page-header-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.page-header-content h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  color: var(--white);
  margin: 0 0 16px;
  text-transform: none;
}

.page-header-content p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.95rem, 2.6vw, 1.05rem);
  line-height: 1.6;
  color: rgba(250, 248, 245, .88);
  margin: 0 auto;
  max-width: 52ch;
  text-transform: none;
  letter-spacing: 0;
}

/* a hairline rule under the title, echoing the rest of the design system */
.page-header-content h1::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  background: var(--gold);
  margin: 20px auto 0;
}

/* --------------------------------------------------------------------------
   5. INNER PAGE BODY TYPOGRAPHY
   style.css set Cinzel (a display face, largely small-caps in feel) as the
   body font, which made every paragraph on About/Contact hard to read and
   nothing like the homepage. Body copy uses the body face; headings keep the
   display face.
   -------------------------------------------------------------------------- */

.aboutPage,
.contact-main,
.map-section,
.page .entry-content {
  background: var(--cream);
}

.aboutPage .about-text,
.contact-main,
.contact-main p,
.contact-main li,
.contact-main span,
.contact-main a,
.contact-main label,
.contact-main input,
.contact-main textarea,
.contact-main select,
.aboutPage p,
.aboutPage li,
.page .entry-content p,
.page .entry-content li {
  font-family: var(--font-body);
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
}

.aboutPage h1, .aboutPage h2, .aboutPage h3, .aboutPage h4,
.contact-main h1, .contact-main h2, .contact-main h3, .contact-main h4,
.map-section h3,
.page .entry-content h1, .page .entry-content h2,
.page .entry-content h3, .page .entry-content h4 {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -.01em;
  color: var(--ink);
  text-transform: none;
}

.aboutPage.section { padding: 84px 0; }

.aboutPage .about-content { display: block; }

.aboutPage .about-text {
  /* the templates hard-coded `transform: translateX(50px)` inline, which
     pushed the whole column off the right edge of a phone screen */
  transform: none !important;
  max-width: 68ch;
  margin: 0 auto;
  text-align: left;
}

.aboutPage .about-text h3 {
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  line-height: 1.15;
  margin-bottom: 22px;
}

.aboutPage .about-text p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.aboutPage .about-text b { color: var(--ink); font-weight: 600; }

.aboutPage .about-text .btn {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  border-radius: 2px;
  padding: 15px 32px;
}
.aboutPage .about-text .btn:hover { background: var(--navy-soft); color: var(--white); }

/* --------------------------------------------------------------------------
   6. CONTACT PAGE
   -------------------------------------------------------------------------- */

.contact-main { padding: 84px 0; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}

.info-header h2 {
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  margin-bottom: 10px;
}
.info-header p { color: var(--ink-soft); margin-bottom: 32px; }

.info-cards { display: grid; gap: 14px; }

.info-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  transition: border-color .25s ease, transform .25s ease;
}
.info-card:hover { border-color: var(--gold); transform: translateY(-2px); }

.info-card .card-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cream-deep);
  color: var(--gold-deep);
  font-size: 15px;
}

.info-card .card-content { min-width: 0; }

.info-card .card-content h3 {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin: 0 0 6px !important;
}

.info-card .card-content p {
  margin: 0 0 10px;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.info-card .info-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.info-card .info-link:hover { color: var(--navy); }

.opening-hours,
.social-section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.opening-hours h2, .opening-hours h3,
.social-section h3 {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ink-soft) !important;
  margin-bottom: 16px !important;
}

.opening-hours table { width: 100%; border-collapse: collapse; }
.opening-hours td, .opening-hours th {
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-body);
  font-size: .92rem;
  text-align: left;
  color: var(--ink);
}
.opening-hours td:last-child, .opening-hours th:last-child {
  text-align: right;
  color: var(--ink-soft);
  white-space: nowrap;
}

.social-links-contact { display: flex; flex-wrap: wrap; gap: 10px; }
.social-links-contact .social-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .05em;
  color: var(--ink);
  text-transform: none;
}
.social-links-contact .social-link:hover { border-color: var(--gold); color: var(--gold-deep); }

.contact-form-section .form-header h2 {
  font-size: clamp(1.6rem, 4.6vw, 2.2rem);
  margin-bottom: 8px;
}
.contact-form-section .form-header p { color: var(--ink-soft); margin-bottom: 26px; }

.contact-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 30px 26px;
}

/* --------------------------------------------------------------------------
   7. FORMS (Contact Form 7, used on contact / reserve / the booking popup)
   -------------------------------------------------------------------------- */

.contact-form .wpcf7-form p,
.pm-reserve-form-panel .wpcf7-form p,
.popup-content .wpcf7-form p { margin-bottom: 0; }

.contact-form .wpcf7-form label,
.pm-reserve-form-panel .wpcf7-form label,
.popup-content .wpcf7-form label {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.contact-form .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.contact-form .wpcf7-form textarea,
.contact-form .wpcf7-form select,
.pm-reserve-form-panel .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.pm-reserve-form-panel .wpcf7-form textarea,
.pm-reserve-form-panel .wpcf7-form select,
.popup-content .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.popup-content .wpcf7-form textarea,
.popup-content .wpcf7-form select {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-body);
  font-size: 15px; /* 16px-ish keeps iOS from zooming the page on focus */
  font-weight: 300;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line) !important;
  border-radius: 2px;
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.contact-form .wpcf7-form select,
.pm-reserve-form-panel .wpcf7-form select,
.popup-content .wpcf7-form select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C5652' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}

.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form textarea:focus,
.contact-form .wpcf7-form select:focus,
.pm-reserve-form-panel .wpcf7-form input:focus,
.pm-reserve-form-panel .wpcf7-form textarea:focus,
.pm-reserve-form-panel .wpcf7-form select:focus,
.popup-content .wpcf7-form input:focus,
.popup-content .wpcf7-form textarea:focus,
.popup-content .wpcf7-form select:focus {
  outline: none;
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(198, 137, 44, .13);
}

.contact-form .wpcf7-form textarea,
.pm-reserve-form-panel .wpcf7-form textarea,
.popup-content .wpcf7-form textarea {
  min-height: 110px;
  max-height: 220px;
  resize: vertical;
}

.contact-form .wpcf7-form input[type="submit"],
.popup-content .wpcf7-form input[type="submit"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 16px 32px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s ease;
}
.contact-form .wpcf7-form input[type="submit"]:hover,
.popup-content .wpcf7-form input[type="submit"]:hover { background: var(--navy-soft); }

.pm-reserve-form-panel .wpcf7-form input[type="submit"] {
  width: 100%;
  background: var(--navy);
}
.pm-reserve-form-panel .wpcf7-form input[type="submit"]:hover { background: var(--navy-soft); }

.wpcf7-not-valid-tip {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--olive);
  margin-top: 6px;
}
.wpcf7 form .wpcf7-response-output {
  font-family: var(--font-body);
  font-size: 13px;
  border-radius: 2px;
  border-width: 1px;
  margin: 16px 0 0;
  padding: 12px 14px;
}

/* --------------------------------------------------------------------------
   8. MAP SECTION
   -------------------------------------------------------------------------- */

.map-section { padding: 0 0 84px; background: var(--cream); }
.map-container { position: relative; }
.map-placeholder iframe,
.pm-map-frame iframe {
  width: 100% !important;
  min-height: 320px;
  border: 0;
  display: block;
  filter: grayscale(.25) contrast(1.02);
}
.map-info h3 { font-size: 1.4rem; margin-bottom: 8px; }
.map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.map-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--white) !important;
  border-radius: 2px;
}
.map-btn:hover { background: var(--navy-soft); }

/* --------------------------------------------------------------------------
   9. HOMEPAGE FIXES
   -------------------------------------------------------------------------- */

/* The ambience heading had no horizontal padding, so on a phone the words ran
   straight off both edges of the screen. */
.pm-ambiance-head {
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
}
.pm-ambiance-head .pm-title { margin-left: auto; margin-right: auto; max-width: 18ch; }

/* Spaces cards: give the image a real subject when no ACF image is set yet,
   instead of a flat empty block. */
.pm-space-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--cream-deep) 0%, var(--line-soft) 55%, var(--cream-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold);
  font-size: 26px;
  opacity: .85;
}

.pm-reviews-band { padding: 76px 0 64px; }
.pm-reviews-band .pm-container { padding-left: var(--pm-gutter); padding-right: var(--pm-gutter); }

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

#footer .footer-logo img {
  max-width: 150px;
  height: auto;
  /* the crest is dark-on-transparent and all but vanished on the dark footer */
  filter: brightness(0) invert(1);
  opacity: .92;
}

#footer .footer-tagline-small {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(250, 248, 245, .6);
  margin-top: 14px;
  max-width: 34ch;
}

#footer h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 18px;
}

#footer .footer-nav .MenuUl { display: grid; gap: 2px; }
#footer .footer-nav .MenuUl li { margin: 0; }
#footer .footer-nav .MenuUl a {
  display: inline-block;
  padding: 7px 0;
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 300;
  color: rgba(250, 248, 245, .74) !important;
  background: none !important;
  border-radius: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: color .2s ease, padding-left .2s ease;
}
#footer .footer-nav .MenuUl a:hover {
  color: var(--gold-bright) !important;
  padding-left: 6px;
}

#footer .footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-family: var(--font-body);
  font-size: .93rem;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(250, 248, 245, .74);
  margin-bottom: 12px;
  overflow-wrap: anywhere;
}
#footer .footer-contact p i { color: var(--gold); margin-top: 4px; flex-shrink: 0; width: 14px; }
#footer .footer-contact a { color: rgba(250, 248, 245, .74); }
#footer .footer-contact a:hover { color: var(--gold-bright); }

#footer .social-icons { display: flex; gap: 10px; }
#footer .social-icons a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(250, 248, 245, .18);
  background: none;
  color: rgba(250, 248, 245, .8);
  font-size: 14px;
  transition: border-color .2s ease, color .2s ease;
}
#footer .social-icons a:hover { border-color: var(--gold); color: var(--gold-bright); }

#footer .whatsapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(250, 248, 245, .18);
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(250, 248, 245, .85);
}
#footer .whatsapp-btn i { color: #3ba55c; font-size: 15px; }
#footer .whatsapp-btn:hover { border-color: #3ba55c; color: var(--white); }

#footer .footer-bottom p {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 300;
  color: rgba(250, 248, 245, .45);
  margin: 0;
}

/* The scrolling tagline slid up under the fixed header. */
.pm-footer-tagline { padding-left: var(--pm-gutter); padding-right: var(--pm-gutter); }

/* --------------------------------------------------------------------------
   11. PHONE-SPECIFIC LAYOUT
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 768px) {
  .page-header { min-height: 46vh; padding-top: calc(var(--pm-header-h) + 44px); padding-bottom: 44px; }

  .contact-main { padding: 56px 0; }
  .contact-form { padding: 24px 18px; }
  .aboutPage.section { padding: 56px 0; }

  .map-section { padding-bottom: 56px; }
  .map-actions { flex-direction: column; }
  .map-btn { justify-content: center; }

  #footer .footer-top { display: grid; grid-template-columns: 1fr; gap: 34px; }
  #footer .footer-nav .MenuUl { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .pm-footer-tagline p { font-size: 1.15rem; line-height: 1.45; }

  .pm-ambiance-head { padding-top: 64px; }
  .pm-ambiance-head .pm-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); }

  /* keep the sticky menu-category rail clear of the fixed header */
  .menu-categories-nav, .pm-menu-nav { top: var(--pm-header-h) !important; }
}

/* --------------------------------------------------------------------------
   12. FOCUS VISIBILITY
   The theme relied on the browser default, which drew a black box over the
   drawer's gold-and-cream palette.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.mobile-menu-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
a:focus:not(:focus-visible) { outline: none; }


/* --------------------------------------------------------------------------
   13. LANGUAGE SWITCHER ON TOUCH
   The panel only opened on :hover / :focus-within, and its links are
   display:none until then - so on a phone it could never be opened at all.
   premium.js now toggles .pm-open on tap.
   -------------------------------------------------------------------------- */

#flags.pm-open ul#sortable { display: grid !important; }
#flags.pm-open::after { transform: rotate(180deg); }

@media (max-width: 900px) {
  #header #flags {
    height: 44px;
    padding: 0 15px 0 13px;
    border-radius: 999px;
    background: rgba(26, 24, 23, .45);
    border: 1px solid rgba(250, 248, 245, .45);
    /* No backdrop-filter here on purpose: it makes #flags the containing
       block for its position:fixed dropdown, which collapsed the panel to
       the width of the pill itself. */
  }
  #header #flags::before { color: var(--white); font-size: 14px; }
  #header #flags::after { color: var(--white); }

  #header.pm-scrolled #flags,
  #header.pm-nav-is-open #flags {
    background: var(--cream-deep);
    border-color: var(--line);
    backdrop-filter: none;
  }
  #header.pm-scrolled #flags::before,
  #header.pm-scrolled #flags::after,
  #header.pm-nav-is-open #flags::before,
  #header.pm-nav-is-open #flags::after { color: var(--ink-soft); }

  /* Anchor the panel to the screen rather than to the pill, so it can never
     hang off the right edge on a narrow phone. */
  #header #flags ul#sortable {
    position: fixed;
    top: calc(var(--pm-header-h) + 8px);
    left: 16px;
    right: 16px;
    width: auto;
    max-height: 60vh;
    overflow-y: auto;
    z-index: 1001;
  }
}

/* --------------------------------------------------------------------------
   14. MENU PAGE HERO
   This hero uses a plain <h1>/<p> (not the .pm-title system), so none of the
   redesign's colour rules reached it: the title rendered near-black on a
   bright photo with the overlay barely visible, and `.animate-fade` could
   leave it stuck at opacity 0 on a slide that was hidden while it ran.
   -------------------------------------------------------------------------- */

.page-template-menu #hero-banner .slide .overlay,
.page-template-menu .slide .overlay {
  background-color: rgba(7, 10, 48, .35);
  background-image: linear-gradient(180deg, rgba(7, 10, 48, .45) 0%, rgba(7, 10, 48, .62) 55%, rgba(7, 10, 48, .8) 100%);
}

.page-template-menu .slide-content { color: var(--white); }

.page-template-menu .slide-content h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(7, 10, 48, .5);
  margin-bottom: 14px;
  /* never let the entry animation leave the title invisible */
  opacity: 1;
  animation-fill-mode: forwards;
}

.page-template-menu .slide-content h1::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  background: var(--gold-bright);
  margin-top: 20px;
}

.page-template-menu .slide-content p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.95rem, 2.8vw, 1.1rem);
  line-height: 1.6;
  color: rgba(250, 248, 245, .88);
  text-shadow: 0 1px 14px rgba(7, 10, 48, .45);
  max-width: 52ch;
  opacity: 1;
}

/* A single word of copy did not justify a 795px-tall hero on a phone. */
@media (max-width: 900px) {
  .page-template-menu #hero-banner { aspect-ratio: auto; min-height: 0; }
  .page-template-menu .slide { min-height: 60vh !important; }
  .page-template-menu #hero-banner .container { padding: 88px 22px 44px !important; }
}

/* Category rail sits directly under the fixed header, never behind it, and
   anchored jumps stop landing underneath both. */
.pm-menu-nav, .menu-categories-nav { top: var(--pm-header-h); }
.pm-menu-group, .menu-category-section, [id^="cat-"] {
  scroll-margin-top: calc(var(--pm-header-h) + 62px);
}

/* --------------------------------------------------------------------------
   15. LOOSE ENDS
   -------------------------------------------------------------------------- */

/* header.php ships a global `.form-header { text-align: center }` for the
   booking popup; on the contact page it left the heading centred over a
   left-aligned column. */
.contact-form-section .form-header { text-align: left; }
.popup-content .form-header { text-align: center; }

/* `.btn-secondary` painted this olive-green, and the reset above turned it
   near-black. Match the navy used by every other primary action. */
.aboutPage .about-text .btn,
.aboutPage .about-text .btn-secondary {
  background-color: var(--navy) !important;
  color: var(--white) !important;
}
.aboutPage .about-text .btn:hover,
.aboutPage .about-text .btn-secondary:hover {
  background-color: var(--navy-soft) !important;
  color: var(--white) !important;
}

/* Third-party review widgets render at a fixed pixel width. They can scroll
   inside their own box, but they should look deliberate while doing it. */
.pm-constrain {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--white);
  padding: 4px;
  -webkit-overflow-scrolling: touch;
}

/* Reveal elements kept a compositing layer alive after animating, which makes
   Chrome render text with colour-fringed subpixel antialiasing. */
.pm-reveal.pm-in {
  will-change: auto;
  transform: none;
}

/* The reviews band had a 90px gap above a widget that already has its own
   generous padding. */
.pm-reviews-band .pm-title { margin-bottom: 28px; }

@media (max-width: 768px) {
  .pm-reviews-band { padding: 56px 0 44px; }
  .pm-reviews-strip { padding: 48px 0; }
}

/* Tap targets: anything interactive should clear the 44px minimum. */
@media (max-width: 900px) {
  .pm-mobile-bar a,
  .info-card .info-link,
  .social-links-contact .social-link,
  #footer .social-icons a { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   16. HEADER CONTRAST OVER A HERO IMAGE
   Only `body.home` got light header text, but every page template opens with
   a photo behind the fixed header - so on About / Contact / Gallery the nav
   links and the phone number were near-black ink on a dark image. The
   `pm-hero-page` body class (functions.php) marks those views; once the
   header turns solid on scroll, everything reverts to ink.
   -------------------------------------------------------------------------- */

body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) .main-nav a,
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) .phone-quick a,
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) .phone-quick {
  color: var(--white);
  text-shadow: 0 1px 8px rgba(7, 10, 48, .45);
}
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) .phone-quick i {
  color: var(--gold-bright);
}

body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) .mobile-menu-toggle {
  background: rgba(26, 24, 23, .45);
  border-color: rgba(250, 248, 245, .45);
}
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) .mobile-menu-toggle span {
  background: var(--white);
}
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) #flags {
  background: rgba(26, 24, 23, .45);
  border-color: rgba(250, 248, 245, .45);
  backdrop-filter: none;
}
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) #flags::before,
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open) #flags::after {
  color: var(--white);
}

/* Views with no hero (404, search, archive, single) open on cream, so the bar
   is solid from the first pixel rather than transparent over nothing. */
body:not(.pm-hero-page) #header {
  background: rgba(247, 244, 238, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 20px -12px rgba(11, 16, 74, .15);
}
/* Header is ~134px on desktop and ~70px on a phone; clear whichever it is. */
body:not(.pm-hero-page) { padding-top: 152px; }
@media (max-width: 900px) { body:not(.pm-hero-page) { padding-top: 92px; } }

/* A dark scrim behind the bar keeps light nav text legible even over a hero
   whose top edge happens to be pale. */
body.pm-hero-page #header:not(.pm-scrolled):not(.pm-nav-is-open)::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 160%;
  background: linear-gradient(180deg, rgba(7, 10, 48, .45) 0%, rgba(7, 10, 48, 0) 100%);
  pointer-events: none;
  z-index: -1;
}
#header { position: fixed; isolation: isolate; }

/* --------------------------------------------------------------------------
   17. HERO SLIDER CONTROLS ON MOBILE
   At <=768px the controls drop out of the dark hero and sit on the cream
   band underneath it - but they kept their translucent-white styling, so the
   arrows and dots were all but invisible against the background.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .slider-controls {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 22px 0 26px;
    margin-top: 0;
  }

  .prev-slide, .next-slide {
    background: var(--white);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }
  .prev-slide:hover, .next-slide:hover,
  .prev-slide:active, .next-slide:active {
    background: var(--cream-deep);
    border-color: var(--gold);
    color: var(--ink);
  }

  .slider-dots { flex-direction: row; gap: 8px; margin: 0; align-items: center; }

  .dot {
    width: 7px;
    height: 7px;
    margin: 0;
    background-color: var(--line);
    border: none;
    transition: width .25s ease, background-color .25s ease;
  }
  .dot.active {
    width: 22px;
    border-radius: 4px;
    background-color: var(--gold);
  }
}

/* ==========================================================================
   PART 3 — Language switcher, prominent phone, group & event pages
   ========================================================================== */

/* --------------------------------------------------------------------------
   18. LANGUAGE SWITCHER — a real, readable dropdown
   The panel was ten unlabelled 20x14 flag chips in a 5-column grid, and the
   widget's own box clipped it. Now it is a titled list of languages, each
   with its flag, that can actually be read and tapped.
   -------------------------------------------------------------------------- */

#flags,
#flags.pm-constrain {
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .3);
  padding: 9px 16px 9px 14px;
  background: rgba(255, 255, 255, .14);
}

#header #flags { z-index: 991; }

#flags ul#sortable {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: auto;
  width: 248px;
  max-height: min(64vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 50px -16px rgba(11, 16, 74, .28);
  padding: 8px;
  margin: 0;
  list-style: none;
  z-index: 1002;
  /* the plugin floats the list; undo it so the panel lays out predictably */
  float: none !important;
  grid-template-columns: none !important;
  gap: 0 !important;
}

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

/* a heading so the panel reads as a language menu, not a flag soup */
#flags ul#sortable::before {
  content: 'Idioma / Language';
  display: block;
  padding: 8px 12px 10px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}

#flags ul#sortable li {
  list-style: none;
  margin: 0;
  padding: 0;
  width: auto;
  float: none !important;
  display: block;
}

/* Each flag is its own inline-SVG background on the <a>. Pin it to the left
   and print the language name (from data-lang) beside it. */
#flags ul#sortable li a,
#flags ul#sortable li a.flag {
  display: flex !important;
  align-items: center;
  width: 100%;
  height: auto;
  min-height: 42px;
  padding: 9px 12px 9px 48px;
  margin: 0;
  border-radius: 6px;
  transform: none !important;
  background-repeat: no-repeat !important;
  background-position: 12px center !important;
  background-size: 24px auto !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink) !important;
  text-indent: 0;
  transition: background-color .18s ease;
}

#flags ul#sortable li a::after {
  content: attr(data-lang);
  display: block;
}

#flags ul#sortable li a:hover,
#flags ul#sortable li a:focus-visible {
  background-color: var(--cream-deep) !important;
  color: var(--ink) !important;
}

/* On a phone the panel is pinned to the screen so it can never hang off the
   right edge or be clipped by the header. */
@media (max-width: 900px) {
  #header #flags ul#sortable {
    position: fixed;
    top: calc(var(--pm-header-h) + 10px);
    left: 14px;
    right: 14px;
    width: auto;
    max-height: 60vh;
    z-index: 1002;
  }
  /* hover has no meaning on touch; the tap toggle owns it */
  #flags:hover ul#sortable { display: none; }
  #flags.pm-open ul#sortable { display: block !important; }
}

/* --------------------------------------------------------------------------
   19. PROMINENT PHONE NUMBER IN THE HEADER
   It was 12px grey text tucked behind the language pill. A restaurant's
   phone number is the highest-intent action on the page.
   -------------------------------------------------------------------------- */

#header .phone-quick {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-right: 14px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .14);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
#header .phone-quick:hover { transform: translateY(-1px); }

#header .phone-quick i {
  font-size: 12px;
  color: var(--gold-bright);
}

#header .phone-quick a,
body.home #header .phone-quick a {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--white);
  white-space: nowrap;
}

#header.pm-scrolled .phone-quick,
body:not(.pm-hero-page) #header .phone-quick {
  background: var(--navy);
  border-color: var(--navy);
}
#header.pm-scrolled .phone-quick i,
body:not(.pm-hero-page) #header .phone-quick i { color: var(--gold-bright); }
#header.pm-scrolled .phone-quick a,
body.home #header.pm-scrolled .phone-quick a,
body:not(.pm-hero-page) #header .phone-quick a { color: var(--white); }
#header.pm-scrolled .phone-quick:hover { background: var(--navy-soft); }

/* On a phone the number becomes a tap-to-call pill next to the burger; the
   sticky bottom bar already carries a full-width "Llamar" action, so this
   one stays compact. */
@media (max-width: 900px) {
  #header .phone-quick {
    display: inline-flex;
    margin-right: 0;
    padding: 0;
    width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    background: rgba(26, 24, 23, .45);
    border-color: rgba(250, 248, 245, .45);
    backdrop-filter: blur(6px);
  }
  #header .phone-quick a { display: none; }
  #header .phone-quick i { font-size: 15px; color: var(--white); }
  #header.pm-scrolled .phone-quick {
    background: var(--navy);
    border-color: var(--navy);
    backdrop-filter: none;
  }
  #header.pm-scrolled .phone-quick i { color: var(--white); }
  /* make the whole pill the tap target */
  #header .phone-quick { position: relative; z-index: 991; }
}

@media (max-width: 420px) {
  /* three 44px circles plus the logo is tight at 360px - drop the language
     pill's chevron rather than shrinking the tap targets */
  #header #flags { padding-left: 12px; padding-right: 12px; }
  #header #flags::after { display: none; }
}

/* A backdrop-filter, filter or transform on #flags would turn it into the
   containing block for the position:fixed dropdown. Keep it clean. */
#flags, #header #flags {
  backdrop-filter: none !important;
  filter: none !important;
  transform: none !important;
}

/* --------------------------------------------------------------------------
   18b. LANGUAGE PANEL — override the plugin/legacy rules that fought it
   Two things kept breaking the dropdown after it was made visible:
     - an older mobile rule still applied `transform: translateX(-50%)` to
       ul#sortable, dragging the panel 181px off the left of the screen;
     - the translator plugin floats each flag anchor, so every row
       shrink-wrapped to the flag instead of filling the panel width.
   -------------------------------------------------------------------------- */

#flags ul#sortable,
#header #flags ul#sortable,
#flags ul#sortable.ui-sortable {
  transform: none !important;
  float: none !important;
}

#flags ul#sortable li,
#flags ul#sortable li a,
#flags ul#sortable li a.flag {
  float: none !important;
  clear: both;
  height: auto !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

#flags ul#sortable li a,
#flags ul#sortable li a.flag {
  box-sizing: border-box;
  text-decoration: none;
}

/* The plugin renders the active language with a `.selected`-style state on
   some setups; mark it either way so the current choice is obvious. */
#flags ul#sortable li a.selected,
#flags ul#sortable li a[aria-current="true"] {
  background-color: var(--cream-deep) !important;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   18c. Two flags still came from the plugin's flags20.png sprite (Portuguese
   and Spanish). A sprite depends on exact background-position/size, so the
   uniform sizing used for the list turned them into a grid of every flag at
   once. Replaced with standalone inline SVGs, the same approach style.css
   already uses for Chinese and Korean.
   -------------------------------------------------------------------------- */

#flags ul#sortable li a.es,
#flags.size20 a[title="Spanish"],
a.single-language[title="Spanish"] span.size20 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23C60B1E'/%3E%3Crect y='6' width='36' height='12' fill='%23FFC400'/%3E%3C/svg%3E") !important;
}

#flags ul#sortable li a.pt,
#flags.size20 a[title="Portuguese"],
a.single-language[title="Portuguese"] span.size20 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23DA291C'/%3E%3Crect width='14.4' height='24' fill='%23046A38'/%3E%3Ccircle cx='14.4' cy='12' r='5.1' fill='%23FFE900' stroke='%23fff' stroke-width='.7'/%3E%3Ccircle cx='14.4' cy='12' r='2.7' fill='%23DA291C'/%3E%3C/svg%3E") !important;
}

/* Catalan was falling back to the Spanish flag. Use the Senyera. */
#flags ul#sortable li a.ca,
#flags.size20 a[title="Catalan"],
a.single-language[title="Catalan"] span.size20 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 24'%3E%3Crect width='36' height='24' fill='%23FCDD09'/%3E%3Cg fill='%23DA121A'%3E%3Crect y='2.67' width='36' height='2.67'/%3E%3Crect y='8' width='36' height='2.67'/%3E%3Crect y='13.33' width='36' height='2.67'/%3E%3Crect y='18.67' width='36' height='2.67'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* ==========================================================================
   20. GROUP MENUS & EVENT PAGES
   Follows the printed proposal: a dark brand banner, then one card per menu
   with a gold price, gold-ruled course headings and a cream inclusions box.
   ========================================================================== */

.pm-menus-section {
  background: var(--cream);
  padding: 90px 0 100px;
}
.pm-menus-section--event { padding-top: 70px; }

.pm-menus-section .pm-container {
  max-width: 1100px;
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
}

/* ---- the dark banner that heads the proposal ---- */

.pm-menus-banner {
  background: var(--ink);
  border-radius: 4px;
  padding: 34px 28px 30px;
  text-align: center;
  border-bottom: 3px solid var(--gold);
  margin-bottom: 44px;
}

.pm-menus-banner-brand {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.1;
}

.pm-menus-banner-sub {
  display: block;
  margin-top: 12px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(.78rem, 2.2vw, .92rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250, 248, 245, .82);
}

.pm-menus-intro {
  max-width: 62ch;
  margin: 0 auto 40px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---- the cards ---- */

.pm-menu-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}
.pm-menu-cards--1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
.pm-menu-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }

.pm-menu-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 34px 30px 30px;
  box-shadow: 0 18px 40px -30px rgba(11, 16, 74, .35);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.pm-menu-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-bright);
  box-shadow: 0 26px 54px -28px rgba(11, 16, 74, .4);
}

.pm-menu-card-head {
  text-align: center;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}

.pm-menu-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
}

.pm-menu-card-price {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.6rem);
  line-height: 1;
  color: var(--gold);
  margin: 0;
}

.pm-menu-card-price-note {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 8px 0 0;
}

/* ---- a course within a card ---- */

.pm-menu-course { margin-bottom: 24px; }
.pm-menu-course:last-of-type { margin-bottom: 0; }

.pm-menu-course-title {
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 6px;
  padding-left: 14px;
  line-height: 1.4;
}
/* the gold rule to the left of each course heading, as on the printed sheet */
.pm-menu-course-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 4px;
  border-radius: 2px;
  background: var(--gold);
}

.pm-menu-course-note {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: .82rem;
  color: var(--ink-soft);
  margin: 0 0 12px;
  padding-left: 14px;
}

.pm-menu-dishes {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
}

.pm-menu-dishes li {
  position: relative;
  padding-left: 15px;
  margin-bottom: 11px;
}
.pm-menu-dishes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
}

.pm-dish-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--ink);
}

.pm-dish-note {
  display: block;
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ---- inclusions box ---- */

.pm-menu-includes {
  margin-top: 26px;
  padding: 18px 20px;
  background: var(--cream-deep);
  border-radius: 4px;
}

.pm-menu-includes-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 8px;
}

.pm-menu-includes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pm-menu-includes li {
  position: relative;
  padding-left: 14px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .87rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.pm-menu-includes li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--gold-deep);
}

/* ---- terms / footnote ---- */

.pm-menus-terms {
  margin-top: 44px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  background: var(--white);
}
.pm-menus-terms h3 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.pm-menus-terms ul { list-style: none; margin: 0; padding: 0; }
.pm-menus-terms li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .93rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 6px;
}
.pm-menus-terms li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  font-size: .8rem;
}

.pm-menus-footnote {
  margin: 38px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .85rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.pm-menus-empty {
  text-align: center;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--ink-soft);
  padding: 48px 20px;
  border: 1px dashed var(--line);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   21. EVENT PAGE EXTRAS
   -------------------------------------------------------------------------- */

.pm-event-badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 7px 16px;
  border: 1px solid rgba(216, 168, 86, .7);
  border-radius: 999px;
  background: rgba(7, 10, 48, .35);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.pm-event-dates {
  font-family: var(--font-body) !important;
  font-size: .95rem !important;
  font-weight: 500 !important;
  letter-spacing: .04em;
  color: var(--white) !important;
  margin: 0 auto 10px !important;
}
.pm-event-dates i { color: var(--gold-bright); margin-right: 6px; }

.pm-event-hero-cta { margin-top: 26px; }

.pm-event-highlights {
  background: var(--cream-deep);
  padding: 54px 0;
}
.pm-event-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.pm-event-highlight {
  background: var(--cream);
  padding: 26px 24px;
}
.pm-event-highlight-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
}
.pm-event-highlight-note {
  display: block;
  margin-top: 7px;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pm-event-body { background: var(--cream); padding: 66px 0 0; }
.pm-event-copy {
  max-width: 68ch;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.pm-event-copy h2, .pm-event-copy h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -.01em;
}
.pm-event-copy p { margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   22. BOOKING CTA BLOCK (shared by both templates)
   -------------------------------------------------------------------------- */

.pm-menu-cta {
  background: var(--navy);
  padding: 76px 0;
  color: var(--white);
}
.pm-menu-cta .pm-container {
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
}
.pm-menu-cta-inner { text-align: center; max-width: 720px; margin: 0 auto; }

.pm-menu-cta .pm-title { color: var(--white); margin-bottom: 14px; }
.pm-menu-cta .pm-lede {
  color: rgba(250, 248, 245, .84);
  margin: 0 auto 22px;
  max-width: 54ch;
}

.pm-menu-cta-deposit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 auto 24px;
  padding: 10px 18px;
  border: 1px solid rgba(216, 168, 86, .45);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .85rem;
  font-weight: 300;
  color: var(--gold-bright);
}

.pm-menu-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.pm-menu-cta-actions .pm-btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.pm-menu-cta-actions .pm-btn--navy {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.pm-menu-cta-actions .pm-btn--navy:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  color: var(--ink);
}
.pm-menu-cta-actions .pm-btn:not(.pm-btn--navy):not(.pm-btn--gold) {
  background: transparent;
  border-color: rgba(250, 248, 245, .45);
  color: var(--white);
}
.pm-menu-cta-actions .pm-btn:not(.pm-btn--navy):not(.pm-btn--gold):hover {
  border-color: var(--white);
  background: rgba(250, 248, 245, .1);
}

.pm-menu-cta-note {
  margin: 22px auto 0;
  max-width: 52ch;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .87rem;
  line-height: 1.6;
  color: rgba(250, 248, 245, .6);
}

/* --------------------------------------------------------------------------
   23. RESERVE PAGE — context passed in from a menu or event page
   -------------------------------------------------------------------------- */

.pm-reserve-context {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
  padding: 16px 18px;
  background: var(--cream-deep);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
}
.pm-reserve-context i { color: var(--gold-deep); margin-top: 3px; }
.pm-reserve-context p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--ink);
}
.pm-reserve-context strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   24. NARROW SCREENS
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .pm-menu-cards,
  .pm-menu-cards--3 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pm-menu-cards--1 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .pm-menus-section { padding: 56px 0 66px; }
  .pm-menus-section--event { padding-top: 44px; }
  .pm-menus-banner { padding: 26px 20px 24px; margin-bottom: 30px; }
  .pm-menu-card { padding: 26px 20px 24px; }
  .pm-menus-terms { padding: 22px 20px; }
  .pm-event-highlights { padding: 40px 0; }
  .pm-event-body { padding-top: 48px; }
  .pm-menu-cta { padding: 56px 0; }
  .pm-menu-cta-actions { flex-direction: column; }
  .pm-menu-cta-actions .pm-btn { width: 100%; }
  .pm-menu-cta-deposit { display: flex; text-align: left; border-radius: 4px; }
}

/* ==========================================================================
   25. PICTURE CARDS
   The homepage "Nuestros Espacios" band and the matching section on an
   offer/event page. Previously these lived as inline styles on the markup;
   now both use the same partial, so they share one set of rules.
   ========================================================================== */

.pm-feature-cards-section {
  background: var(--cream);
  padding: 100px 0;
}
.pm-feature-cards-section .pm-container {
  padding-left: var(--pm-gutter);
  padding-right: var(--pm-gutter);
}

.pm-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.pm-feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.pm-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-bright);
  box-shadow: 0 22px 44px -26px rgba(11, 16, 74, .32);
}

.pm-feature-card-img,
.pm-feature-card .pm-space-fallback {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  max-width: 100%;
}

.pm-feature-card-body { padding: 26px 24px 28px; }

.pm-feature-card-body h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 8px;
}

.pm-feature-card-body p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

/* On an offer page this band follows the body copy, so it needs less air. */
.pm-event-body + .pm-feature-cards-section,
.pm-event-highlights + .pm-feature-cards-section { padding-top: 76px; }

@media (max-width: 900px) {
  .pm-feature-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 768px) {
  .pm-feature-cards-section { padding: 60px 0; }
  .pm-event-body + .pm-feature-cards-section,
  .pm-event-highlights + .pm-feature-cards-section { padding-top: 48px; }
  .pm-feature-card-body { padding: 22px 20px 24px; }
}