:root{
  --rosa:#e91e63;
  --rosa-dk:#c2185b;
  --rosa-lt:#ff5c8d;
  --naranja:#ff6d00;
  --naranja-lt:#ff9e40;
  --amarillo:#ffc400;
  --turquesa:#00bfa5;
  --turquesa-dk:#00897b;
  --morado:#7b1fa2;
  --cream:#fff8e1;
  --warm:#fff3e0;
  --bg:#fffdf7;
  --panel:#ffffff;
  --ink:#1a1a2e;
  --ink-2:#16213e;
  --muted:#6b6b7a;
  --line:#f0e6d2;
  --gradient-fiesta:linear-gradient(135deg,#e91e63 0%,#ff6d00 55%,#ffc400 100%);
}
*{scroll-behavior:smooth}
html,body{overflow-x:hidden}
html,body{margin:0;padding:0}
/* <picture> default is inline; force block so wrappers from imgPicture()
   participate in flex/grid/block layouts (fixes gallery hero carousel on mobile). */
picture{display:block}
.carousel-slide picture{width:100%;height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  font-weight:400;
  line-height:1.7;
}
h1,h2,h3,h4,h5,.serif{
  font-family:'Playfair Display','Georgia',serif;
  font-weight:600;
  letter-spacing:-.01em;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  font-size:var(--fs-eyebrow);
  color:var(--rosa);
  font-weight:700;
  margin-bottom:1rem;
  display:inline-block;
}

/* ========== ANNOUNCEMENTS — Public (banner + popup) ========== */
:root{
  --ann-bg-fiesta: linear-gradient(135deg,#e91e63 0%,#ff6d00 55%,#ffc400 100%);
  --ann-bg-rosa:   linear-gradient(135deg,#c2185b 0%,#e91e63 100%);
  --ann-bg-naranja:linear-gradient(135deg,#f57c00 0%,#ff6d00 100%);
  --ann-bg-amarillo:linear-gradient(135deg,#ffa000 0%,#ffc400 100%);
  --ann-bg-turquesa:linear-gradient(135deg,#00897b 0%,#00bfa5 100%);

  /* ===== Typography scale (unified across pages) ===== */
  --fs-hero:       clamp(2rem,    5.2vw, 4.2rem); /* standard hero h1 */
  --fs-hero-xl:    clamp(2.4rem,  6.5vw, 5.2rem); /* dramatic hero (noches, home) */
  --fs-h2:         clamp(1.8rem,  4vw,   3rem);   /* section headings */
  --fs-h3:         clamp(1.25rem, 2.4vw, 1.7rem); /* sub-section */
  --fs-body-lg:    clamp(1rem,    1.6vw, 1.12rem);/* hero paragraph */
  --fs-body:       1rem;                          /* standard body */
  --fs-eyebrow:    .86rem;
  --ls-eyebrow:    .3em;
}

.ann-bnr{
  position:fixed;top:0;left:0;right:0;z-index:1049;
  color:#fff;padding:10px 16px;font-size:.9rem;
  box-shadow:0 6px 18px rgba(26,26,46,.18);
  animation:annSlideDown .4s ease-out both;
}
.ann-bnr + .ann-bnr{top:48px}
.ann-bnr + .ann-bnr + .ann-bnr{top:96px}
.ann-accent-fiesta{background:var(--ann-bg-fiesta)}
.ann-accent-rosa{background:var(--ann-bg-rosa)}
.ann-accent-naranja{background:var(--ann-bg-naranja)}
.ann-accent-amarillo{background:var(--ann-bg-amarillo);color:#1a1a2e}
.ann-accent-turquesa{background:var(--ann-bg-turquesa)}
.ann-bnr__wrap{display:flex;align-items:center;justify-content:center;gap:.8rem;flex-wrap:wrap;position:relative}
.ann-bnr__ico{font-size:1.2rem;line-height:1}
.ann-bnr__text{font-weight:500;max-width:760px;line-height:1.45}
.ann-bnr__text strong{font-weight:700;letter-spacing:.02em}
.ann-bnr__close{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.18);border:none;color:inherit;
  width:32px;height:32px;border-radius:50%;font-size:1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.2s;
}
.ann-bnr__close:hover{background:rgba(0,0,0,.35)}
.ann-bnr.is-hidden{display:none}

/* Phase 4 — device targeting (viewport-based hide) */
@media (max-width: 767px){
  .ann-bnr.ann-device-desktop, .ann-pop-overlay.ann-device-desktop{display:none !important}
}
@media (min-width: 768px){
  .ann-bnr.ann-device-mobile, .ann-pop-overlay.ann-device-mobile{display:none !important}
}

.ann-cta{
  display:inline-block;padding:.45rem 1.1rem;border-radius:30px;
  background:rgba(255,255,255,.22);color:inherit;text-decoration:none;
  font-weight:700;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.45);transition:.2s;white-space:nowrap;
}
.ann-cta:hover{background:#fff;color:var(--ink)}
.ann-accent-amarillo .ann-cta{background:rgba(26,26,46,.12);border-color:rgba(26,26,46,.35);color:#1a1a2e}
.ann-accent-amarillo .ann-cta:hover{background:#1a1a2e;color:#fff}

/* Popup overlay */
.ann-pop-overlay{
  position:fixed;inset:0;z-index:1080;
  background:rgba(26,26,46,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity .28s ease;
}
.ann-pop-overlay.is-visible{opacity:1;pointer-events:auto}
.ann-pop-overlay.is-hidden{display:none}
.ann-pop{
  background:#fff;border-radius:22px;max-width:480px;width:100%;
  padding:44px 36px 32px;text-align:center;position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  border-top:5px solid transparent;
  background-image:linear-gradient(#fff,#fff),var(--ann-bg-fiesta);
  background-origin:border-box;background-clip:padding-box,border-box;
  transform:scale(.92) translateY(10px);transition:transform .32s cubic-bezier(.2,.9,.3,1.25);
}
.ann-pop-overlay.is-visible .ann-pop{transform:scale(1) translateY(0)}
.ann-accent-rosa     .ann-pop{background-image:linear-gradient(#fff,#fff),var(--ann-bg-rosa)}
.ann-accent-naranja  .ann-pop{background-image:linear-gradient(#fff,#fff),var(--ann-bg-naranja)}
.ann-accent-amarillo .ann-pop{background-image:linear-gradient(#fff,#fff),var(--ann-bg-amarillo)}
.ann-accent-turquesa .ann-pop{background-image:linear-gradient(#fff,#fff),var(--ann-bg-turquesa)}
.ann-pop__ico{
  width:76px;height:76px;border-radius:50%;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;font-size:2.2rem;
  background:var(--ann-bg-fiesta);color:#fff;box-shadow:0 10px 24px rgba(233,30,99,.3);
}
.ann-accent-rosa     .ann-pop__ico{background:var(--ann-bg-rosa)}
.ann-accent-naranja  .ann-pop__ico{background:var(--ann-bg-naranja)}
.ann-accent-amarillo .ann-pop__ico{background:var(--ann-bg-amarillo);color:#1a1a2e}
.ann-accent-turquesa .ann-pop__ico{background:var(--ann-bg-turquesa)}
.ann-pop__title{
  font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:600;
  margin:0 0 .6rem;color:#1a1a2e;line-height:1.2;
}
.ann-pop__msg{color:#4a4a5a;font-size:1rem;line-height:1.65;margin:0 0 1.4rem}
.ann-pop__cta{margin-top:8px}
.ann-pop__cta .ann-cta{
  background:var(--ann-bg-fiesta);color:#fff;border:none;
  padding:.75rem 1.6rem;font-size:.86rem;box-shadow:0 10px 24px rgba(233,30,99,.28);
}
.ann-accent-rosa     .ann-pop__cta .ann-cta{background:var(--ann-bg-rosa)}
.ann-accent-naranja  .ann-pop__cta .ann-cta{background:var(--ann-bg-naranja)}
.ann-accent-amarillo .ann-pop__cta .ann-cta{background:var(--ann-bg-amarillo);color:#1a1a2e}
.ann-accent-turquesa .ann-pop__cta .ann-cta{background:var(--ann-bg-turquesa)}
.ann-pop__cta .ann-cta:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(233,30,99,.38);color:#fff}
.ann-accent-amarillo .ann-pop__cta .ann-cta:hover{color:#1a1a2e}
.ann-pop__close{
  position:absolute;top:10px;right:10px;background:none;border:none;
  width:40px;height:40px;border-radius:50%;font-size:1.4rem;color:#9a9aab;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.ann-pop__close:hover{background:rgba(26,26,46,.08);color:#1a1a2e}

/* Glass + floral background variant */
.ann-pop--flowers{
  background-image:
    linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.78)),
    url('../assets/frida/frida-camden-blog-spring-flowers.jpg'),
    var(--ann-bg-fiesta);
  background-size:auto, cover, auto;
  background-position:center, center, center;
  background-repeat:repeat, no-repeat, repeat;
  background-origin:padding-box, padding-box, border-box;
  background-clip:padding-box, padding-box, border-box;
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
}
.ann-accent-rosa     .ann-pop--flowers{background-image:linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.78)),url('../assets/frida/frida-camden-blog-spring-flowers.jpg'),var(--ann-bg-rosa)}
.ann-accent-naranja  .ann-pop--flowers{background-image:linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.78)),url('../assets/frida/frida-camden-blog-spring-flowers.jpg'),var(--ann-bg-naranja)}
.ann-accent-amarillo .ann-pop--flowers{background-image:linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.78)),url('../assets/frida/frida-camden-blog-spring-flowers.jpg'),var(--ann-bg-amarillo)}
.ann-accent-turquesa .ann-pop--flowers{background-image:linear-gradient(rgba(255,255,255,.72), rgba(255,255,255,.78)),url('../assets/frida/frida-camden-blog-spring-flowers.jpg'),var(--ann-bg-turquesa)}

/* Countdown */
.ann-countdown{
  display:inline-block;margin-left:.6rem;padding:2px 10px;border-radius:20px;
  background:rgba(0,0,0,.28);color:inherit;font-size:.76rem;font-weight:700;
  letter-spacing:.03em;border:1px solid rgba(255,255,255,.25);
  vertical-align:baseline;white-space:nowrap;
}
.ann-accent-amarillo .ann-countdown{background:rgba(26,26,46,.18);border-color:rgba(26,26,46,.25)}
.ann-pop__countdown{margin:-.3rem 0 1rem}
.ann-pop__countdown .ann-countdown{
  background:var(--ann-bg-fiesta);color:#fff;padding:6px 18px;border:none;
  font-size:.82rem;box-shadow:0 6px 16px rgba(233,30,99,.22);
}
.ann-accent-rosa     .ann-pop__countdown .ann-countdown{background:var(--ann-bg-rosa)}
.ann-accent-naranja  .ann-pop__countdown .ann-countdown{background:var(--ann-bg-naranja)}
.ann-accent-amarillo .ann-pop__countdown .ann-countdown{background:var(--ann-bg-amarillo);color:#1a1a2e}
.ann-accent-turquesa .ann-pop__countdown .ann-countdown{background:var(--ann-bg-turquesa)}

@keyframes annSlideDown{
  from{transform:translateY(-100%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

/* Navbar offset when banner present */
body.has-ann-bnr nav.top-nav{top:44px}
body.has-ann-bnr-2 nav.top-nav{top:88px}
body.has-ann-bnr-3 nav.top-nav{top:132px}

@media (max-width:640px){
  .ann-bnr{padding:10px 44px 10px 14px;font-size:.82rem}
  .ann-bnr__text{font-size:.82rem}
  .ann-pop{padding:36px 24px 26px}
  .ann-pop__title{font-size:1.4rem}
}

/* ========== SITE BANNER ========== */
.site-banner{
  position:fixed;top:0;left:0;right:0;z-index:1050;
  background:var(--gradient-fiesta);color:#fff;
  text-align:center;padding:8px 16px;font-size:.88rem;font-weight:600;letter-spacing:.05em;
}
.site-banner + nav.top-nav{top:38px}

/* ========== CONTACT FORM ========== */
.contact-form-wrap{
  background:#fff;padding:clamp(20px,4vw,48px);border-radius:18px;
  border:1px solid var(--line);box-shadow:0 16px 40px rgba(26,26,46,.08);margin-top:50px;
}
.contact-form-wrap h3{margin:0;font-size:clamp(1.25rem,3vw,1.6rem)}
.contact-form-wrap h3 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}
.contact-form-wrap .form-control{
  border:2px solid var(--line);border-radius:10px;padding:.7rem 1rem;
  background:var(--bg);transition:.2s;
  font-size:16px;  /* prevents iOS zoom on focus */
}
.contact-form-wrap .form-control:focus{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(233,30,99,.12);outline:none}
@media (max-width:480px){
  .contact-form-wrap{margin-top:30px}
  .contact-form-wrap .btn-gold{width:100%}
}

/* ========== NAVBAR ========== */
.top-nav{
  position:fixed;top:0;left:0;right:0;z-index:1040;
  padding:22px 0;
  transition:all .35s ease;
  /* Frosted glass — safe readability over any hero/background */
  background:rgba(255,248,225,.62);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.4);
}
.top-nav.scrolled{
  background:rgba(255,253,247,.92);
  padding:18px 0;
  box-shadow:0 4px 22px rgba(26,26,46,.08);
  border-bottom-color:var(--line);
}

/* Home — keep bar transparent over hero video (frosted glass kicks in only on scroll) */
body.home-page .top-nav:not(.scrolled){
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom-color:transparent;
}
.top-nav .brand{
  display:inline-flex;align-items:center;text-decoration:none;
  line-height:0;
}
.top-nav .brand img{
  max-height:70px;width:auto;display:block;
  transition:.3s;
}
.top-nav.scrolled .brand img{max-height:55px}
/* Shrink the brand logo on phone viewports — reduces fixed-nav height from ~114px to ~92px,
   which stops hero-section content (e.g. "Our Menu" eyebrow) from being clipped under the bar. */
@media (max-width:640px){
  .top-nav{padding:14px 0}
  .top-nav .brand img{max-height:48px}
  .top-nav.scrolled{padding:12px 0}
  .top-nav.scrolled .brand img{max-height:42px}
  /* Home video hero already shows the Frida Camden storefront sign in-frame, so the
     top-nav brand mark on mobile would render the logo twice. Hide it on home —
     but show it again when the drawer is open (the video is no longer visible). */
  body.home-page .top-nav .brand{display:none}
  body.home-page .top-nav:has(.nav-menu.open) .brand{display:flex}
}
.top-nav ul{list-style:none;padding:0;margin:0;display:flex;gap:2.2rem;flex-wrap:nowrap}
.top-nav ul a{
  color:var(--ink);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  position:relative;
  padding:4px 0;
  white-space:nowrap;
}
.top-nav ul a::before{
  content:"";position:absolute;bottom:0;left:0;width:0;height:2px;
  background:var(--gradient-fiesta);transition:.3s;
}
.top-nav ul a:hover::before{width:100%}
.top-nav ul a:hover{color:var(--rosa)}
.nav-toggle{display:none;align-items:center;justify-content:center;background:none;border:none;font-size:1.6rem;color:var(--ink);cursor:pointer;padding:8px 10px;line-height:1;min-width:44px;min-height:44px}

/* Mobile nav page title — hamburger solunda dinamik sayfa adı.
   Desktop'ta gizli (full nav menu zaten görünür). Mobile'da kullanıcının
   nerede olduğunu net gösterir. */
.nav-page-title{
  display:none;
  font-family:'Cabin', sans-serif;
  font-weight:700;
  font-size:.88rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  margin-left:auto;
  margin-right:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55vw;
}
body.hero-dark .nav-page-title{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.5)}
@media (max-width:991px){
  .nav-page-title{display:inline-block}
}
@media (max-width:480px){
  .nav-page-title{
    font-size:.74rem;
    letter-spacing:.04em;
    max-width:50vw;
  }
}
/* Hamburger color variants — white on dark hero + on transparent home over video */
body.hero-dark .top-nav .nav-toggle{color:#fff}
body.home-page .top-nav:not(.scrolled) .nav-toggle{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.top-nav ul a.nav-cta{
  background:var(--gradient-fiesta);color:#fff;
  padding:.65rem 1.4rem;border-radius:50px;font-weight:700;font-size:.82rem;
  letter-spacing:.05em;text-transform:uppercase;
}
.top-nav ul a.nav-cta::before{display:none}
.top-nav ul a.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(233,30,99,.35);color:#fff}

/* Dark hero pages (menu collage, catering carousel, etc.) — dark frosted bar */
body.hero-dark .top-nav{
  background:rgba(26,26,46,.42);
  border-bottom-color:rgba(255,255,255,.08);
}
body.hero-dark .top-nav:not(.scrolled) ul a{
  color:#fff !important;
  font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
body.hero-dark .top-nav:not(.scrolled) ul a:hover{color:var(--amarillo) !important}
body.hero-dark .top-nav:not(.scrolled) ul a.nav-cta{text-shadow:none;font-weight:700}
body.hero-dark{background-color:#1a1a2e}
body.hero-dark .top-nav.scrolled{
  background:rgba(26,26,46,.78);
  box-shadow:0 4px 22px rgba(0,0,0,.35);
}
body.hero-dark .top-nav.scrolled ul a{color:#fff}
body.hero-dark .top-nav.scrolled ul a:hover{color:var(--amarillo)}

/* ========== HERO ========== */
.hero{
  min-height:100vh;
  display:flex;align-items:center;
  position:relative;
  padding:100px 0 80px;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;top:0;right:0;width:55%;height:100%;
  background-image:url('../assets/gallery/gallery_frida_drinks/frida-camden-signature-cocktails.jpg');
  background-size:cover;background-position:center;
  border-bottom-left-radius:200px;
  z-index:0;
  transform:translateY(var(--parallax-y, 0));
  will-change:transform;
}
.hero::after{
  content:"";position:absolute;top:15%;right:48%;width:180px;height:180px;
  background:var(--amarillo);opacity:.25;border-radius:50%;
  filter:blur(40px);
}
.hero .container{position:relative;z-index:2}
.hero h1{
  font-size:var(--fs-hero-xl);
  line-height:1.03;
  margin:1rem 0 1.5rem;
}
.hero h1 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-style:italic;font-weight:600;
}
.hero p.lead{
  font-size:1.1rem;color:var(--muted);max-width:480px;margin-bottom:2.2rem;
}
.hero-meta{
  display:flex;gap:3rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);
}
.hero-meta div strong{
  display:block;font-family:'Playfair Display',serif;font-size:2rem;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-meta div span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.15em}

/* ========== BUTTONS ========== */
.btn-gold{
  background:var(--gradient-fiesta);color:#fff;border:none;
  padding:1rem 2.4rem;font-size:.88rem;
  letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  transition:.3s;text-decoration:none;display:inline-block;
  border-radius:50px;
  box-shadow:0 10px 28px rgba(233,30,99,.28);
}
.btn-gold:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 14px 36px rgba(233,30,99,.35);color:#fff}
.btn-ghost{
  background:transparent;color:var(--ink);border:2px solid var(--rosa);
  padding:1rem 2.4rem;font-size:.88rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  transition:.3s;text-decoration:none;display:inline-block;border-radius:50px;
}
.btn-ghost:hover{background:var(--rosa);color:#fff}

/* ========== SECTIONS ========== */
section{padding:120px 0;position:relative}
.section-head{margin-bottom:70px}
.section-head h2{font-size:clamp(2.2rem,4vw,3.6rem);margin:.5rem 0;line-height:1.1}
.section-head h2 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}
.section-head p{color:var(--muted);max-width:540px}

.value-item{
  display:flex;gap:1.2rem;padding:1.4rem 0;border-bottom:1px solid var(--line);
}
.value-item:last-child{border-bottom:none}
.value-item .num{
  font-family:'Playfair Display',serif;
  color:var(--rosa);font-size:1.4rem;font-style:italic;min-width:40px;font-weight:700;
}
.value-item h5{margin:0 0 .3rem;font-size:1.15rem}
.value-item p{margin:0;color:var(--muted);font-size:.95rem}

/* ========== GALLERY HERO (full-viewport carousel) ========== */
.gallery-hero{
  position:relative;height:100vh;min-height:560px;overflow:hidden;
}
/* Home preview variant — match the hero video height (not full viewport). */
.gallery-hero--home{
  height:clamp(620px, 92vh, 880px);
  min-height:0;
}
.gallery-hero--home .carousel-slide{
  height:clamp(620px, 92vh, 880px);
  min-height:0;
}
/* Mobile: 85svh container + slide widths derived from each photo's natural
   aspect ratio (no crop) + ~24s scroll for ~1.6s per photo. picture/img
   width:auto override is mandatory — without it, width:auto on the slide
   collapses to 0 because picture inherits width:100% of nothing.
   !important also needed against `.gallery-hero-carousel .carousel-slide`
   base rule (same specificity, later source order would otherwise win).
   Track gets width:max-content from the base rule so translateX(-50%)
   actually traverses the whole originals-half (otherwise the percentage
   resolves against viewport width and the loop barely moves). */
@media (max-width:768px){
  .gallery-hero--home{
    height:85svh !important;
    min-height:560px !important;
  }
  .gallery-hero--home .carousel-slide{
    height:100% !important;
    min-height:0 !important;
    width:auto !important;
    aspect-ratio:auto !important;
  }
  .gallery-hero--home .carousel-slide picture,
  .gallery-hero--home .carousel-slide img{
    width:auto !important;
    height:100% !important;
  }
  .gallery-hero--home .carousel-track{
    animation-duration:40s !important;
  }
}
@media (max-width:480px){
  .gallery-hero--home{
    height:85svh !important;
    min-height:480px !important;
  }
  .gallery-hero--home .carousel-track{
    animation-duration:35s !important;
  }
}
.gallery-hero-carousel{
  position:absolute;inset:0;
  mask-image:none;-webkit-mask-image:none;
}
.gallery-hero-carousel .carousel-track{
  display:flex;width:max-content;height:100%;align-items:stretch;gap:14px;
  animation:carouselScroll 80s linear infinite;
  will-change:transform;
}
@media (prefers-reduced-motion:reduce){
  .gallery-hero-carousel .carousel-track{animation-duration:160s}
}
.gallery-hero-carousel:hover .carousel-track{animation-play-state:paused}
.gallery-hero-carousel .carousel-slide{
  height:100vh;min-height:560px;
  width:clamp(240px, 85vw, 520px);
  aspect-ratio:auto;border-radius:0;box-shadow:none;
  display:block;text-decoration:none;color:inherit;overflow:hidden;
  flex:0 0 auto;
}
.gallery-hero-carousel .carousel-slide picture{
  display:block;width:100%;height:100%;
}
.gallery-hero-carousel .carousel-slide img{
  display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.gallery-hero-carousel .carousel-slide figcaption{display:none}
/* Clickable slides (original set only) — zoom cursor + hover subtle zoom */
.gallery-hero-carousel .carousel-slide[href]{cursor:zoom-in;position:relative;z-index:1}
.gallery-hero-carousel .carousel-slide[href]:hover img{transform:scale(1.04)}
.gallery-hero-carousel .carousel-slide[href]:focus-visible{outline:3px solid var(--amarillo);outline-offset:-6px}
/* Duplicate copies (aria-hidden) remain decorative */
.gallery-hero-carousel .carousel-slide[aria-hidden="true"]{pointer-events:none;cursor:default}
.gallery-hero-overlay{
  position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg, rgba(15,10,26,.3) 0%, rgba(15,10,26,.1) 35%, rgba(15,10,26,.1) 55%, rgba(15,10,26,.8) 100%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:0;
  pointer-events:none;
}
.gallery-hero-top{
  pointer-events:auto;text-align:center;
  margin-top:clamp(120px, 24vh, 240px);
  margin-bottom:auto;
}
.gallery-hero-top h1{
  color:#fff;font-size:var(--fs-hero);margin:.5rem 0;
  text-shadow:0 2px 20px rgba(0,0,0,.6), 0 0 2px rgba(0,0,0,.8);
}
.gallery-hero-top h1 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
  text-shadow:none;
  display:block;text-align:right;padding-left:clamp(60px, 20vw, 300px);
  margin-top:-.2em;
}
.gallery-hero-top .eyebrow{color:var(--amarillo);text-shadow:0 2px 12px rgba(0,0,0,.5)}
.gallery-hero-bottom{
  pointer-events:auto;text-align:center;
  position:absolute;bottom:clamp(20px, 4vh, 50px);left:0;right:0;
  z-index:3;padding:0 clamp(16px, 5vw, 40px);
}
/* ========== GALLERY BODY ========== */
.gallery-body{padding:0}
.gallery-body .container{padding-top:40px;padding-bottom:60px}
.gallery-body:not(.has-content){display:none}

/* ========== GALLERY FILTER ========== */
.gallery-filter{
  display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:50px;
}
.gallery-filter button{
  background:transparent;border:2px solid var(--line);
  padding:.55rem 1.5rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--muted);cursor:pointer;transition:.3s;border-radius:50px;
}
.gallery-filter button.active,.gallery-filter button:hover{
  background:var(--gradient-fiesta);color:#fff;border-color:transparent;
}

/* Hero variant — MUST come after base .gallery-filter rules */
.gallery-filter--hero{margin:0;gap:.5rem}
.gallery-filter--hero button{
  border:2px solid rgba(255,255,255,.3);
  backdrop-filter:blur(10px);
  font-size:.84rem;font-weight:700;padding:.65rem 1.4rem;min-height:44px;
  background:linear-gradient(135deg,#e91e63 0%,#ff6d00 55%,#ffc400 100%) text, rgba(0,0,0,.55);
  -webkit-background-clip:text, padding-box;
  -webkit-text-fill-color:transparent;
}
.gallery-filter--hero button:hover,
.gallery-filter--hero button.active{
  background:var(--gradient-fiesta);
  -webkit-background-clip:padding-box;
  -webkit-text-fill-color:#fff;
  border-color:transparent;
}
.gallery-masonry{
  column-count:4;column-gap:18px;
}
.gallery-masonry .gitem{
  display:block;width:100%;margin:0 0 18px;
  break-inside:avoid;
  border-radius:14px;overflow:hidden;position:relative;cursor:pointer;
  transition:.5s transform, .3s box-shadow;
  box-shadow:0 4px 12px rgba(26,26,46,.08);
}
.gallery-masonry .gitem img{
  width:100%;height:auto;display:block;transition:.6s transform;
}
.gallery-masonry .gitem:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(26,26,46,.18)}
.gallery-masonry .gitem:hover img{transform:scale(1.05)}
.gallery-masonry .gitem::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,26,46,.35),transparent 50%);
  opacity:0;transition:.4s;
}
.gallery-masonry .gitem:hover::after{opacity:1}
.gallery-masonry .gitem.hidden{display:none}
.gallery-masonry .gitem.is-video::before{
  content:"▶";position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:3rem;text-shadow:0 4px 20px rgba(0,0,0,.6);
  background:rgba(0,0,0,.18);transition:.3s;pointer-events:none;
}
.gallery-masonry .gitem.is-video:hover::before{background:rgba(233,30,99,.4);transform:scale(1.05)}

/* ========== VIDEO GRID ========== */
.video-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.video-card{text-align:center}
.video-player{
  border-radius:18px;overflow:hidden;
  box-shadow:0 12px 36px rgba(26,26,46,.12);
  margin-bottom:1.2rem;
  aspect-ratio:16/9;
}
.video-player video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
.video-card h4{
  font-family:'Playfair Display',serif;font-size:1.2rem;margin:0 0 .4rem;color:var(--ink);
}
.video-card p{color:var(--muted);font-size:.88rem;margin:0;line-height:1.6}
@media (max-width:1200px){
  .video-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){
  .video-grid{grid-template-columns:1fr}
  .video-player{max-width:600px;margin:0 auto 1.2rem}
  .gallery-masonry{column-count:2}
}
/* Eski .gallery-hero-carousel mobile rule kaldırıldı — gallery sayfası
   silindi (oturum 27); home-only modifier .gallery-hero--home kuralları
   yeterli. Cascade temizliği. */

/* Lightbox video */
.lightbox video{
  max-width:92vw;max-height:86vh;border-radius:8px;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

/* ========== LIGHTBOX ========== */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(20,10,20,.96);
  display:none;align-items:center;justify-content:center;
  animation:lbFade .25s ease;
}
.lightbox.open{display:flex}
.lightbox img{
  max-width:92vw;max-height:86vh;border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox .lb-close,.lightbox .lb-nav{
  position:absolute;background:rgba(255,255,255,.1);
  color:#fff;border:none;font-size:1.6rem;cursor:pointer;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:.25s;backdrop-filter:blur(8px);
}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:var(--rosa)}
.lightbox .lb-close{top:24px;right:24px}
.lightbox .lb-prev{left:24px;top:50%;transform:translateY(-50%)}
.lightbox .lb-next{right:24px;top:50%;transform:translateY(-50%)}
.lightbox .lb-caption{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  color:#fff;font-size:.95rem;background:rgba(0,0,0,.5);
  padding:.6rem 1.2rem;border-radius:50px;backdrop-filter:blur(6px);
}
@keyframes lbFade{from{opacity:0}to{opacity:1}}

/* ========== TESTIMONIALS ========== */
.testimonials{
  background:linear-gradient(135deg,var(--cream) 0%,var(--warm) 100%);
  position:relative;overflow:hidden;
}
.testimonials::before{
  content:"";position:absolute;top:-100px;left:-100px;width:400px;height:400px;
  background:var(--rosa);opacity:.08;border-radius:50%;filter:blur(80px);
}
.testimonials::after{
  content:"";position:absolute;bottom:-120px;right:-80px;width:360px;height:360px;
  background:var(--turquesa);opacity:.1;border-radius:50%;filter:blur(80px);
}
.testimonial-wrap{position:relative;z-index:2;max-width:780px;margin:0 auto;text-align:center}
.testimonial-slide{
  display:none;padding:40px 20px;
  animation:tFade .6s ease;
}
.testimonial-slide.active{display:block}
.testimonial-slide .stars{
  color:var(--amarillo);font-size:1.4rem;letter-spacing:.3rem;margin-bottom:1.5rem;
}
.testimonial-slide blockquote{
  font-family:'Playfair Display',serif;font-size:clamp(1.3rem,2.4vw,1.9rem);
  font-style:italic;line-height:1.45;color:var(--ink);
  margin:0 0 1.8rem;position:relative;
}
.testimonial-slide blockquote::before,
.testimonial-slide blockquote::after{
  color:var(--rosa);font-size:2.4rem;opacity:.4;
}
.testimonial-slide blockquote::before{content:"\201C";margin-right:.2rem}
.testimonial-slide blockquote::after{content:"\201D";margin-left:.2rem}
.testimonial-slide cite{
  font-style:normal;font-weight:700;color:var(--rosa);
  text-transform:uppercase;letter-spacing:.2em;font-size:.85rem;
}
.testimonial-dots{display:flex;justify-content:center;gap:.6rem;margin-top:2rem}
.testimonial-dots button{
  width:10px;height:10px;border-radius:50%;border:none;
  background:rgba(233,30,99,.25);cursor:pointer;transition:.3s;
}
.testimonial-dots button.active{background:var(--gradient-fiesta);width:28px;border-radius:6px}
@keyframes tFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ========== MENU PAGE ========== */
/* Hero tweak — slightly taller for impact */
.menu-hero{min-height:62vh}

/* ---- Frida's Favourites (editorial grid) ---- */
.menu-favourites{padding:90px 0 70px;background:var(--cream)}
.menu-favourites .section-head{margin-bottom:46px}
.menu-favourites h2{
  font-family:'Playfair Display',serif;font-size:clamp(2rem,3.8vw,3rem);
  margin:.2em 0 .3em;color:var(--ink);
}
.menu-favourites h2 em{
  font-style:italic;background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.fav-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.fav-card{
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 14px 36px rgba(26,26,46,.08);
  transition:transform .35s ease, box-shadow .35s ease;
  display:flex;flex-direction:column;
}
.fav-card:hover{transform:translateY(-6px);box-shadow:0 24px 48px rgba(233,30,99,.22)}
.fav-photo{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
.fav-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.fav-card:hover .fav-photo img{transform:scale(1.06)}
.fav-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.fav-body h4{
  margin:0 0 .4em;font-size:1.05rem;font-weight:600;color:var(--ink);
  font-family:'Playfair Display',serif;letter-spacing:.01em;
}
.fav-body p{
  margin:0 0 14px;color:var(--muted);font-size:.82rem;line-height:1.55;flex:1;
}
.fav-foot{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.fav-price{
  font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;
  color:var(--rosa);font-style:italic;letter-spacing:.01em;
}
.fav-badges{display:flex;gap:.3rem;flex-wrap:wrap}

/* ---- The Menu — Glassmorphism Hall ---- */
.menu-hall{
  position:relative;padding:40px 0 40px;overflow:hidden;isolation:isolate;
  background-color:#1a1a2e;
}

/* Jelly collage — food & drinks floating behind the whole menu hall */
.menu-collage{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;overflow:hidden;
}
.menu-collage .cg{
  position:absolute;object-fit:cover;object-position:center;
  border-radius:32px;
  box-shadow:0 30px 70px rgba(0,0,0,.55);
  will-change:transform;
  --flip:1;
  transform:rotate(var(--r,0deg)) scaleX(var(--flip));
  animation:jelly 8s ease-in-out infinite;
}
/* Right-column photos are mirrored: food (originally left of frame) moves to the
   right of the mirrored image, which lands in the visible outside-glass margin. */
.cg-2,.cg-4,.cg-6,.cg-8,.cg-10,.cg-12{--flip:-1}
/* Keep the food/drink (photo centre) visible; push empty edges behind the glass card */
.cg-1,.cg-3,.cg-5,.cg-7,.cg-9,.cg-11 {object-position:right center}
.cg-2,.cg-4,.cg-6,.cg-8,.cg-10,.cg-12{object-position:left center}

/* Parallel pairs cascading down the whole hall — left + right start at the same row */
.cg-1 {--r:-18deg; top:3%;  left:-5%;  width:580px; height:420px; animation-delay:0s}    /* L — mexican-food-53 */
.cg-2 {--r:22deg;  top:3%;  right:-5%; width:580px; height:420px; animation-delay:-0.7s} /* R — nachos-grande */
.cg-3 {--r:20deg;  top:19%; left:-4%;  width:560px; height:400px; animation-delay:-1.4s} /* L — churros-plate */
.cg-4 {--r:-16deg; top:19%; right:-4%; width:600px; height:430px; animation-delay:-2.1s} /* R — mexican-food-52 */
.cg-5 {--r:23deg;  top:35%; left:-6%;  width:600px; height:430px; animation-delay:-2.8s} /* L — bbq-chicken-wings */
.cg-6 {--r:-15deg; top:35%; right:-5%; width:580px; height:420px; animation-delay:-3.5s} /* R — cocktails-bar-07 */
.cg-7 {--r:-22deg; top:52%; left:-3%;  width:540px; height:390px; animation-delay:-4.2s} /* L — mexican-food-06 */
.cg-8 {--r:17deg;  top:52%; right:-5%; width:580px; height:420px; animation-delay:-4.9s} /* R — mexican-food-29 */
.cg-9 {--r:-25deg; top:68%; left:-5%;  width:600px; height:430px; animation-delay:-5.6s} /* L — mexican-food-31 */
.cg-10{--r:19deg;  top:68%; right:-4%; width:560px; height:400px; animation-delay:-6.3s} /* R — mexican-food-08 */
.cg-11{--r:24deg;  top:84%; left:-4%;  width:580px; height:420px; animation-delay:-7s}   /* L — mexican-food-19 */
.cg-12{--r:-18deg; top:84%; right:-6%; width:600px; height:430px; animation-delay:-0.3s} /* R — signature-cocktails */

@keyframes jelly{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg)) scaleX(var(--flip)) scale(1)}
  50%    {transform:translateY(-12px) rotate(calc(var(--r,0deg) + 1.5deg)) scaleX(var(--flip)) scale(1.02)}
}
@media (prefers-reduced-motion:reduce){
  .menu-collage .cg{animation:none}
}

.menu-hall-overlay{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.35) 0%,
    rgba(26,26,46,.28) 25%,
    rgba(194,24,91,.32) 60%,
    rgba(26,26,46,.7) 100%);
}
.menu-hall-inner{position:relative;z-index:1}

.menu-intro{
  max-width:820px;margin:0 auto;color:#fff;
  text-shadow:0 2px 28px rgba(0,0,0,.5);
  padding:clamp(112px,12vh,168px) 0 clamp(32px,4.5vh,68px);
}
.menu-intro .eyebrow{color:var(--amarillo)}
.menu-intro h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  font-weight:700;margin:0;color:#fff;letter-spacing:-.015em;line-height:1.05;
}
.menu-intro h1 em{
  font-style:italic;
  background:linear-gradient(135deg,#ffd76b 0%, #ff6d00 60%, #e91e63 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.menu-intro p{
  color:rgba(255,255,255,.92);font-size:var(--fs-body-lg);line-height:1.7;
  max-width:580px;margin:0 auto;letter-spacing:.01em;
}
.menu-intro p em{font-style:italic;color:var(--amarillo)}

/* Glass card — the centrepiece */
.menu-glass{
  max-width:1080px;margin:0 auto;
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:28px;
  box-shadow:
    0 30px 70px rgba(26,26,46,.45),
    inset 0 1px 0 rgba(255,255,255,0.18);
  overflow:hidden;
}

/* Dietary filter chips row (top of glass card) */
.menu-chips{
  display:flex;flex-wrap:wrap;gap:.45rem;
  padding:20px 26px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:rgba(26,26,46,.18);
}
.menu-chips .diet-toggle{
  padding:.55rem 1.1rem;min-height:40px;border-radius:50px;border:1px solid rgba(255,255,255,.22);
  background:transparent;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.85);cursor:pointer;transition:.2s;
}
.menu-chips .diet-toggle:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.menu-chips .diet-toggle.active{background:var(--turquesa);color:#fff;border-color:transparent}
.menu-chips .diet-clear{
  padding:.55rem 1.1rem;min-height:40px;border-radius:50px;border:1px solid transparent;
  background:transparent;font-size:.78rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amarillo);cursor:pointer;transition:.2s;
  margin-left:auto;
}
.menu-chips .diet-clear:hover{background:rgba(255,196,0,.12)}

/* Accordion */
.menu-accordion{
  padding:18px 22px 26px;color:rgba(255,255,255,.94);
}
.menu-acc-item{
  border-bottom:1px solid rgba(255,255,255,.12);
}
.menu-acc-item:last-child{border-bottom:none}
.menu-acc-item.hidden{display:none}

.menu-acc-header{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:18px 10px;background:transparent;border:none;cursor:pointer;
  text-align:left;color:#fff;transition:background .2s ease,padding-left .2s ease;
  border-radius:10px;
  scroll-margin-top:80px;
}
@media (hover: hover){
  .menu-acc-header:hover{background:rgba(255,255,255,.06);padding-left:16px}
}
.menu-acc-item.open > .menu-acc-header{background:rgba(255,255,255,.04)}

.acc-title{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:.005em;
  color:#fff;
  background:linear-gradient(135deg,#fff 0%, #ffd76b 80%);
  -webkit-background-clip:text;background-clip:text;
}
.menu-acc-item.open .acc-title{
  background:linear-gradient(135deg,#ffd76b 0%, #ff6d00 70%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.acc-meta{display:flex;align-items:center;gap:.7rem;color:rgba(255,255,255,.65)}
.acc-count{
  font-size:.75rem;font-style:italic;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
}
.acc-chevron{transition:transform .35s cubic-bezier(.4,0,.2,1);opacity:.8}
.menu-acc-item.open .acc-chevron{transform:rotate(180deg);color:var(--amarillo);opacity:1}

.menu-acc-panel{
  max-height:0;overflow:hidden;
  transition:max-height .5s cubic-bezier(.4,0,.2,1);
}
.menu-acc-item.open .menu-acc-panel{max-height:5000px}
.menu-acc-inner{padding:4px 10px 24px}

.acc-desc{
  margin:0 0 18px;color:rgba(255,196,0,.9);font-size:.85rem;
  font-style:italic;letter-spacing:.02em;max-width:68ch;
}

.menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.menu-list .menu-item{
  padding:0;border-radius:10px;transition:background .2s ease;
  scroll-margin-top:100px;
}
.menu-list .menu-item:hover{background:rgba(255,255,255,.06)}
.menu-list .menu-item.hidden{display:none}

/* Button reset + flex row — tıklanabilir item header */
.menu-list .m-head{
  display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  width:100%;background:none;border:none;color:inherit;
  padding:12px 14px;cursor:pointer;text-align:left;font:inherit;
  border-radius:10px;
}
.menu-list .m-head:focus-visible{outline:2px solid var(--amarillo);outline-offset:-2px}
.menu-list .m-chev{
  font-size:.9rem;color:rgba(255,255,255,.55);
  transition:transform .35s cubic-bezier(.4,0,.2,1), color .2s;
  display:inline-block;line-height:1;flex:0 0 auto;margin-left:4px;
}
.menu-list .m-head:hover .m-chev{color:var(--amarillo)}
.menu-list .menu-item.is-open .m-chev{transform:rotate(180deg);color:var(--amarillo)}

/* Collapsible body */
.menu-list .m-body{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1);
}
.menu-list .menu-item.is-open .m-body{max-height:1600px}
.menu-list .m-body-inner{
  padding:0 14px 14px;border-top:1px solid rgba(233,30,99,.14);margin-top:2px;padding-top:12px;
}
.menu-list .m-body-inner .m-desc{margin-top:0}

/* Menu item photo gallery */
.menu-list .m-photos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin-bottom:14px;
}
.menu-list .m-photo{
  display:block;aspect-ratio:4/3;overflow:hidden;border-radius:12px;
  cursor:zoom-in;position:relative;background:rgba(255,255,255,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.menu-list .m-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.menu-list .m-photo:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.menu-list .m-photo:hover img{transform:scale(1.05)}
@media (max-width:480px){
  .menu-list .m-photos{grid-template-columns:repeat(2,1fr);gap:8px}
}
.menu-list .m-name{
  margin:0;font-size:1.02rem;font-weight:600;color:#fff;
  font-family:'Playfair Display',serif;letter-spacing:.005em;flex:0 1 auto;min-width:0;
}
.menu-list .m-inline-badges{margin-left:.45rem;font-weight:normal}
.menu-list .m-leader{
  flex:1 1 auto;min-width:20px;align-self:end;margin-bottom:6px;
  border-bottom:1px dotted rgba(255,255,255,.28);
}
.menu-list .m-price{
  font-family:'Playfair Display',serif;font-size:1.02rem;font-weight:700;
  color:var(--amarillo);white-space:nowrap;font-style:italic;flex:0 0 auto;
}
.menu-list .m-desc{
  margin:4px 0 0;color:rgba(255,255,255,.7);
  font-size:.84rem;line-height:1.55;max-width:72ch;
}
.menu-list .m-badge{
  font-size:.6rem;letter-spacing:.06em;font-weight:700;text-transform:uppercase;
  padding:1px 7px;border-radius:20px;display:inline-block;vertical-align:middle;
}
.menu-list .m-badge.m-popular{background:var(--gradient-fiesta);color:#fff}
.menu-list .m-badge.m-vegan{background:var(--turquesa);color:#fff}
.menu-list .m-badge.m-veg{background:#c2e59c;color:#2d4a0f}
.menu-list .m-badge.m-gf{background:var(--amarillo);color:var(--ink)}
.menu-list .m-badge.m-spicy{background:var(--rosa);color:#fff}

.menu-list .m-variants{
  display:flex;flex-wrap:wrap;gap:.4rem;margin-top:8px;padding-top:8px;
  border-top:1px dashed rgba(255,255,255,.15);
}
.menu-list .m-variant{
  font-size:.74rem;color:rgba(255,255,255,.85);background:rgba(255,255,255,.08);
  padding:2px 9px;border-radius:20px;
}
.menu-list .m-variant em{color:var(--amarillo);font-style:italic;font-weight:700;margin-left:3px}

/* Share — compact icon-only button */
.menu-list .m-share-bar{
  display:flex;justify-content:flex-end;margin-top:12px;position:relative;
}
.menu-list .m-share-btn{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.18);
  width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;line-height:0;
  transition:background .2s, color .2s, transform .2s, box-shadow .2s, border-color .2s;
}
.menu-list .m-share-btn:hover{
  background:var(--gradient-fiesta);color:#fff;border-color:transparent;
  transform:translateY(-1px);box-shadow:0 6px 16px rgba(233,30,99,.35);
}
.menu-list .m-share-btn:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}
.menu-list .m-share-btn svg{display:block}

/* Share popover (desktop fallback when Web Share API unavailable) */
.share-popover{
  position:absolute;top:calc(100% + 6px);right:0;z-index:200;
  background:#fff;color:var(--ink);border-radius:14px;
  box-shadow:0 12px 32px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.08);
  padding:6px;min-width:180px;display:flex;flex-direction:column;gap:2px;
  animation:sharePopIn .18s ease-out;
}
@media (max-width:480px){
  .share-popover{
    right:auto;left:0;
    min-width:min(260px, calc(100vw - 40px));
  }
}
@keyframes sharePopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.share-popover button{
  background:none;border:none;padding:10px 14px;border-radius:8px;
  text-align:left;cursor:pointer;font-size:.85rem;color:var(--ink);
  display:flex;align-items:center;gap:10px;font-family:inherit;font-weight:500;
  transition:background .15s;
}
.share-popover button:hover{background:rgba(233,30,99,.08);color:var(--rosa)}
.share-popover button .sp-ico{font-size:1.05rem;width:20px;text-align:center}

/* Copy toast */
.share-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:12px 22px;border-radius:30px;
  font-size:.85rem;font-weight:600;letter-spacing:.03em;z-index:9999;
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  animation:toastIn .3s ease-out, toastOut .3s ease-in 1.5s forwards;
  pointer-events:none;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,20px)}}

@media (max-width:1100px){
  .fav-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1100px){
  .menu-collage .cg{border-radius:26px}
  .cg-1,.cg-3,.cg-5,.cg-7,.cg-9,.cg-11 {width:440px;height:320px}
  .cg-2,.cg-4,.cg-6,.cg-8,.cg-10,.cg-12{width:460px;height:330px}
}
/* Compact menu-intro on narrower viewports — natural content height, no hero-like fill */
@media (max-width:991px){
  .menu-hall{padding:110px 0 40px}
  .menu-intro{min-height:auto;padding:clamp(48px,7vh,80px) 0 clamp(16px,2.5vh,32px)}
}

/* Disable all parallax (background-attachment:fixed) on mobile — janky on low-end devices + no benefit at that size */
@media (max-width:768px){
  .reservation-bg-section::before,
  .contact-bg-section::before,
  .story-bg-section::before,
  .events-bg-section::before,
  .catering-bg-section::before,
  .noches-block-bg{background-attachment:scroll !important}
}
@media (max-width:768px){
  .fav-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .menu-hall{padding:120px 0 36px}
  .menu-glass{
    border-radius:22px;margin:0 -6px;
    background:rgba(255,248,225,0.06);
    backdrop-filter:blur(14px) saturate(160%);
    -webkit-backdrop-filter:blur(14px) saturate(160%);
  }
  .cg-5,.cg-6,.cg-11,.cg-12{display:none}
  .menu-collage .cg{border-radius:24px}
  /* Fluid collage photos — width scales with viewport (was fixed 320px) */
  .menu-collage .cg{width:min(42vw,320px);height:calc(min(42vw,320px) * 0.72)}
  .cg-1 {top:3%;  left:-8%}
  .cg-2 {top:3%;  right:-8%}
  .cg-3 {top:28%; left:-8%}
  .cg-4 {top:28%; right:-8%}
  .cg-7 {top:55%; left:-8%}
  .cg-8 {top:55%; right:-8%}
  .cg-9 {top:80%; left:-8%}
  .cg-10{top:80%; right:-8%}
  .menu-chips{padding:16px 18px 14px}
  .menu-chips .diet-clear{margin-left:0}
  .menu-accordion{padding:10px 12px 18px}
  .menu-acc-header{padding:16px 6px;scroll-margin-top:70px}
  .menu-acc-inner{padding:0 4px 20px}
  .acc-title{font-size:1.2rem}
  .menu-list .m-name{font-size:.95rem}
  .menu-list .m-price{font-size:.95rem}
}
@media (max-width:480px){
  .fav-grid{grid-template-columns:1fr}
  .menu-hall{padding:110px 0 28px}
  .menu-intro{padding:clamp(36px,5.5vh,60px) 0 clamp(12px,2vh,24px)}
  .menu-list .m-leader{min-width:40px}
  .cg-3,.cg-4,.cg-9,.cg-10{display:none}
  .menu-collage .cg{width:min(52vw,240px);height:calc(min(52vw,240px) * 0.72)}
  .cg-1 {top:3%;  left:-10%}
  .cg-2 {top:3%;  right:-10%}
  .cg-7 {top:55%; left:-10%}
  .cg-8 {top:55%; right:-10%}
}
@media (max-height:600px) and (orientation:landscape){
  .menu-intro{min-height:auto;padding:clamp(28px,4vh,48px) 0 clamp(10px,1.5vh,18px)}
}

/* ========== RESERVATION SECTION (ink) ========== */
.reservation{background:var(--ink);color:#f4ead9;position:relative;overflow:hidden}
body.menu-page .reservation{padding:70px 0}
.reservation::before{
  content:"";position:absolute;top:-80px;right:-80px;width:320px;height:320px;
  background:var(--amarillo);opacity:.12;border-radius:50%;filter:blur(60px);
}
.reservation::after{
  content:"";position:absolute;bottom:-100px;left:-80px;width:320px;height:320px;
  background:var(--turquesa);opacity:.15;border-radius:50%;filter:blur(60px);
}
.reservation .container{position:relative;z-index:2}
.reservation h2{color:#fff}
.reservation h2 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.reservation .eyebrow{color:var(--amarillo)}
.reservation p{color:#d4c8b5}
.reservation .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.reservation .btn-ghost:hover{background:var(--rosa);border-color:var(--rosa);color:#fff}

/* ========== CONTACT ========== */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.contact-cell{
  background:var(--panel);padding:48px 32px;text-align:center;
  border-radius:16px;border:1px solid var(--line);
  transition:.3s;
}
.contact-cell:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(26,26,46,.1);border-color:var(--rosa)}
.contact-cell .ico{
  width:56px;height:56px;margin:0 auto 1.2rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--gradient-fiesta);color:#fff;border-radius:50%;
  font-size:1.4rem;
}
.contact-cell h5{margin:0 0 .6rem;font-size:1.15rem}
.contact-cell p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.75}

/* ========== PAGE HERO (subpages) ========== */
.page-hero{
  padding:180px 0 80px;
  background:linear-gradient(135deg,var(--cream) 0%,var(--warm) 100%);
  text-align:center;
  border-bottom:1px solid var(--line);
  position:relative;overflow:hidden;
}
.page-hero::before{
  content:"";position:absolute;top:-80px;left:10%;width:240px;height:240px;
  background:var(--rosa);opacity:.12;border-radius:50%;filter:blur(60px);
}
.page-hero::after{
  content:"";position:absolute;bottom:-80px;right:10%;width:240px;height:240px;
  background:var(--turquesa);opacity:.15;border-radius:50%;filter:blur(60px);
}
.page-hero h1{font-size:var(--fs-hero);margin:.5rem 0;position:relative;z-index:2}
.page-hero h1 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}
.page-hero p{color:var(--muted);max-width:540px;margin:1rem auto 0;position:relative;z-index:2}

.page-hero--image{
  padding:180px 0 80px;
  background-size:cover;background-position:center;
  border-bottom:none;
}
.page-hero--image::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,26,46,.55) 0%,rgba(26,26,46,.75) 100%);
  width:auto;height:auto;border-radius:0;filter:none;opacity:1;top:0;left:0;
}
.page-hero--image::after{display:none}
.page-hero--image .eyebrow{color:var(--amarillo);position:relative;z-index:2}
.page-hero--image h1{color:#fff}
.page-hero--image h1 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.page-hero--image p{color:rgba(255,255,255,.88)}

/* ========== RESERVATION / PNR CARDS ========== */
.reservation-card{
  background:#fff;padding:48px;border-radius:18px;
  box-shadow:0 20px 50px rgba(26,26,46,.08);
  border:1px solid var(--line);
}
.reservation-card label{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem;font-weight:700}
.reservation-card .form-control{
  border:2px solid var(--line);border-radius:10px;padding:.75rem 1rem;
  background:var(--bg);transition:.2s;
}
.reservation-card .form-control:focus{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(233,30,99,.12);outline:none}

.pnr-result{
  background:#fff;padding:50px;border-radius:18px;text-align:center;
  box-shadow:0 25px 60px rgba(26,26,46,.1);border:1px solid var(--line);
  border-top:5px solid var(--rosa);
}
.pnr-result h2{font-size:2rem;margin:.5rem 0 1rem}
.pnr-box{
  background:linear-gradient(135deg,var(--cream),var(--warm));
  padding:28px;border-radius:14px;margin:24px 0;
  border:2px dashed var(--rosa);
}
.pnr-code{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.9rem,7vw,3rem);
  letter-spacing:clamp(.2rem,1.2vw,.5rem);
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700;margin:.5rem 0;
  word-break:break-all;overflow-wrap:break-word;
}
.pnr-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;
  margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);
}
@media (max-width:480px){
  .pnr-result{padding:28px 20px}
  .pnr-box{padding:20px}
  .pnr-meta{grid-template-columns:repeat(2,1fr);gap:14px 10px}
  .pnr-meta strong{font-size:1rem}
}
.pnr-meta div{text-align:center}
.pnr-meta span{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.3rem}
.pnr-meta strong{font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--ink)}
/* Wide rows for long values (email, note) — span the full grid width and
   allow the value to wrap naturally without spilling out of its column. */
.pnr-meta__wide{grid-column:1 / -1;text-align:left;padding-top:.6rem;border-top:1px dashed rgba(0,0,0,.12)}
.pnr-meta__wide strong{font-size:1rem;font-family:'Inter',system-ui,sans-serif;font-weight:600;word-break:break-word;overflow-wrap:anywhere;display:block}
.pnr-meta__note strong{font-style:italic;font-weight:500;color:var(--muted)}

.pnr-form{background:#fff;padding:36px;border-radius:18px;box-shadow:0 15px 40px rgba(26,26,46,.08);border:1px solid var(--line)}
.pnr-form label{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;display:block;margin-bottom:1rem;text-align:center}
.pnr-input-wrap{display:flex;gap:.5rem;flex-wrap:wrap}
.pnr-input-wrap input{flex:1;min-width:240px;border:2px solid var(--line);border-radius:10px;padding:1rem;background:var(--bg);outline:none;transition:.2s}
.pnr-input-wrap input:focus{border-color:var(--rosa)}

/* Status badges */
.badge{
  padding:.3rem .8rem;border-radius:50px;font-size:.72rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.badge.bg-warning{background:var(--amarillo)!important;color:var(--ink)}
.badge.bg-success{background:var(--turquesa)!important;color:#fff}
.badge.bg-danger{background:var(--rosa)!important;color:#fff}
.badge.bg-secondary{background:#888!important;color:#fff}

/* ========== BLOG ========== */
.blog-grid{
  display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:28px;
}
.blog-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  overflow:hidden;text-decoration:none;color:var(--ink);transition:.3s;display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(26,26,46,.12);border-color:var(--rosa);color:var(--ink)}
.blog-cover{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.blog-cover img{width:100%;height:100%;object-fit:cover;transition:.5s}
.blog-card:hover .blog-cover img{transform:scale(1.04)}
.blog-meta{padding:22px}
.blog-meta small{color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}
.blog-meta h3{margin:6px 0 10px;font-size:1.3rem;line-height:1.3}
.blog-meta p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 12px}
.blog-read{
  color:var(--rosa);font-weight:700;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
}

.blog-article{padding:40px 0 120px}
.post-body{line-height:1.8;font-size:1.06rem}
.post-body p{margin-bottom:1.2em}
.post-body h2,.post-body h3{margin:1.6em 0 .6em}
.post-body a{color:var(--rosa);font-weight:600}
.post-body img{max-width:100%;border-radius:12px;margin:1.6em 0}
.post-body blockquote{
  border-left:4px solid var(--rosa);padding:.4em 1.2em;margin:1.6em 0;
  background:var(--cream);font-style:italic;border-radius:0 12px 12px 0;
}

/* ========== FOOTER ========== */
footer{
  background:var(--ink);color:#8a8aa0;padding:50px 0 30px;text-align:center;
  border-top:3px solid transparent;
  background-image:linear-gradient(var(--ink),var(--ink)),var(--gradient-fiesta);
  background-origin:border-box;background-clip:padding-box,border-box;
}
footer .brand{margin-bottom:.6rem}
footer .brand img{filter:brightness(1.1)}
footer .social{display:flex;justify-content:center;gap:1rem;margin:1.5rem 0}
footer .social a{
  width:42px;height:42px;border:1px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;color:#d0c8e0;
  border-radius:50%;text-decoration:none;transition:.3s;font-weight:700;
}
footer .social a:hover{background:var(--gradient-fiesta);color:#fff;border-color:transparent}
footer small{color:#6a6a7a;font-size:.82rem}
footer small a{color:var(--amarillo);text-decoration:none}

/* ========== ANIMATIONS ========== */
.anim{opacity:0;transition:opacity 1s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.anim-left{transform:translateX(-80px)}
.anim-right{transform:translateX(80px)}
.anim-up{transform:translateY(70px)}
.anim-down{transform:translateY(-50px)}
.anim-zoom{transform:scale(.85)}
.anim-rotate{transform:rotate(-8deg) translateY(40px)}
.anim-fade{transform:none}
.anim.visible{opacity:1;transform:translate(0,0) scale(1) rotate(0)}
.delay-1{transition-delay:.15s}
.delay-2{transition-delay:.3s}
.delay-3{transition-delay:.45s}
.delay-4{transition-delay:.6s}

/* ========== RESPONSIVE ========== */
/* Adaptive nav: at 1101-1400 px keep desktop layout but tighten gap/size so 10 links fit. */
@media (min-width:1101px) and (max-width:1400px){
  .top-nav ul{gap:1.5rem}
  .top-nav ul a{font-size:.86rem}
  .top-nav ul a.nav-cta{padding:.55rem 1.1rem;font-size:.76rem}
}
/* Hamburger kicks in at 1100px — before links start colliding with brand/CTA */
@media (max-width:1100px){
  .nav-toggle{display:inline-flex}
  .top-nav .nav-menu{
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg);flex-direction:column;padding:20px;
    display:none;box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
  .top-nav .nav-menu.open{display:flex}
  /* On hero-dark pages, links are forced white in BOTH scroll states
     (line 315 for :not(.scrolled), line 327 for .scrolled). That made the cream
     mobile dropdown bg invisible (white text on cream).
     Solution: paint the mobile menu with the Frida fiesta gradient so the
     forced-white text stays readable on every scroll state, and the brand
     warmth carries into the drawer (no more cold ink-blue surprise). */
  body.hero-dark .top-nav .nav-menu.open{
    background:var(--gradient-fiesta);box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  body.hero-dark .top-nav .nav-menu.open a{
    color:#fff !important;
  }
  body.hero-dark .top-nav .nav-menu.open a:hover{
    color:var(--amarillo) !important;
  }
}
@media (max-width:991px){
  .hero::before{width:100%;opacity:.22;border-radius:0}
  .gallery-masonry{column-count:3}
  .contact-grid{grid-template-columns:1fr}
  section{padding:80px 0}
  .menu-hall{padding:64px 0 36px}
  .menu-favourites{padding:60px 0 50px}
  .catering-feature{padding:70px 0 60px}
}
@media (max-width:576px){
  section{padding:60px 0}
  .gallery-masonry{column-count:1;column-gap:12px}
  .gallery-masonry .gitem{margin-bottom:12px}
  .catering-feature{padding:70px 0}
  .menu-hall{padding:56px 0 24px}
  .menu-favourites{padding:48px 0 40px}
  .page-hero,.page-hero--image{padding:140px 0 60px}
  .lightbox .lb-prev{left:10px}
  .lightbox .lb-next{right:10px}
}

/* ============================================================
   SITE FOOTER (rich)
   ============================================================ */
.site-footer{
  background:var(--ink);color:rgba(255,255,255,.78);
  padding:90px 0 0;font-size:.92rem;line-height:1.7;
  position:relative;overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gradient-fiesta);
}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:60px;
}
.footer-col h5{
  color:#fff;font-size:.88rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;margin:0 0 1.2rem;font-family:'Inter',sans-serif;
}
.footer-col p{margin:0 0 1rem}
.footer-col p span{
  display:inline-block;min-width:70px;color:var(--amarillo);
  font-weight:600;text-transform:uppercase;font-size:.72rem;letter-spacing:.15em;
  margin-right:.6rem;
}
.footer-col a{color:rgba(255,255,255,.78);text-decoration:none;transition:.2s}
.footer-col a:hover{color:var(--amarillo)}
.footer-directions{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px 6px 12px;
  border:1px solid rgba(255,196,0,.4);
  border-radius:30px;
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  color:var(--amarillo) !important;
  transition:.25s;
}
.footer-directions:hover{
  background:var(--amarillo);color:var(--ink) !important;
  border-color:var(--amarillo);
  transform:translateY(-1px);
}
.footer-directions svg{stroke-width:2.2}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col ul li{margin-bottom:.5rem}
.footer-brand .brand img{max-height:70px;filter:brightness(1.1)}
.footer-brand p{max-width:340px;margin-top:1.2rem;color:rgba(255,255,255,.65)}
.footer-brand .social{display:flex;gap:.8rem;margin-top:1.4rem}
.footer-brand .social a{
  width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.7);transition:.3s;
}
.footer-brand .social a:hover{
  border-color:var(--amarillo);color:var(--amarillo);
  background:rgba(255,196,0,.1);transform:translateY(-2px);
}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08);
  padding:26px 0;display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:1rem;
  color:rgba(255,255,255,.55);font-size:.82rem;
}
.footer-legal{display:flex;gap:.6rem;align-items:center}
.footer-legal a{color:rgba(255,255,255,.7)}
.footer-legal span{opacity:.4}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px}
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
}

/* Legal pages (privacy, terms) */
.legal-page{padding:60px 0 120px}
.legal-page .container{max-width:820px}
.legal-page h2{
  font-family:'Playfair Display',serif;font-size:1.6rem;
  margin:2.2rem 0 1rem;
}
.legal-page h2:first-child{margin-top:0}
.legal-page p, .legal-page li{color:var(--ink);line-height:1.8;font-size:1rem}
.legal-page ul, .legal-page ol{padding-left:1.4rem;margin:1rem 0}
.legal-page strong{color:var(--rosa)}

/* ============================================================
   EDITORIAL HOMEPAGE REDESIGN (cinematic hero, carousel, etc.)
   ============================================================ */

/* ---- Full-bleed video hero (no headline, 3 floating CTAs) ---- */
.hero--video{
  position:relative;
  min-height:clamp(620px, 92vh, 880px);
  padding:0;color:#fff;
  background:var(--ink);
  overflow:hidden;
  display:block;
}
.hero--video::before,
.hero--video::after{display:none}
.hero--video .hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  z-index:0;background:var(--ink);
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(15,10,26,.25) 0%,
    rgba(15,10,26,0)   30%,
    rgba(15,10,26,0)   60%,
    rgba(15,10,26,.85) 100%);
  pointer-events:none;
}
.hero-actions{
  position:absolute;bottom:clamp(20px, 5vh, 56px);
  z-index:2;display:flex;gap:12px;flex-wrap:wrap;
  pointer-events:auto;
}
.hero-actions--left { left:clamp(16px, 5vw, 56px); }
.hero-actions--right{
  right:clamp(16px, 5vw, 56px);
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}
.hero-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  padding:.55rem 1.1rem;
  font-size:.78rem;
  letter-spacing:.08em;
}
.hero-action-btn svg{flex-shrink:0;}
.btn-ghost--light{
  color:#fff;border-color:rgba(255,255,255,.7);
}
.btn-ghost--light:hover{background:#fff;color:var(--ink);border-color:#fff}

@media (max-width:640px){
  /* Mobile'da hero video TAM ekran kaplar (100svh) — nav arkasından geçer,
     marquee bant viewport altına iter (scroll yapınca görünür). */
  .hero--video{
    min-height:100svh;
    height:100svh;
  }
  @supports (height:100dvh){
    .hero--video{height:100dvh}
  }
  .hero-actions{
    bottom:clamp(20px, 4.5vh, 36px);
  }
  .hero-actions--left { left:14px; }
  .hero-actions--right{
    right:14px;
    flex-direction:column;align-items:flex-end;gap:8px;
  }
  .hero-actions .btn-gold{
    padding:.55rem .95rem;font-size:.78rem;letter-spacing:.06em;
  }
  .hero-action-btn{
    padding:.5rem .95rem;
    font-size:.72rem;
    letter-spacing:.05em;
  }
  .hero-action-btn svg{width:14px;height:14px;}
}

/* ---- Marquee ticker ---- */
.marquee{
  background:var(--ink);color:var(--amarillo);
  overflow:hidden;padding:14px 0;
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;z-index:2;
}
.marquee-track{
  display:flex;gap:3rem;white-space:nowrap;
  animation:marqueeScroll 22s linear infinite;
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.1rem;letter-spacing:.04em;
  padding-left:3rem;
}
.marquee-track span{flex:0 0 auto}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (max-width:768px){
  .marquee-track{animation-duration:16s;gap:2rem;padding-left:2rem;font-size:1rem}
}
@media (max-width:480px){
  .marquee-track{animation-duration:13s;gap:1.5rem;padding-left:1.5rem;font-size:.95rem}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation-duration:80s}
}

/* ---- Home info band (KOKO + Catering) ---- */
.home-band{
  background:var(--ink);
  color:#fff;
  padding:clamp(48px, 8vw, 96px) 0;
  position:relative;
  z-index:1;
}
.home-band::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gradient-fiesta);
}
.home-band-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(40px, 5vw, 64px);
  max-width:880px;
  margin-inline:auto;
  align-items:start;
}
.band-card{display:flex;flex-direction:column;gap:1rem;}
.band-card .eyebrow{
  color:var(--amarillo);
  letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;font-weight:600;
}
.band-card h2,
.band-card h3{
  font-family:'Playfair Display',serif;color:#fff;margin:0;font-weight:600;
}
.band-card h2 em,
.band-card h3 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.band-card h2{font-size:clamp(1.8rem, 3.4vw, 2.6rem);line-height:1.1;}
.band-card h3{font-size:clamp(1.5rem, 2.8vw, 2rem);line-height:1.15;}
.band-card .lead{color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.65;margin:0;}
.band-card p{color:rgba(255,255,255,.78);line-height:1.65;margin:0;}
.band-note{font-size:.92rem;color:rgba(255,255,255,.7) !important;}
.band-note a{color:var(--amarillo);text-decoration:none;border-bottom:1px solid rgba(255,196,0,.4);}
.band-note a:hover{border-bottom-color:var(--amarillo);}
.band-card--catering{
  padding:clamp(24px, 4vw, 40px);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
}
.band-card--featured{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  padding:clamp(32px, 5vw, 56px);
  border-radius:22px;
}
.band-card--featured h2{
  font-size:clamp(2rem, 3.8vw, 2.8rem);
  line-height:1.1;
}
.band-card--compact{
  padding:clamp(24px, 3vw, 32px);
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
}
.band-card--compact h3{
  font-size:clamp(1.4rem, 2.4vw, 1.8rem);
}
.band-card--compact .lead{
  font-size:.98rem;
  color:rgba(255,255,255,.78);
}
.band-card .btn-gold,
.band-card .btn-ghost{align-self:flex-start;margin-top:.5rem;}
@media (max-width:768px){
  .home-band-grid{gap:32px;}
  .band-card{gap:.9rem;}
}

/* ---- Breakfast & Lunch banner (menu page) + modal ---- */
.menu-bl-banner{
  position:relative;
  margin:8px auto 20px;
  padding:clamp(28px, 4vw, 44px) clamp(20px, 4vw, 40px);
  max-width:780px;
  background:linear-gradient(135deg, rgba(233,30,99,.08) 0%, rgba(255,196,0,.08) 100%);
  border:1px solid rgba(255,196,0,.25);
  border-radius:22px;
  scroll-margin-top:120px; /* anchor jump from /menu#breakfast-lunch-menu lands below sticky nav */
}
.menu-bl-banner .eyebrow{color:var(--amarillo);}
.menu-bl-banner h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  margin:.5rem 0 1rem;line-height:1.15;color:#fff;
}
.menu-bl-banner h2 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.menu-bl-banner p{
  color:rgba(255,255,255,.82);max-width:640px;margin:0 auto 1.5rem;
  font-size:clamp(.95rem, 1.3vw, 1.05rem);line-height:1.65;
}
.menu-bl-banner .btn-gold{display:inline-flex;}

/* ---- Section title (Main Menu, accordion'un üstündeki başlık) ---- */
.menu-section-title{
  position:relative;
  margin:36px auto 16px;
  max-width:780px;
}
.menu-section-title h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  margin:0;line-height:1.15;color:#fff;
}
.menu-section-title h2 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}

