/* ===== HOME COPY + COLOR SYSTEM ===== */
:root{
  --ink:#1C1C1E !important;
  --paper:#FFFDF7 !important;
}

/* Homepage masthead: no black gradient, dark centered logo */
#screen1 .masthead{
  background:transparent !important;
  justify-content:center !important;
  align-items:center !important;
  padding-top:max(18px,env(safe-area-inset-top)) !important;
}
#screen1 .brand{
  color:#1C1C1E !important;
  text-align:center !important;
  justify-content:center !important;
}

/* Major Third scale: body = headline / 1.25 */
.discover-sheet h1{
  color:#1C1C1E !important;
}
.discover-sheet > p{
  color:#1C1C1E !important;
  font-size:calc(clamp(28px,8vw,44px) / 1.25) !important;
  line-height:1.18 !important;
  max-width:100% !important;
  opacity:.72;
}

/* desktop headline uses 42px in this build, so keep exact 1.25 ratio there too */
@media (min-width:700px){
  .discover-sheet h1{font-size:42px !important;}
  .discover-sheet > p{font-size:33.6px !important;}
}

/* core surfaces inherit the new off-white */
body,.screen,.drawer,.filter-stack{
  background-color:#FFFDF7 !important;
}


/* ===== SUPPORTING COPY SCALE + SEARCH VISIBILITY ===== */

/* Three Major Third steps below the previous supporting-copy size */
.discover-sheet > p{
  font-size:calc((clamp(28px,8vw,44px) / 1.25) / 1.25 / 1.25 / 1.25) !important;
  line-height:1.35 !important;
  opacity:.72;
}

@media (min-width:700px){
  .discover-sheet > p{
    font-size:17.2px !important;
  }
}

/* Search input needs its own visible surface against #FFFDF7 */
.drawer-search{
  background:#F4F2EC !important;
  border:1px solid rgba(28,28,30,.14) !important;
  color:#1C1C1E !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.drawer-search::placeholder{
  color:rgba(28,28,30,.45) !important;
}

.drawer-search:focus{
  background:#FFFDF7 !important;
  border-color:rgba(28,28,30,.34) !important;
  box-shadow:0 0 0 3px rgba(28,28,30,.05), 0 8px 24px rgba(0,0,0,.06) !important;
  outline:none !important;
}


/* ===== GRAYSCALE INTERACTION STATES ===== */
:root{
  
  
  
  
  
  
  
  
  
  
}

/* country / city / category selections: neutral, readable, no blue */
.location-option.selected,
.chip.active{
  background:var(--gray-200) !important;
  color:var(--gray-950) !important;
  border-color:var(--gray-300) !important;
  box-shadow:0 4px 12px rgba(28,28,30,.06) !important;
}

/* unselected */
.location-option:not(.selected),
.chip:not(.active){
  background:var(--warm-white) !important;
  color:var(--gray-800) !important;
  border-color:rgba(28,28,30,.10) !important;
}

/* hover */
@media (hover:hover) and (pointer:fine){
  .location-option:not(.selected):hover,
  .chip:not(.active):hover{
    background:var(--gray-050) !important;
    border-color:rgba(28,28,30,.16) !important;
    color:var(--gray-950) !important;
  }

  .location-option.selected:hover,
  .chip.active:hover{
    background:var(--gray-300) !important;
  }
}

/* touch/pressed */
.location-option:active,
.chip:active,
.location-btn:active,
.drawer-neigh:active,
.drawer-place:active,
.it-row:active{
  background:var(--gray-150) !important;
}

/* disabled / unavailable */
.location-btn.is-disabled,
.location-option:disabled,
.chip:disabled{
  background:var(--gray-100) !important;
  color:var(--gray-500) !important;
  border-color:rgba(28,28,30,.08) !important;
  opacity:1 !important;
}

/* keep picker values clearly legible */
.location-btn{
  color:var(--gray-950) !important;
}
.location-btn .chev{
  color:var(--gray-500) !important;
}


/* ===== FINAL GRAYSCALE INTERACTION OVERRIDES ===== */
:root{
  --accent:#3A3A3C !important;
  --gray-950:#1C1C1E;
  --gray-850:#2C2C2E;
  --gray-800:#3A3A3C;
  --gray-650:#636366;
  --gray-500:#8E8E93;
  --gray-350:#AEAEB2;
  --gray-300:#C7C7CC;
  --gray-250:#D1D1D6;
  --gray-200:#D8D6D0;
  --gray-150:#E3E1DB;
  --gray-100:#EEECE6;
  --gray-050:#F6F4EE;
  --warm-white:#FFFDF7;
}

/* Search / picker */
.location-btn{
  background:var(--warm-white) !important;
  color:var(--gray-950) !important;
  border-color:rgba(28,28,30,.12) !important;
}
.location-btn .chev{color:var(--gray-500) !important;}
.location-btn.is-disabled{
  background:var(--gray-100) !important;
  color:var(--gray-500) !important;
  border-color:rgba(28,28,30,.08) !important;
}

.location-option{
  background:var(--warm-white) !important;
  color:var(--gray-800) !important;
  border-color:rgba(28,28,30,.10) !important;
}
.location-option.selected{
  background:var(--gray-200) !important;
  color:var(--gray-950) !important;
  border-color:var(--gray-300) !important;
  box-shadow:0 4px 12px rgba(28,28,30,.06) !important;
}

