/* Song Fang Klong — warm riverside refinement layer
   Loaded after the legacy theme rules so the visual system stays consistent. */

:root {
  --cream: #f4efe6;
  --cream-soft: #ede5d9;
  --cream-bright: #fffaf2;
  --wood: #8b5a2b;
  --wood-deep: #67411f;
  --wood-soft: #b47a42;
  --gold-warm: #c89b55;
  --olive: #4a5d4e;
  --olive-deep: #344337;
  --ink: #2b251f;
  --ink-soft: #5f554b;
  --line-warm: rgba(139, 90, 43, 0.18);
  --shadow-warm: 0 18px 44px rgba(73, 50, 31, 0.12);
  --shadow-card: 0 10px 30px rgba(73, 50, 31, 0.1);

  --navy-deep: var(--olive-deep);
  --navy-dark: #2b342c;
  --navy-soft: #536557;
  --gold-accent: var(--wood);
  --gold-champagne: var(--wood);
  --gold-radiant: var(--gold-warm);
  --gold-hover: var(--gold-warm);
  --beige-warm: var(--cream);
  --beige-card: var(--cream-bright);
  --beige-soft: var(--cream-soft);
  --charcoal: var(--ink);
  --text-primary: var(--ink);
  --text-body: #493f35;
  --text-muted: #72675c;
  --text-light-muted: #8c8073;
  --glass-bg: rgba(52, 67, 55, 0.92);
  --glass-border: rgba(200, 155, 85, 0.42);
  --shadow-soft: var(--shadow-card);
  --shadow-luxury: var(--shadow-warm);
  --shadow-gold: 0 12px 28px rgba(139, 90, 43, 0.22);

  /* Typography roles: Thai reading, Thai display, and a single numeric face. */
  --font-sans-th: 'Noto Sans Thai', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif-th: 'Noto Serif Thai', 'Cormorant Garamond', Georgia, serif;
  --font-numeric: 'Plus Jakarta Sans', 'Noto Sans Thai', system-ui, sans-serif;

  /* Bootstrap/legacy theme tokens */
  --background-color: var(--cream);
  --default-color: var(--text-body);
  --heading-color: var(--ink);
  --accent-color: var(--wood);
  --surface-color: var(--cream-bright);
  --contrast-color: var(--cream-bright);
  --nav-color: var(--wood-deep);
  --nav-hover-color: var(--olive);
  --nav-mobile-background-color: var(--cream-bright);
  --nav-dropdown-background-color: var(--cream-bright);
  --nav-dropdown-color: var(--wood-deep);
  --nav-dropdown-hover-color: var(--olive);
}

[data-theme="dark"] {
  --cream: #211d18;
  --cream-soft: #2c251e;
  --cream-bright: #332a21;
  --wood: #c38b4d;
  --wood-deep: #e1b878;
  --wood-soft: #d09b5a;
  --gold-warm: #dfbb78;
  --olive: #809582;
  --olive-deep: #27332a;
  --ink: #fff8ed;
  --ink-soft: #ded2c2;
  --line-warm: rgba(225, 184, 120, 0.24);
  --text-primary: #fff8ed;
  --text-body: #eee4d6;
  --text-muted: #c9bdad;
  --text-light-muted: #ae9f8d;
  --beige-warm: var(--cream);
  --beige-card: var(--cream-bright);
  --beige-soft: var(--cream-soft);
  --charcoal: #171410;
  --glass-bg: rgba(39, 51, 42, 0.95);
  --glass-border: rgba(225, 184, 120, 0.3);
  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.28);
  --shadow-luxury: 0 24px 56px rgba(0, 0, 0, 0.34);
  --background-color: var(--cream);
  --default-color: var(--text-body);
  --heading-color: var(--ink);
  --accent-color: var(--wood);
  --surface-color: var(--cream-bright);
  --contrast-color: var(--cream-bright);
  --nav-color: var(--wood-deep);
  --nav-hover-color: var(--wood-soft);
  --nav-mobile-background-color: var(--cream-bright);
  --nav-dropdown-background-color: var(--cream-bright);
  --nav-dropdown-color: var(--text-body);
  --nav-dropdown-hover-color: var(--wood-deep);
}

html { scroll-behavior: smooth; }

body {
  background: var(--cream) !important;
  color: var(--text-body) !important;
  font-family: var(--font-sans-th) !important;
  line-height: 1.75;
}

button, input, select, textarea { font-family: inherit; }

h1, h2, h3, h4, h5, h6,
.serif-font, .dish-serif {
  font-family: var(--font-sans-th) !important;
}

.quote-box-luxury { font-family: var(--font-sans-th) !important; }

/* One consistent numeric face for prices, dates, times, phone numbers and stats. */
.numeric-font,
.story-caption-index,
.story-step-kicker,
.story-highlight-item strong,
.dish-price-badge,
.dish-price-text,
#dishModalPrice,
#promotions .promo-content .fs-4,
input[type='date'],
input[type='time'],
input[type='number'],
input[type='tel'],
.hero-booking-bar input,
.hero-booking-bar select,
#reservation-form input,
#reservation-form select {
  font-family: var(--font-numeric) !important;
  font-variant-numeric: lining-nums tabular-nums;
}

section,
.section,
.section-padding { background-color: var(--cream) !important; }

.bg-soft-custom {
  background: var(--cream-soft) !important;
}

h1, h2, h3, h4, h5, h6,
.serif-font { color: var(--text-primary); }

p, .text-body { color: var(--text-body); }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-body) !important; }
.text-warning, .text-gold { color: var(--wood) !important; }
.bg-warning, .badge.bg-warning { background-color: var(--wood) !important; color: var(--cream-bright) !important; }

.subtitle-luxury {
  color: var(--wood) !important;
  letter-spacing: 0.18em;
  font-weight: 700;
}

.gold-line {
  background: linear-gradient(90deg, var(--gold-warm), transparent) !important;
}

/* Navigation: olive glass over the hero, cream surface after the first scroll. */
.navbar-luxury {
  background: linear-gradient(180deg, rgba(39, 51, 42, 0.96), rgba(52, 67, 55, 0.78)) !important;
  border-bottom: 1px solid rgba(225, 184, 120, 0.22) !important;
  box-shadow: 0 10px 28px rgba(43, 37, 31, 0.12) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transform: translateY(-16px);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity, background, padding;
  transition: transform 0.56s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.32s ease-out, background 0.45s ease, padding 0.45s ease,
    box-shadow 0.45s ease !important;
  min-height: 76px !important;
  padding-top: 0.85rem !important;
  padding-bottom: 0.85rem !important;
}