/* Image modal — full-viewport overlay with image inside */
.img-modal{
  position:fixed;inset:0;z-index:9999;
  background:rgba(15,10,26,.95);
  display:flex;align-items:flex-start;justify-content:center;
  overflow:auto;
  padding:60px 24px 24px;
}
.img-modal[hidden]{display:none;}
.img-modal__backdrop{
  position:fixed;inset:0;z-index:0;cursor:zoom-out;
}
.img-modal__close{
  position:fixed;top:16px;right:20px;z-index:2;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.4);
  color:#fff;width:44px;height:44px;border-radius:50%;
  font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s;
}
.img-modal__close:hover{background:rgba(255,255,255,.25);transform:scale(1.05);}
.img-modal__content{
  position:relative;z-index:1;
  max-width:100%;width:auto;height:auto;
  display:block;margin:auto;
  box-shadow:0 24px 64px rgba(0,0,0,.5);
  border-radius:8px;
}
@media (max-width:640px){
  .img-modal{padding:52px 12px 12px;}
  .img-modal__close{top:10px;right:12px;width:40px;height:40px;font-size:1.4rem;}
}

/* ---- Menu CTA band (after carousel) ---- */
.home-menu-band{
  background:var(--ink);
  color:#fff;
  padding:clamp(56px, 9vw, 100px) 0;
  position:relative;
  border-top:1px solid rgba(255,255,255,.06);
  text-align:center;
}
.home-menu-band p{
  color:rgba(255,255,255,.85);
  font-size:clamp(1rem, 1.5vw, 1.18rem);
  line-height:1.7;
  max-width:680px;
  margin:0 auto 1.8rem;
}
.home-menu-band .btn-gold{
  display:inline-flex;
}