/* Category chips */
.chip{
  background:var(--warm-white) !important;
  color:var(--gray-800) !important;
  border-color:rgba(28,28,30,.12) !important;
}
.chip.active{
  background:var(--gray-200) !important;
  color:var(--gray-950) !important;
  border-color:var(--gray-300) !important;
  box-shadow:0 4px 12px rgba(28,28,30,.05) !important;
}

/* Search focus remains grayscale */
.drawer-search:focus{
  border-color:rgba(28,28,30,.34) !important;
  box-shadow:0 0 0 3px rgba(28,28,30,.05),0 8px 24px rgba(0,0,0,.06) !important;
}

/* Navigation and action buttons */
.nav-location,
.nav-home.active,
.btn3-maps,
.s3-maps-btn,
.area-card{
  background:var(--gray-950) !important;
  color:var(--warm-white) !important;
}
.nav-home:not(.active){
  background:rgba(28,28,30,.08) !important;
  color:var(--gray-650) !important;
}
.creator-tiktok-btn,
.btn3-tiktok{
  background:var(--gray-950) !important;
  color:var(--warm-white) !important;
}
.btn3-ig{
  background:var(--gray-100) !important;
  color:var(--gray-950) !important;
  border-color:rgba(28,28,30,.12) !important;
}

/* Place/category icon circles */
.it-icon{
  background:var(--gray-950) !important;
  color:var(--warm-white) !important;
}

/* Generic selected/pressed states */
.location-option:active,
.location-btn:active,
.chip:active,
.drawer-neigh:active,
.drawer-place:active,
.it-row:active{
  background:var(--gray-150) !important;
  color:var(--gray-950) !important;
}

/* Hover only on fine pointer */
@media (hover:hover) and (pointer:fine){
  .location-option:hover,
  .chip:hover,
  .drawer-neigh:hover,
  .drawer-place:hover,
  .it-row:hover{
    background:var(--gray-050) !important;
    border-color:rgba(28,28,30,.18) !important;
    color:var(--gray-950) !important;
  }
  .location-option.selected:hover,
  .chip.active:hover{
    background:var(--gray-300) !important;
  }
}


/* ===== CONTRAST HIERARCHY PASS ===== */

/* Bottom navigation container */
.bottom-nav{
  background:#E8E6E0 !important;
  border:1px solid rgba(28,28,30,.14) !important;
  box-shadow:0 10px 28px rgba(28,28,30,.10) !important;
}

.nav-home,
.nav-location{
  border-radius:14px !important;
  min-height:44px !important;
}

/* Active nav gets strongest contrast */
.nav-home.active,
.nav-location.active{
  background:#1C1C1E !important;
  color:#FFFDF7 !important;
}

/* Inactive nav remains clearly visible on nav container */
.nav-home:not(.active),
.nav-location:not(.active){
  background:#F6F4EE !important;
  color:#3A3A3C !important;
  border:1px solid rgba(28,28,30,.10) !important;
  opacity:1 !important;
}

/* Browse by location / location buttons */
.location-btn{
  background:#EEECE6 !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.14) !important;
  box-shadow:0 2px 6px rgba(28,28,30,.04) !important;
}

.location-btn:hover{
  background:#E8E6E0 !important;
}

.location-btn:active{
  background:#D8D6D0 !important;
}

/* Disabled location state still distinct */
.location-btn.is-disabled{
  background:#F1EFE9 !important;
  color:#8E8E93 !important;
  border-color:rgba(28,28,30,.08) !important;
}

/* Fullscreen controls: high contrast against any image */
.media-viewer-close,
.media-viewer-arrow{
  background:rgba(255,253,247,.94) !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.14) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.18) !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

.media-viewer-close:active,
.media-viewer-arrow:active{
  background:#D8D6D0 !important;
  transform:scale(.96) translateY(0) !important;
}

/* Disabled fullscreen arrows remain visible but clearly unavailable */
.media-viewer-arrow:disabled{
  background:rgba(255,253,247,.72) !important;
  color:#AEAEB2 !important;
  border-color:rgba(28,28,30,.08) !important;
  opacity:1 !important;
}

/* Fullscreen counter should also read clearly */
.media-viewer-count{
  background:rgba(255,253,247,.90) !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.10) !important;
}

/* Search input and picker hierarchy */
.drawer-search{
  background:#F1EFE9 !important;
  border:1px solid rgba(28,28,30,.14) !important;
}
.drawer-search:focus{
  background:#FFFDF7 !important;
  border-color:rgba(28,28,30,.32) !important;
}

/* Country/city option surfaces */
.location-option{
  background:#FFFDF7 !important;
}
.location-option.selected{
  background:#D8D6D0 !important;
  color:#1C1C1E !important;
  border-color:#C7C7CC !important;
}


