/* ============================================================
   Vita Lenta - Custom CSS
   Matches source site vita-lenta.com layout & styling.
   Uses vw-based units for responsive scaling (source approach).
   ============================================================ */

/* ----------------------------------------------------------
   0. LENIS SMOOTH SCROLL
   ---------------------------------------------------------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

/* ----------------------------------------------------------
   1. BASE / BODY
   ---------------------------------------------------------- */
body.vl-page {
  background-color: #ece5d5;
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

body.vl-page.vl-scroll-locked {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Hide scrollbar like source */
body.vl-page::-webkit-scrollbar {
  width: 0px;
}

/* All sections base */
.elementor-location-single .e-parent,
.elementor-location-single > .elementor > .e-parent {
  width: 100%;
  background-color: transparent;
  overflow-x: hidden;
}

/* ----------------------------------------------------------
   2. NOISE TEXTURE OVERLAY
   ---------------------------------------------------------- */
.vl-noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  pointer-events: none;
  opacity: 0.3;
  z-index: 1;
}

/* ----------------------------------------------------------
   3. HERO SECTION (.one)
   ---------------------------------------------------------- */
.one {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: 15vw 5vw 0 !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
}

.one .one-headline,
.one .elementor-heading-title {
  font-family: 'TanPearl', sans-serif !important;
  font-size: 10vw !important;
  margin: 0 !important;
  color: #222 !important;
  text-transform: uppercase;
  line-height: 1 !important;
  padding: 0 !important;
}

.one-content-image {
  width: 100%;
  flex: 1;
  overflow: hidden;
  border-radius: 0;
  background-color: #201e1d;
}

.one-content-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vl-fotd-badge {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
}

.vl-fotd-badge img {
  width: 10vw;
  display: block;
}

/* ----------------------------------------------------------
   4. ABOUT SECTION (.two)
   ---------------------------------------------------------- */
.two {
  height: fit-content !important;
  min-height: auto !important;
  padding: 15vh 5vw !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
}

.two-content {
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 0 !important;
}

.two-content-left,
.two-content-right {
  padding: 0 !important;
}

/* Left column: heading ~27% width to match source */
.two-content > .elementor-element:first-child,
.two-content-left {
  width: 30% !important;
  flex-shrink: 0 !important;
}

/* Right column: description ~54% width to match source */
.two-content > .elementor-element:last-child,
.two-content-right {
  width: 60% !important;
  flex-shrink: 0 !important;
}

.two .elementor-heading-title {
  font-family: 'TanPearl', sans-serif !important;
  font-size: 3vw !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #222 !important;
  line-height: normal !important;
}

.two .elementor-text-editor,
.two .elementor-text-editor p,
.two .elementor-widget-text-editor,
.two .elementor-widget-text-editor p {
  font-size: 1.75vw !important;
  margin: 0 !important;
  color: #222 !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

/* ----------------------------------------------------------
   5. ABOUT IMAGE (.three)
   ---------------------------------------------------------- */
.three {
  padding: 0 5vw !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  height: 100vh !important;
  min-height: 100vh !important;
}

.three-image {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  background-color: #201e1d;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  flex: 1 !important;
}

/* Ensure Elementor image widget fills the container */
.three-image .elementor-widget-image,
.three-image .elementor-widget-image .elementor-widget-container,
.three-image .elementor-widget-image .elementor-widget-container .elementor-image {
  width: 100% !important;
  height: 100% !important;
}

.three-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ----------------------------------------------------------
   6. VALUES SECTION (.four)
   ---------------------------------------------------------- */
.four {
  height: fit-content !important;
  min-height: auto !important;
  padding: 15vh 5vw !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
}

.four-content {
  width: 100%;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 0 !important;
}

.four-content-left {
  width: 30% !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
}

.four-content-right {
  width: 60% !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5vw !important;
}

.four .elementor-heading-title {
  font-family: 'TanPearl', sans-serif !important;
  font-size: 3vw !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #222 !important;
  line-height: normal !important;
}

.four .elementor-text-editor,
.four .elementor-text-editor p,
.four .elementor-widget-text-editor,
.four .elementor-widget-text-editor p {
  font-size: 1.75vw !important;
  margin: 0 !important;
  color: #222 !important;
  font-weight: 300 !important;
  line-height: 1.6 !important;
}

/* ----------------------------------------------------------
   7. VALUES GALLERY (.five)
   ---------------------------------------------------------- */
.five {
  padding: 0 5vw !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  height: 100vh !important;
  min-height: 100vh !important;
}

.five-content {
  width: 100%;
  height: 100%;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 5vw !important;
}

.five-content > .elementor-widget,
.five-content > .e-con {
  width: calc(50% - 2.5vw) !important;
  height: 100% !important;
  flex-shrink: 0 !important;
  max-width: none !important;
  overflow: hidden;
}

.five-content .elementor-widget-image,
.five-content .elementor-widget-image .elementor-widget-container,
.five-content .elementor-widget-image .elementor-widget-container .elementor-image {
  width: 100% !important;
  height: 100% !important;
}

.five-content img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* ----------------------------------------------------------
   7b. ENTRANCE ANIMATION HELPERS
   ---------------------------------------------------------- */
/* Word-wrap containers need overflow:hidden so yPercent-translated chars are clipped.
   Scoped to entrance-animation sections (.one through .five) where yPercent:200 is used. */
.one .word-wrap,
.two .word-wrap,
.three .word-wrap,
.four .word-wrap,
.five .word-wrap {
  overflow: hidden;
  padding-top: 0.15em;   /* room for TanPearl decorative ascenders */
  margin-top: -0.15em;   /* compensate so layout doesn't shift */
}

/* Shop panel titles use yPercent:50 (small translate) — no clip needed, just let ascenders breathe */
.vl-shop-detail-title .word-wrap {
  overflow: visible;
}

/* Overlay divs injected by vl-entrance-animations.js for image wipe reveals */
.vl-entrance-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ece5d5;
  z-index: 5;
  pointer-events: none;
}

/* ----------------------------------------------------------
   8. MENU TIMELINE SECTION (.six)
   Source uses: .six (900vh, relative) → .six-inner (absolute children)
             → .six-sticky (sticky, 100vh, z-index 1) with sidebar + titles
   ---------------------------------------------------------- */
/* .six height is now set dynamically by the VL Timeline Cards widget
   based on section count × per-section height. No hardcoded value here. */
.six {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  position: relative !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* Timeline card styles are now in the vl-timeline-cards widget CSS.
   Old .six-inner-* rules removed — widget uses .vl-tc-* classes. */

/* ----------------------------------------------------------
   8a. STICKY OVERLAY (titles + sidebar)
   ---------------------------------------------------------- */
/* New widget wrapper: make the vl-menu-sidebar Elementor element sticky */
.elementor-element-six_stky {
  position: sticky !important;
  top: 0;
  height: 100vh !important;
  width: 100% !important;
  z-index: 1;
  pointer-events: none;
  align-self: flex-start;
  flex-shrink: 0;
}

/* Ensure inner Elementor widget container fills the sticky wrapper */
.elementor-element-six_stky > .elementor-widget-container {
  width: 100%;
  height: 100%;
}

.six-sticky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.six-sticky-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  width: 100%;
  height: 100%;
}

/* Sticky titles: BREAKFAST / LUNCH / DINNER */
/* Source uses z-index: -100 on title boxes so cards pass IN FRONT of titles */
.six-sticky-titles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: -100;
}