/* ---- Auto-scrolling carousel keyframes (used by .gallery-hero-carousel) ---- */
@keyframes carouselScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---- Catering feature (floating fiesta collage) ---- */
.catering-feature{
  background:
    radial-gradient(circle at 85% 15%, rgba(0,191,165,.14) 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, rgba(233,30,99,.12) 0%, transparent 45%),
    linear-gradient(135deg, var(--cream) 0%, var(--warm) 100%);
  padding:140px 0 120px;position:relative;overflow:hidden;
  min-height:1040px;
}
.catering-feature::before{
  content:"Catering";
  position:absolute;top:60px;left:50%;transform:translateX(-50%);
  font-family:'Playfair Display',serif;
  font-size:clamp(6rem, 14vw, 16rem);font-weight:700;
  color:rgba(233,30,99,.045);line-height:.9;
  pointer-events:none;letter-spacing:-.04em;z-index:0;
  font-style:italic;
}
.papel-picado{
  position:absolute;top:0;left:0;right:0;
  width:100%;height:60px;
  pointer-events:none;z-index:3;
}

/* ---- Floating collage (behind glass card) ---- */
.fiesta-collage{
  position:absolute;inset:80px 0 0 0;z-index:1;
  pointer-events:none;overflow:hidden;
}
.fiesta-collage .fc{
  position:absolute;object-fit:cover;object-position:center;
  border-radius:18px;
  box-shadow:
    0 22px 50px rgba(26,26,46,.22),
    0 6px 14px rgba(26,26,46,.10),
    inset 0 1px 0 rgba(255,255,255,.25);
  will-change:transform;
  --flip:1;
  transform:rotate(var(--r,0deg)) scaleX(var(--flip));
  animation:fiestaJelly 9s ease-in-out infinite;
}
.fc-2,.fc-4,.fc-6,.fc-8{--flip:-1}