/* ===== NORMAL MEDIA NAV: CENTERED VERTICALLY ===== */
.s3-nav-btn{
  top:50% !important;
  transform:translateY(-50%) !important;
  width:40px !important;
  height:40px !important;
  border-radius:999px !important;
  z-index:30 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

.s3-nav-prev{
  left:max(12px,env(safe-area-inset-left)) !important;
}

.s3-nav-next{
  right:max(12px,env(safe-area-inset-right)) !important;
}

@media (max-width:420px){
  .s3-nav-btn{
    width:38px !important;
    height:38px !important;
  }
  .s3-nav-prev{
    left:max(10px,env(safe-area-inset-left)) !important;
  }
  .s3-nav-next{
    right:max(10px,env(safe-area-inset-right)) !important;
  }
}


/* Give scrollable detail content enough trailing space to clear fixed nav */
  .s3-content,
  .s3-body{
    scroll-
  }

  .s3-body{
    
  }

  /* Any generic mobile list/content scroller gets the same safe ending */
  .s2-side,
  #itList{
    scroll-
  }

  #itList{
    
  }
}


/* ===== CANONICAL MOBILE SAFE-AREA + OPTION HIERARCHY ===== */
:root{
  --bottom-nav-height:78px;
  --mobile-scroll-buffer:28px;
}

/* One authoritative mobile bottom-spacing rule */


  #itList{
    padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + 24px) !important;
  }
}

/* Country/city visual hierarchy */
.location-options .location-option{
  background:#FFFDF7 !important;
  color:#636366 !important;
  border-color:rgba(28,28,30,.08) !important;
  opacity:.72 !important;
}

.location-options .location-option.selected{
  background:#D8D6D0 !important;
  color:#1C1C1E !important;
  border-color:#C7C7CC !important;
  opacity:1 !important;
  box-shadow:0 4px 12px rgba(28,28,30,.06) !important;
}

@media (hover:hover) and (pointer:fine){
  .location-options .location-option:not(.selected):hover{
    background:#F1EFE9 !important;
    color:#3A3A3C !important;
    opacity:.9 !important;
  }
}


/* ===== CANONICAL CONTROL + ALIGNMENT SYSTEM ===== */
:root{
  --control-sm:36px;
  --control-md:40px;
  --control-lg:44px;
  --control-xl:48px;
  --icon-stroke:2px;
}

/* universal circular control geometry */
.s2-back,
.s3-back,
.s3-nav-btn,
.media-viewer-close,
.media-viewer-arrow,
.drawer-close{
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
  line-height:1 !important;
  padding:0 !important;
  margin:0 !important;
  text-align:center !important;
  vertical-align:middle !important;
}

/* map/detail back controls */
.s2-back,
.s3-back{
  width:var(--control-lg) !important;
  height:var(--control-lg) !important;
  min-width:var(--control-lg) !important;
  min-height:var(--control-lg) !important;
  border-radius:999px !important;
  font-size:0 !important;
  position:relative !important;
}
.s2-back::before,
.s3-back::before{
  content:"" !important;
  width:10px !important;
  height:10px !important;
  border-left:var(--icon-stroke) solid currentColor !important;
  border-bottom:var(--icon-stroke) solid currentColor !important;
  transform:translateX(2px) rotate(45deg) !important;
  box-sizing:border-box !important;
}

/* normal media prev / next */
.s3-nav-btn{
  width:var(--control-md) !important;
  height:var(--control-md) !important;
  min-width:var(--control-md) !important;
  min-height:var(--control-md) !important;
  border-radius:999px !important;
  font-size:0 !important;
  position:absolute !important;
  top:50% !important;
  transform:translateY(-50%) !important;
}
.s3-nav-prev::before,
.s3-nav-next::before{
  content:"" !important;
  width:10px !important;
  height:10px !important;
  border-top:var(--icon-stroke) solid currentColor !important;
  border-right:var(--icon-stroke) solid currentColor !important;
  box-sizing:border-box !important;
}
.s3-nav-prev::before{transform:translateX(2px) rotate(-135deg) !important;}
.s3-nav-next::before{transform:translateX(-2px) rotate(45deg) !important;}

/* fullscreen controls */
.media-viewer-close{
  width:var(--control-xl) !important;
  height:var(--control-xl) !important;
  min-width:var(--control-xl) !important;
  min-height:var(--control-xl) !important;
  font-size:0 !important;
  position:absolute !important;
}
.media-viewer-close::before,
.media-viewer-close::after{
  content:"" !important;
  position:absolute !important;
  width:16px !important;
  height:2px !important;
  background:currentColor !important;
  border-radius:2px !important;
}
.media-viewer-close::before{transform:rotate(45deg) !important;}
.media-viewer-close::after{transform:rotate(-45deg) !important;}

.media-viewer-arrow{
  width:var(--control-xl) !important;
  height:var(--control-xl) !important;
  min-width:var(--control-xl) !important;
  min-height:var(--control-xl) !important;
  font-size:0 !important;
  position:absolute !important;
}
.media-viewer-prev::before,
.media-viewer-next::before{
  content:"" !important;
  width:12px !important;
  height:12px !important;
  border-top:var(--icon-stroke) solid currentColor !important;
  border-right:var(--icon-stroke) solid currentColor !important;
  box-sizing:border-box !important;
}
.media-viewer-prev::before{transform:translateX(2px) rotate(-135deg) !important;}
.media-viewer-next::before{transform:translateX(-2px) rotate(45deg) !important;}

/* drawer close */
.drawer-close{
  width:var(--control-lg) !important;
  height:var(--control-lg) !important;
  min-width:var(--control-lg) !important;
  min-height:var(--control-lg) !important;
  font-size:0 !important;
  position:relative !important;
}
.drawer-close::before,
.drawer-close::after{
  content:"" !important;
  position:absolute !important;
  width:14px !important;
  height:2px !important;
  background:currentColor !important;
}
.drawer-close::before{transform:rotate(45deg) !important;}
.drawer-close::after{transform:rotate(-45deg) !important;}