.navbar-luxury.navbar-entered {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.navbar-luxury::after,
.navbar-luxury.scrolled::after {
  background: linear-gradient(to bottom, rgba(52, 67, 55, 0.26), transparent) !important;
  filter: blur(14px);
}

.navbar-luxury .nav-link,
.navbar-luxury .navbar-brand .text-light,
.navbar-luxury .navbar-toggler { color: var(--cream-bright) !important; }

.navbar-luxury .nav-link,
.btn-gold-luxury,
.btn-outline-gold,
.theme-switch-btn {
  transition: color 0.28s ease, background 0.36s ease,
    border-color 0.36s ease, box-shadow 0.36s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.navbar-luxury .nav-link:hover,
.navbar-luxury .nav-link:focus,
.navbar-luxury .nav-link:focus-visible,
.navbar-luxury .nav-link.active {
  color: #f2d39c !important;
  border-bottom-color: var(--gold-warm) !important;
}

.navbar-luxury.scrolled {
  background: rgba(244, 239, 230, 0.96) !important;
  border-bottom: 1px solid var(--line-warm) !important;
  box-shadow: 0 8px 24px rgba(73, 50, 31, 0.11) !important;
  min-height: 58px !important;
  padding-top: 0.42rem !important;
  padding-bottom: 0.42rem !important;
}

.navbar-luxury .navbar-brand,
.navbar-luxury .navbar-brand img,
.navbar-luxury .nav-link,
.navbar-luxury .theme-switch-btn,
.navbar-luxury .btn-gold-luxury,
.navbar-luxury .btn-outline-light {
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    font-size 0.42s ease, color 0.28s ease,
    background 0.36s ease, border-color 0.36s ease,
    box-shadow 0.36s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

@media (min-width: 1200px) {
  .navbar-luxury.scrolled .navbar-brand img,
  .navbar-luxury.scrolled .logo-img {
    height: 34px !important;
    max-height: 34px !important;
  }
  .navbar-luxury.scrolled .nav-link {
    font-size: 0.84rem;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
  }
  .navbar-luxury.scrolled .theme-switch-btn {
    width: 34px;
    height: 34px;
  }
  .navbar-luxury.scrolled .btn-gold-luxury {
    padding: 0.52rem 1.2rem;
    font-size: 0.75rem;
  }
}

/* AOS injects its own duration, but the timing curve should stay consistent. */
[data-aos] {
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1) !important;
  transition-delay: 0s !important;
}

.navbar-luxury.scrolled .nav-link,
.navbar-luxury.scrolled .navbar-brand .text-light,
.navbar-luxury.scrolled .navbar-toggler { color: var(--wood-deep) !important; text-shadow: none; }

/* The CMS logo is commonly a white wordmark. Recolor it only on the cream nav. */
.navbar-luxury .logo-img {
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease, opacity 0.3s ease !important;
}
.navbar-luxury.scrolled .logo-img {
  filter: brightness(0) saturate(100%) invert(25%) sepia(23%) saturate(1040%) hue-rotate(351deg) brightness(86%) contrast(94%);
}

[data-theme="dark"] .navbar-luxury.scrolled {
  background: rgba(33, 29, 24, 0.96) !important;
}
[data-theme="dark"] .navbar-luxury.scrolled .logo-img { filter: none; }

.navbar-luxury.scrolled .nav-link:hover,
.navbar-luxury.scrolled .nav-link:focus,
.navbar-luxury.scrolled .nav-link:focus-visible,
.navbar-luxury.scrolled .nav-link.active { color: var(--olive) !important; }

.navbar-luxury.scrolled .btn-outline-light {
  color: var(--wood-deep) !important;
  border-color: var(--line-warm) !important;
}

.navbar-luxury.scrolled .btn-outline-light:hover {
  background: var(--cream-soft) !important;
  color: var(--wood-deep) !important;
}

.navbar-luxury .dropdown-menu {
  background: var(--cream-bright) !important;
  border: 1px solid var(--line-warm) !important;
  box-shadow: var(--shadow-card) !important;
}
.navbar-luxury .dropdown-item { color: var(--wood-deep) !important; }
.navbar-luxury .dropdown-item:hover,
.navbar-luxury .dropdown-item:focus,
.navbar-luxury .dropdown-item.active { background: var(--cream-soft) !important; color: var(--olive-deep) !important; }

@media (max-width: 1199.98px) {
  .navbar-luxury .navbar-collapse {
    background: var(--cream-bright) !important;
    border: 1px solid var(--line-warm) !important;
    box-shadow: var(--shadow-warm) !important;
  }
  .navbar-luxury .navbar-collapse .nav-link { color: var(--wood-deep) !important; }
  .navbar-luxury .navbar-collapse .nav-link:hover,
  .navbar-luxury .navbar-collapse .nav-link.active { color: var(--olive) !important; }
}

.theme-switch-btn {
  background: rgba(255, 250, 242, 0.14) !important;
  border-color: rgba(255, 250, 242, 0.38) !important;
  color: var(--cream-bright) !important;
}

.navbar-luxury.scrolled .theme-switch-btn {
  background: var(--cream-soft) !important;
  border-color: var(--line-warm) !important;
  color: var(--wood-deep) !important;
}

.theme-switch-btn:hover {
  background: var(--wood) !important;
  color: var(--cream-bright) !important;
}

/* Hero: warmer overlay, steadier type and a booking panel that belongs to the page. */
.hero-luxury .hero-video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--olive-deep);
}

.hero-luxury .hero-bg-fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-luxury .hero-video-container > .hero-bg-fallback,
.hero-luxury .hero-video-container > video.hero-bg-fallback,
.hero-luxury .hero-video-container > .hero-youtube-wrapper,
.hero-luxury .hero-video-container > .carousel {
  position: absolute;
  inset: 0;
}

.hero-luxury .hero-video-container > video.hero-bg-fallback,
.hero-luxury .hero-video-container > img.hero-bg-fallback {
  max-width: none;
}

.hero-luxury .hero-video-container {
  transform: scale(var(--hero-media-scale, 1.04));
  transform-origin: center center;
  will-change: transform;
}

.hero-luxury .hero-video-container video > img.hero-bg-fallback {
  position: absolute;
  inset: 0;
}

.hero-luxury .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.hero-overlay {
  background: linear-gradient(180deg, rgba(43, 37, 31, 0.62), rgba(52, 67, 55, 0.42) 48%, rgba(43, 37, 31, 0.82)) !important;
}

.hero-bg-fallback { filter: brightness(0.72) saturate(0.9) contrast(1.03); }

.hero-youtube-wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.hero-youtube-frame,
.hero-youtube-wrapper iframe,
#hero-yt-player {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 177.78vh !important;
  min-width: 100% !important;
  height: 56.25vw !important;
  min-height: 100% !important;
  transform: translate(-50%, -50%) scale(1.35) !important;
  border: 0 !important;
  pointer-events: none !important;
  filter: brightness(0.72) saturate(0.9) contrast(1.03);
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}


.hero-youtube-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  transition: opacity 0.8s ease-in-out;
}

.hero-video-shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: auto !important;
  cursor: default !important;
  user-select: none !important;
  background: transparent;
}