/* Orantılı scattered — 4 yatay bantta dengeli, random sizes,
   bazıları glass kartın arkasına taşarak derinlik */
.fc-1{--r:-14deg; top:3%;  left:2%;   width:360px; height:255px; animation-delay:0s}
.fc-2{--r:17deg;  top:5%;  right:1%;  width:420px; height:300px; animation-delay:-0.9s}
.fc-3{--r:22deg;  top:28%; left:5%;   width:320px; height:230px; animation-delay:-1.8s}
.fc-4{--r:-10deg; top:25%; right:3%;  width:400px; height:285px; animation-delay:-2.7s}
.fc-5{--r:-18deg; top:55%; left:0%;   width:440px; height:315px; animation-delay:-3.6s}
.fc-6{--r:12deg;  top:53%; right:4%;  width:350px; height:250px; animation-delay:-4.5s}
.fc-7{--r:20deg;  top:80%; left:14%;  width:380px; height:270px; animation-delay:-5.4s}
.fc-8{--r:-16deg; top:82%; right:8%;  width:450px; height:320px; animation-delay:-6.3s}

@keyframes fiestaJelly{
  0%,100%{transform:translateY(0) rotate(var(--r,0deg)) scaleX(var(--flip)) scale(1)}
  50%    {transform:translateY(-10px) rotate(calc(var(--r,0deg) + 1.2deg)) scaleX(var(--flip)) scale(1.015)}
}
@media (prefers-reduced-motion:reduce){
  .fiesta-collage .fc{animation:none}
}

/* Soft veil over the collage so the glass card sits cleanly on top */
.collage-veil{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 62% 58% at 50% 52%,
    rgba(255,248,225,.55) 0%,
    rgba(255,248,225,.25) 55%,
    transparent 85%);
}

.catering-inner{position:relative;z-index:4}

/* ---- Glassmorphic centrepiece ---- */
.catering-glass{
  max-width:760px;margin:0 auto;
  padding:56px clamp(32px, 5vw, 72px);
  background:rgba(255,255,255,.58);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:32px;
  box-shadow:
    0 30px 70px rgba(26,26,46,.14),
    0 8px 22px rgba(26,26,46,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
  text-align:center;
}
.catering-glass .eyebrow{display:block;margin-bottom:18px}
.catering-glass h2{
  font-family:'Playfair Display',serif;font-weight:600;
  font-size:clamp(2.2rem, 4.8vw, 3.8rem);line-height:1.02;
  margin:0 0 1.2rem;letter-spacing:-.015em;color:var(--ink);
}
.catering-glass h2 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;
}
.catering-glass .lead{
  font-size:1.06rem;color:var(--ink);opacity:.78;
  line-height:1.6;margin:0 auto 2rem;max-width:54ch;
}

/* Stat strip */
.cg-stats{
  display:flex;justify-content:center;align-items:stretch;gap:0;
  margin:0 auto 2rem;padding:20px 0;
  border-top:1px solid rgba(26,26,46,.1);
  border-bottom:1px solid rgba(26,26,46,.1);
  max-width:560px;
}
.cg-stat{
  flex:1;padding:0 16px;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.cg-stat + .cg-stat::before{
  content:"";position:absolute;top:10%;bottom:10%;left:0;
  width:1px;background:rgba(26,26,46,.12);
}
.cg-stat strong{
  font-family:'Playfair Display',serif;font-weight:700;
  font-size:clamp(1.6rem, 2.8vw, 2.1rem);line-height:1;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:-.01em;
}
.cg-stat strong em{
  font-size:.65em;font-style:normal;font-weight:600;margin-left:1px;
}
.cg-stat span{
  font-family:'Inter',sans-serif;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}

/* Perk list */
.cg-perks{
  list-style:none;padding:0;margin:0 0 2rem;
  display:flex;flex-direction:column;gap:10px;text-align:left;
  max-width:460px;margin-left:auto;margin-right:auto;
}
.cg-perks li{
  display:flex;align-items:baseline;gap:12px;
  font-family:'Inter',sans-serif;font-size:.95rem;
  color:var(--ink);line-height:1.4;
}
.cg-perks .dot{
  flex:0 0 auto;width:8px;height:8px;border-radius:50%;
  display:inline-block;margin-top:6px;
  box-shadow:0 0 0 3px rgba(255,255,255,.7);
}
.cg-perks .dot-rosa{background:var(--rosa)}
.cg-perks .dot-naranja{background:var(--naranja)}
.cg-perks .dot-turquesa{background:var(--turquesa)}
.cg-perks strong{font-weight:600;color:var(--ink)}
.cg-perks em{font-style:normal;color:var(--muted);margin-left:4px}

.cg-ctas{
  display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap;
}

/* ---- Menu teaser ---- */
.menu-teaser{
  background:var(--bg);padding:120px 0;
}
.dish-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:60px;
}
.dish-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:28px;position:relative;
  transition:.35s;
  display:flex;flex-direction:column;gap:.8rem;
}
.dish-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--gradient-fiesta);border-radius:18px 18px 0 0;
  opacity:0;transition:.3s;
}
.dish-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(26,26,46,.14)}
.dish-card:hover::before{opacity:1}
.dish-cat{
  display:inline-block;align-self:flex-start;
  font-size:.75rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--rosa);font-weight:700;
}
.dish-card h4{
  font-family:'Playfair Display',serif;font-size:1.35rem;margin:0;
}
.dish-card p{color:var(--muted);font-size:.9rem;line-height:1.55;margin:0;flex:1}
.dish-price{
  font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-top:.4rem;
}

/* ---- Blog preview (magazine) ---- */
.blog-preview{
  background:var(--cream);padding:120px 0;position:relative;overflow:hidden;
}
.blog-preview::before{
  content:"Stories";
  position:absolute;top:60px;left:-40px;
  font-family:'Playfair Display',serif;
  font-size:clamp(6rem,14vw,16rem);font-weight:700;
  color:rgba(233,30,99,.05);line-height:.9;
  pointer-events:none;letter-spacing:-.04em;
}
.blog-preview-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  position:relative;
}
.bp-card{
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 12px 30px rgba(26,26,46,.08);
  text-decoration:none;color:var(--ink);
  transition:.4s;display:flex;flex-direction:column;
}
.bp-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(26,26,46,.18);color:var(--ink)}
.bp-cover{height:240px;overflow:hidden;background:var(--warm)}
.bp-cover img{
  width:100%;height:100%;object-fit:cover;
  transition:.8s transform;
}
.bp-card:hover .bp-cover img{transform:scale(1.08)}
.bp-body{padding:26px 24px;display:flex;flex-direction:column;gap:.7rem;flex:1}
.bp-body time{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rosa);font-weight:700;
}
.bp-body h3{
  margin:0;font-size:1.35rem;line-height:1.25;
}
.bp-body p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;flex:1}
.bp-read{
  font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rosa);margin-top:.4rem;
}

/* ---- Reservation CTA with full-bleed image ---- */
.reservation--image{
  background-size:cover;background-position:center;
  padding:180px 0;position:relative;overflow:hidden;color:#fff;
}
.reservation-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(135deg, rgba(15,10,26,.85) 0%, rgba(70,10,40,.75) 100%);
}
.reservation--image .eyebrow{
  color:var(--amarillo);
}
.reservation--image h2{
  color:#fff;font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;
  text-shadow:0 4px 30px rgba(0,0,0,.4);
}
.reservation--image h2 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- Magazine blog page ---- */
.blog-featured{
  display:grid;grid-template-columns:1.3fr 1fr;gap:50px;
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 44px rgba(26,26,46,.1);
  margin-bottom:60px;
}
.blog-featured .bf-cover{height:100%;min-height:420px}
.blog-featured .bf-cover img{width:100%;height:100%;object-fit:cover}
.blog-featured .bf-body{padding:50px 48px;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.blog-featured .bf-body time{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--rosa);font-weight:700;
}
.blog-featured .bf-body h2{
  font-size:clamp(1.8rem,3vw,2.6rem);margin:0;line-height:1.15;
}
.blog-featured .bf-body p{color:var(--muted);font-size:1.05rem;line-height:1.6}

.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.blog-card{
  background:#fff;border-radius:20px;overflow:hidden;
  box-shadow:0 10px 26px rgba(26,26,46,.08);
  text-decoration:none;color:var(--ink);
  transition:.35s;display:flex;flex-direction:column;
}
.blog-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(26,26,46,.15);color:var(--ink)}
.blog-cover{height:220px;overflow:hidden;background:var(--warm)}
.blog-cover img{width:100%;height:100%;object-fit:cover;transition:.6s}
.blog-card:hover .blog-cover img{transform:scale(1.07)}
.blog-meta{padding:24px 22px;display:flex;flex-direction:column;gap:.6rem;flex:1}
.blog-meta small{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rosa);font-weight:700;
}
.blog-meta h3{margin:0;font-size:1.25rem;line-height:1.25}
.blog-meta p{margin:0;color:var(--muted);font-size:.93rem;flex:1}
.blog-read{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rosa);margin-top:.3rem;
}

/* ============ Single blog post — hybrid display ============
   Dark section with Frida spring-flowers background, glass-framed
   cream card for the reading surface. Keeps site visual language
   (glass + fiesta accents) while preserving blog readability. */