/* bottom nav: same layout method for Home and Search */
.bottom-nav{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:center !important;
  gap:8px !important;
}
.nav-home,
.nav-location{
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  text-align:center !important;
  padding:0 14px !important;
  box-sizing:border-box !important;
}
.nav-home > *,
.nav-location > *{
  margin:0 !important;
}

/* search-destination label specifically centered */
.nav-location{
  line-height:1.15 !important;
}

/* chips/labels centered consistently */
.chip,
.location-btn,
.location-option{
  display:flex !important;
  align-items:center !important;
}
.location-btn{
  justify-content:space-between !important;
}
.location-option,
.chip{
  justify-content:flex-start !important;
}


/* ===== MOBILE DETAIL SCROLL GEOMETRY ===== */
:root{
  --bottom-nav-height:78px;
  --mobile-safe-gap:20px;
}

@media (max-width:699px){
  /* One scroll container only */
  #screen3{
    overflow:hidden !important;
  }

  .s3-main{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .s3-content{
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    
    overscroll-behavior-y:contain !important;
    scroll-padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--mobile-safe-gap)) !important;
  }

  .s3-body{
    padding-bottom:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--mobile-safe-gap) + 16px) !important;
    min-height:max-content !important;
  }

  /* ensure final actionable row can clear nav */
  .s3-body::after{
    content:"" !important;
    display:block !important;
    height:1px !important;
  }
}


/* ===== SVG CONTROL GEOMETRY + TRUE CENTERING ===== */
.ui-icon{
  width:18px !important;
  height:18px !important;
  display:block !important;
  flex:none !important;
  overflow:visible !important;
}
.ui-icon path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}

/* real icon nodes replace older pseudo-elements */
.s2-back::before,.s2-back::after,
.s3-back::before,.s3-back::after,
.s3-nav-prev::before,.s3-nav-prev::after,
.s3-nav-next::before,.s3-nav-next::after,
.media-viewer-close::before,.media-viewer-close::after,
.media-viewer-prev::before,.media-viewer-prev::after,
.media-viewer-next::before,.media-viewer-next::after,
.drawer-close::before,.drawer-close::after{
  content:none !important;
  display:none !important;
}

.s2-back,.s3-back,
.s3-nav-btn,
.media-viewer-close,.media-viewer-arrow,
.drawer-close{
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  line-height:0 !important;
}

.s3-nav-btn{
  top:50% !important;
  transform:translateY(-50%) !important;
}


/* ===== MOBILE SCROLL BOUNDARY FROM REAL NAV POSITION ===== */
:root{
  --nav-obstruction:98px;
  --detail-bottom-gap:16px;
}

@media (max-width:699px){
  #screen3{
    overflow:hidden !important;
  }

  .s3-main{
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .s3-content{
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    scroll-padding-bottom:calc(var(--nav-obstruction) + var(--detail-bottom-gap)) !important;
  }

  .s3-body{
    padding-bottom:calc(var(--nav-obstruction) + var(--detail-bottom-gap)) !important;
  }
}


/* ===== HOME TEXT-ONLY + SMALL MEDIA ARROWS + EXTRA SCROLL BREATHING ===== */

/* Home: keep label only, centered */
.nav-home{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:0 !important;
}
.nav-home .nav-icon,
.nav-home .home-icon,
.nav-home svg,
.nav-home::before,
.nav-home::after{
  display:none !important;
  content:none !important;
}
.nav-home > *{
  margin:0 !important;
}
.nav-home span{
  width:100% !important;
  text-align:center !important;
}

/* Normal image arrows: 30% smaller and solid */
.s3-nav-btn{
  width:28px !important;
  height:28px !important;
  min-width:28px !important;
  min-height:28px !important;
  background:#1C1C1E !important;
  color:#FFFDF7 !important;
  border:0 !important;
  box-shadow:0 3px 10px rgba(28,28,30,.16) !important;
  opacity:1 !important;
}
.s3-nav-btn .ui-icon{
  width:13px !important;
  height:13px !important;
}
.s3-nav-prev{
  left:max(12px,env(safe-area-inset-left)) !important;
}
.s3-nav-next{
  right:max(12px,env(safe-area-inset-right)) !important;
}

/* Extra breathing space below detail content */
:root{
  --detail-bottom-gap:64px;
}
@media (max-width:699px){
  .s3-content{
    scroll-padding-bottom:calc(var(--nav-obstruction) + var(--detail-bottom-gap)) !important;
  }
  .s3-body{
    padding-bottom:calc(var(--nav-obstruction) + var(--detail-bottom-gap)) !important;
  }
}


/* ===== CANONICAL BOTTOM NAV TYPOGRAPHY ===== */
.bottom-nav .nav-home,
.bottom-nav .nav-location{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:14px !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  font-family:inherit !important;
}

.bottom-nav .nav-home *,
.bottom-nav .nav-location *{
  font-size:14px !important;
  font-weight:600 !important;
  line-height:14px !important;
  letter-spacing:.02em !important;
  text-transform:uppercase !important;
  font-family:inherit !important;
}

.bottom-nav .nav-home,
.bottom-nav .nav-location{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}