.hero-luxury .subtitle-luxury,
.hero-luxury #hero-tagline {
  color: #f4d39b !important;
  text-shadow: 0 1px 12px rgba(29, 25, 20, 0.72);
}
.hero-luxury .gold-line {
  background: #e5bd7d !important;
  box-shadow: 0 0 12px rgba(229, 189, 125, 0.3);
}
.hero-title span { color: #f1ce91 !important; }
.hero-booking-bar {
  background: rgba(255, 250, 242, 0.95) !important;
  border: 1px solid rgba(225, 184, 120, 0.62) !important;
  box-shadow: 0 18px 42px rgba(43, 37, 31, 0.26) !important;
}

.hero-booking-bar label { color: var(--wood-deep) !important; }
.hero-booking-bar input,
.hero-booking-bar select,
.hero-booking-bar .form-select {
  background: rgba(255, 255, 255, 0.86) !important;
  border: 1px solid var(--line-warm) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.hero-booking-bar select option,
select option,
.form-select option { background: var(--cream-bright) !important; color: var(--ink) !important; }

.hero-booking-bar input:focus,
.hero-booking-bar select:focus,
.form-control:focus,
.form-select:focus {
  border-color: var(--wood) !important;
  box-shadow: 0 0 0 3px rgba(139, 90, 43, 0.12) !important;
}

.btn-gold-luxury {
  background: linear-gradient(135deg, var(--wood), var(--wood-soft)) !important;
  color: var(--cream-bright) !important;
  border-color: rgba(255, 250, 242, 0.45) !important;
  box-shadow: 0 10px 22px rgba(139, 90, 43, 0.2) !important;
}

.btn-gold-luxury:hover,
.btn-gold-luxury:focus-visible {
  background: linear-gradient(135deg, var(--olive-deep), var(--olive)) !important;
  color: #fffaf2 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(52, 67, 55, 0.26) !important;
}

.btn-outline-gold {
  color: var(--wood-deep) !important;
  border-color: var(--wood) !important;
}

.hero-luxury .btn-outline-gold {
  color: #fff6e7 !important;
  border-color: #e5bd7d !important;
}

.hero-actions .btn {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.hero-actions .btn-outline-gold {
  padding: 0.78rem 1.35rem !important;
  background: rgba(52, 67, 55, 0.28) !important;
  box-shadow: 0 8px 20px rgba(31, 26, 20, 0.16);
}
.hero-actions .btn-outline-gold:hover,
.hero-actions .btn-outline-gold:focus-visible {
  background: var(--wood) !important;
  box-shadow: 0 12px 24px rgba(31, 26, 20, 0.24);
}
.hero-actions .btn-link {
  padding: 0.72rem 1.1rem !important;
  border: 1px solid rgba(244, 211, 155, 0.7);
  border-radius: 999px;
  color: #fff6e7 !important;
  background: rgba(35, 40, 32, 0.22) !important;
  opacity: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(31, 26, 20, 0.12);
}
.hero-actions .btn-link:hover,
.hero-actions .btn-link:focus-visible {
  color: #fffaf2 !important;
  background: rgba(139, 90, 43, 0.82) !important;
  border-color: #f4d39b;
  transform: translateY(-2px);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus-visible {
  background: var(--wood) !important;
  color: var(--cream-bright) !important;
  border-color: var(--wood) !important;
}

/* Content rhythm and surfaces. */
.section-padding { padding: clamp(4.5rem, 8vw, 7rem) 0; }
section[id] { scroll-margin-top: 90px; }

.story-img-main,
.story-img-secondary,
.gallery-item-luxury,
.dish-card-luxury,
.testimonial-card-luxury,
.contact-info-card,
.promo-card-luxury { border-radius: 20px; }

.story-img-main { box-shadow: var(--shadow-warm); }
.story-img-secondary { border-color: var(--cream) !important; box-shadow: var(--shadow-warm); }

.quote-box-luxury {
  border-left-color: var(--olive) !important;
  color: var(--olive-deep) !important;
  background: rgba(74, 93, 78, 0.06);
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.25rem;
}

[data-theme="dark"] .quote-box-luxury {
  color: #f4e7d5 !important;
  background: rgba(255, 248, 237, 0.06) !important;
  border-left-color: #d09b5a !important;
}
[data-theme="dark"] .quote-box-luxury * {
  color: inherit !important;
}

.dish-card-luxury,
.testimonial-card-luxury,
.experience-tab-btn {
  background: var(--cream-bright) !important;
  border-color: var(--line-warm) !important;
  box-shadow: var(--shadow-card);
}

.dish-card-luxury:hover {
  border-color: var(--gold-warm) !important;
  box-shadow: var(--shadow-warm);
  transform: translateY(-6px);
}

.dish-card-luxury,
.dish-card-luxury:hover {
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.45s ease, border-color 0.35s ease;
}
.dish-img-wrapper img { transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.dish-card-luxury:hover .dish-img-wrapper img { transform: scale(1.04); }

.dish-price-badge {
  background: rgba(52, 67, 55, 0.92) !important;
  color: #f4d39a !important;
  border-color: rgba(225, 184, 120, 0.5) !important;
}

.dish-title { color: var(--text-primary) !important; }
.dish-desc { color: var(--text-muted) !important; }

.menu-nav-pills .nav-link {
  color: var(--wood-deep) !important;
  border-color: var(--line-warm) !important;
  background: transparent !important;
}

.menu-nav-pills .nav-link.active,
.menu-nav-pills .nav-link:hover,
.menu-nav-pills .nav-link:focus-visible {
  background: var(--olive) !important;
  border-color: var(--olive) !important;
  color: #fffaf2 !important;
}

.promo-card-luxury {
  background: linear-gradient(135deg, #5f3b1f 0%, var(--wood) 54%, var(--olive-deep) 100%) !important;
  border-color: rgba(225, 184, 120, 0.48) !important;
  box-shadow: var(--shadow-warm);
}

.promo-card-luxury p { color: #f5e8d6 !important; }
.promo-card-luxury .subtitle-luxury,
.promo-card-luxury .text-warning { color: #f4d39a !important; }

.experience-tab-btn { transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease; }
.experience-tab-btn:hover { transform: translateX(4px); border-color: var(--gold-warm) !important; }
.experience-tab-btn.active { background: var(--olive) !important; border-color: var(--olive) !important; box-shadow: 0 14px 30px rgba(52, 67, 55, 0.2); }
.experience-tab-btn.active h5,
.experience-tab-btn.active p,
.experience-tab-btn.active .text-warning { color: #fffaf2 !important; }
.exp-content-card .card-body { background: var(--olive-deep) !important; }
.exp-content-card .card-body h4 { color: #f1ce91 !important; }
.exp-content-card .card-body p {
  color: #f8ecda !important;
  opacity: 1 !important;
  line-height: 1.75;
}

.gallery-item-luxury { box-shadow: var(--shadow-card); }
.gallery-item-luxury img { transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1); }
.gallery-item-luxury:hover img { transform: scale(1.035); }
.gallery-overlay { background: linear-gradient(to top, rgba(52, 67, 55, 0.94), transparent 72%) !important; }
.gallery-overlay { transition: opacity 0.5s ease; }
.gallery-item-luxury:hover .gallery-overlay,
.gallery-item-luxury:focus-within .gallery-overlay { opacity: 1; }

.testimonial-card-luxury { border-top: 3px solid var(--gold-warm); }
.testimonial-card-luxury p { color: var(--text-body) !important; }
.testimonial-avatar { border-color: var(--olive) !important; }

/* Testimonial navigation: refined gold outline controls that stay visible in both themes. */
#testimonials .carousel-control-prev,
#testimonials .carousel-control-next {
  top: 50%;
  bottom: auto;
  width: 48px;
  height: 48px;
  border: 1px solid var(--gold-warm);
  border-radius: 50%;
  background: rgba(52, 67, 55, 0.1);
  color: var(--gold-warm);
  opacity: 1;
  transform: translateY(-50%);
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
#testimonials .carousel-control-prev { left: 0.5rem; }
#testimonials .carousel-control-next { right: 0.5rem; }
#testimonials .carousel-control-prev:hover,
#testimonials .carousel-control-next:hover,
#testimonials .carousel-control-prev:focus-visible,
#testimonials .carousel-control-next:focus-visible {
  color: var(--cream-bright);
  background: var(--wood);
  border-color: var(--wood);
  transform: translateY(-50%) scale(1.06);
}
#testimonials .carousel-control-prev-icon,
#testimonials .carousel-control-next-icon {
  width: auto;
  height: auto;
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
#testimonials .carousel-control-prev-icon::before,
#testimonials .carousel-control-next-icon::before {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
}
#testimonials .carousel-control-prev-icon::before { content: '‹'; }
#testimonials .carousel-control-next-icon::before { content: '›'; }

.contact-info-card {
  background: linear-gradient(145deg, var(--olive-deep), #263127) !important;
  border-color: rgba(225, 184, 120, 0.38) !important;
  box-shadow: var(--shadow-warm);
}
.contact-info-card p,
.contact-info-card span { color: #e9dfd0 !important; }
.contact-info-card .text-warning { color: #f1ce91 !important; }

.map-container-luxury { box-shadow: var(--shadow-warm); }

.insta-grid-item { background: var(--olive-deep) !important; box-shadow: var(--shadow-card); }
.insta-hover { background: rgba(52, 67, 55, 0.8) !important; color: #f1ce91 !important; }
.insta-grid-item img { transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1) !important; }
.insta-grid-item:hover img { transform: scale(1.035); }

.footer-luxury {
  background: #2b251f !important;
  color: #f1e7d9 !important;
  border-top: 1px solid rgba(225, 184, 120, 0.28) !important;
}
.footer-luxury p,
.footer-luxury span,
.footer-links a { color: #d9cbbb !important; }
.footer-title { color: #f1ce91 !important; }
.footer-links a:hover { color: #fffaf2 !important; }
.footer-luxury .form-control,
.footer-luxury .form-control.bg-dark {
  background: rgba(255, 250, 242, 0.1) !important;
  color: #fffaf2 !important;
  border-color: rgba(225, 184, 120, 0.48) !important;
}
.footer-luxury .form-control::placeholder {
  color: #d9cbbb !important;
  opacity: 1 !important;
}

.modal-luxury .modal-content {
  background: var(--cream-bright) !important;
  color: var(--text-body) !important;
  border-color: var(--line-warm) !important;
  box-shadow: 0 24px 60px rgba(43, 37, 31, 0.26);
}
.modal-luxury .modal-header { border-bottom-color: var(--line-warm) !important; }
.modal-luxury .modal-content h1,
.modal-luxury .modal-content h2,
.modal-luxury .modal-content h3,
.modal-luxury .modal-content h4,
.modal-luxury .modal-content h5,
.modal-luxury .modal-content h6 { color: var(--text-primary) !important; }
.modal-luxury .text-light,
.modal-luxury .form-label.text-light { color: var(--text-body) !important; }
.modal-luxury .form-control,
.modal-luxury .form-select {
  background: #fff !important;
  color: var(--ink) !important;
  border-color: var(--line-warm) !important;
}
.modal-luxury .btn-close { filter: none !important; }
[data-theme="dark"] .modal-luxury .btn-close { filter: invert(1) !important; }
.modal-luxury .btn-outline-light {
  color: var(--wood-deep) !important;
  border-color: var(--line-warm) !important;
}
.modal-luxury .btn-outline-light:hover { background: var(--cream-soft) !important; }

/* JS adds this class after filters/tabs; giving it a real animation removes the snap. */
.animate-fade-in { animation: refined-fade-up 0.52s both cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes refined-fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.carousel-fade .carousel-item { transition: opacity 0.95s ease-in-out; }

:focus-visible {
  outline: 3px solid rgba(74, 93, 78, 0.42) !important;
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  .hero-luxury { padding-bottom: 250px !important; }
  .hero-content { margin-bottom: 28px !important; padding-inline: 1rem; }
  .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); }
  .hero-desc { font-size: 1rem; margin-bottom: 1.65rem; }
  .hero-booking-bar { width: calc(100% - 1.5rem) !important; border-radius: 16px; }
  .hero-booking-bar .row { row-gap: 0.75rem; }
  .hero-booking-bar label { font-size: 0.68rem; letter-spacing: 0.06em; }
  .hero-booking-bar input,
  .hero-booking-bar select { font-size: 0.82rem; padding-inline: 0.65rem; }
  .section-padding { padding: 4.25rem 0; }
  .story-img-main { height: 360px; }
  .dish-img-wrapper { height: 220px; }
  .promo-card-luxury .promo-content { padding: 2.25rem 1.5rem; }
  .experience-tab-btn:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .navbar-luxury { transform: none; opacity: 1; pointer-events: auto; }
}

/* Sticky scroll story: one visual stage, three chapters, one continuous narrative. */
.story-scrolly-section {
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%) !important;
  overflow: visible !important;
}
.story-scrolly-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: start;
  gap: clamp(3rem, 8vw, 9rem);
  overflow: visible;
}
.story-scrolly-visual {
  position: sticky;
  top: clamp(120px, 18vh, 180px);
  height: min(72vh, 720px);
  min-height: 520px;
  align-self: start;
  z-index: 2;
}
.story-scrolly-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 30px;
  background: var(--olive-deep);
  box-shadow: 20px 24px 0 rgba(74, 93, 78, 0.1), var(--shadow-warm);
}
.story-scrolly-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(35, 40, 32, 0.02) 28%, rgba(35, 40, 32, 0.7) 100%);
  pointer-events: none;
}
.story-scrolly-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 0.82s var(--ease-luxury), transform 1.2s var(--ease-luxury), filter 0.8s ease;
  filter: saturate(0.82) brightness(0.84);
}
.story-scrolly-image.is-active {
  opacity: 1;
  transform: scale(1);
  filter: saturate(0.98) brightness(0.9);
}
.story-scrolly-caption {
  position: absolute;
  right: 1.35rem;
  bottom: 1.25rem;
  left: 1.35rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #f7ead6;
  font-family: var(--font-sans-th, 'Noto Sans Thai', sans-serif);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
}
.story-caption-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(247, 234, 214, 0.54);
  border-radius: 50%;
  letter-spacing: 0;
}
.story-scrolly-copy { padding: 2vh 0; }
.story-step {
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.24;
  transform: translateY(16px);
  transition: opacity 0.72s ease, transform 0.82s var(--ease-luxury);
}
.story-step.is-active { opacity: 1; transform: translateY(0); }
.story-step-kicker {
  display: inline-block;
  margin-bottom: 1.2rem;
  color: var(--wood);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}
.story-step h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(2.25rem, 4.2vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
}
.story-step h2 em { color: var(--olive); font-style: normal; }
.story-step p { max-width: 470px; color: var(--text-muted); font-size: 1.06rem; line-height: 1.95; }
.story-highlight-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--line-warm);
  border-bottom: 1px solid var(--line-warm);
}
.story-highlight-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 1.4rem 1.5rem;
  border-right: 1px solid var(--line-warm);
  text-align: center;
}
.story-highlight-item:last-child { border-right: 0; }
.story-highlight-item strong { color: var(--wood); font-family: var(--font-numeric) !important; font-variant-numeric: lining-nums tabular-nums; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; line-height: 1; }
.story-highlight-item span { color: var(--text-muted); font-size: 0.75rem; letter-spacing: 0.08em; }
.story-mobile-controls { display: none; }

@media (max-width: 991.98px) {
  .story-scrolly-grid { grid-template-columns: 1fr; gap: 2rem; }
  .story-scrolly-visual { position: relative; top: auto; height: min(66vh, 560px); min-height: 360px; transform: none; }
  .story-scrolly-copy { padding: 0; }
  .story-step { min-height: 0; padding: 3.5rem 0; }
  #dishes-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  .story-scrolly-section { padding-top: 3.5rem; }
  .story-scrolly-grid { gap: 1.25rem; }
  .story-scrolly-visual { height: clamp(270px, 76vw, 390px); min-height: 0; }
  .story-scrolly-stage { border-radius: 22px; }
  .story-scrolly-copy {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -0.15rem;
    padding-inline: 0.15rem;
  }
  .story-scrolly-copy::-webkit-scrollbar { display: none; }
  .story-step,
  .story-step.is-active {
    flex: 0 0 88%;
    min-height: 0;
    justify-content: flex-start;
    opacity: 1;
    transform: none;
    scroll-snap-align: center;
    padding: 1.45rem 1.25rem 1.5rem;
    border: 1px solid var(--line-warm);
    border-radius: 22px;
    background: rgba(255, 252, 246, 0.74);
    box-shadow: 0 14px 28px rgba(77, 58, 38, 0.08);
  }
  .story-step-kicker { margin-bottom: 0.75rem; font-size: 0.65rem; }
  .story-step h2 { margin-bottom: 0.85rem; font-size: clamp(2rem, 9vw, 2.8rem); }
  .story-step p { font-size: 0.96rem; line-height: 1.75; }
  .story-step .quote-box-luxury { margin-top: 1rem; }
  .story-mobile-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.1rem;
  }
  .story-mobile-dots { display: flex; align-items: center; gap: 0.45rem; }
  .story-mobile-dot,
  .story-mobile-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line-warm);
    color: var(--wood);
    background: transparent;
    transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
  }
  .story-mobile-dot { width: 8px; height: 8px; padding: 0; border-radius: 999px; }
  .story-mobile-dot.is-active { width: 24px; background: var(--wood); border-color: var(--wood); }
  .story-mobile-arrow { width: 34px; height: 34px; padding: 0; border-radius: 50%; }
  .story-mobile-arrow:active { transform: scale(0.94); }
  .story-highlight-strip { grid-template-columns: 1fr; }
  .story-highlight-item { border-right: 0; border-bottom: 1px solid var(--line-warm); padding: 1.1rem 0; }
  .story-highlight-item:last-child { border-bottom: 0; }
  #dishes-container { grid-template-columns: 1fr; }
  #dishes-container > .dish-item-col:first-child { grid-column: span 1; }
  #dishes-container > .dish-item-col:first-child .dish-img-wrapper { aspect-ratio: 4 / 3; }
}