.blog-article{
  padding:clamp(48px,6vw,96px) 0 clamp(64px,8vw,120px);
  position:relative;
  background:
    linear-gradient(180deg,
      rgba(26,26,46,.92) 0%,
      rgba(26,26,46,.88) 50%,
      rgba(26,26,46,.94) 100%),
    url('../assets/frida/frida-camden-blog-spring-flowers.jpg') center top / cover no-repeat;
  color:#fff;
}
.blog-article .container{max-width:920px}
.blog-card{
  position:relative;
  max-width:820px;margin:0 auto;
  background:#fff8e1;color:#2a2a3e;
  border-radius:clamp(18px,2.4vw,28px);
  padding:clamp(28px,5vw,64px) clamp(22px,4vw,56px);
  box-shadow:
    0 40px 120px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,248,225,.12);
}
.blog-card::before{
  /* subtle fiesta-gradient halo behind the card */
  content:'';position:absolute;inset:-14px;z-index:-1;
  background:var(--gradient-fiesta);opacity:.18;
  border-radius:inherit;filter:blur(22px);
}
.blog-card .post-meta-strip{
  border-bottom:1px solid rgba(42,42,62,.15);
  color:rgba(42,42,62,.7);
  margin-bottom:32px;
}
.blog-card .post-meta-strip strong{color:var(--rosa)}
.blog-all-stories{color:var(--ink);border-color:rgba(42,42,62,.45)}
.blog-all-stories:hover{background:var(--rosa);color:#fff;border-color:var(--rosa)}

/* Related stories live outside the cream card, in the dark section */
.blog-article .related-stories{
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:60px;margin-top:80px;
}
.blog-article .related-stories h3{color:#fff;font-size:1.8rem;text-align:center;margin-bottom:40px}
.blog-article .related-stories h3 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.blog-article .related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
}
.blog-article .related-grid .bp-card{
  background:rgba(255,248,225,.08);
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;overflow:hidden;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
  text-decoration:none;color:#fff;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.blog-article .related-grid .bp-card:hover{
  transform:translateY(-4px);
  background:rgba(255,248,225,.14);
  border-color:rgba(233,30,99,.5);
}
.blog-article .related-grid .bp-cover{aspect-ratio:16/10;overflow:hidden}
.blog-article .related-grid .bp-cover img{width:100%;height:100%;object-fit:cover}
.blog-article .related-grid .bp-body{padding:18px 20px 22px}
.blog-article .related-grid .bp-body time{
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--amarillo);
}
.blog-article .related-grid .bp-body h3{
  color:#fff;font-size:1.15rem;margin:6px 0 8px;text-align:left;
}
.blog-article .related-grid .bp-body p{
  color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.55;margin-bottom:10px;
}
.blog-article .related-grid .bp-read{
  color:var(--rosa);font-weight:600;font-size:.85rem;letter-spacing:.04em;
}
.post-meta-strip{
  display:flex;gap:1.5rem;align-items:center;justify-content:center;
  padding:20px 0;margin-bottom:40px;border-bottom:1px solid var(--line);
  color:var(--muted);font-size:.88rem;
  text-transform:uppercase;letter-spacing:.15em;
}
.post-meta-strip strong{color:var(--rosa);font-weight:700}
.post-body{
  font-size:1.08rem;line-height:1.8;color:#2a2a3e;
}
.post-body p:first-of-type::first-letter{
  font-family:'Playfair Display',serif;font-size:5rem;
  float:left;line-height:.85;padding:4px 14px 0 0;margin-top:6px;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-weight:700;
}
.post-body h2, .post-body h3{
  font-family:'Playfair Display',serif;
  margin-top:2.2rem;margin-bottom:1rem;
}
.post-body h2{font-size:1.8rem}
.post-body h3{font-size:1.4rem}
.post-body blockquote{
  border-left:4px solid var(--rosa);
  margin:2rem 0;padding:.4rem 0 .4rem 1.6rem;
  font-family:'Playfair Display',serif;font-style:italic;
  font-size:1.35rem;line-height:1.4;color:var(--ink);
}
.post-body img{
  max-width:100%;border-radius:14px;margin:1.4rem 0;
  box-shadow:0 18px 40px rgba(26,26,46,.12);
}
.post-body ul, .post-body ol{padding-left:1.5rem;margin:1.2rem 0}
.post-body a{color:var(--rosa);font-weight:600}

.related-stories{
  border-top:1px solid var(--line);padding-top:60px;margin-top:80px;
}
.related-stories h3{text-align:center;margin-bottom:40px;font-size:1.8rem}
.related-stories h3 em{
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  font-style:italic;
}
.related-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:880px;margin:0 auto;
}

/* ---- Responsive breakpoints ---- */
@media (max-width:960px){
  .catering-feature{min-height:auto;padding:110px 0 90px}
  .catering-glass{padding:44px 32px}
  .fc-1,.fc-3,.fc-6{width:220px;height:155px}
  .fc-2,.fc-4,.fc-5,.fc-8{width:280px;height:200px}
  .fc-7{width:240px;height:170px}
  .cg-stats{max-width:100%}
  .dish-grid{grid-template-columns:repeat(2,1fr)}
  .blog-preview-grid{grid-template-columns:1fr}
  .blog-featured{grid-template-columns:1fr}
  .blog-featured .bf-cover{min-height:280px}
  .blog-featured .bf-body{padding:36px 30px}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:1fr}
  .catering-feature, .menu-teaser, .blog-preview{padding:90px 0}
  .reservation--image{padding:120px 0}
}
@media (max-width:640px){
  .dish-grid{grid-template-columns:1fr}
  .blog-grid{grid-template-columns:1fr}
  .post-body p:first-of-type::first-letter{font-size:3.8rem}
  .post-meta-strip{flex-wrap:wrap;gap:.8rem;font-size:.76rem}
  .contact-grid{grid-template-columns:1fr}
  .fiesta-collage{display:none}
  .collage-veil{display:none}
  .catering-feature{padding:90px 0 70px}
  .catering-feature::before{font-size:clamp(5rem,18vw,9rem);top:40px}
  .catering-glass{
    padding:36px 26px;border-radius:26px;
    background:rgba(255,255,255,.85);
  }
  .catering-glass h2{font-size:clamp(2rem,8vw,2.6rem)}
  .catering-glass .lead{font-size:.98rem}
  .cg-stats{padding:16px 0;gap:0}
  .cg-stat{padding:0 8px}
  .cg-stat strong{font-size:1.35rem}
  .cg-stat span{font-size:.62rem;letter-spacing:.14em}
  .cg-perks li{font-size:.9rem}
  .cg-ctas{flex-direction:column;align-items:stretch}
  .cg-ctas a{text-align:center}
}

/* ========== STORY PAGE ========== */
.story-bg-section{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:#1a1a2e;
  padding:clamp(110px,14vh,180px) 0 clamp(80px,10vh,120px);
}
@media (max-width:768px){
  /* Reduce top breathing room on mobile so glass card sits closer to the nav
     — the 25vh default was generous on desktop but felt like dead space on phones. */
  .story-bg-section{padding-top:110px}
}
@media (max-width:480px){
  .story-bg-section{padding-top:95px}
}
/* Brand-badge parallax layout. Square logo.png (the circular "FRIDA CAMDEN"
   mark) appears pinned to the viewport via JS-driven --story-parallax-y CSS
   var (set in js/app.js). Background-attachment:fixed is unreliable on iOS
   Safari + several mobile browsers; using scroll + JS gives consistent feel.
   ≥1100px: two copies anchored 9%/91% from edges, top edge ~100px from viewport top.
   <1100px: single centered watermark.
   ≤768px: single centered watermark, slightly larger. */
.story-bg-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--story-bg);
  background-size:60% auto;
  background-position:center calc(80px + var(--story-parallax-y, 0px));
  background-attachment:scroll;background-repeat:no-repeat;
  opacity:.55;
}
@media (min-width:1100px){
  .story-bg-section::before{
    background-image:var(--story-bg),var(--story-bg);
    background-position:9% calc(100px + var(--story-parallax-y, 0px)),91% calc(100px + var(--story-parallax-y, 0px));
    background-size:42% auto,42% auto;
    background-repeat:no-repeat,no-repeat;
    background-attachment:scroll,scroll;
    opacity:.5;
  }
}
/* Mobile: zoom into the badge so the inner Frida portrait fills the viewport
   while the outer orange ring + "FRIDA CAMDEN" wordmark crop out. The navbar
   already carries the full brand mark — repeating it as bg is redundant.
   Result: atmospheric portrait watermark, centered. */
@media (max-width:768px){
  .story-bg-section::before{
    background-size:180% auto;
    background-position:center calc(80px + var(--story-parallax-y, 0px));
    background-attachment:scroll;
    opacity:.55;
  }
}
@media (max-width:480px){
  .story-bg-section::before{
    background-size:200% auto;
    background-position:center calc(70px + var(--story-parallax-y, 0px));
  }
}
.story-bg-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.38) 0%,
    rgba(194,24,91,.22) 50%,
    rgba(26,26,46,.65) 100%);
}
.story-bg-section > .container{position:relative;z-index:2}

.story-glass{
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  padding:clamp(28px,4vw,56px);
  margin:0 auto 32px;
  max-width:760px;
  color:#fff;
  box-shadow:0 22px 55px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.story-glass:last-child{margin-bottom:0}

.story-glass--prose{text-align:center}
.story-glass--prose .eyebrow{color:var(--amarillo);display:inline-block;margin-bottom:.4rem}
.story-glass--prose h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  font-weight:700;margin:.2rem 0 .8rem;color:#fff;line-height:1.1;letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.story-glass--prose h1 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.story-glass--prose .lead{
  color:rgba(255,255,255,.94);font-size:1.08rem;line-height:1.7;
  max-width:620px;margin:0 auto 2rem;
}
.story-glass--prose h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.6rem,2.8vw,2.2rem);
  color:#fff;margin:1.2rem 0 1.4rem;line-height:1.2;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.story-glass--prose h2 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.story-glass--prose p:not(.lead){
  color:rgba(255,255,255,.92);line-height:1.85;font-size:1.05rem;margin:0 0 1.2rem;
  text-align:left;
}
.story-glass--prose p:last-child{margin-bottom:0}

.story-glass--values{
  display:grid;grid-template-columns:repeat(3,1fr);gap:36px;text-align:center;
}
.story-glass--values .sv{padding:10px 6px}
.story-glass--values .sv-icon{
  display:block;font-size:1.7rem;margin-bottom:.8rem;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.story-glass--values h4{
  font-family:'Playfair Display',serif;font-size:1.2rem;margin:0 0 .55rem;color:#fff;
}
.story-glass--values p{
  color:rgba(255,255,255,.88);font-size:.94rem;line-height:1.7;margin:0;
}

.story-glass--stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;text-align:center;
}
.story-glass--stats .st span{
  display:block;font-family:'Playfair Display',serif;font-size:clamp(2.2rem,4vw,3.2rem);
  line-height:1;font-weight:700;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.story-glass--stats .st small{
  display:block;margin-top:.55rem;font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.85);
}

/* ========== CATERING — FULL-PAGE FRIDA BACKGROUND ========== */
/* Catering hero — auto-fade carousel with Ken Burns zoom (fullscreen) */
.catering-hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:100vh;
  padding:clamp(130px, 16vh, 180px) 0 clamp(60px, 8vh, 100px);
  display:flex;align-items:flex-start;justify-content:center;
  color:#fff;text-align:center;
}
#catering-form{scroll-margin-top:80px}
.catering-cta{
  display:inline-flex;align-items:center;gap:.55rem;
  margin-top:28px;
}
.catering-cta svg{animation:ctaBounce 1.8s ease-in-out infinite}
@keyframes ctaBounce{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(5px)}
}
@media (prefers-reduced-motion:reduce){
  .catering-cta svg{animation:none}
}
.catering-hero-carousel{position:absolute;inset:0;z-index:0}
.catering-hero-carousel .slide{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.04);
  transition:opacity 1.1s ease, transform 6s ease;
  will-change:opacity,transform;
  filter:brightness(1.25);
}
.catering-hero-carousel .slide.is-active{opacity:1;transform:scale(1)}

.catering-hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.45) 0%,
    rgba(26,26,46,.25) 35%,
    rgba(26,26,46,.35) 65%,
    rgba(26,26,46,.75) 100%);
}
.catering-hero-text{position:relative;z-index:2;width:100%}
.catering-hero .eyebrow{color:var(--amarillo)}

/* Catering enquiry success card sits on a cream/white surface — the default
   amarillo eyebrow vanishes there. Override to fiesta-rosa + bigger weight so
   the "ENQUIRY RECEIVED" label reads as a real heading. */
body.catering-page .pnr-result .eyebrow{
  color:var(--rosa);
  font-size:.95rem;
  font-weight:800;
  letter-spacing:.18em;
}
.catering-hero h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  font-weight:700;color:#fff;margin:.4rem 0;letter-spacing:-.01em;line-height:1.08;
  text-shadow:0 2px 28px rgba(0,0,0,.55);
}
.catering-hero h1 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.catering-hero p{
  color:rgba(255,255,255,.95);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
  max-width:560px;margin:1rem auto 0;font-size:var(--fs-body-lg);line-height:1.7;
}

.carousel-dots{
  display:flex;justify-content:center;gap:12px;margin-top:36px;
}
.carousel-dots .dot{
  width:12px;height:12px;border-radius:50%;padding:0;
  background:rgba(255,255,255,.4);
  box-shadow:0 0 0 1px rgba(255,255,255,.3);
  border:none;cursor:pointer;
  transition:transform .3s ease, background .3s ease, box-shadow .3s ease;
}
.carousel-dots .dot:hover{background:rgba(255,255,255,.7);transform:scale(1.15)}
.carousel-dots .dot:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.carousel-dots .dot.is-active{
  background:#fff;transform:scale(1.35);
  box-shadow:0 0 0 3px rgba(255,255,255,.25);
}

@media (prefers-reduced-motion:reduce){
  .catering-hero-carousel .slide{transform:none !important}
}