/* ===== IMAGE DELIVERY PERFORMANCE (NO LAYOUT REDESIGN) ===== */
.it-thumb img,
.s3-hero img,
.media-viewer-slide img{
  max-width:100%;
}


/* ===== INTERACTION AUDIT CLEANUP ===== */

/* Supplied SVGs are the only visible back/left/right/close icon source. */
.provided-icon{
  display:block !important;
  width:100% !important;
  height:100% !important;
  pointer-events:none !important;
  user-select:none !important;
}
.back-btn .provided-icon,
.s3-back .provided-icon,
.drawer-close .provided-icon{
  width:18px !important;
  height:18px !important;
}
.s3-nav-btn .provided-icon{
  width:14px !important;
  height:14px !important;
}
.media-viewer-close .provided-icon,
.media-viewer-arrow .provided-icon{
  width:20px !important;
  height:20px !important;
}

/* Never let old pseudo-icon geometry reappear. */
.back-btn::before,.back-btn::after,
.s3-back::before,.s3-back::after,
.s3-nav-btn::before,.s3-nav-btn::after,
.media-viewer-close::before,.media-viewer-close::after,
.media-viewer-arrow::before,.media-viewer-arrow::after,
.drawer-close::before,.drawer-close::after{
  content:none !important;
  display:none !important;
}

/* Explicit arrows only; invisible tap zones no longer intercept image taps. */
.s3-tap-left,
.s3-tap-right{
  display:none !important;
  pointer-events:none !important;
}

/* Ensure static click targets remain above media and receive taps. */
.back-btn,
.s3-back,
.s3-nav-btn,
.drawer-close,
.media-viewer-close,
.media-viewer-arrow,
.nav-item{
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent;
}

/* Disabled links are visibly inert and cannot jump to #. */
.btn3-disabled,
[aria-disabled="true"]{
  pointer-events:none !important;
  cursor:default !important;
}

/* Overflow motion never escapes a button's safe area. */
.marquee-button{
  overflow:hidden !important;
}
.marquee-clip{
  display:block !important;
  min-width:0 !important;
  max-width:100%;
  overflow:hidden !important;
  white-space:nowrap !important;
}
.marquee-text{
  display:inline-block !important;
  white-space:nowrap !important;
  transform:translateX(0);
  will-change:transform;
}
.marquee-button.is-overflowing .marquee-text{
  animation:buttonMarquee var(--marquee-duration,6s) ease-in-out infinite alternate;
}
@keyframes buttonMarquee{
  0%,14%{transform:translateX(0)}
  86%,100%{transform:translateX(calc(-1 * var(--marquee-shift,0px)))}
}
@media (prefers-reduced-motion:reduce){
  .marquee-button.is-overflowing .marquee-text{
    animation:none !important;
    transform:none !important;
  }
}


/* Neighborhood results are real buttons for reliable touch/click behavior */
.drawer-neigh{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
}


.location-btn,
.location-option,
.drawer-neigh{
  appearance:none !important;
  -webkit-appearance:none !important;
  font:inherit;
}
.location-btn,
.location-option{
  width:100%;
  cursor:pointer;
}
.location-btn:disabled{
  cursor:default;
}


/* ===== CANONICAL CONTROL CONTRAST SYSTEM ===== */
:root{
  --control-light:#F6F4EE;
  --control-light-strong:#EEECE6;
  --control-border:rgba(28,28,30,.14);
  --control-ink:#1C1C1E;
  --control-muted:#8E8E93;
}

/* Supplied SVG controls are dark artwork, so always place them on light surfaces. */
.back-btn,
.s3-back,
.s3-nav-btn,
.drawer-close,
.media-viewer-close,
.media-viewer-arrow{
  background:var(--control-light) !important;
  color:var(--control-ink) !important;
  border:1px solid var(--control-border) !important;
  box-shadow:0 4px 14px rgba(28,28,30,.08) !important;
  opacity:1 !important;
}

/* Explicit active/pressed feedback remains grayscale and readable. */
.back-btn:active,
.s3-back:active,
.s3-nav-btn:active,
.drawer-close:active,
.media-viewer-close:active,
.media-viewer-arrow:active{
  background:var(--control-light-strong) !important;
  color:var(--control-ink) !important;
  border-color:rgba(28,28,30,.18) !important;
}

/* Disabled fullscreen arrow stays visible but clearly inactive. */
.media-viewer-arrow:disabled{
  background:#EEECE6 !important;
  color:var(--control-muted) !important;
  border-color:rgba(28,28,30,.08) !important;
  box-shadow:none !important;
  opacity:.72 !important;
}

/* Keep supplied SVG artwork visible and untouched. */
.back-btn .provided-icon,
.s3-back .provided-icon,
.s3-nav-btn .provided-icon,
.drawer-close .provided-icon,
.media-viewer-close .provided-icon,
.media-viewer-arrow .provided-icon{
  opacity:1 !important;
  filter:none !important;
}

/* Bottom navigation stays as the stronger navigation hierarchy. */
.bottom-nav{
  background:#E8E6E0 !important;
  border:1px solid rgba(28,28,30,.14) !important;
}
.nav-home.active,
.nav-location.active{
  background:#1C1C1E !important;
  color:#FFFDF7 !important;
  border-color:#1C1C1E !important;
}
.nav-home:not(.active),
.nav-location:not(.active){
  background:#F6F4EE !important;
  color:#3A3A3C !important;
  border:1px solid rgba(28,28,30,.10) !important;
  opacity:1 !important;
}