/* Dark mode contrast pass: keep text and controls readable on the olive/brown surfaces. */
[data-theme="dark"] .navbar-luxury:not(.scrolled) .nav-link,
[data-theme="dark"] .navbar-luxury:not(.scrolled) .navbar-brand .text-light,
[data-theme="dark"] .navbar-luxury:not(.scrolled) .navbar-toggler {
  color: #fff8ed !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.42);
}

[data-theme="dark"] .navbar-luxury:not(.scrolled) .nav-link:hover,
[data-theme="dark"] .navbar-luxury:not(.scrolled) .nav-link:focus,
[data-theme="dark"] .navbar-luxury:not(.scrolled) .nav-link:focus-visible,
[data-theme="dark"] .navbar-luxury:not(.scrolled) .nav-link.active {
  color: #f1ce91 !important;
}

[data-theme="dark"] .hero-booking-bar {
  background: rgba(39, 51, 42, 0.96) !important;
  border-color: rgba(225, 184, 120, 0.5) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important;
}

[data-theme="dark"] .hero-booking-bar label {
  color: #f1ce91 !important;
}

[data-theme="dark"] .hero-booking-bar input,
[data-theme="dark"] .hero-booking-bar select,
[data-theme="dark"] .hero-booking-bar .form-select {
  background: #332a21 !important;
  border-color: rgba(225, 184, 120, 0.34) !important;
  color: #fff8ed !important;
  color-scheme: dark;
}