/* ============================================================
   Catering & Events — yatay marquee gallery + CTA strip
   ============================================================
   Müşteri kararı (oturum 28): full-screen carousel yerine yan yana
   sürekli akan foto galerisi. Portrait fotoların boyutları korunur,
   ekran kenar boşluğu olmaz (fotolar yan yana akıyor zaten).
*/
.catering-marquee-section{
  position:relative;
  /* Tam viewport.
     padding-top = nav'ın net altından foto başlar (nav-height + buffer).
     padding-bottom = 0 → foto'nun alt kenarı viewport bottom'una denk,
     altında lacivert şerit yok. Buton absolute olarak fotonun içinde
     alt-orta'da konumlanır. */
  height:100svh;
  min-height:560px;
  padding-top:clamp(80px, 12vh, 120px);
  padding-bottom:0;
  box-sizing:border-box;
  overflow:hidden;
  background:#1a1a2e;
}
@supports (height:100dvh){
  .catering-marquee-section{height:100dvh}
}
.catering-marquee-carousel{
  position:relative;
  height:100%;
  overflow:hidden;
}
.catering-marquee-carousel .carousel-track{
  display:flex;
  width:max-content;
  height:100%;
  gap:14px;
  align-items:stretch;
  animation:cateringMarqueeScroll 38s linear infinite;
  will-change:transform;
}
.catering-marquee-carousel:hover .carousel-track{
  animation-play-state:paused;
}
.catering-marquee-carousel .carousel-slide{
  flex:0 0 auto;
  /* Section content area'sını (padding hariç) tam doldurur. */
  height:100%;
  aspect-ratio:3/4;
  border-radius:14px;
  overflow:hidden;
  margin:0;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.catering-marquee-carousel .carousel-slide picture{display:block;width:100%;height:100%}
.catering-marquee-carousel .carousel-slide img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@keyframes cateringMarqueeScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 7px))}
}
@media (max-width:768px){
  .catering-marquee-carousel .carousel-track{gap:10px}
  .catering-marquee-carousel .carousel-slide{border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .catering-marquee-carousel .carousel-track{animation:none}
}

/* ============================================================
   Catering & Events sayfası — mobile responsive paketi
   ============================================================ */

/* Phone (≤640px) — catering hero & event cards mobile UX */
@media (max-width:640px){
  /* Hero — kompakt padding (nav altından net başla, üstte gereksiz boşluk yok) */
  .catering-marquee-section{
    padding-top:clamp(60px, 9vh, 80px);
  }
  .catering-marquee-carousel .carousel-track{gap:8px}

  /* Buton: sağ-alt, kompakt */
  .catering-marquee-section .catering-cta{
    right:12px;
    bottom:14px;
    padding:.6rem 1.1rem;
    font-size:.7rem;
    letter-spacing:.06em;
    gap:.4rem;
  }

  /* Scroll-hint: mobile'da kısa "More ↓" pill buton (long span gizli, short görünür). */
  .catering-scroll-hint{
    left:12px;
    bottom:14px;
    padding:.6rem 1.05rem;
    font-size:.7rem;
    letter-spacing:.06em;
    gap:.4rem;
  }
  .catering-scroll-hint .hint-full{display:none}
  .catering-scroll-hint .hint-short{display:inline}

  /* Event cards mobile'da 2-col grid — 2 kart yan yana, daha az scroll */
  .events-grid--compact{
    grid-template-columns:repeat(2, 1fr) !important;
    gap:10px !important;
  }
  .events-grid--compact .event-card{border-radius:12px}
  .events-grid--compact .event-card-media{aspect-ratio:1/1}
  .events-grid--compact .event-tag{
    font-size:.55rem;padding:3px 7px;
    bottom:6px;left:6px;
  }
  .events-grid--compact .event-card-body{
    padding:10px 10px 14px;
    gap:6px;
  }
  .events-grid--compact .event-card-body h2{
    font-size:.95rem;
    line-height:1.2;
  }
  .events-grid--compact .event-card-body p{
    font-size:.74rem;
    line-height:1.4;
    /* 3 satıra sınırla — kart yüksekliği uniform kalır */
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .events-grid--compact .event-cta{
    font-size:.66rem;
    padding:.4rem .8rem;
  }
  .events-grid--compact .event-cta svg{width:11px;height:11px}
}

/* Small phone (≤400px) — kart 1-col'a düşer, 2-col çok dar olur */
@media (max-width:400px){
  .events-grid--compact{
    grid-template-columns:1fr !important;
  }
  .events-grid--compact .event-card-media{aspect-ratio:5/4}
  .events-grid--compact .event-card-body p{
    -webkit-line-clamp:none;  /* 1-col'da paragraf tam görünür */
  }

  /* Hero buton + scroll-hint küçük ekranda daha kompakt pill — yuvarlak değil. */
  .catering-marquee-section .catering-cta,
  .catering-scroll-hint{
    padding:.55rem 1rem;
    font-size:.66rem;
  }
}

/* CTA — marquee section içinde sağ alt köşe absolute positioned, fotonun
   önünde floating. */
.catering-marquee-section .catering-cta{
  position:absolute;
  right:clamp(24px, 4vw, 60px);
  bottom:clamp(20px, 3.5vh, 48px);
  display:inline-flex;align-items:center;gap:.55rem;
  z-index:5;
  box-shadow:0 4px 12px rgba(233,30,99,.18);
}
.catering-marquee-section .catering-cta:hover{
  box-shadow:0 6px 16px rgba(233,30,99,.22);
  transform:translateY(-2px) scale(1.02);
}

/* Scroll hint — sol alt köşe gold buton + bouncing arrow.
   Tıklanınca events-grid'e smooth scroll.
   Desktop: "Explore our events ↓" / Mobile: "More ↓" (kısa span görünür). */
.catering-scroll-hint{
  position:absolute;
  left:clamp(24px, 4vw, 60px);
  bottom:clamp(20px, 3.5vh, 48px);
  display:inline-flex;align-items:center;gap:.55rem;
  z-index:5;
  /* Sağdaki .catering-cta ile aynı küçük gölge — uniform pair. */
  box-shadow:0 4px 12px rgba(233,30,99,.18);
}
.catering-scroll-hint .hint-short{display:none}
.catering-scroll-hint:hover{
  box-shadow:0 6px 16px rgba(233,30,99,.22);
  transform:translateY(-2px) scale(1.02);
}
.catering-scroll-hint svg{
  animation:scrollHintBounce 1.8s ease-in-out infinite;
}
@keyframes scrollHintBounce{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(5px)}
}
@media (prefers-reduced-motion:reduce){
  .catering-scroll-hint svg{animation:none}
}
/* Eski 540px scroll-hint top-center kuralı kaldırıldı — yeni mobile paketinde
   buton + scroll-hint yan yana sol-sağ alt köşede sığabiliyor (kompakt padding). */

/* Catering page'de top-nav garantili koyu mor frosted (krem default'a düşmesin).
   body.catering-page direct selector — mobile + desktop her ekranda uygulanır. */
body.catering-page .top-nav,
body.catering-page .top-nav:not(.scrolled){
  background:rgba(26,26,46,.42) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
  backdrop-filter:blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(160%) !important;
}
body.catering-page .top-nav ul a{color:#fff !important}

/* (Eski) Hero "bare" modifier — only CTA + dots, no h1/eyebrow.
   Foto fixed top-nav (z:1040) arkasından geçer; brightness filter kaldırıldı,
   overlay hafifletildi (sadece alt köşede CTA okunabilirliği için karartma kalır). */
.catering-hero--bare{
  align-items:flex-end;
  padding:0 0 clamp(48px, 9vh, 96px);
  min-height:100svh;
}
.catering-hero--bare .catering-hero-carousel{
  /* Foto'nun yan/üst-alt boşluklarında koyu mor zemin görünür. */
  background:#1a1a2e;
}
.catering-hero--bare .catering-hero-carousel .slide{
  filter:none;
  /* Portrait foto + landscape ekran çelişkisi — cover ile crop yerine
     contain ile fotonun TAMAMI görünür, kenarlarda koyu mor boşluk olur.
     Mobile portrait ekranda boşluk pratikçe kalmaz (foto ratio match). */
  background-size:contain;
  background-position:center center;
  background-repeat:no-repeat;
}
.catering-hero--bare .catering-hero-overlay{
  display:none;
}
.catering-hero--bare .catering-cta{
  margin-top:0;
  /* Default .btn-gold shadow (0 10px 28px / .28) çok büyük "havuz" yapıyordu —
     daha sade, kompakt bir gölge: dikey kayma + blur + opacity yarıya. */
  box-shadow:0 4px 12px rgba(233,30,99,.18);
}
.catering-hero--bare .catering-cta:hover{
  box-shadow:0 6px 16px rgba(233,30,99,.22);
}
.catering-hero--bare .carousel-dots{margin-top:24px}
/* Top-nav frosted dark behavior'unun foto üzerinde net görünmesini garantile.
   (Default krem .top-nav backgroundu cache hijack'tan korumak için !important.) */
body.hero-dark.catering-page .top-nav:not(.scrolled){
  background:rgba(26,26,46,.42) !important;
  border-bottom-color:rgba(255,255,255,.08) !important;
}
@media (max-width:768px){
  .catering-hero--bare{padding-bottom:clamp(38px, 7vh, 64px)}
  .catering-hero--bare .carousel-dots{margin-top:18px}
}

/* Catering form — lacivert gradient + glass card (matches catering-hero) */
.catering-form-section{
  position:relative;z-index:1;
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 55%,#2d1b45 100%);
  padding:90px 0 120px;
  color:#fff;
}
.catering-form-section .eyebrow{color:var(--amarillo)}
.catering-form-section h2{color:#fff}
.catering-form-section h2 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.catering-form-section p{color:rgba(255,255,255,.88)}
.catering-form-section .reservation-card{
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  padding:clamp(28px,4vw,48px);
  box-shadow:0 22px 55px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.catering-form-section .reservation-card label{
  color:rgba(255,255,255,.85);font-weight:700;
}
.catering-form-section .reservation-card .form-control{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
}
.catering-form-section .reservation-card .form-control::placeholder{color:rgba(255,255,255,.5)}
.catering-form-section .reservation-card .form-control:focus{
  background:rgba(255,255,255,.14);
  border-color:var(--amarillo);
  box-shadow:0 0 0 3px rgba(255,196,0,.18);
  color:#fff;
}
.catering-form-section .reservation-card select.form-control option{
  background:#1a1a2e;color:#fff;
}
.catering-form-section .reservation-card .form-control:-webkit-autofill,
.catering-form-section .reservation-card .form-control:-webkit-autofill:hover,
.catering-form-section .reservation-card .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(26,26,46,.85) inset;
  caret-color:#fff;
}

@media (max-width:768px){
  .catering-form-section{padding:70px 0 90px}
  .catering-form-section .reservation-card{padding:28px}
}

/* ========== EVENTS PAGE ========== */
/* Events intro (merged into grid-section — shares the same Frida portrait bg) */
.events-intro{color:#fff;margin-bottom:clamp(40px,6vh,80px);position:relative;isolation:isolate}
.events-intro .eyebrow{color:var(--amarillo)}
.events-intro h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  font-weight:700;margin:.4rem 0;color:#fff;line-height:1.1;letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.events-intro h1 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.events-intro p{
  color:rgba(255,255,255,.92);max-width:580px;margin:1rem auto 0;
  font-size:var(--fs-body-lg);line-height:1.7;
}

.events-grid-section{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:#1a1a2e;
  padding:clamp(130px,16vh,180px) 0 120px;
}
.events-grid-section > .container{position:relative;z-index:2}
.events-grid-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--events-bg);
  background-size:cover;background-position:center 14.5%;
  background-attachment:fixed;background-repeat:no-repeat;
  opacity:.75;
}
/* Mobile: same 1200x1600 portrait as story page — cover crops to a zoomed face.
   Shrink + anchor top so the Kahlo image stays atmospheric, not overwhelming. */
@media (max-width:768px){
  .events-grid-section::before{
    background-size:130% auto;
    background-position:center top;
    background-attachment:scroll;
  }
}
@media (max-width:480px){
  .events-grid-section::before{
    background-size:160% auto;
  }
}
.events-grid-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.35) 0%,
    rgba(194,24,91,.22) 50%,
    rgba(26,26,46,.65) 100%);
}
.events-grid-section > .container{position:relative;z-index:2}
.events-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:28px;
}
.event-card{
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;overflow:hidden;
  box-shadow:
    0 22px 55px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .4s ease, background .3s ease, box-shadow .4s ease, border-color .3s ease;
  display:flex;flex-direction:column;
}
.event-card:hover{
  transform:translateY(-6px);
  background:rgba(255,248,225,0.22);
  border-color:rgba(255,255,255,.4);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.event-card-media{
  position:relative;aspect-ratio:4/3;overflow:hidden;
}
.event-card-media img,
.event-card-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease;
}
.event-card:hover .event-card-media img,
.event-card:hover .event-card-media video{transform:scale(1.06)}
.event-tag{
  position:absolute;bottom:14px;left:14px;
  background:rgba(26,26,46,.85);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.08em;
  padding:6px 12px;border-radius:50px;text-transform:uppercase;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.event-card-body{
  padding:28px 26px 32px;
  display:flex;flex-direction:column;gap:14px;flex:1;
}
.event-card-body h2{
  font-family:'Playfair Display',serif;
  font-size:1.5rem;color:#fff;margin:0;line-height:1.2;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
.event-card-body p{
  color:rgba(255,255,255,.88);line-height:1.7;margin:0;font-size:.94rem;flex:1;
}
.event-card-body .event-cta{
  align-self:flex-start;padding:.75rem 1.6rem;font-size:.78rem;
  display:inline-flex;align-items:center;gap:.45rem;
}
.event-card:hover .event-cta svg{transform:translateX(4px)}
.event-cta svg{transition:transform .3s ease}

.events-form-section{
  background:linear-gradient(135deg,#1a1a2e 0%,#16213e 55%,#2d1b45 100%);
  padding:90px 0 120px;
  scroll-margin-top:80px;
  color:#fff;
}
.events-form-header{margin-bottom:40px}
.events-form-header .eyebrow{color:var(--amarillo)}
.events-form-header h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,3.5vw,2.8rem);color:#fff;margin:.3em 0 .2em;line-height:1.15;
}
.events-form-header h2 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.events-form-header p{color:rgba(255,255,255,.88);line-height:1.6;margin:0;max-width:520px;margin-left:auto;margin-right:auto}
.events-form-section .reservation-card{
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  padding:clamp(28px,4vw,48px);
  box-shadow:0 22px 55px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.events-form-section .reservation-card label{
  color:rgba(255,255,255,.85);font-weight:700;
}
.events-form-section .reservation-card .form-control{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
}
.events-form-section .reservation-card .form-control::placeholder{color:rgba(255,255,255,.5)}
.events-form-section .reservation-card .form-control:focus{
  background:rgba(255,255,255,.14);
  border-color:var(--amarillo);
  box-shadow:0 0 0 3px rgba(255,196,0,.18);
  color:#fff;
}
.events-form-section .reservation-card select.form-control option{
  background:#1a1a2e;color:#fff;
}
.events-form-section .reservation-card .form-control:-webkit-autofill,
.events-form-section .reservation-card .form-control:-webkit-autofill:hover,
.events-form-section .reservation-card .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(26,26,46,.85) inset;
  caret-color:#fff;
}

@media (max-width:768px){
  .events-grid-section{padding:110px 0 100px}
  .events-intro{margin-bottom:40px}
  .events-grid-section::before{background-attachment:scroll}
  .events-grid{gap:22px}
  .event-card-body{padding:24px 22px 28px}
  .events-form-section{padding:70px 0 90px}
  .events-form-section .reservation-card{padding:28px}
}

/* "Compact" modifier — daha sıkı grid + sade arka plan + küçük kartlar.
   5 kart için 1200px+ ekranda tek satır; mobile'da auto-fit ile 1 col. */
.events-grid-section--compact{
  padding:clamp(70px, 9vh, 110px) 0 clamp(80px, 10vh, 110px);
}
.events-grid-section--compact::before,
.events-grid-section--compact::after{display:none}

.events-grid--compact{
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:18px;
}
.events-grid--compact .event-card{border-radius:18px}
.events-grid--compact .event-card-media{aspect-ratio:4/5}
.events-grid--compact .event-tag{
  font-size:.62rem;padding:5px 10px;
  bottom:10px;left:10px;
}
.events-grid--compact .event-card-body{
  padding:18px 18px 22px;gap:10px;
}
.events-grid--compact .event-card-body h2{
  font-size:clamp(1.15rem, 1.6vw, 1.4rem);
  line-height:1.2;margin:0;
}
.events-grid--compact .event-card-body p{
  font-size:.86rem;line-height:1.5;margin:0;
  color:rgba(255,255,255,.78);
}
.events-grid--compact .event-cta{
  font-size:.78rem;padding:.5rem 1rem;align-self:flex-start;
}
@media (max-width:1100px){
  .events-grid--compact{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))}
}
@media (max-width:768px){
  .events-grid--compact{grid-template-columns:1fr;gap:16px}
  .events-grid--compact .event-card-body{padding:16px 16px 20px}
}

/* ========== UNIFIED ENQUIRY TYPE SELECTOR (Catering / Private Event) ========== */
.enquiry-type-selector{
  border:none;padding:0;margin:0 0 8px;
}
.enquiry-type-selector legend{
  display:block;width:100%;font-size:.78rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amarillo);
  font-family:'Cabin',sans-serif;font-weight:600;margin-bottom:14px;padding:0;
}
.enquiry-type-selector > label{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.18);
  border-radius:10px;cursor:pointer;transition:all .25s ease;
  color:rgba(255,255,255,.86);font-weight:500;
  margin-bottom:10px;
}
.enquiry-type-selector > label:last-child{margin-bottom:0}
.enquiry-type-selector > label:hover{
  background:rgba(255,196,0,.06);
  border-color:rgba(255,196,0,.45);
  color:#fff;
}
.enquiry-type-selector input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);
  margin:0;cursor:pointer;position:relative;flex-shrink:0;
  transition:border-color .2s ease;background:transparent;
}
.enquiry-type-selector input[type="radio"]:checked{
  border-color:var(--amarillo);
}
.enquiry-type-selector input[type="radio"]:checked::after{
  content:"";position:absolute;inset:3px;border-radius:50%;
  background:var(--gradient-fiesta,linear-gradient(135deg,#e91e63 0%,#ff6d00 55%,#ffc400 100%));
}
.enquiry-type-selector input[type="radio"]:focus-visible{
  outline:2px solid var(--amarillo);outline-offset:3px;
}
.enquiry-type-selector > label:has(input:checked){
  background:linear-gradient(135deg,rgba(233,30,99,.10) 0%,rgba(255,109,0,.10) 55%,rgba(255,196,0,.12) 100%);
  border-color:var(--amarillo);
  color:#fff;
  box-shadow:0 4px 18px -8px rgba(255,196,0,.45);
}
.enquiry-type-selector > label small{
  color:rgba(255,255,255,.55);font-weight:400;font-size:.85em;margin-left:4px;
}
.enquiry-type-selector > label:has(input:checked) small{
  color:rgba(255,255,255,.78);
}
@media (min-width:540px){
  .enquiry-type-selector{display:flex;flex-direction:column;gap:10px}
  .enquiry-type-selector > label{margin-bottom:0}
}

/* ========== CONTACT PAGE ========== */
.contact-bg-section{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:#1a1a2e;
  padding:clamp(315px,37.5vh,473px) 0 clamp(80px,10vh,120px);
}
@media (max-width:768px){
  .contact-bg-section{padding-top:177px}
}
@media (max-width:480px){
  .contact-bg-section{padding-top:158px}
}
.contact-bg-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--contact-bg);
  background-size:cover;background-position:center 28%;
  background-attachment:fixed;background-repeat:no-repeat;
  opacity:.82;
  filter:saturate(110%) contrast(103%) brightness(92%);
}
/* Mobile: swap to portrait storefront photo (FRIDA Café & Bistro signage).
   Desktop unchanged. JS-driven --contact-parallax-y emulates fixed-attachment
   cross-device — bg appears pinned to viewport, hero + cards scroll past.
   `100% auto` size: image width = viewport width, height auto-aspect — full
   FRIDA signage visible without horizontal crop. */
@media (max-width:768px){
  .contact-bg-section::before{
    background-image:var(--contact-bg-mobile, var(--contact-bg));
    background-size:100% auto;
    background-position:center calc(0px + var(--contact-parallax-y, 0px));
    background-attachment:scroll;
  }
}
.contact-bg-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.38) 0%,
    rgba(194,24,91,.14) 55%,
    rgba(26,26,46,.78) 100%);
}
.contact-bg-section > .container{position:relative;z-index:2}

.contact-cards-section{padding:0 0 40px;background:transparent}
.contact-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
}
.contact-card{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  border-top:4px solid var(--amarillo);
  border-radius:22px;padding:40px 32px 36px;
  box-shadow:0 18px 50px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .35s ease, box-shadow .35s ease, background .35s ease;
  display:flex;flex-direction:column;
}
.contact-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.12);
  box-shadow:0 28px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.contact-card-icon{
  width:58px;height:58px;border-radius:16px;
  background:var(--gradient-fiesta);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:1.2rem;
  box-shadow:0 10px 24px rgba(233,30,99,.35);
}
.contact-card-icon svg{width:28px;height:28px}
.contact-card h3{
  font-family:'Playfair Display',serif;font-size:1.3rem;margin:0 0 .6rem;color:#fff;
}
.contact-card p{color:rgba(255,255,255,.78);line-height:1.8;margin:0 0 1.2rem;font-size:.95rem;flex:1}
.contact-card p a{color:#fff;text-decoration:none;font-weight:500;transition:.2s}
.contact-card p a:hover{color:var(--amarillo)}
.contact-card-link{
  color:var(--amarillo);text-decoration:none;font-weight:600;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;transition:.2s;
  align-self:flex-start;margin-top:auto;
}
.contact-card-link:hover{color:#fff;letter-spacing:.12em}

.contact-card-thumb{
  display:block;position:relative;
  margin:-40px -32px 22px;
  height:140px;overflow:hidden;
  border-radius:18px 18px 0 0;
  text-decoration:none;
}
.contact-card-thumb img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  transition:transform .5s ease;
}
.contact-card-thumb::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,26,46,0) 40%, rgba(26,26,46,.55) 100%);
  pointer-events:none;
}
.contact-card:hover .contact-card-thumb img{transform:scale(1.06)}
.contact-card-thumb__pin{
  position:absolute;right:14px;bottom:12px;
  background:var(--gradient-fiesta);color:#fff;
  padding:5px 12px;border-radius:30px;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  box-shadow:0 6px 16px rgba(233,30,99,.45);
  z-index:1;
}

.contact-layout{padding:40px 0 0;background:transparent}
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:stretch;
}
.contact-visual{
  position:relative;border-radius:24px;overflow:hidden;
  box-shadow:0 18px 50px rgba(26,26,46,.15);
}
.contact-visual-img{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:transform .8s ease;
}
.contact-visual:hover .contact-visual-img{transform:scale(1.05)}
.contact-visual-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,26,46,.1) 0%, rgba(26,26,46,.85) 70%, rgba(26,26,46,.95) 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:40px 36px;color:#fff;
}
.contact-visual-overlay .eyebrow{color:var(--amarillo);margin-bottom:.6rem}
.contact-visual-overlay h3{
  font-family:'Playfair Display',serif;font-size:2rem;margin:0 0 .6rem;color:#fff;
}
.contact-visual-overlay p{color:rgba(255,255,255,.85);margin:0 0 1.6rem;line-height:1.6}
.contact-social{display:flex;gap:.8rem;flex-wrap:wrap}
.contact-social a{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1.2rem;border:1.5px solid rgba(255,255,255,.4);border-radius:50px;
  font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;text-decoration:none;transition:.3s;
  backdrop-filter:blur(6px);
}
.contact-social a svg{width:16px;height:16px}
.contact-social a:hover{background:var(--gradient-fiesta);border-color:transparent;transform:translateY(-2px)}

.contact-form-wrap{
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(180%);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.18);
  border-top:4px solid var(--rosa);
  border-radius:24px;padding:48px 44px;
  box-shadow:0 22px 55px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.contact-form-wrap .eyebrow{color:var(--amarillo);display:block;margin-bottom:.5rem}
.contact-form-wrap h3{
  font-family:'Playfair Display',serif;font-size:1.8rem;margin:0 0 1.6rem;line-height:1.2;color:#fff;
}
.contact-form-wrap h3 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.contact-form-wrap .form-label{font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:.4rem}
.contact-form-wrap .form-control{
  border:1.5px solid rgba(255,255,255,.2);border-radius:12px;padding:.8rem 1rem;font-size:.95rem;
  transition:.3s;background:rgba(255,255,255,.08);color:#fff;
}
.contact-form-wrap .form-control::placeholder{color:rgba(255,255,255,.4)}
.contact-form-wrap .form-control:focus{border-color:var(--rosa);box-shadow:0 0 0 3px rgba(233,30,99,.2);background:rgba(255,255,255,.14);color:#fff}
/* ========== REVIEWS PAGE ========== */
.reviews-page{padding:100px 0 120px}
.reviews-highlight{text-align:center;margin-bottom:60px}
.rh-score{display:inline-flex;flex-direction:column;align-items:center;gap:.3rem}
.rh-number{
  font-family:'Playfair Display',serif;font-size:3.4rem;font-weight:700;line-height:1;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.rh-stars{font-size:1.6rem;color:var(--amarillo);letter-spacing:.15em}
.rh-score small{font-size:.82rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
}
.review-card{
  background:#fff;border-radius:20px;padding:36px;
  box-shadow:0 12px 36px rgba(26,26,46,.06);
  transition:transform .3s, box-shadow .3s;
}
.review-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(26,26,46,.1)}
.review-stars{color:var(--amarillo);font-size:1.1rem;letter-spacing:.1em;margin-bottom:1rem}
.review-card blockquote{
  font-family:'Playfair Display',serif;font-style:italic;font-size:1.02rem;
  color:var(--ink);line-height:1.7;margin:0 0 1.4rem;
}
.review-author strong{display:block;font-size:.92rem}
.review-author span{font-size:.8rem;color:var(--muted)}
.reviews-cta{margin-top:70px}
.reviews-cta p{color:var(--muted);font-size:1.05rem;margin-bottom:1.2rem}

@media (max-width:960px){
  .story-glass--values{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:50px}
  .contact-cards{grid-template-columns:1fr;gap:20px}
  .contact-visual{min-height:380px}
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-masonry{column-count:3;column-gap:16px}
}
@media (max-width:768px){
  .story-bg-section::before{background-attachment:scroll}
  .contact-bg-section::before{background-attachment:scroll}
  .story-glass--values{grid-template-columns:1fr;gap:24px}
  .story-glass--stats{grid-template-columns:1fr;gap:20px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .contact-form-wrap{padding:32px 24px}
  .contact-card{padding:32px 24px 28px}
  /* Heart of Camden card — tighter breathing room, smaller h3, pill social buttons that fit 3-across */
  .contact-visual{min-height:340px}
  .contact-visual-overlay{padding:36px 22px 28px}
  .contact-visual-overlay h3{font-size:1.5rem;margin-bottom:.4rem}
  .contact-visual-overlay p{font-size:.9rem;margin-bottom:1.1rem}
  .contact-social{gap:.4rem}
  .contact-social a{
    padding:.5rem .85rem;font-size:.72rem;letter-spacing:.06em;gap:.35rem;
    border-width:1px;
  }
  .contact-social a svg{width:14px;height:14px}
  .reviews-grid{grid-template-columns:1fr}
  .review-card{padding:24px}
  .gallery-masonry{column-count:2;column-gap:14px}
  .gallery-filter--hero{flex-wrap:wrap;gap:.4rem}
  .gallery-filter--hero button{padding:.5rem 1.1rem;font-size:.78rem}
}
@media (max-width:576px){
  .contact-grid{gap:24px}
  .reviews-grid{grid-template-columns:1fr}
  .rh-number{font-size:2.4rem}
  .gallery-filter--hero button{padding:.45rem .9rem;font-size:.72rem;min-height:38px}
  /* .gallery-hero-carousel .carousel-slide override silindi — home-only
     .gallery-hero--home rule'ları cascade'de doğru kazansın. */
  /* Hero h1 sizes now flow from --fs-hero clamp automatically */
  .footer-brand .social a{width:36px;height:36px}
  .footer-brand .social a svg{width:16px;height:16px}
  .top-nav .nav-menu{padding:12px 16px}
  .top-nav ul a{font-size:.85rem}
  .top-nav ul a.nav-cta{padding:.55rem 1rem;font-size:.75rem;width:100%;text-align:center}
  .video-player{max-width:calc(100vw - 32px)}
}

/* ================================================================= */
/* ========== RESERVATION PAGE — Frida BG + Glass Form ============= */
/* ================================================================= */
.reservation-bg-section{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:#1a1a2e;
  padding:clamp(180px,22vh,260px) 0 clamp(80px,10vh,120px);
}
@media (max-width:768px){
  .reservation-bg-section{padding-top:110px}
}
@media (max-width:480px){
  .reservation-bg-section{padding-top:95px}
}
.reservation-bg-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--reservation-bg);
  background-size:cover;background-position:center center;
  background-attachment:fixed;background-repeat:no-repeat;
  opacity:.58;
  filter:brightness(.7) saturate(1.05) contrast(1.02);
}
/* Mobile: swap to the desperados-mural photo (interior wall art with #Frida Camden
   text). Desktop view unchanged.
   - `auto 100vh` size: image height = viewport height, mural + text crisp.
   - JS-driven --reservation-parallax-y emulates fixed-attachment cross-device
     (iOS Safari ignores native CSS fixed). bg appears pinned to viewport, hero
     + card scroll past it.
   - Position center vertical with parallax offset → image's 50% point at viewport
     center → "#Frida Camden" text (~45-50% of image vertical) at viewport center. */