/* Search/location hierarchy */
.location-btn{
  background:#EEECE6 !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.14) !important;
  opacity:1 !important;
}
.location-btn.is-disabled,
.location-btn:disabled{
  background:#F1EFE9 !important;
  color:#8E8E93 !important;
  border-color:rgba(28,28,30,.08) !important;
  opacity:1 !important;
}
.location-option{
  background:#FFFDF7 !important;
  color:#636366 !important;
  border:1px solid rgba(28,28,30,.08) !important;
  opacity:.78 !important;
}
.location-option.selected{
  background:#D8D6D0 !important;
  color:#1C1C1E !important;
  border-color:#C7C7CC !important;
  opacity:1 !important;
}

/* Category/filter hierarchy */
.chip{
  background:#FFFDF7 !important;
  color:#3A3A3C !important;
  border-color:rgba(28,28,30,.12) !important;
  opacity:1 !important;
}
.chip.active{
  background:#D8D6D0 !important;
  color:#1C1C1E !important;
  border-color:#C7C7CC !important;
}

/* Action buttons */
.btn3-tiktok,
.btn3-maps,
.s3-maps-btn,
.creator-tiktok-btn,
.area-card{
  background:#1C1C1E !important;
  color:#FFFDF7 !important;
  border-color:#1C1C1E !important;
}
.btn3-ig{
  background:#EEECE6 !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.12) !important;
}
.btn3-disabled,
[aria-disabled="true"]{
  background:#EEECE6 !important;
  color:#8E8E93 !important;
  border-color:rgba(28,28,30,.08) !important;
  opacity:1 !important;
}


/* ===== TYPOGRAPHY WRAP REFINEMENT ===== */
.discover-sheet h1,
.discover-sheet > p,
.s3-name,
.s3-take,
.microtake,
.drawer-title,
.drawer-empty,
.drawer-neigh span:first-child,
.drawer-place .info .name,
.drawer-place .info .loc{
  text-wrap:balance;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}

.s3-take,
.microtake,
.drawer-empty{
  text-wrap:pretty;
}

/* Keep very short last lines from becoming visually awkward where supported */
@supports (text-wrap: pretty){
  .discover-sheet h1,
  .discover-sheet > p,
  .s3-name,
  .s3-take,
  .microtake{
    text-wrap:pretty;
  }
}



/* ===== BUTTON-SAFE MARQUEE ===== */
.nav-location,
.location-btn,
.btn3,
.s3-maps-btn{
  overflow:hidden !important;
}

.nav-location .nav-label,
.location-btn > span:first-child,
.btn3,
.s3-maps-btn{
  min-width:0 !important;
}

/* Only the label itself moves; it never receives pointer events. */
.marquee-text-safe{
  display:inline-block !important;
  white-space:nowrap !important;
  pointer-events:none !important;
  will-change:transform;
}

.marquee-clip-safe{
  min-width:0 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
  display:block !important;
  pointer-events:none !important;
}

.is-marquee-overflowing .marquee-text-safe{
  animation:safeMarquee var(--marquee-duration,5.5s) ease-in-out .5s infinite alternate;
}

@keyframes safeMarquee{
  0%,6%{transform:translateX(0)}
  94%,100%{transform:translateX(calc(-1 * var(--marquee-shift-safe,0px)))}
}

@media (prefers-reduced-motion:reduce){
  .is-marquee-overflowing .marquee-text-safe{
    animation:none !important;
    transform:none !important;
  }
}

/* Country / City buttons retain independent chevron hit/layout area. */
.location-btn{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:12px !important;
}
.location-btn > .chev{
  grid-column:2 !important;
  flex:none !important;
  pointer-events:none !important;
}