[data-theme="dark"] .hero-booking-bar input::placeholder {
  color: #c9bdad !important;
}

[data-theme="dark"] .hero-booking-bar select option,
[data-theme="dark"] select option,
[data-theme="dark"] .form-select option {
  background: #332a21 !important;
  color: #fff8ed !important;
}

[data-theme="dark"] .modal-luxury .modal-content {
  background: #2c251e !important;
  color: #eee4d6 !important;
}

[data-theme="dark"] .modal-luxury .form-control,
[data-theme="dark"] .modal-luxury .form-select {
  background: #211d18 !important;
  color: #fff8ed !important;
  border-color: rgba(225, 184, 120, 0.32) !important;
}

[data-theme="dark"] .modal-luxury .form-control::placeholder {
  color: #ae9f8d !important;
}

[data-theme="dark"] .footer-luxury .form-control,
[data-theme="dark"] .footer-luxury .form-control.bg-dark {
  background: #332a21 !important;
  color: #fff8ed !important;
  border-color: rgba(225, 184, 120, 0.42) !important;
}

[data-theme="dark"] .footer-luxury .form-control::placeholder {
  color: #d9cbbb !important;
  opacity: 1 !important;
}

/* Native select controls need an explicit text color for the closed value and popup list. */
[data-theme="light"] .modal-luxury select.form-select,
[data-theme="light"] .hero-booking-bar select.form-select {
  background-color: #fffaf2 !important;
  color: #2b251f !important;
  -webkit-text-fill-color: #2b251f !important;
  color-scheme: light;
}

[data-theme="light"] .modal-luxury select.form-select option,
[data-theme="light"] .hero-booking-bar select.form-select option {
  background-color: #fffaf2 !important;
  color: #2b251f !important;
}

[data-theme="dark"] .modal-luxury select.form-select,
[data-theme="dark"] .hero-booking-bar select.form-select {
  background-color: #211d18 !important;
  color: #fff8ed !important;
  -webkit-text-fill-color: #fff8ed !important;
  color-scheme: dark;
}

[data-theme="dark"] .modal-luxury select.form-select option,
[data-theme="dark"] .hero-booking-bar select.form-select option {
  background-color: #211d18 !important;
  color: #fff8ed !important;
}

[data-theme="light"] .modal-luxury input.form-control,
[data-theme="light"] .modal-luxury textarea.form-control {
  background-color: #fffaf2 !important;
  color: #2b251f !important;
  -webkit-text-fill-color: #2b251f !important;
  caret-color: #8b5a2b !important;
}

[data-theme="light"] .modal-luxury input.form-control::placeholder,
[data-theme="light"] .modal-luxury textarea.form-control::placeholder {
  color: #9a8b7b !important;
  opacity: 1 !important;
}

[data-theme="dark"] .modal-luxury input.form-control,
[data-theme="dark"] .modal-luxury textarea.form-control {
  background-color: #211d18 !important;
  color: #fff8ed !important;
  -webkit-text-fill-color: #fff8ed !important;
  caret-color: #f1ce91 !important;
}

[data-theme="dark"] .modal-luxury input.form-control::placeholder,
[data-theme="dark"] .modal-luxury textarea.form-control::placeholder {
  color: #c9bdad !important;
  opacity: 1 !important;
}

/* ======================================================================
   Final editorial polish — one calm, consistent luxury language
   ====================================================================== */
:root {
  --editorial-max: 1180px;
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
  --radius-editorial: 26px;
  --radius-soft: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--olive); color: var(--cream-bright); }
.container { max-width: var(--editorial-max); }
section:not(#hero) { position: relative; overflow: visible; }
section:not(#hero)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(92%, 1180px);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-warm), transparent);
  opacity: 0.8;
}

/* Navigation: editorial wordmark, quiet underline, confident spacing. */
.navbar-luxury .container { max-width: 1320px; }
.navbar-luxury .nav-link {
  position: relative;
  border-bottom: 0 !important;
  padding-inline: 0.7rem !important;
  transition: color 0.28s ease, transform 0.42s var(--ease-luxury) !important;
}
.navbar-luxury .nav-link::after {
  content: '';
  position: absolute;
  left: 0.7rem;
  right: 0.7rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-warm), var(--wood-soft));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.42s var(--ease-luxury);
}
.navbar-luxury .nav-link:hover::after,
.navbar-luxury .nav-link:focus-visible::after,
.navbar-luxury .nav-link.active::after { transform: scaleX(1); }
.navbar-luxury .nav-link:hover { transform: translateY(-1px); }
.navbar-luxury .navbar-brand { letter-spacing: 0.03em; }