.six-sticky-titles .sticky-title {
  font-family: 'TanPearl', sans-serif;
  font-size: 7vw;
  margin: 0;
  color: #222;
  text-transform: uppercase;
  position: absolute;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
}

.six-sticky-titles .sticky-title.active {
  opacity: 1;
}

/* ----------------------------------------------------------
   8b. TIMELINE SIDEBAR
   ---------------------------------------------------------- */
.six-sticky-sidebar {
  width: 10vw;
  height: 80vh;
  display: flex;
  flex-direction: row;
  opacity: 0;
  transition: opacity 0.5s ease;
  margin-right: 2vw;
}

.six-sticky-sidebar.is-visible {
  opacity: 1;
}

/* Left column: time labels */
.six-sticky-sidebar-left {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10vh 0;
}

.six-sticky-sidebar-left-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.six-sticky-sidebar-left-content-box {
  width: 100%;
  height: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.six-sticky-sidebar-left-content-box h1 {
  font-size: 1vw;
  font-weight: 300;
  font-family: 'Inter', sans-serif;
  color: rgb(0, 0, 0);
  margin: 0;
  transition: font-weight 0.3s ease;
}

/* Right column: vertical line with ticks + sun/moon */
.six-sticky-sidebar-right {
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top-icon,
.bottom-icon {
  width: 5vw;
  height: 10vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-icon img,
.bottom-icon img {
  width: 40%;
  height: 40%;
  object-fit: contain;
}

.center-icon {
  width: 100%;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.center-icon-line {
  width: 1px;
  height: 100%;
  background-color: #201e1d;
}

.center-icon-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.center-icon-horizontal-line {
  width: 50%;
  height: 2vw;
  display: flex;
  align-items: center;
}

.center-icon-horizontal-line-inner {
  width: 100%;
  height: 1px;
  background-color: #201e1d;
}

/* ----------------------------------------------------------
   9. MARQUEE SECTION (.seven, .ten)
   ---------------------------------------------------------- */
.seven {
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: fit-content !important;
  min-height: auto !important;
  padding: 5vh 0 !important;
}

.ten {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: fit-content !important;
  min-height: auto !important;
  padding-bottom: 287.7px !important;
  padding-top: 287.7px !important;
  overflow: hidden !important;
}

/* Velocity-based marquee (.ten) — JS-driven translateX, no CSS animation */
.vl-marquee-velocity .vl-marquee-row {
  height: 288px;
  overflow: hidden;
}

.vl-marquee-velocity .vl-marquee-track {
  display: flex;
  white-space: nowrap;
  gap: 38.42px;
  animation: none; /* Disable CSS animation — JS drives this */
  will-change: transform;
}

.vl-marquee-velocity .vl-marquee-track span {
  font-family: 'TanPearl', sans-serif;
  font-weight: 400;
  font-size: 192.1px;
  line-height: 288.15px;
  color: #000000;
  text-transform: uppercase;
  flex-shrink: 0;
}

.vl-marquee-wrapper {
  width: 100%;
  overflow: hidden;
}

.vl-marquee-row {
  overflow: hidden;
  white-space: nowrap;
  line-height: 1.5;
}

.vl-marquee-track {
  display: inline-flex;
  animation: vl-marquee-scroll 40s linear infinite;
  white-space: nowrap;
  gap: 2vw;
}

.vl-marquee-track.vl-marquee-reverse {
  animation: vl-marquee-scroll 40s linear infinite reverse;
}

.vl-marquee-track span {
  font-family: 'TanPearl', sans-serif;
  font-weight: 700;
  font-size: 10vw;
  text-transform: uppercase;
  color: #222222;
  flex-shrink: 0;
}

.vl-marquee-row-2 {
  margin-top: 0;
}

@keyframes vl-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ----------------------------------------------------------
   10. VIDEO SECTION (.eight)
   ---------------------------------------------------------- */
.eight {
  height: 250vh !important;
  min-height: auto !important;
  overflow: visible !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
}

/* Elementor widget wrapper inside .eight must be full section height for sticky to work */
.eight .vl-video-section {
  height: 100% !important;
  min-height: 100% !important;
}

.eight .vl-video-section > .elementor-widget-container {
  height: 100% !important;
}

.vl-dining-mask {
  position: sticky;
  top: 0;
  display: flex;
  overflow: hidden;
  height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: url('../images/star4.svg');
  -webkit-mask-position: 50% center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 30%;
  mask-image: url('../images/star4.svg');
  mask-position: 50% center;
  mask-repeat: no-repeat;
  mask-size: 30%;
}

.vl-dining-mask video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ----------------------------------------------------------
   11. INTERACTIVE VISUAL MENU (.nine)
   ---------------------------------------------------------- */
.nine {
  display: flex !important;
  flex-direction: column !important;
  padding: 15vh 0 !important;
  padding-bottom: 0 !important;
  justify-content: space-between !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  height: fit-content !important;
  min-height: auto !important;
  z-index: 1;
  gap: 15vh !important;
}

.nine .elementor-heading-title {
  font-family: 'TanPearl', sans-serif !important;
  font-size: 3vw !important;
  margin: 0 !important;
  color: #222 !important;
  padding: 0 5vw !important;
}

/* Interactive menu styles moved to vl-interactive-menu.css (widget CSS) */

/* ----------------------------------------------------------
   12. SHOP SECTION (.eleven) — Overlapping Panel Architecture
   Source: two 100vw panels absolutely positioned, overlapping.
   Each panel has an image half (z-index:2) and a details half (z-index:1).
   Clicking an image slides it away via xPercent, revealing the
   other panel's product details underneath.
   ---------------------------------------------------------- */
.eleven {
  display: flex !important;
  flex-direction: row !important;
  padding: 0 !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  z-index: 0;
  overflow-x: hidden !important;
  position: relative !important;
  height: 100vh !important;
  min-height: auto !important;
  cursor: none;
}

/* Override Elementor responsive hiding — shop panels use desktop layout at all breakpoints */
.elementor .eleven.elementor-hidden-tablet,
.elementor .eleven.elementor-hidden-phone,
.elementor .eleven.elementor-hidden-mobile {
  display: flex !important;
}

/* Shop panels widget: Elementor wrapper must fill the .eleven section */
.eleven > .elementor-widget-vl-shop-panels {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

.eleven > .elementor-widget-vl-shop-panels > .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  overflow: hidden !important;
}

/* All shop panel widget styles now in vl-shop-panels.css */

/* ----------------------------------------------------------
   13. RESERVE SECTION (.twelve)
   All widget styles now in vl-reserve-section.css
   Only section-level container styles remain here
   ---------------------------------------------------------- */
.twelve {
  display: flex !important;
  flex-direction: column !important;
  padding: 15vh 5vw !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  height: fit-content !important;
  min-height: auto !important;
  position: relative !important;
}

@media (max-width: 767px) {
  .eleven {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    cursor: default !important;
  }
  .twelve {
    padding: 30vw 0vw !important;
  }
}

/* ----------------------------------------------------------
   14. PRE-FOOTER IMAGE (.thirteen)
   ---------------------------------------------------------- */
.thirteen {
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  padding: 0 5vw 15vh !important;
  --padding-top: 0px !important;
  --padding-right: 5vw !important;
  --padding-bottom: 15vh !important;
  --padding-left: 5vw !important;
  height: 115vh !important;
  min-height: auto !important;
}

.thirteen-image {
  width: 100%;
  height: 100%;
  background-color: transparent;
  position: relative;
  overflow: hidden;
  padding: 0 !important;
}

/* Force Elementor widget wrappers to stretch full height */
.thirteen-image .elementor-widget-image,
.thirteen-image .elementor-widget-image > .elementor-widget-container,
.thirteen-image .elementor-widget-image .elementor-image {
  width: 100% !important;
  height: 100% !important;
}

.thirteen-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.2); /* initial zoom — GSAP animates to scale(1) */
}

/* Wipe overlay: covers image initially, GSAP slides it right to reveal */
.thirteen-image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ece5d5;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  z-index: 2;
}

/* ----------------------------------------------------------
   15. HEADER / NAVIGATION
   ---------------------------------------------------------- */
/* Header styles moved to vl-header-nav.css (widget CSS) */
/* Only add noise texture to nav overlay (not in widget CSS) */

/* ----------------------------------------------------------
   16. NAVIGATION OVERLAY — noise texture addition
   ---------------------------------------------------------- */
/* Nav overlay base styles in vl-header-nav.css; add noise texture here */
.vl-nav-overlay {
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
}

/* ----------------------------------------------------------
   17. FOOTER
   ---------------------------------------------------------- */
/* Footer outer wrapper (Elementor theme-builder <footer> tag) */
.elementor-location-footer,
.elementor-location-footer > .elementor {
  position: relative !important;
  display: block !important;
  height: 100vh !important;
  min-height: 100vh !important;
}

/* Footer Elementor container — clip-path reveal window */
.footer {
  position: relative !important;
  display: flex !important;
  height: 100vh !important;
  min-height: 100vh !important;
  padding: 0 !important;
  --padding-top: 0px !important;
  --padding-right: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  background-color: #fefeff;
  clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0 100%);
  overflow: hidden !important;
}