@media (max-width:768px){
  .reservation-bg-section::before{
    background-image:var(--reservation-bg-mobile, var(--reservation-bg));
    background-size:auto 100vh;
    background-position:center calc(0px + var(--reservation-parallax-y, 0px));
    background-attachment:scroll;
  }
}
.reservation-bg-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.42) 0%,
    rgba(26,26,46,.28) 40%,
    rgba(26,26,46,.55) 100%);
}
.reservation-bg-section > .container{position:relative;z-index:2}

body.reservation-page .reservation-card .lookup-input{
  height:58px;padding:.75rem 1.1rem;font-size:1rem;
  text-align:center;
}
body.reservation-page .reservation-card .lookup-input--pnr{
  font-family:'Playfair Display',serif;font-size:1.35rem;
  letter-spacing:.5em;text-transform:uppercase;
  padding-left:1.4rem;
}

.reservation-tabs{
  display:inline-flex;gap:4px;margin-top:28px;padding:4px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:40px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.reservation-tab{
  padding:10px 22px;border-radius:30px;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.8);text-decoration:none;
  font-weight:600;transition:.2s;white-space:nowrap;
}
.reservation-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.reservation-tab.is-active{
  background:var(--gradient-fiesta);color:#fff;
  box-shadow:0 6px 18px rgba(233,30,99,.35);
}
@media (max-width:520px){
  .reservation-tabs{flex-direction:column;border-radius:22px;width:100%}
  .reservation-tab{text-align:center}
}

.reservation-intro{
  color:#fff;max-width:680px;margin:0 auto 48px;
}
.reservation-intro .eyebrow{color:var(--amarillo)}
.reservation-intro h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  margin:.3rem 0 .8rem;color:#fff;line-height:1.1;letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.reservation-intro h1 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.reservation-intro p{
  color:rgba(255,255,255,.9);max-width:540px;margin:0 auto;
  font-size:var(--fs-body-lg);line-height:1.7;
}

/* ----- Form card (glass) + dark inputs ----- */
body.reservation-page .reservation-card{
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(14px) saturate(180%);
  -webkit-backdrop-filter:blur(14px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  border-radius:24px;
  padding:clamp(28px,4vw,48px);
  box-shadow:0 22px 55px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
body.reservation-page .reservation-card label{
  color:rgba(255,255,255,.85);font-weight:700;
}
body.reservation-page .reservation-card .form-control{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:2px solid rgba(255,255,255,.22);
}
body.reservation-page .reservation-card .form-control::placeholder{color:rgba(255,255,255,.5)}
body.reservation-page .reservation-card .form-control:focus{
  background:rgba(255,255,255,.14);
  border-color:var(--amarillo);
  box-shadow:0 0 0 3px rgba(255,196,0,.18);
  color:#fff;
}
body.reservation-page .reservation-card select.form-control option{
  background:#1a1a2e;color:#fff;
}
body.reservation-page .reservation-card .form-control:-webkit-autofill,
body.reservation-page .reservation-card .form-control:-webkit-autofill:hover,
body.reservation-page .reservation-card .form-control:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px rgba(26,26,46,.85) inset;
  caret-color:#fff;
}
/* Native date/time picker icon white on dark bg */
body.reservation-page .reservation-card input[type="date"]::-webkit-calendar-picker-indicator,
body.reservation-page .reservation-card input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.7);cursor:pointer;
}

/* ----- PNR result (glass variant) ----- */
body.reservation-page .pnr-result{
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.25);
  border-top:4px solid var(--amarillo);
  border-radius:24px;
  padding:clamp(32px,4vw,52px);
  color:#fff;
  box-shadow:0 22px 55px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
body.reservation-page .pnr-result .eyebrow{color:var(--amarillo)}
body.reservation-page .pnr-result h2{color:#fff}
body.reservation-page .pnr-result h2 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.reservation-page .pnr-result p,
body.reservation-page .pnr-result p.text-muted{color:#fff !important}
body.reservation-page .pnr-box{
  background:rgba(255,255,255,.06);
  border:2px dashed rgba(255,196,0,.55);
  border-radius:14px;
  padding:24px;margin:24px 0;
}
body.reservation-page .pnr-box small,
body.reservation-page .pnr-box small.text-muted{color:#fff !important}
body.reservation-page .pnr-meta{
  border-top:1px solid rgba(255,255,255,.25);
}
body.reservation-page .pnr-meta span{color:#fff;opacity:1}
body.reservation-page .pnr-meta strong{color:#fff}
/* Wide rows on the dark glass card — keep dashed divider visible on dark and
   render note in muted-ivory so the italic stays subtle but legible. */
body.reservation-page .pnr-meta__wide{border-top-color:rgba(255,255,255,.18)}
body.reservation-page .pnr-meta__note strong{color:rgba(255,255,255,.78)}
body.reservation-page .btn-ghost{color:#fff;border-color:rgba(255,255,255,.7)}
body.reservation-page .btn-ghost:hover{background:var(--rosa);border-color:var(--rosa);color:#fff}
body.reservation-page .alert-danger{
  background:rgba(220,53,69,.15);
  border:1px solid rgba(220,53,69,.4);
  color:#ffb3bb;
}
body.reservation-page .alert-warning{
  background:rgba(255,196,0,.12);
  border:1px solid rgba(255,196,0,.35);
  color:#ffe08a;
}

@media (max-width:768px){
  .reservation-bg-section::before{background-attachment:scroll}
}

/* ================================================================= */
/* ========== BLOG VARIANT 3 — NOCHES DE FRIDA (Cinematic) ========= */
/* ================================================================= */
.noches-hero{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:100vh;
  /* Cap on short screens so content + scroll hint never get cut off */
  min-height:max(520px, 100svh);
  display:flex;align-items:center;justify-content:center;
  color:#fff;text-align:center;
  background-color:#1a1a2e;
}
.noches-hero::before{
  content:"";position:absolute;inset:-20px;z-index:0;
  background-image:var(--noches-hero-bg);
  background-size:cover;background-position:center 20%;
  background-repeat:no-repeat;
  animation:nochesKenBurns 28s ease-in-out infinite alternate;
}
.noches-hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at center, rgba(26,26,46,.20) 0%, rgba(26,26,46,.55) 60%, rgba(26,26,46,.85) 100%),
    linear-gradient(180deg, rgba(26,26,46,.60) 0%, rgba(26,26,46,.10) 40%, rgba(26,26,46,.75) 100%);
}
.noches-hero-inner{
  position:relative;z-index:2;max-width:820px;padding:0 32px;
}
.noches-hero .eyebrow{color:var(--amarillo)}
.noches-hero h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero-xl);
  margin:.4rem 0 1rem;line-height:1.05;letter-spacing:-.02em;
  text-shadow:0 4px 40px rgba(0,0,0,.65);
}
.noches-hero h1 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.noches-hero p{
  color:rgba(255,255,255,.94);max-width:560px;margin:0 auto;
  font-size:var(--fs-body-lg);line-height:1.7;
}
.noches-scroll-hint{
  position:absolute;bottom:48px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:rgba(255,255,255,.75);z-index:2;
  animation:nochesBob 2s ease-in-out infinite;
}
.noches-scroll-hint em{
  font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;font-style:normal;font-weight:600;
}
.noches-scroll-hint svg line{
  animation:nochesDot 2s ease-in-out infinite;
}

@keyframes nochesKenBurns{
  0%  { transform:scale(1)   translate(0,0); }
  100%{ transform:scale(1.08) translate(-1%,-2%); }
}
@keyframes nochesBob{
  0%,100%{ transform:translate(-50%,0); }
  50%    { transform:translate(-50%,8px); }
}
@keyframes nochesDot{
  0%  { transform:translateY(0);   opacity:1; }
  60% { transform:translateY(4px); opacity:.2; }
  100%{ transform:translateY(0);   opacity:1; }
}

/* ----- Stream ----- */
.noches-stream{
  background:#0f0f1f;
}
.noches-block{
  position:relative;overflow:hidden;isolation:isolate;
  min-height:85vh;
  display:flex;align-items:center;
  padding:clamp(80px,10vh,140px) 0;
}
.noches-block-bg{
  content:"";position:absolute;inset:-10px;z-index:0;
  background-image:var(--block-bg);
  background-size:cover;background-position:center;
  background-attachment:fixed;background-repeat:no-repeat;
  transform:scale(1.02);
}
.noches-block-veil{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
}
.noches-block--left .noches-block-veil{
  background:linear-gradient(90deg,
    rgba(15,15,31,.92) 0%,
    rgba(15,15,31,.72) 40%,
    rgba(15,15,31,.25) 75%,
    rgba(15,15,31,.08) 100%);
}
.noches-block--right .noches-block-veil{
  background:linear-gradient(270deg,
    rgba(15,15,31,.92) 0%,
    rgba(15,15,31,.72) 40%,
    rgba(15,15,31,.25) 75%,
    rgba(15,15,31,.08) 100%);
}
.noches-block .container{position:relative;z-index:2;display:flex;width:100%}
.noches-block--left .container{justify-content:flex-start}
.noches-block--right .container{justify-content:flex-end}

.noches-card{
  max-width:540px;
  background:rgba(20,20,38,0.55);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:24px;
  padding:clamp(32px,4vw,52px);
  color:#fff;
  box-shadow:0 26px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.15);
  display:flex;flex-direction:column;gap:1rem;
}
.nb-cat{
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amarillo);font-weight:700;
}
.noches-card h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2rem,4vw,3.2rem);
  margin:0;line-height:1.1;letter-spacing:-.01em;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.nb-excerpt{
  color:rgba(255,255,255,.92);font-size:1.02rem;line-height:1.75;margin:0;
}
.nb-meta{
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
  font-size:.78rem;color:rgba(255,255,255,.70);
}
.nb-dot{opacity:.5}
.nb-cta{
  align-self:flex-start;margin-top:.4rem;
  display:inline-flex;align-items:center;gap:.55rem;
  color:#fff;font-weight:700;font-size:.92rem;
  padding:.85rem 1.6rem;border-radius:50px;
  border:2px solid rgba(255,255,255,.6);background:transparent;
  transition:all .3s ease;text-decoration:none;
}
.nb-cta:hover{
  background:var(--gradient-fiesta);border-color:transparent;
  transform:translateX(4px);
  box-shadow:0 12px 32px rgba(233,30,99,.35);
}

/* ----- Closing CTA ----- */
.noches-close{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#1a1a2e 0%,#2d1b45 100%);
  color:#fff;text-align:center;
  padding:clamp(80px,12vh,140px) 0;
}
.noches-close::before{
  content:"";position:absolute;top:-80px;left:-80px;
  width:300px;height:300px;background:var(--amarillo);
  opacity:.15;border-radius:50%;filter:blur(80px);
}
.noches-close::after{
  content:"";position:absolute;bottom:-120px;right:-100px;
  width:400px;height:400px;background:var(--rosa);
  opacity:.2;border-radius:50%;filter:blur(90px);
}
.noches-close .container{position:relative;z-index:1}
.noches-close .eyebrow{color:var(--amarillo)}
.noches-close h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.2rem,4vw,3.4rem);margin:.3rem 0 .9rem;color:#fff;line-height:1.1;
}
.noches-close h2 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.noches-close p{color:rgba(255,255,255,.88);margin:0 0 1.8rem;font-size:1.05rem}
.noches-cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

.noches-empty{
  background:#0f0f1f;color:rgba(255,255,255,.75);
  padding:120px 20px;text-align:center;
}
.noches-empty a{color:var(--amarillo);font-weight:600}

/* ----- Responsive ----- */
@media (max-width:960px){
  .noches-block{min-height:75vh;padding:70px 0}
  .noches-card{max-width:100%}
}
@media (max-width:768px){
  .noches-hero{min-height:80vh}
  .noches-hero::before{background-attachment:scroll}
  .noches-block-bg{background-attachment:scroll}
  .noches-scroll-hint{display:none}
  .noches-block--left .container,
  .noches-block--right .container{justify-content:center}
  .noches-block--left .noches-block-veil,
  .noches-block--right .noches-block-veil{
    background:linear-gradient(180deg, rgba(15,15,31,.40) 0%, rgba(15,15,31,.82) 70%, rgba(15,15,31,.92) 100%);
  }
}

@media (prefers-reduced-motion: reduce){
  .noches-hero::before{animation:none}
  .noches-scroll-hint{animation:none}
  .noches-scroll-hint svg line{animation:none}
  .noches-block-bg{background-attachment:scroll}
}

/* ================================================================= */
/* ========== BLOG VARIANT 2 — MESA ABIERTA (Living Feed) ========== */
/* ================================================================= */
.mesa-bg-section{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:#1a1a2e;
  padding:clamp(130px,16vh,180px) 0 clamp(80px,10vh,120px);
}
.mesa-bg-section::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--mesa-bg);
  background-size:cover;
  background-position:center calc(0px + var(--mesa-parallax-y, 0px));
  background-attachment:scroll;background-repeat:no-repeat;
  opacity:.82;
  filter:brightness(.55) saturate(.85) contrast(.95);
}
/* Mobile: yatay-uzun mural (1262x594) portrait viewport'ta `cover` ile aşırı
   ölçeklenip pixelize oluyordu. `auto 100vh` ile image height viewport-bound,
   width aspect-preserved — tam çözünürlükte. Position 62% Frida portresini
   viewport merkezine getirir. JS parallax (--mesa-parallax-y) ile bg viewport'a
   sabitlenmiş gibi davranır (story sayfasındaki pattern). */
@media (max-width:768px){
  .mesa-bg-section::before{
    background-size:auto 100vh;
    background-position:62% calc(0px + var(--mesa-parallax-y, 0px));
  }
}
/* Desktop: section çok uzun (hero + filter + cards = ~2000px), `cover` resmi
   3× büyütüp blur/pixelize ediyordu. `attachment:fixed` ile bg viewport'a
   sabitlenir → cover sadece viewport-yüksekliğini doldurur, zoom ~1.5×'a
   düşer. story/contact/reservation aynı pattern'i kullanıyor. */
@media (min-width:769px){
  .mesa-bg-section::before{
    background-attachment:fixed;
    background-position:center center;
  }
}
.mesa-bg-section::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(26,26,46,.55) 0%,
    rgba(26,26,46,.30) 40%,
    rgba(26,26,46,.75) 100%);
}
.mesa-bg-section > .container{position:relative;z-index:2}

/* ----- Hero block ----- */
.mesa-hero{color:#fff;max-width:760px;margin:0 auto 40px}
.mesa-hero .eyebrow{color:var(--amarillo)}
.mesa-hero h1{
  font-family:'Playfair Display',serif;
  font-size:var(--fs-hero);
  margin:.4rem 0 .8rem;color:#fff;line-height:1.1;letter-spacing:-.01em;
  text-shadow:0 2px 28px rgba(0,0,0,.55);
}
.mesa-hero h1 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mesa-hero p{
  color:rgba(255,255,255,.94);max-width:580px;margin:0 auto;
  font-size:var(--fs-body-lg);line-height:1.7;
}

/* ----- Filter chips ----- */
.mesa-filter{
  display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
  margin:0 0 48px;
}
.mesa-chip{
  background:rgba(255,248,225,0.12);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.25);
  color:#fff;padding:.6rem 1.3rem;border-radius:50px;
  font-size:.82rem;font-weight:600;letter-spacing:.05em;
  cursor:pointer;transition:all .25s ease;
  font-family:inherit;
}
.mesa-chip:hover{
  background:rgba(255,248,225,0.22);
  transform:translateY(-2px);
}
.mesa-chip.is-active{
  background:var(--gradient-fiesta);border-color:transparent;
  box-shadow:0 10px 26px rgba(233,30,99,.32);
}

/* ----- Grid (aligned rows, equal heights) ----- */
.mesa-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  margin-bottom:80px;
  align-items:stretch;
}
.mesa-card{
  display:flex;
  transition:opacity .3s ease;
}
.mc-link{
  display:flex;flex-direction:column;width:100%;
  text-decoration:none;color:inherit;
  background:rgba(255,248,225,0.14);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:22px;overflow:hidden;
  box-shadow:0 22px 55px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .45s ease, box-shadow .45s ease, border-color .3s ease;
}
.mc-link:hover{
  transform:translateY(-6px);
  border-color:rgba(255,255,255,.45);
  box-shadow:0 32px 68px rgba(0,0,0,.45);
}
.mesa-card.is-pick .mc-link{
  border-color:rgba(255,196,0,.55);
  box-shadow:0 22px 55px rgba(0,0,0,.4), 0 0 0 1px rgba(255,196,0,.3), inset 0 1px 0 rgba(255,255,255,.22);
}
.mc-cover{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;
}
.mc-cover img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s ease;
}
.mc-link:hover .mc-cover img{transform:scale(1.06)}
.mc-pill{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--amarillo);color:#1a1a2e;
  padding:.35rem .8rem;border-radius:50px;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
}
.mc-body{
  padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:.6rem;
  flex:1;
}
.mc-meta{margin-top:auto}
.mc-cat{
  font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--amarillo);font-weight:700;
}
.mesa-card h3{
  font-family:'Playfair Display',serif;
  font-size:1.28rem;line-height:1.25;margin:0;color:#fff;
}
.mc-excerpt{
  color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.65;margin:0;
}
.mc-tags{display:flex;flex-wrap:wrap;gap:.35rem}
.mc-tag{
  font-size:.7rem;color:rgba(255,255,255,.7);
  background:rgba(255,255,255,.08);padding:.2rem .55rem;border-radius:12px;
}
.mc-meta{
  font-size:.76rem;color:rgba(255,255,255,.7);
  display:flex;gap:.35rem;align-items:center;
  padding-top:.4rem;
}
.mc-dot{opacity:.5}

/* ----- Empty ----- */
.mesa-empty-msg{
  text-align:center;color:rgba(255,255,255,.78);padding:40px 20px;
  font-size:1rem;
}

/* ----- Footer CTA ----- */
.mesa-footer-cta{
  text-align:center;padding:56px 32px;
  background:rgba(255,248,225,0.12);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.28);
  border-radius:28px;color:#fff;
  box-shadow:0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  margin-top:20px;
}
.mesa-footer-cta .eyebrow{color:var(--amarillo)}
.mesa-footer-cta h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.8rem,3vw,2.6rem);margin:.3rem 0 .8rem;color:#fff;
}
.mesa-footer-cta h2 em{
  font-style:italic;
  background:var(--gradient-fiesta);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mesa-footer-cta p{color:rgba(255,255,255,.88);margin:0 0 1.6rem}
.mesa-cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn-ghost--light{
  color:#fff;border-color:rgba(255,255,255,.6);
}
.btn-ghost--light:hover{background:rgba(255,255,255,.14);color:#fff}

/* ----- Responsive ----- */
@media (max-width:960px){
  .mesa-grid{grid-template-columns:repeat(2,1fr);gap:22px}
}
@media (max-width:768px){
  .mesa-grid{grid-template-columns:1fr;gap:22px}
}

/* ========== RESPONSIVE POLISH (Faz 3) ========== */

/* Home carousel slide: prevent vertical compression on narrow viewports */
@media (max-width:768px){
  .hero-carousel .slide,
  .gallery-hero-carousel .slide{min-height:260px}
}

/* Unified hero scale handles all sizes via clamp — no page-specific overrides needed */

/* Events card CTA "Enquire →" — keep arrow glued to label even when wrap occurs */
.event-card .btn-gold,
.event-card .btn-outline{display:inline-flex;align-items:center;gap:6px;flex-wrap:nowrap}
.event-card .btn-gold svg,
.event-card .btn-outline svg{flex-shrink:0}

/* Reservation card mobile floor */
@media (max-width:480px){
  .reservation-card{padding:clamp(24px,5vw,40px)}
}

/* Noches cards: stop 540px overflow on 576-768px viewports */
@media (max-width:991px){
  .noches-card{max-width:min(540px,92vw)}
}

/* Contact cards mobile padding */
@media (max-width:480px){
  .contact-card{padding:clamp(20px,4vw,28px)}
  .contact-visual{min-height:260px}
}

/* Reviews card padding fluid */
.review-card{padding:clamp(20px,4vw,36px)}

/* Legal (privacy / terms) prose — readable hierarchy on mobile */
.legal-page h2{font-size:clamp(1.2rem,3vw,1.6rem);margin-top:2rem}
.legal-page h3{font-size:clamp(1.05rem,2.5vw,1.2rem)}
.legal-page p,.legal-page li{line-height:1.7}
@media (max-width:480px){
  .legal-page{padding:0 4px}
}

/* ========== HERO TITLE BLOCK — SHADOW POOL ========== */
/* Tüm başlık bloğunun (eyebrow + h1 + p) arkasına düşen soft oval havuz.
   h1'in display/layout'una dokunmaz; sadece wrapper'a pseudo-element ekler. */
.menu-intro,
.reservation-intro,
.gallery-hero-top,
.catering-hero-text,
.events-intro,
.noches-hero-inner{
  position:relative;
  isolation:isolate;
}
.menu-intro::after,
.reservation-intro::after,
.gallery-hero-top::after,
.catering-hero-text::after,
.events-intro::after,
.noches-hero-inner::after{
  content:"";
  position:absolute;
  inset:-4% 22%;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.42) 42%,
    rgba(0,0,0,0) 72%);
  filter:blur(18px);
  z-index:-1;
  pointer-events:none;
}
/* Menu-intro has heavy top padding (clamp 112-168px) so "Menu" h1 sits in
   the lower half of the box; shift the pool's radial center down so it
   sits directly behind the headline rather than floating above it. */