/* Hero: cinematic, readable and stable at every viewport ratio. */
.hero-luxury {
  min-height: 100svh !important;
  height: max(700px, 100svh) !important;
  max-height: 980px;
  isolation: isolate;
}
.hero-luxury .hero-content {
  width: min(100%, 940px);
  padding-inline: 1.25rem;
  margin-bottom: clamp(5.6rem, 12vh, 8rem) !important;
}
.hero-luxury .subtitle-luxury {
  font-size: clamp(0.68rem, 1vw, 0.88rem);
  letter-spacing: 0.24em;
}
.hero-luxury .hero-title {
  max-width: 940px;
  margin-inline: auto;
  font-size: clamp(2.8rem, 6vw, 5.8rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.hero-luxury .hero-desc {
  max-width: 650px;
  font-size: clamp(0.98rem, 1.3vw, 1.16rem);
  line-height: 1.85;
  opacity: 0.92;
}
.hero-luxury .btn { min-height: 48px; padding-inline: 1.35rem; }
.hero-luxury::before {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, rgba(24, 26, 21, 0.35), transparent);
}
.hero-booking-bar {
  width: min(1120px, calc(100% - 2rem)) !important;
  max-width: 1120px !important;
  padding: 1.05rem 1.2rem !important;
  border-radius: 24px !important;
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  animation: booking-arrive 0.9s 0.25s both var(--ease-luxury);
}
.hero-booking-bar form { --bs-gutter-x: 0.7rem; }
.hero-booking-bar label { font-size: 0.68rem; letter-spacing: 0.12em; }
.hero-booking-bar input,
.hero-booking-bar select {
  min-height: 48px;
  border-radius: 12px !important;
  font-weight: 600;
}
.hero-booking-bar .btn { min-height: 48px; border-radius: 12px !important; }
@keyframes booking-arrive {
  from { opacity: 0; transform: translate(-50%, 18px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Shared section rhythm and headings. */
.section-padding { padding: clamp(5.5rem, 9vw, 8.5rem) 0; }
.section-padding .text-center.max-w-700 { position: relative; margin-bottom: clamp(2.5rem, 5vw, 4.2rem) !important; }
.section-padding .text-center.max-w-700::after {
  content: '';
  display: block;
  width: 42px;
  height: 2px;
  margin: 1.35rem auto 0;
  background: linear-gradient(90deg, var(--wood), var(--gold-warm));
  border-radius: 99px;
}
.section-padding h2.display-5,
.section-padding h2.display-6 { letter-spacing: -0.035em; line-height: 1.12; }
.section-padding p.lead { line-height: 1.9; }

/* Story: strong image hierarchy with a soft editorial frame. */
#story .position-relative { padding-bottom: 2.2rem; }
.story-img-main {
  height: clamp(390px, 45vw, 560px) !important;
  border-radius: var(--radius-editorial) !important;
  box-shadow: 18px 22px 0 rgba(74, 93, 78, 0.1), var(--shadow-warm) !important;
}
.story-img-secondary {
  width: min(68%, 360px) !important;
  height: 240px !important;
  right: -1rem !important;
  bottom: -0.5rem !important;
  border: 2px solid var(--cream) !important;
  border-radius: 22px !important;
}
.quote-box-luxury {
  position: relative;
  border-left-width: 2px !important;
  padding: 1.1rem 1.4rem !important;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important;
  line-height: 1.65;
}

/* Menu: elegant cards with a deliberate image-to-content ratio. */
#menu .menu-nav-pills { gap: 0.5rem; }
.menu-nav-pills .nav-link {
  border-radius: 99px !important;
  padding: 0.55rem 1rem !important;
  font-size: 0.82rem;
  transition: color 0.28s ease, background 0.36s ease, transform 0.42s var(--ease-luxury), border-color 0.36s ease !important;
}
.menu-nav-pills .nav-link:hover { transform: translateY(-2px); }
.dish-card-luxury {
  border-radius: var(--radius-editorial) !important;
  overflow: hidden;
  border-width: 1px !important;
  transition: transform 0.55s var(--ease-luxury), box-shadow 0.45s ease, border-color 0.35s ease !important;
}
.dish-img-wrapper {
  height: auto !important;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.dish-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.dish-content { padding: 1.35rem 1.35rem 1.45rem !important; }
.dish-title { font-size: 1.38rem; line-height: 1.2; }
.dish-desc { min-height: 3.5rem; line-height: 1.7; }
.dish-card-luxury .btn { min-height: 40px; border-radius: 99px; }

/* Product-highlight grid: the first signature dish leads the menu story. */
#dishes-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem !important;
  margin-inline: 0 !important;
}
#dishes-container > .dish-item-col {
  width: auto !important;
  max-width: none !important;
  padding-inline: 0 !important;
}
#dishes-container > .dish-item-col:first-child { grid-column: span 2; }
#dishes-container > .dish-item-col:first-child .dish-img-wrapper { aspect-ratio: 16 / 8; }
#dishes-container > .dish-item-col:first-child .dish-title { font-size: clamp(1.45rem, 2vw, 1.85rem); }

/* Promotion: image-led banner with deep olive/walnut atmosphere. */
.promo-card-luxury {
  overflow: hidden;
  border-radius: 30px !important;
  position: relative;
}
.promo-card-luxury .promo-content { min-height: 430px; padding: clamp(2rem, 5vw, 4.5rem) !important; position: relative; z-index: 1; }
.promo-card-luxury .col-lg-6:last-child { min-height: 430px !important; }
.promo-card-luxury .col-lg-6:last-child::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(95, 59, 31, 0.12), rgba(39, 51, 42, 0.08));
  pointer-events: none;
}
.promo-card-luxury .col-lg-6:last-child img { width: 100%; height: 100%; object-fit: cover; }

/* Full-bleed promotion stage with a restrained scroll parallax. */
#promotions {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#promotions > .container {
  width: 100%;
  max-width: none !important;
  padding-inline: 0 !important;
}
#promotions .promo-card-luxury {
  width: 100%;
  min-height: clamp(520px, 68vh, 720px);
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
#promotions .promo-card-luxury .row { min-height: clamp(520px, 68vh, 720px); }
#promotions .promo-card-luxury .promo-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-inline: clamp(1.5rem, 9vw, 10rem) !important;
}
#promotions .promo-card-luxury .col-lg-6:last-child {
  overflow: hidden;
  min-height: clamp(520px, 68vh, 720px) !important;
}
#promotions .promo-card-luxury .col-lg-6:last-child img {
  min-width: 100%;
  min-height: 115%;
  transform: translate3d(0, var(--promo-parallax, 0px), 0) scale(1.08);
  transform-origin: center;
  will-change: transform;
  transition: transform 0.18s linear;
}
#promotions .promo-card-luxury .col-lg-6:last-child::after {
  z-index: 1;
}

@media (max-width: 767.98px) {
  #promotions { padding-block: 0 !important; }
  #promotions .promo-card-luxury,
  #promotions .promo-card-luxury .row,
  #promotions .promo-card-luxury .col-lg-6:last-child { min-height: 0 !important; }
  #promotions .promo-card-luxury .promo-content { padding: 3.5rem 1.5rem !important; }
  #promotions .promo-card-luxury .col-lg-6:last-child { height: 300px; }
  #promotions .promo-card-luxury .col-lg-6:last-child img { min-height: 115%; }
}

/* Promotion image becomes a true background layer, with copy floating above it. */
#promotions .promo-card-luxury {
  background: transparent !important;
}
#promotions .promo-card-luxury .row {
  position: relative;
  min-height: clamp(520px, 68vh, 720px) !important;
}
#promotions .promo-card-luxury .row > .col-lg-6:first-child {
  position: relative;
  z-index: 2;
}
#promotions .promo-card-luxury .promo-content {
  min-height: clamp(520px, 68vh, 720px) !important;
  background: transparent !important;
}
#promotions .promo-card-luxury .col-lg-6:last-child {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden;
}
#promotions .promo-card-luxury .col-lg-6:last-child img {
  position: absolute;
  inset: -5% 0;
  width: 100% !important;
  height: 110% !important;
  min-width: 100% !important;
  min-height: 0 !important;
  object-fit: cover;
  object-position: center;
}
#promotions .promo-card-luxury .col-lg-6:last-child::after {
  z-index: 1;
  background: linear-gradient(90deg, rgba(95, 59, 31, 0.08) 0%, rgba(52, 67, 55, 0.12) 48%, rgba(39, 51, 42, 0.26) 100%);
}

@media (max-width: 767.98px) {
  #promotions .promo-card-luxury,
  #promotions .promo-card-luxury .row,
  #promotions .promo-card-luxury .promo-content {
    min-height: 640px !important;
  }
  #promotions .promo-card-luxury .promo-content {
    background: transparent !important;
    padding: 3.5rem 1.5rem !important;
  }
  #promotions .promo-card-luxury .col-lg-6:last-child { height: 100% !important; }
}