/* ===== STABLE DESKTOP / WIDE-SCREEN LAYOUT ===== */
@media (min-width:1100px){
  /* Area/map screen: explicit flex proportions, matching the base layout model. */
  .s2-main{
    display:flex !important;
    flex-direction:row !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:20px clamp(20px,2vw,36px) !important;
    gap:clamp(18px,1.6vw,28px) !important;
    overflow:hidden !important;
  }

  .s2-map{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    height:auto !important;
    min-height:calc(100vh - 145px) !important;
  }

  .s2-side{
    flex:0 0 clamp(390px,30vw,500px) !important;
    width:auto !important;
    max-width:none !important;
    min-width:340px !important;
    min-height:0 !important;
  }

  /* Detail screen: explicit flex proportions; image grows with window. */
  .s3-main{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:20px clamp(20px,2vw,36px) !important;
    gap:14px !important;
    overflow:hidden !important;
  }

  .s3-content{
    display:flex !important;
    flex-direction:row !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:calc(100vh - 120px) !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  .s3-hero{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:auto !important;
    max-width:none !important;
    height:100% !important;
    aspect-ratio:auto !important;
  }

  .s3-body{
    flex:0 0 clamp(380px,31vw,520px) !important;
    width:auto !important;
    max-width:none !important;
    min-width:340px !important;
    height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
}

@media (min-width:1700px){
  .s2-side{
    flex-basis:clamp(420px,27vw,540px) !important;
  }
  .s3-body{
    flex-basis:clamp(420px,28vw,560px) !important;
  }
}


/* ===== CANONICAL INTERACTION HIT AREAS ===== */
.location-btn,
.location-option,
.drawer-neigh,
.drawer-place,
.nav-item,
.btn3,
.s3-maps-btn,
.back-btn,
.s3-back,
.s3-nav-btn,
.drawer-close,
.media-viewer-close,
.media-viewer-arrow{
  position:relative;
  pointer-events:auto !important;
  touch-action:manipulation !important;
  -webkit-tap-highlight-color:transparent;
}

.location-btn > *,
.location-option > *,
.drawer-neigh > *,
.drawer-place > *,
.nav-item > *,
.btn3 > *,
.s3-maps-btn > *,
.back-btn > *,
.s3-back > *,
.s3-nav-btn > *,
.drawer-close > *,
.media-viewer-close > *,
.media-viewer-arrow > *{
  pointer-events:none !important;
}

.location-btn,
.location-option,
.drawer-neigh{
  width:100%;
  box-sizing:border-box;
}

.drawer-neigh{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}


/* ===== SEARCH DRAWER SCROLL + CLICK RELIABILITY ===== */
@media (max-width:699px){
  .drawer{
    display:flex !important;
    flex-direction:column !important;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top)) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .drawer-header,
  .drawer-search,
  #drawerBrowseControls{
    flex:0 0 auto !important;
  }

  #drawerBrowseControls{
    min-height:0 !important;
    overflow:visible !important;
  }

  #countryPicker,
  #cityPicker{
    min-height:0 !important;
  }

  .location-options{
    max-height:min(34vh, 260px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    
    overscroll-behavior:contain !important;
    padding-bottom:6px !important;
  }

  #drawerResults{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    
    overscroll-behavior:contain !important;
    padding-bottom:calc(24px + env(safe-area-inset-bottom)) !important;
  }
}

/* Interactive search controls must sit above moving/scrolling content. */
#countryPicker,
#cityPicker,
#drawerResults{
  position:relative !important;
  z-index:2 !important;
}

.location-btn,
.location-option,
.drawer-neigh{
  position:relative !important;
  z-index:3 !important;
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

.location-btn *,
.location-option *,
.drawer-neigh *{
  pointer-events:none !important;
}


#navSearch{
  pointer-events:auto !important;
  touch-action:manipulation !important;
  cursor:pointer !important;
}
#navSearch *{
  pointer-events:none !important;
}


/* ===== FINAL AREA LIST SCROLL + CITY FILTER ===== */
.s2-main,
.s2-side{
  min-height:0 !important;
}

.s2-side{
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding-bottom:0 !important;
}

.filter-stack,
.it-eyebrow{
  flex:0 0 auto !important;
}

#itList{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  
  overscroll-behavior-y:contain !important;
  padding-bottom:calc(var(--bottom-nav-height,78px) + env(safe-area-inset-bottom) + 28px) !important;
}

#cityFilterRow,
#filterRow{
  display:flex;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  touch-action:pan-x !important;
  scrollbar-width:none;
}
#cityFilterRow::-webkit-scrollbar,
#filterRow::-webkit-scrollbar{display:none;}

#cityFilterRow .chip,
#filterRow .chip{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* ===== FINAL SEARCH DRAWER SCROLL ===== */
.drawer{
  min-height:0 !important;
}

@media (max-width:699px){
  .drawer{
    display:flex !important;
    flex-direction:column !important;
    max-height:calc(100dvh - 12px - env(safe-area-inset-top)) !important;
    overflow:hidden !important;
  }

  .drawer-header,
  .drawer-search,
  #drawerBrowseControls{
    flex:0 0 auto !important;
  }

  .location-options{
    max-height:min(34vh,260px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    padding-bottom:8px !important;
  }

  #drawerResults{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)) !important;
  }
}

/* ===== FINAL BUTTON CONTRAST ===== */
.back-btn,
.s3-back,
.s3-nav-btn,
.drawer-close,
.media-viewer-close,
.media-viewer-arrow{
  background:#F6F4EE !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.14) !important;
  opacity:1 !important;
}

.location-btn{
  background:#EEECE6 !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.14) !important;
  opacity:1 !important;
}
.location-btn:disabled,
.location-btn.is-disabled{
  background:#F1EFE9 !important;
  color:#8E8E93 !important;
  opacity:1 !important;
}
.location-option,
.drawer-neigh,
.chip{
  background:#FFFDF7 !important;
  color:#3A3A3C !important;
  border:1px solid rgba(28,28,30,.10) !important;
}
.location-option.selected,
.chip.active{
  background:#D8D6D0 !important;
  color:#1C1C1E !important;
  border-color:#C7C7CC !important;
  opacity:1 !important;
}

.btn3-tiktok,
.btn3-maps,
.s3-maps-btn,
.creator-tiktok-btn,
.area-card,
.nav-home.active,
.nav-location.active{
  background:#1C1C1E !important;
  color:#FFFDF7 !important;
}
.btn3-ig,
.nav-home:not(.active),
.nav-location:not(.active){
  background:#F6F4EE !important;
  color:#1C1C1E !important;
  border:1px solid rgba(28,28,30,.10) !important;
}
.btn3-disabled,
[aria-disabled="true"]{
  background:#EEECE6 !important;
  color:#8E8E93 !important;
  opacity:1 !important;
}