/* Footer inner - fixed position for reveal */
.footer-inside {
  position: fixed !important;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  background-color: #222 !important;
  background-image: url('../images/noise.webp');
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}

/* Footer content wrapper — holds title centered, bottom items absolute */
.footer-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Title — centered in viewport by parent flexbox */
.footer-logo,
.footer-inside h2 {
  font-size: 10vw !important;
  color: #ece5d5 !important;
  font-family: 'TanPearl', sans-serif !important;
  margin: 0 !important;
}

/* Bottom row items — absolutely pinned to bottom of .footer-inside */
.footer-social-row,
.footer-legal,
.footer-descriptor {
  position: absolute !important;
  bottom: 48px;
}

/* Footer social icons — centered */
.footer-social-row {
  display: flex;
  flex-direction: row;
  gap: 2vw;
  left: 50%;
  transform: translateX(-50%);
}

.footer-social-row a {
  width: 2.5vw;
  height: 2.5vw;
  border: 1px solid rgba(236, 229, 213, 0.3);
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 0.5s ease;
  color: #ece5d5;
  text-decoration: none;
  font-size: 1vw;
}

.footer-social-row a:hover {
  border-color: #ece5d5;
}

/* Footer copyright — bottom left */
.footer-legal,
.footer-legal a {
  font-size: 0.8vw !important;
  color: #fefeff !important;
  font-weight: 300 !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.footer-legal {
  left: 5vw;
}

/* Footer descriptor — bottom right */
.footer-descriptor {
  font-size: 0.8vw;
  color: #fefeff;
  font-weight: 300;
  right: 5vw;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer-bottom-name {
  font-size: 0.8vw;
  color: #fefeff;
  font-weight: 300;
}

/* ----------------------------------------------------------
   18. SHOP PANELS DESKTOP
   ---------------------------------------------------------- */
.vl-menu-body {
  position: relative;
  margin-top: 5vh;
}

/* ----------------------------------------------------------
   19. IMAGE OVERSCAN UTILITY
   ---------------------------------------------------------- */
.vl-overscan-img {
  width: 120%;
  height: 120%;
  object-fit: cover;
  object-position: center;
  position: absolute;
  top: -10%;
  left: -10%;
}

/* ----------------------------------------------------------
   20. FOCUS STYLES (Accessibility)
   ---------------------------------------------------------- */
.vl-page *:focus-visible {
  outline: 2px solid #222;
  outline-offset: 2px;
}

/* ----------------------------------------------------------
   21. HIDE/SHOW BY BREAKPOINT
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .vl-desktop-only {
    display: none !important;
  }
}

.eleven-mobile {
  display: none !important;
}

@media (min-width: 1025px) {
  .vl-tablet-mobile-only {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   22. PLATE CENTER HIDE ON MOBILE (source hides only at ≤768px, NOT tablet)
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .vl-plate-center {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   23. HERO INTRO ANIMATION
   ---------------------------------------------------------- */
.vl-hero-img {
  transition: border-radius 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------
   24. SVG CURVE OVERLAY (hero scroll transition)
   Source: .svg-overlay — fixed SVG with animated quadratic
   Bezier path that sweeps upward on scroll, creating a
   cinematic dark reveal/transition from hero section.
   ---------------------------------------------------------- */
.svg-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
}

.svg-overlay svg {
  width: 100%;
  height: 100%;
}

/* ============================================================
   RESPONSIVE: TABLET (768px - 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .one {
    height: 100vh !important;
    min-height: 100vh;
  }

  .one .elementor-heading-title {
    font-size: 10vw !important;
  }

  .three {
    height: 180vw !important;
    min-height: 180vw !important;
  }

  /* .six and sub-section heights are now set dynamically by the widget */
  }

  .six-sticky-sidebar {
    width: 10vw;
    height: 80vh;
  }

  .six-sticky-sidebar-left {
    padding: 10vh 0;
  }

  .six-sticky-sidebar-left-content-box {
    height: 2vw;
  }

  .six-sticky-sidebar-left-content-box h1 {
    font-size: 1.5vw;
  }

  .top-icon,
  .bottom-icon {
    width: 5vw;
    height: 10vh;
  }

  .top-icon img,
  .bottom-icon img {
    width: 40%;
    height: 40%;
  }

  .center-icon {
    height: 60vh;
  }

  .center-icon-horizontal-line {
    height: 2vw;
  }

  .six-sticky-titles .sticky-title {
    font-size: 7.5vw;
  }

  .vl-marquee-track span {
    font-size: 7.5vw;
  }

  /* Velocity marquee responsive for tablet */
  .vl-marquee-velocity .vl-marquee-row {
    height: 175px;
  }

  .vl-marquee-velocity .vl-marquee-track span {
    font-size: 117px;
    line-height: 175px;
  }

  .ten {
    padding-top: 175px !important;
    padding-bottom: 175px !important;
  }

  .eight {
    height: 250vh !important;
  }

  .vl-dining-mask {
    -webkit-mask-size: 30%;
    mask-size: 30%;
  }

  .nine {
    padding: 10vh 0 !important;
    padding-bottom: 0 !important;
    gap: 8vh !important;
  }

  .nine .elementor-heading-title {
    font-size: 5vw !important;
    padding: 0 3vw !important;
  }

  /* Interactive menu tablet sizes in vl-interactive-menu.css */

  /* .thirteen — reduce side padding at tablet */
  .thirteen {
    padding: 0 3vw 10vh !important;
  }

  /* Nav overlay text size moved to vl-header-nav.css */

  .vl-fotd-badge {
    bottom: 0 !important;
    right: 0 !important;
  }

  .vl-fotd-badge img {
    width: 15vw !important;
  }

  .footer-logo,
  .footer-inside h2 {
    font-size: 10vw !important;
  }

  .footer-social-row a {
    width: 6vw;
    height: 6vw;
    font-size: 2vw;
  }

  .footer-legal,
  .footer-legal a {
    font-size: 1.5vw !important;
  }

  .footer-bottom-name {
    font-size: 1.5vw;
  }

  .footer-descriptor {
    font-size: 1.5vw !important;
  }

  /* Shop panels: scale text and button for tablet */
  .vl-shop-detail-title {
    font-size: 4.5vw;
    margin-bottom: 3vh;
  }

  .vl-shop-detail-desc {
    font-size: 2vw;
    margin-bottom: 3vh;
  }

  .vl-shop-detail-list li {
    font-size: 2vw;
    gap: 1.5vw;
    padding: 1vh 0;
  }

  .vl-shop-detail-list li i {
    font-size: 1.8vw;
    width: 2.5vw;
    flex-shrink: 0;
  }

  .vl-shop-detail-price {
    font-size: 3vw;
  }

  .vl-shop-preorder-btn {
    width: 15vw;
    height: 5vw;
    font-size: 1.2vw;
  }

  .vl-shop-detail-divider {
    margin: 3vh 0 2vh 0;
  }

  /* Hide custom cursor on touch devices */
  .vl-shop-cursor {
    display: none !important;
  }

  .eleven {
    cursor: pointer;
  }

  /* Sections 2 & 4: less padding, bigger text at tablet */
  .two,
  .four {
    padding: 8vh 5vw !important;
  }

  .two-content,
  .four-content {
    flex-direction: column !important;
    gap: 4vw;
  }

  .two-content > .elementor-element:first-child,
  .two-content-left,
  .two-content > .elementor-element:last-child,
  .two-content-right,
  .four-content-left,
  .four-content-right {
    width: 100% !important;
  }

  .two .elementor-heading-title,
  .four .elementor-heading-title {
    font-size: 4.5vw !important;
  }

  .two .elementor-text-editor p,
  .two .elementor-widget-text-editor p,
  .four .elementor-text-editor p,
  .four .elementor-widget-text-editor p {
    font-size: 2.5vw !important;
  }
}