/* Experience tabs: tactile navigation and a calm content stage. */
.experience-tabs-list { display: grid; gap: 0.75rem; }
.experience-tab-btn {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line-warm) !important;
  border-radius: var(--radius-soft) !important;
  padding: 1.05rem 1.15rem !important;
  transition: transform 0.42s var(--ease-luxury), box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease !important;
}
.experience-tab-btn:hover { transform: translateX(6px); }
.experience-tab-btn.active { transform: translateX(8px); }
.exp-content-card .card { border-radius: 28px !important; }
#experience .exp-content-card .card > img { height: 460px !important; }

/* Gallery: a more cinematic visual rhythm. */
.gallery-item-luxury {
  border-radius: var(--radius-soft) !important;
  margin-bottom: 0 !important;
  box-shadow: var(--shadow-card);
  height: clamp(300px, 28vw, 430px);
  overflow: hidden;
}
.gallery-item-luxury img {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}
.gallery-overlay {
  padding: 1.35rem !important;
  background: linear-gradient(to top, rgba(39, 51, 42, 0.96), rgba(39, 51, 42, 0.05) 78%) !important;
}
.gallery-item-luxury:hover img { transform: scale(1.055); }

/* Keep the public page compact; the rest of the collection lives in the modal. */
.gallery-more-btn {
  min-width: 190px;
  padding: 0.75rem 1.35rem;
  font-weight: 700;
}
.gallery-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 24px;
  margin-left: 0.2rem;
  padding-inline: 0.35rem;
  border-radius: 999px;
  background: rgba(139, 90, 43, 0.1);
  color: var(--wood-deep);
  font-size: 0.78rem;
}
.gallery-modal .modal-content {
  overflow: hidden;
  border: 1px solid var(--line-warm);
  border-radius: 24px;
  background: var(--cream-bright);
  box-shadow: var(--shadow-warm);
}
.gallery-modal .modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--line-warm);
}
.gallery-modal .modal-title { color: var(--text-primary); }
.gallery-modal .modal-body { padding: 1.25rem 1.5rem 1.5rem; }
.gallery-lightbox-link {
  position: relative;
  overflow: hidden;
  height: 220px;
  border-radius: 14px;
  background: var(--olive-deep);
  box-shadow: var(--shadow-card);
}
.gallery-modal-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-luxury);
}
.gallery-lightbox-link:hover .gallery-modal-thumb,
.gallery-lightbox-link:focus-visible .gallery-modal-thumb { transform: scale(1.045); }
.gallery-modal-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 2.5rem 0.8rem 0.75rem;
  color: #fffaf2;
  background: linear-gradient(to top, rgba(39, 51, 42, 0.94), transparent);
}
.gallery-modal-caption strong { font-size: 0.88rem; }
.gallery-modal-caption small { color: #f4d39a; }
[data-theme="dark"] .gallery-modal .modal-content {
  border-color: rgba(208, 155, 90, 0.42);
  background: #2b241e;
}
[data-theme="dark"] .gallery-modal .modal-header { border-bottom-color: rgba(208, 155, 90, 0.28); }
[data-theme="dark"] .gallery-modal .modal-title { color: #f7ead6; }
[data-theme="dark"] .gallery-modal .btn-close { filter: invert(1); }

/* Crawlable section pages share the restaurant's editorial layout. */
.seo-subpage { padding-top: 76px; }
.seo-page-hero {
  background: linear-gradient(180deg, var(--cream-soft) 0%, var(--cream) 100%);
}
.seo-page-hero h1 { color: var(--text-primary); }
.seo-feature-image {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--shadow-warm);
}
.seo-event-card {
  overflow: hidden;
  border: 1px solid var(--line-warm);
  border-radius: 24px;
  background: var(--cream-bright);
  box-shadow: var(--shadow-card);
}
.seo-event-card > img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: cover;
}
.gallery-page-thumb { width: 100%; height: 100%; object-fit: cover; }
.empty-state-luxury { padding: 3rem 1rem; color: var(--text-muted); }
[data-theme="dark"] .seo-page-hero { background: linear-gradient(180deg, #2b241e 0%, #211c18 100%); }
[data-theme="dark"] .seo-event-card { border-color: rgba(208, 155, 90, 0.34); background: #2b241e; }

@media (max-width: 767.98px) {
  .seo-subpage { padding-top: 68px; }
  .seo-feature-image { height: 300px; border-radius: 18px; }
  .seo-event-card > img { height: 230px; }
}

/* Reviews and contact: quieter cards, stronger contrast. */
.testimonial-card-luxury {
  border-radius: 24px !important;
  padding: clamp(1.7rem, 4vw, 3rem) !important;
  border-top-width: 2px !important;
}
.testimonial-card-luxury p { font-size: clamp(1rem, 1.4vw, 1.16rem) !important; }
.contact-info-card { border-radius: 28px !important; padding: clamp(1.7rem, 4vw, 3rem) !important; }
.map-container-luxury { border-radius: 28px !important; }

/* Modal: make the reservation flow feel like the same product. */
.modal-luxury .modal-dialog { max-width: 880px; }
.modal-luxury .modal-content { border-radius: 28px !important; overflow: hidden; }
.modal-luxury .modal-header { padding: 1.45rem 1.6rem 0.5rem !important; }
.modal-luxury .modal-body { padding: 1.25rem 1.6rem 1.65rem !important; }
.modal-luxury .form-label { font-size: 0.82rem; letter-spacing: 0.02em; }
.modal-luxury .form-control,
.modal-luxury .form-select { min-height: 48px; border-radius: 12px !important; }
.modal-luxury textarea.form-control { min-height: 112px; }
.modal-luxury .btn { min-height: 46px; border-radius: 99px; }

/* Footer and micro-interactions. */
.footer-luxury { padding-top: clamp(4rem, 7vw, 6rem) !important; }
.footer-links a { transition: color 0.28s ease, transform 0.42s var(--ease-luxury) !important; }
.footer-links a:hover { transform: translateX(5px); }
.scroll-top { transition: opacity 0.3s ease, transform 0.42s var(--ease-luxury), background 0.3s ease !important; }
.scroll-top:hover { transform: translateY(-4px); }

/* Contact map: full-bleed cartography with the information card layered inside. */
#contact {
  padding-inline: 0 !important;
  padding-block: 0 !important;
  overflow: hidden;
}
#contact .contact-map-stage {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: clamp(620px, 72vh, 820px);
  overflow: hidden;
}
#contact .map-container-luxury {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--olive-deep);
}
#contact .map-container-luxury iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 100% !important;
  border: 0;
}
#contact .contact-map-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(39, 51, 42, 0.64) 0%, rgba(39, 51, 42, 0.24) 30%, rgba(39, 51, 42, 0.02) 58%, rgba(39, 51, 42, 0.08) 100%);
}
#contact .contact-map-card {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: clamp(1.25rem, 7vw, 8rem);
  width: min(460px, calc(100% - 2.5rem));
  height: auto !important;
  margin: 0 !important;
  padding: clamp(1.7rem, 3.3vw, 3rem) !important;
  border: 1px solid rgba(225, 184, 120, 0.4) !important;
  border-radius: 26px !important;
  background: rgba(39, 51, 42, 0.93) !important;
  box-shadow: 0 24px 64px rgba(31, 35, 28, 0.3) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: translateY(-50%);
}
#contact .contact-map-card h3 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); }
#contact .contact-map-card p { line-height: 1.7; }
#contact .contact-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
#contact .contact-card-actions .btn {
  min-height: 42px;
  padding: 0.65rem 0.95rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  transition: transform 0.35s var(--ease-luxury), background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#contact .contact-card-actions .btn:hover,
#contact .contact-card-actions .btn:focus-visible { transform: translateY(-2px); }
#contact .btn-copy-address {
  color: #f7ead6 !important;
  background: rgba(255, 250, 242, 0.08) !important;
  border: 1px solid rgba(225, 184, 120, 0.48) !important;
}
#contact .btn-copy-address:hover,
#contact .btn-copy-address:focus-visible {
  background: rgba(200, 155, 85, 0.2) !important;
  border-color: #f1ce91 !important;
}
#contact .btn-call-reservation {
  color: #fffaf2 !important;
  background: linear-gradient(135deg, var(--wood-soft), var(--wood)) !important;
  border: 1px solid rgba(255, 250, 242, 0.25) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}