.menu-intro::after{
  background:radial-gradient(ellipse at 50% 78%,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.42) 42%,
    rgba(0,0,0,0) 72%);
}
/* Catering — busy bg needs a stronger central pool */
.catering-hero-text::after{
  filter:blur(10px);
  inset:-6% 18%;
  background:radial-gradient(ellipse at center,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.72) 35%,
    rgba(0,0,0,.45) 58%,
    rgba(0,0,0,0) 78%);
}
/* Gallery — two pools: "Beauty is" (upper-center) + "served." (right-aligned em, lower-right).
   Needs to stay legible across changing hero carousel slides (food, drinks, interior) and the
   "served" em is shifted far right via padding-left so pool #2 sits further right + wider. */
.gallery-hero-top::after{
  filter:blur(14px);
  inset:-10% -4%;
  background:
    radial-gradient(ellipse 44% 56% at 38% 28%,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.78) 38%, rgba(0,0,0,.42) 62%, rgba(0,0,0,0) 82%),
    radial-gradient(ellipse 54% 52% at 76% 76%,
      rgba(0,0,0,.95) 0%, rgba(0,0,0,.80) 42%, rgba(0,0,0,.46) 65%, rgba(0,0,0,0) 84%);
}
/* On narrow viewports the pool can stay a little wider so text stays covered */
@media (max-width:768px){
  .menu-intro::after,
  .reservation-intro::after,
  .gallery-hero-top::after,
  .catering-hero-text::after,
  .events-intro::after,
  .noches-hero-inner::after{inset:-5% 8%}
}

/* ========== BLOG SUBSCRIBE CTA (Phase 5 continued) ========== */
.blog-subscribe-cta{
  position:relative;margin:90px 0 60px;padding:72px 24px 80px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255,196,0,.15), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(233,30,99,.12), transparent 50%),
    linear-gradient(180deg, #fff8e1 0%, #fff3d6 100%);
  overflow:hidden;
}
.blog-subscribe-cta::before{
  content:'';position:absolute;inset:0;
  background-image:url('../assets/email/spring-flowers-bg.jpg');
  background-size:cover;background-position:center;opacity:.08;pointer-events:none;
}
.blog-subscribe-cta .container{position:relative;max-width:640px}
.blog-subscribe-cta .eyebrow{
  display:inline-block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:#e91e63;font-weight:700;margin-bottom:10px;
}
.blog-subscribe-cta h2{
  font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.85rem,4vw,2.6rem);
  font-weight:600;color:#1a1a2e;margin:0 0 14px;line-height:1.15;
}
.blog-subscribe-cta h2 em{
  font-style:italic;background:linear-gradient(135deg,#e91e63 0%,#ff6d00 55%,#ffc400 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.blog-subscribe-cta p{
  color:#4b3a2b;font-size:1rem;line-height:1.55;margin:0 auto 26px;max-width:480px;
}
.blog-subscribe-cta form{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:540px;margin:0 auto;
}
.blog-subscribe-cta input[type="email"],
.blog-subscribe-cta input[type="text"]:not([name="website"]){
  flex:1 1 200px;min-width:0;padding:14px 18px;border:1.5px solid rgba(233,30,99,.2);
  border-radius:30px;font-size:.95rem;font-family:inherit;background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.blog-subscribe-cta input:focus{
  outline:none;border-color:#e91e63;box-shadow:0 0 0 3px rgba(233,30,99,.12);
}
.blog-subscribe-cta button{
  padding:14px 32px;border:none;border-radius:30px;cursor:pointer;
  background:linear-gradient(135deg,#e91e63 0%,#ff6d00 55%,#ffc400 100%);
  color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  font-size:.85rem;transition:transform .15s,box-shadow .15s;
  box-shadow:0 6px 20px rgba(233,30,99,.25);
}
.blog-subscribe-cta button:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(233,30,99,.35)}
/* Top-of-page subscribe feedback toast — injected by js/app.js on page load
   when ?subscribed=1 or ?subscribe_error=... is in the URL. */
.subscribe-toast{
  position:fixed;
  top:max(60px, calc(var(--top-nav-height, 72px) + 12px));
  left:50%;transform:translateX(-50%);
  z-index:9998;
  min-width:280px;max-width:min(92vw, 520px);
  padding:14px 48px 14px 20px;
  border-radius:14px;
  font-size:.95rem;line-height:1.45;font-weight:500;
  color:#fff;
  background:var(--gradient-fiesta);
  box-shadow:0 18px 48px rgba(26,26,46,.35);
  display:flex;align-items:center;gap:12px;
  opacity:0;animation:toastDown .35s ease forwards;
}
.subscribe-toast--err{
  background:linear-gradient(135deg,#c2185b 0%, #880e4f 100%);
}
.subscribe-toast .toast-close{
  position:absolute;top:8px;right:10px;
  background:transparent;border:0;color:#fff;
  width:32px;height:32px;border-radius:50%;
  font-size:1.25rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:.75;
}
.subscribe-toast .toast-close:hover{opacity:1;background:rgba(255,255,255,.15)}
.subscribe-toast.is-leaving{animation:toastUp .35s ease forwards}
@keyframes toastDown{
  from{opacity:0;transform:translate(-50%, -24px)}
  to  {opacity:1;transform:translate(-50%, 0)}
}
@keyframes toastUp{
  from{opacity:1;transform:translate(-50%, 0)}
  to  {opacity:0;transform:translate(-50%, -24px)}
}
@media (max-width:480px){
  .subscribe-toast{top:68px;padding:12px 42px 12px 16px;font-size:.88rem}
}
@media (max-width:640px){
  .blog-subscribe-cta{padding:48px 18px 56px;margin:60px 0 40px}
  .blog-subscribe-cta form{flex-direction:column;gap:8px}
  /* flex:1 1 200px on column-direction flex makes "basis" the VERTICAL axis
     → each input was pulling a 200px+ minimum height. Reset to auto height. */
  .blog-subscribe-cta input[type="email"],
  .blog-subscribe-cta input[type="text"]:not([name="website"]){
    flex:0 0 auto;width:100%;
  }
  .blog-subscribe-cta button{flex:0 0 auto;width:100%}
}

/* ========== NEWSLETTER OPT-IN (Phase 5) ========== */
/* Default (light contexts) — subtle rosa-tinted glass card; inherits text color from parent */
.newsletter-optin{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;margin:8px 0;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(233,30,99,.22);
  border-radius:10px;cursor:pointer;
  font-size:.86rem;line-height:1.5;
  color:inherit;
  transition:background .15s,border-color .15s;
}
.newsletter-optin:hover{
  background:rgba(233,30,99,.06);
  border-color:rgba(233,30,99,.4);
}
.newsletter-optin input[type="checkbox"]{
  flex:0 0 auto;margin-top:2px;
  width:18px;height:18px;accent-color:#e91e63;cursor:pointer;
}
.newsletter-optin span{flex:1;font-weight:500}
/* Dark-bg contexts (hero-dark body + glass form sections) — whiter stroke, cream text */
body.hero-dark .newsletter-optin,
.reservation-bg-section .newsletter-optin,
.catering-form-section .newsletter-optin,
.events-form-section .newsletter-optin,
.contact-bg-section .newsletter-optin{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
  color:#e8dcca;
}
body.hero-dark .newsletter-optin:hover,
.reservation-bg-section .newsletter-optin:hover,
.catering-form-section .newsletter-optin:hover,
.events-form-section .newsletter-optin:hover,
.contact-bg-section .newsletter-optin:hover{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,196,0,.4);
}

/* ============================================================ */
/* RESERVATION LOOKUP — change/cancel actions + modals          */
/* (oturum 30, 2026-04-28). Mobile-first; ≥540px = side-by-side */
/* ============================================================ */

/* Flash banner above the form (?cancelled=1 / ?change=submitted / ?err=...) */
.lookup-flash{
  display:flex; align-items:center; justify-content:space-between; gap:.8rem;
  margin:0 auto 1.6rem; padding:.95rem 1.1rem;
  max-width:760px; border-radius:14px;
  font-size:.95rem; line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  animation:lookupFlashIn .35s ease-out;
}
.lookup-flash--success{
  background:linear-gradient(135deg,#1f4d4a 0%,#2d6e69 100%);
  color:#fff;
  border:1px solid rgba(232,181,71,.35);
}
.lookup-flash--error{
  background:linear-gradient(135deg,#a53d1b 0%,#d85a30 100%);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
}
.lookup-flash-close{
  background:transparent; border:none; color:inherit;
  font-size:1.5rem; line-height:1; cursor:pointer; padding:0 .3rem;
  opacity:.85;
}
.lookup-flash-close:hover{ opacity:1; }
@keyframes lookupFlashIn{
  from{ transform:translateY(-8px); opacity:0 }
  to  { transform:translateY(0); opacity:1 }
}

/* Pending request banner inside .pnr-result */
.pnr-pending-request{
  margin-top:1.4rem; padding:1rem 1.15rem;
  background:rgba(31,77,74,.08);
  border:1px solid rgba(31,77,74,.22);
  border-left:3px solid #1f4d4a;
  border-radius:10px;
  font-size:.92rem; line-height:1.55;
}
.pnr-pending-request strong{ color:#1f4d4a; }
.pnr-pending-meta{ color:var(--muted,#6b5d50); margin-left:.25rem; }
.pnr-pending-request p{ margin:.4rem 0 0; color:var(--muted,#6b5d50); font-size:.88rem; }

/* Action buttons row — mobile: stacked full-width, desktop: side-by-side */
.pnr-actions{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-top:1.6rem; padding-top:1.4rem;
  border-top:1px solid var(--line, #E0C39E);
}
.btn-pnr{
  flex:1 1 100%;
  min-height:48px;
  padding:.85rem 1.1rem;
  border-radius:50px;
  font-weight:600; font-size:.85rem; letter-spacing:.05em; text-transform:uppercase;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  cursor:pointer;
  font-family:inherit;
}
.btn-pnr svg{ flex:none; }
.btn-pnr:hover{ transform:translateY(-1px); }
.btn-pnr:active{ transform:translateY(0); }
.btn-pnr-primary{
  background:var(--gradient-fiesta);
  color:#fff;
  border:none;
  box-shadow:0 8px 22px rgba(216,90,48,.30);
}
.btn-pnr-primary:hover{ box-shadow:0 12px 28px rgba(216,90,48,.42); }
.btn-pnr-ghost{
  background:transparent;
  color:#A53D1B;
  border:1.5px solid rgba(165,61,27,.55);
}
.btn-pnr-ghost:hover{ background:rgba(216,90,48,.08); border-color:#A53D1B; }
.btn-pnr-ghost-soft{
  background:transparent;
  color:var(--ink-2,#2A2520);
  border:1.5px solid var(--line,#E0C39E);
}
.btn-pnr-ghost-soft:hover{ background:rgba(0,0,0,.04); }
.btn-pnr-danger{
  background:linear-gradient(135deg,#A53D1B 0%,#D85A30 100%);
  color:#fff;
  border:none;
  box-shadow:0 8px 22px rgba(165,61,27,.30);
}
.btn-pnr-danger:hover{ box-shadow:0 12px 28px rgba(165,61,27,.42); }

@media (min-width:540px){
  .btn-pnr{ flex:1 1 auto; min-width:200px; }
}

/* Soft note + call-us callouts */
.pnr-callus,
.pnr-note-soft{
  margin-top:1.2rem; padding:.9rem 1.1rem;
  background:rgba(232,181,71,.10);
  border-left:3px solid #E8B547;
  border-radius:8px;
  font-size:.92rem; line-height:1.55;
  color:var(--ink-2,#2A2520);
}
.pnr-callus a, .pnr-note-soft a{
  color:#A53D1B; font-weight:600; border-bottom:1px solid rgba(165,61,27,.4);
  text-decoration:none;
}
.pnr-callus a:hover, .pnr-note-soft a:hover{
  color:#D85A30; border-bottom-color:#D85A30;
}

/* ============================================================ */
/* Modal — mobile: full-screen sheet; ≥540px: centered card     */
/* ============================================================ */
.lookup-modal{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:flex-end; justify-content:center;
  padding:0;
  background:rgba(26,23,20,.65);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.lookup-modal[aria-hidden="false"]{ display:flex; }
.lookup-modal-card{
  position:relative;
  width:100%;
  max-height:96vh; overflow-y:auto;
  background:#fff;
  padding:28px 22px 24px;
  border-radius:22px 22px 0 0;
  box-shadow:0 -20px 50px rgba(26,23,20,.4);
  animation:lookupModalIn .3s ease-out;
}
@keyframes lookupModalIn{
  from{ transform:translateY(20px); opacity:0 }
  to  { transform:translateY(0); opacity:1 }
}
.lookup-modal-card h3{
  font-family:'Playfair Display', serif;
  font-size:1.4rem; margin:0 0 .5rem; color:var(--ink,#1A1714);
}
.lookup-modal-card p{
  margin:0 0 1.2rem; color:var(--muted,#6b5d50); line-height:1.55;
}
.lookup-modal-sub{ font-size:.93rem; }
.lookup-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px;
  background:rgba(0,0,0,.05); border:none; border-radius:50%;
  font-size:1.4rem; line-height:1; color:var(--ink,#1A1714);
  cursor:pointer; transition:background .18s ease;
}
.lookup-modal-close:hover{ background:rgba(0,0,0,.10); }
.lookup-modal-form .form-group{ margin-bottom:1rem; }
.lookup-modal-form label{
  display:block;
  font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted,#6b5d50); margin-bottom:.4rem;
}
.lookup-modal-form .form-control{
  width:100%; padding:.7rem .9rem;
  border:1.5px solid var(--line,#E0C39E); border-radius:10px;
  font-size:.95rem; background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.lookup-modal-form .form-control:focus{
  outline:none; border-color:#D85A30;
  box-shadow:0 0 0 3px rgba(216,90,48,.15);
}
.lookup-modal-form textarea.form-control{ resize:vertical; min-height:80px; font-family:inherit; }
.lookup-modal-form .form-grid{
  display:grid; grid-template-columns:1fr; gap:.85rem 1rem;
  margin-bottom:.4rem;
}
.lookup-modal-hint{
  margin:.4rem 0 .8rem; padding:.55rem .8rem;
  background:rgba(216,90,48,.10); border-left:3px solid #D85A30;
  border-radius:6px;
  color:#A53D1B; font-size:.85rem; font-weight:500;
}
.lookup-modal-actions{
  display:flex; flex-direction:column-reverse; gap:.55rem;
  margin-top:1.4rem; padding-top:1rem;
  border-top:1px solid rgba(0,0,0,.06);
}
.lookup-modal-actions .btn-pnr{ flex:1 1 100%; }

@media (min-width:540px){
  .lookup-modal{
    align-items:center;
    padding:24px;
  }
  .lookup-modal-card{
    max-width:520px;
    max-height:calc(100vh - 48px);
    border-radius:20px;
    padding:34px 32px 28px;
    box-shadow:0 30px 70px rgba(26,23,20,.5);
  }
  .lookup-modal-form .form-grid{ grid-template-columns:1fr 1fr; }
  .lookup-modal-actions{
    flex-direction:row; justify-content:flex-end;
  }
  .lookup-modal-actions .btn-pnr{ flex:0 1 auto; min-width:160px; }
}

/* Body scroll lock when modal open (set by JS) */
body.lookup-modal-open{ overflow:hidden; }

/* Result-card 1-line rules summary, sits above .pnr-actions.
   Owns the divider line; .pnr-actions's own border-top is suppressed
   when this line is present so we don't get a double rule. */
.pnr-rules-line{
  margin:1.6rem 0 .9rem;
  padding-top:1.4rem;
  font-size:.85rem;
  line-height:1.5;
  color:var(--muted, #6b5d50);
  text-align:center;
  border-top:1px solid var(--line, #E0C39E);
}
.pnr-rules-line + .pnr-actions{
  margin-top:0;
  padding-top:0;
  border-top:none;
}

/* Microcopy under form fields (modal time + party size hints). */
.form-help{
  display:block;
  margin-top:.45rem;
  font-size:.78rem;
  line-height:1.5;
  color:var(--muted, #6b5d50);
}

/* ============================================================ */
/* Lookup page (body.reservation-page) text-on-glass overrides  */
/* — base styles assume light card, but the V1 cascade renders */
/*    .pnr-result as a dark glass card; force light text here. */
/* ============================================================ */
body.reservation-page .pnr-rules-line{
  color:rgba(255,255,255,.78);
  border-top-color:rgba(255,255,255,.22);
}
body.reservation-page .pnr-pending-request{
  background:rgba(31,77,74,.28);
  border:1px solid rgba(232,181,71,.35);
  border-left:3px solid var(--amarillo, #E8B547);
  color:rgba(255,255,255,.92);
}
body.reservation-page .pnr-pending-request strong{ color:var(--amarillo, #E8B547); }
body.reservation-page .pnr-pending-request p{ color:rgba(255,255,255,.78); }
body.reservation-page .pnr-pending-meta{ color:rgba(255,255,255,.62); }

body.reservation-page .pnr-callus,
body.reservation-page .pnr-note-soft{
  background:rgba(232,181,71,.14);
  border-left-color:var(--amarillo, #E8B547);
  color:rgba(255,255,255,.92) !important;
}
body.reservation-page .pnr-callus a,
body.reservation-page .pnr-note-soft a{
  color:var(--amarillo, #E8B547);
  border-bottom-color:rgba(232,181,71,.55);
}
body.reservation-page .pnr-callus a:hover,
body.reservation-page .pnr-note-soft a:hover{
  color:#FAF6EE;
  border-bottom-color:#FAF6EE;
}

body.reservation-page .pnr-actions{ border-top-color:rgba(255,255,255,.22); }

/* Phone numbers (and any long unbroken value) need to wrap inside the
   narrow 2-col mobile meta grid — without this they overflow the cell. */
.pnr-meta strong{
  word-break:break-word;
  overflow-wrap:anywhere;
}

/* Modal `.form-help` lives on a white card (light bg) — keep its muted
   gray color even under body.reservation-page (no override needed,
   .lookup-modal-card has explicit white background). */

/* Native select needs explicit arrow when we restyle the border/bg
   (custom border-radius overrides default picker on Chrome/Safari). */
.lookup-modal-form select.form-control{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  padding-right:2.4rem;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b5d50' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;
  background-position:right .9rem center;
  background-size:12px 12px;
  cursor:pointer;
}

/* iOS Safari auto-zooms when input font-size < 16px. The modal form uses
   .95rem (~15.2px) which triggers it; bump to 16px on phones. Other forms
   on the site are already ≥16px so they don't need this. */
@media (max-width:640px){
  .lookup-modal-form .form-control{
    font-size:16px;
  }
  /* .reservation-card desktop padding 48px is cramped on phones — reduce. */
  .reservation-card{
    padding:28px 22px;
  }
  /* .pnr-result + new content stack (rules-line, pending banner, actions,
     callouts, meta grid) needs a bit more breathing room on small screens. */
  .pnr-result{ padding:32px 20px 28px; }
  .pnr-rules-line{ font-size:.82rem; padding-top:1.2rem; margin:1.3rem 0 .7rem; }
}

@media (max-width:380px){
  .lookup-modal-card{ padding:24px 18px 20px; }
  .lookup-modal-card h3{ font-size:1.25rem; }
  .reservation-card{ padding:22px 16px; }
}