/* ============================================================
   RESPONSIVE: MOBILE (< 768px)
   ============================================================ */
@media (max-width: 767px) {
  .one .elementor-heading-title {
    font-size: 10vw !important;
  }

  .two {
    padding: 10vh 5vw !important;
  }

  .two-content,
  .four-content {
    flex-direction: column !important;
    gap: 5vw;
  }

  .two-content > .elementor-element:first-child,
  .two-content-left,
  .two-content > .elementor-element:last-child,
  .two-content-right {
    width: 100% !important;
  }

  .four-content-left,
  .four-content-right {
    width: 100% !important;
  }

  .three {
    height: 180vw !important;
    min-height: 180vw !important;
  }

  .five {
    height: auto !important;
    min-height: auto !important;
  }

  .five-content {
    flex-direction: column !important;
    gap: 5vw !important;
  }

  .five-content > .elementor-widget,
  .five-content > .e-con {
    width: 100% !important;
    height: 80vw !important;
    overflow: hidden !important;
  }

  .two .elementor-heading-title,
  .four .elementor-heading-title {
    font-size: 7vw !important;
  }

  .two .elementor-text-editor,
  .two .elementor-text-editor p,
  .two .elementor-widget-text-editor,
  .two .elementor-widget-text-editor p,
  .four .elementor-text-editor,
  .four .elementor-text-editor p,
  .four .elementor-widget-text-editor,
  .four .elementor-widget-text-editor p {
    font-size: 4vw !important;
    line-height: 1.6 !important;
  }

  .vl-marquee-track span {
    font-size: 10vw;
  }

  /* Timeline card responsive rules now in vl-timeline-cards.css */

  /* Timeline sidebar — keep compact on mobile */
  .six-sticky-sidebar {
    width: 12vw;
    height: 80vh;
  }

  .six-sticky-sidebar-left-content-box h1 {
    font-size: 2vw;
  }

  /* Velocity marquee responsive for mobile */
  .vl-marquee-velocity .vl-marquee-row {
    height: 88px;
  }

  .vl-marquee-velocity .vl-marquee-track span {
    font-size: 59px;
    line-height: 88px;
  }

  .vl-marquee-velocity .vl-marquee-track {
    gap: 15px;
  }

  .ten {
    padding-top: 12vw !important;
    padding-bottom: 12vw !important;
  }

  .nine .elementor-heading-title {
    font-size: 7vw !important;
  }

  /* Interactive menu mobile sizes in vl-interactive-menu.css */
  /* Reserve button styles moved to vl-reserve-section.css */
  /* Mobile header/nav styles moved to vl-header-nav.css */

  .vl-fotd-badge img {
    width: 30vw !important;
  }

  .footer-logo,
  .footer-inside h2 {
    font-size: 10vw !important;
  }

  .footer-social-row a {
    width: 13vw;
    height: 13vw;
    font-size: 4.5vw;
  }

  .footer-legal,
  .footer-legal a {
    font-size: 3vw !important;
  }

  .four {
    padding: 10vh 5vw !important;
  }

  .thirteen {
    height: 180vw !important;
    padding: 0 5vw 30vw !important;
    --padding-top: 0px !important;
    --padding-right: 5vw !important;
    --padding-bottom: 30vw !important;
    --padding-left: 5vw !important;
  }

  /* Mobile shop widget styles moved to vl-shop-panels.css */
  /* Section container .eleven overrides at @media (max-width: 767px) above */
}

/* ============================================================
   ELEMENTOR OVERRIDES
   Ensure Elementor container defaults don't interfere
   ============================================================ */
.elementor-widget-heading .elementor-heading-title {
  padding: 0;
}

/* Remove default Elementor container min-heights that conflict */
.one.e-con,
.two.e-con,
.three.e-con,
.four.e-con,
.five.e-con,
.seven.e-con,
.eight.e-con,
.nine.e-con,
.ten.e-con,
.eleven.e-con,
.twelve.e-con,
.thirteen.e-con {
  --min-height: auto;
}

/* .six and sub-section Elementor --min-height are now set dynamically by the widget */