#contact .btn-call-reservation:hover,
#contact .btn-call-reservation:focus-visible {
  background: linear-gradient(135deg, var(--gold-warm), var(--wood-soft)) !important;
}
#contact .copy-address-status {
  display: block;
  min-height: 1.2em;
  margin-top: 0.45rem;
  color: #f1ce91 !important;
  font-size: 0.72rem;
}

/* Branded map pin: the logo stays centered while the map remains interactive. */
#contact .map-brand-marker {
  position: absolute;
  top: 53%;
  left: 52%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 70px;
  height: 88px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#contact .map-marker-pulse {
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(241, 206, 145, 0.78);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(74, 93, 78, 0.08);
  animation: mapMarkerPulse 2.8s ease-out infinite;
}
#contact .map-marker-pulse-two { animation-delay: 1.4s; }
#contact .map-marker-pin {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid #f1ce91;
  border-radius: 50% 50% 50% 0;
  background: var(--olive-deep);
  box-shadow: 0 7px 16px rgba(35, 42, 34, 0.38), 0 0 0 3px rgba(255, 250, 242, 0.78);
  transform: translateY(-3px) rotate(-45deg);
}
#contact .map-marker-pin::after {
  display: none;
}
#contact .map-marker-pin img {
  width: 33px;
  height: 33px;
  object-fit: contain;
  transform: rotate(45deg);
}
#contact .map-marker-label {
  position: absolute;
  bottom: -0.05rem;
  left: 50%;
  padding: 0.22rem 0.5rem;
  border: 1px solid rgba(241, 206, 145, 0.65);
  border-radius: 999px;
  background: rgba(39, 51, 42, 0.94);
  color: #f7ead6 !important;
  font-family: var(--font-numeric) !important;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 8px 18px rgba(35, 42, 34, 0.25);
}
@keyframes mapMarkerPulse {
  0% { opacity: 0.8; transform: scale(0.72); }
  70%, 100% { opacity: 0; transform: scale(1.42); }
}

@media (max-width: 767.98px) {
  #contact { padding-top: 0 !important; padding-bottom: 0 !important; }
  #contact .contact-map-stage {
    height: clamp(680px, 100svh, 780px);
    min-height: 680px;
  }
  #contact .contact-map-stage::after {
    background: linear-gradient(180deg, rgba(39, 51, 42, 0.02) 0%, rgba(39, 51, 42, 0.02) 48%, rgba(39, 51, 42, 0.56) 100%);
  }
  #contact .contact-map-card {
    top: auto;
    right: 0.75rem;
    bottom: 0.75rem;
    left: 0.75rem;
    width: auto;
    max-height: 56%;
    overflow-y: auto;
    padding: 1.2rem !important;
    border-radius: 22px !important;
    transform: none;
  }
  #contact .map-brand-marker {
    top: 28%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.78);
  }
  #contact .contact-card-actions .btn { flex: 1 1 140px; }
}

@media (max-width: 767.98px) {
  .hero-luxury { height: max(720px, 100svh) !important; min-height: 720px !important; padding-bottom: 245px !important; }
  .hero-luxury .hero-content { margin-bottom: 31px !important; }
  .hero-luxury .hero-title { font-size: clamp(2.45rem, 12vw, 3.7rem); }
  .hero-luxury .hero-desc { font-size: 0.95rem; line-height: 1.75; }
  .hero-luxury .d-flex.gap-3 { gap: 0.55rem !important; }
  .hero-luxury .d-flex.gap-3 .btn { padding-inline: 0.95rem; font-size: 0.78rem; }
  .hero-booking-bar { width: calc(100% - 1rem) !important; padding: 0.9rem !important; border-radius: 20px !important; }
  .hero-booking-bar .row { --bs-gutter-x: 0.55rem; }
  .hero-booking-bar input, .hero-booking-bar select, .hero-booking-bar .btn { min-height: 44px; font-size: 0.78rem; }
  .story-img-secondary { right: -0.3rem !important; width: 66% !important; height: 190px !important; }
  #experience .exp-content-card .card > img { height: 300px !important; }
  #gallery .gallery-item-luxury { height: 265px; }
  #gallery .gallery-item-luxury img { height: 100% !important; }
  .gallery-lightbox-link { height: 155px; }
  .gallery-modal .modal-header { padding: 1rem; }
  .gallery-modal .modal-body { padding: 1rem; }
  .gallery-modal-caption { padding: 2rem 0.6rem 0.55rem; }
  .gallery-modal-caption strong { font-size: 0.72rem; }
  .gallery-modal-caption small { font-size: 0.66rem; }
  .experience-tab-btn:hover, .experience-tab-btn.active { transform: none; }
}

/* Keep the signature-dish layout intentional on smaller screens. */
@media (max-width: 991.98px) {
  #dishes-container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
  #dishes-container { grid-template-columns: 1fr; }
  #dishes-container > .dish-item-col:first-child { grid-column: span 1; }
  #dishes-container > .dish-item-col:first-child .dish-img-wrapper { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-booking-bar { animation: none; }
  .navbar-luxury .nav-link:hover,
  .experience-tab-btn:hover,
  .experience-tab-btn.active,
  .footer-links a:hover,
  .scroll-top:hover { transform: none; }
}

/* Mobile navbar: keep the bar and collapsed menu inside the viewport. */
@media (max-width: 1199.98px) {
  .navbar-luxury {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    overflow: visible;
  }
  .navbar-luxury > .container-fluid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0.85rem !important;
  }
  .navbar-luxury .navbar-collapse {
    flex-basis: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .navbar-luxury .navbar-nav {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: stretch !important;
  }
  .navbar-luxury .navbar-collapse > .d-flex:last-child {
    width: 100%;
    margin-top: 0.85rem !important;
    padding-top: 0.85rem;
    border-top: 1px solid var(--line-warm);
  }
  .navbar-luxury .navbar-collapse .theme-switch-btn {
    background: var(--cream-soft) !important;
    border-color: var(--line-warm) !important;
    color: var(--wood-deep) !important;
  }
  .navbar-luxury .navbar-collapse .btn-outline-light {
    color: var(--wood-deep) !important;
    border-color: var(--line-warm) !important;
    background: transparent !important;
  }
  .navbar-luxury .navbar-collapse .btn-outline-light:hover,
  .navbar-luxury .navbar-collapse .btn-outline-light:focus-visible {
    color: var(--olive-deep) !important;
    background: var(--cream-soft) !important;
  }
}

@media (max-width: 575.98px) {
  .navbar-luxury .navbar-brand {
    min-width: 0;
    max-width: calc(100% - 3.25rem);
    margin-right: 0.5rem !important;
    overflow: hidden;
  }
  .navbar-luxury #site-text-block {
    min-width: 0;
    overflow: hidden;
  }
  .navbar-luxury #site-name-th,
  .navbar-luxury #site-subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .navbar-luxury .navbar-toggler {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Final viewport guard: prevent transformed media and wide children from creating page-level horizontal scrolling. */
html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip !important;
}

html {
  overflow-x: clip !important;
}

body > * {
  max-width: 100%;
}

#hero,
#mainNavbar,
.hero-luxury .hero-video-container,
.hero-luxury .hero-content {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#hero {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .hero-luxury,
  .hero-luxury .hero-video-container,
  .hero-luxury .hero-content,
  .hero-luxury .container,
  .hero-luxury .container-fluid,
  .hero-booking-bar,
  .story-scrolly-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero-luxury .hero-video-container {
    overflow: hidden !important;
  }

  .story-scrolly-copy {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
  }
}