/* ===== FINAL MOTION POLISH ===== */
@media (prefers-reduced-motion:no-preference){
  .nav-item,.location-btn,.location-option,.drawer-neigh,.drawer-place,
  .chip,.it-row,.btn3,.s3-maps-btn,.back-btn,.s3-back,.s3-nav-btn,
  .drawer-close,.media-viewer-close,.media-viewer-arrow,.area-card{
    transition:
      transform 150ms cubic-bezier(.22,.8,.24,1),
      opacity 180ms cubic-bezier(.22,.8,.24,1),
      background-color 220ms cubic-bezier(.22,.8,.24,1),
      border-color 220ms cubic-bezier(.22,.8,.24,1),
      color 220ms cubic-bezier(.22,.8,.24,1),
      box-shadow 220ms cubic-bezier(.22,.8,.24,1) !important;
  }
  .nav-item:active,.location-btn:active,.location-option:active,.drawer-neigh:active,
  .drawer-place:active,.chip:active,.it-row:active,.btn3:active,.s3-maps-btn:active,
  .back-btn:active,.s3-back:active,.s3-nav-btn:active,.drawer-close:active,
  .media-viewer-close:active,.media-viewer-arrow:active,.area-card:active{
    transform:scale(.975) !important;
  }
}


/* ===== GOOGLE MAPS GESTURE SAFETY ===== */
/* Let Google Maps own gestures inside the map canvas. */
.gm-style,
.gm-style *{
  touch-action:auto;
}

/* Keep site controls explicitly tappable and unaffected. */
.nav-item,
.location-btn,
.location-option,
.drawer-neigh,
.drawer-place,
.btn3,
.s3-maps-btn,
.back-btn,
.s3-back,
.s3-nav-btn,
.drawer-close,
.media-viewer-close,
.media-viewer-arrow{
  touch-action:manipulation !important;
}


/* ===== SEARCH DRAWER AXIS LOCK + MARQUEE TIMING ===== */
.drawer,
#drawerBrowseControls,
#countryPicker,
#cityPicker,
#drawerResults,
.location-options{
  overflow-x:hidden !important;
}

@media (max-width:699px){
  .drawer{
    touch-action:pan-y !important;
    overscroll-behavior-x:none !important;
  }

  #drawerBrowseControls,
  #countryPicker,
  #cityPicker,
  #drawerResults,
  .location-options{
    touch-action:pan-y !important;
    overscroll-behavior-x:none !important;
  }
}

/* Moving text never becomes the horizontal gesture target. */
.marquee-clip,
.marquee-text,
.marquee-clip-safe,
.marquee-text-safe,
.marquee-shell,
.marquee-runner{
  pointer-events:none !important;
}

/* Start long-label movement after 0.5s instead of 1s. */
.marquee-button.is-overflowing .marquee-text,
.is-marquee-overflowing .marquee-text-safe,
.has-marquee-overflow .marquee-runner{
  animation-delay:.5s !important;
}


/* ===== SCREEN 2 TOUCH OWNERSHIP ===== */

/* Map: Google Maps owns gestures. */
.s2-map,
.s2-map .gm-style,
.s2-map .gm-style *{
  touch-action:auto !important;
}

/* Side panel itself never scrolls; children own axes explicitly. */
.s2-side{
  overflow:hidden !important;
  touch-action:none !important;
}

/* Category + city filters: horizontal only. */
#filterRow,
#cityFilterRow{
  overflow-x:auto !important;
  overflow-y:hidden !important;
  touch-action:pan-x !important;
  overscroll-behavior-x:contain !important;
  overscroll-behavior-y:none !important;
  -webkit-overflow-scrolling:touch !important;
}

/* Place list: vertical only. */
#itList{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  touch-action:pan-y !important;
  overscroll-behavior-y:auto !important;
  overscroll-behavior-x:none !important;
  
}

/* List rows are tappable but do not steal scrolling. */
.it-row{
  touch-action:pan-y !important;
}
.it-row > *{
  pointer-events:none;
}


.neighborhood-guide{padding:18px;border-bottom:1px solid var(--line);background:var(--paper)}
.neighborhood-guide.hidden{display:none}
.neighborhood-guide-hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:16px;background:#dedbd2}
.neighborhood-guide-kicker{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-bottom:7px}
.neighborhood-guide h2{font-size:24px;line-height:1.05;margin:0 0 9px;letter-spacing:-.025em}
.neighborhood-guide-copy{font-size:12px;line-height:1.55;color:#55534e;max-width:52ch}
.neighborhood-guide-facts{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.neighborhood-guide-fact{border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:9px;background:rgba(255,255,255,.6)}
.neighborhood-guide-tip{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:10.5px;line-height:1.45;color:#55534e}
.neighborhood-guide-tip b{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);display:block;margin-bottom:4px}
@media(min-width:700px){.neighborhood-guide{padding:22px}.neighborhood-guide h2{font-size:28px}}


/* Explicit content hierarchy: neighborhood guide -> spots -> spot story */
.spots-section-title{
  font-size:18px;
  line-height:1.12;
  font-weight:900;
  letter-spacing:-.025em;
  margin:5px 12px 12px;
  color:var(--ink);
}
.spots-section-title.hidden{display:none}
#spotDescriptionSection{margin-bottom:0}