/* Touch layouts: original membership artwork, reachable controls and roomy content. */
.hero-card-mobile{display:none}
.language-switch button,.booking-top .language-switch button{min-width:44px}
.guest-stepper button:disabled{opacity:.35;cursor:default}

@media(max-width:1024px),(hover:none),(pointer:coarse){
  .hero-card{display:none;animation:none}
  .hero-card-mobile{display:block;width:160px;max-width:100%;margin:0;padding:0}
  .hero-card-mobile>img{display:block;width:100%;height:auto}
}

@media(max-width:1024px){
  .mobile-menu-btn,.mobile-menu-close{width:44px;height:44px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .mobile-menu-close{display:flex;position:fixed;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));background:#142849;border:1px solid #ffffff30;border-radius:50%;z-index:1}
  .mobile-menu{justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;padding:max(76px,calc(env(safe-area-inset-top) + 64px)) 24px max(32px,env(safe-area-inset-bottom));gap:4px}
  .mobile-menu a{flex:none;width:min(100%,480px);min-height:48px;padding:13px 8px;font-size:16px;line-height:1.5;letter-spacing:.035em;text-align:center;text-transform:none;overflow-wrap:break-word}
  .mobile-menu-island{flex:none;margin:18px 0 6px}
}

@media(max-width:700px){
  html{scroll-padding-top:124px}
  .xp-view-switch::before{content:'';position:absolute;inset:0 calc((100% - 100vw)/2);background:#10243f;z-index:-1}
  body>nav{background:#10243ff7}
  #map,.hotel-section,.home-discover,.map-info-panel{scroll-margin-top:0}
  .hero{min-height:0}
  .hero-content{padding-top:164px;padding-bottom:28px;gap:18px}
  html[lang=ja] .hero-h1{font-size:clamp(26px,7.5vw,34px);line-height:1.6;letter-spacing:0}
  html[lang=ja] .hero-eyebrow{font-size:12px;letter-spacing:.07em;line-height:1.6}
  .map-info-panel.active{max-height:none;overflow:visible;transition:none}
  .map-info-actions{flex-wrap:wrap}
  .map-info-actions .map-info-btn{flex:1;min-width:100px}

  /* Keep the exit and language controls in reach throughout the preview. */
  .booking-dialog{border:0;scroll-padding-top:88px}
  .booking-top{position:sticky;top:0;z-index:5;padding-top:max(12px,env(safe-area-inset-top));box-shadow:0 1px 0 #ffffff20}
  .booking-main{padding-bottom:28px}
  .booking-summary-body{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .booking-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;font-size:12px;line-height:1.45}
  .booking-progress li{display:flex;align-items:flex-start;flex-direction:column;gap:7px;min-width:0}
  .booking-progress span{width:26px;height:26px;font-size:13px}
  .guest-row label{min-width:0}
  .guest-stepper button{width:44px;height:44px}
  .booking-label{flex-wrap:wrap;gap:4px 12px}
  .booking-main input[type=date]{min-width:0;max-width:100%;appearance:none;-webkit-appearance:none}
  .booking-mobile-total{gap:10px}
  .booking-mobile-total strong{font-size:22px}
  .booking-summary dl>div{flex-wrap:wrap;gap:5px 14px}
  html[lang=ja] .booking-review>div{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:12px}
  .legal-page h1{font-size:34px;text-wrap:balance}
  html[lang=ja] .legal-page h1{font-size:30px;line-height:1.5;letter-spacing:0;line-break:strict}
}

@media(max-width:500px){
  /* Give experience copy the full screen width instead of a narrow side column. */
  .xp-card{grid-template-columns:minmax(0,1fr);border-radius:8px}
  .xp-card-photo{height:clamp(148px,43vw,200px);min-height:0}
  .xp-card-demo .xp-card-photo>img{object-position:50% 28%}
  .xp-card-body,html[lang=ja] .xp-card-body{padding:20px}
  .xp-card h2{font-size:27px;line-height:1.25;margin-bottom:9px}
  html[lang=ja] .xp-card h2{font-size:25px;line-height:1.4}
  .xp-category{margin-bottom:6px}
  .xp-card-description{margin:12px 0 16px}
  .xp-card-action{font-size:15px;min-height:48px}
  .xp-card-note{margin-top:9px}
  .xp-photo-label{left:12px;right:auto;bottom:12px;padding:6px 9px}
  .xp-back-link{min-height:44px}
  .xp-month-card{padding-inline:10px}
  .xp-date-button{min-height:48px}
}

@media(max-width:360px){
  .nav-inner{column-gap:6px}
  .booking-top{padding-inline:12px;gap:6px}
  .booking-top .booking-brand{gap:5px;font-size:13px}
  .booking-top .booking-brand .hi-dine-emblem{width:23px;height:23px}
  .booking-top .language-switch{gap:0}
  .xp-month-card{padding-inline:4px}
  html[lang=ja] .xp-hotel-filter{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp-card-body,html[lang=ja] .xp-card-body{padding:18px}
}