/* The selected vertical composition applies to mobile homepages only. */
@media (max-width: 700px) {
  .hero-mobile {
    --mobile-ui: "Sarabun", sans-serif;
    --mobile-cream: #f2e9d8;
    --mobile-gold: #c5af7e;
    display: block;
    position: relative;
    min-height: 41.5rem;
    padding: 0 0 2rem;
    overflow: hidden;
    isolation: isolate;
    background: #214b3b;
    color: var(--mobile-cream);
    text-align: center;
  }
  .hero-mobile::before { display: none; }
  html[lang="zh-Hans"] .hero-mobile { --mobile-ui: "Noto Sans SC", sans-serif; --font-serif: "Noto Serif SC"; }
  html[lang="ja"] .hero-mobile { --mobile-ui: "Noto Sans JP", sans-serif; --font-serif: "Noto Serif JP"; }
  html[lang="ko"] .hero-mobile { --mobile-ui: "Noto Sans KR", sans-serif; --font-serif: "Noto Serif KR"; }
  .hero-mobile__topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.125rem 0;
    gap: .5rem;
  }
  .hero-mobile__place { font: 400 .75rem/1.5 var(--mobile-ui); letter-spacing: .1em; }
  .hero-mobile .hero-mobile__language { position: static; }
  .hero-mobile .language-dropdown summary {
    min-height: 2.75rem;
    padding: .5rem .7rem;
    border: 1px solid #c5af7e66;
    background: #14382b;
    font-size: .875rem;
  }
  .hero-mobile .language-dropdown__menu { min-width: 10rem; text-align: left; }
  .hero-mobile__content {
    position: relative;
    z-index: 3;
    width: min(100%, 25rem);
    margin-inline: auto;
    padding: 1.1875rem 1.375rem 0;
  }
  .hero-mobile .hero-mobile__logo {
    display: block;
    width: 9.25rem;
    height: 10.875rem;
    margin: 0 auto;
    object-fit: contain;
    filter: none;
  }
  .hero-mobile__rule { display: flex; justify-content: center; align-items: center; gap: .75rem; margin: 1.0625rem 0 1.125rem; color: var(--mobile-gold); }
  .hero-mobile__rule span { width: 2rem; height: 1px; background: #c5af7e88; }
  .hero-mobile__rule svg { width: 1rem; height: 1rem; }
  .hero-mobile__kicker { font: 400 .75rem/1.5 var(--mobile-ui); letter-spacing: .1em; color: var(--mobile-gold); }
  .hero-mobile .hero-mobile__headline {
    display: block;
    margin: .8125rem 0 0;
    color: var(--mobile-cream);
    font: 600 clamp(1.55rem, 7.73vw, 1.8125rem)/1.47 var(--font-serif, "Marcellus"), serif;
    text-wrap: balance;
  }
  html[lang="th"] .hero-mobile .hero-mobile__headline { font-family: "Noto Serif Thai", "TH Kodchasal", serif; }
  html[lang="en"] .hero-mobile .hero-mobile__headline { font-weight: 400; }
  .hero-mobile__english { margin: .9375rem 0 1.5rem; color: var(--mobile-gold); font: 400 1.125rem/1.45 "Marcellus", Georgia, serif; }
  .hero-mobile .hero-mobile__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .5625rem; }
  .hero-mobile__action {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    padding: .625rem 1rem;
    border: 1px solid #c5af7e99;
    border-radius: 2rem;
    color: var(--mobile-cream);
    background: #214b3b;
    font: 600 .875rem/1.5 var(--mobile-ui);
    text-decoration: none;
    white-space: nowrap;
  }
  .hero-mobile__action--primary { border-color: var(--mobile-cream); color: #14382b; background: var(--mobile-cream); }
  .hero-mobile__action:hover { color: var(--mobile-cream); background: #14382b; }
  .hero-mobile__action--primary:hover { color: #14382b; background: #e8d8b7; }
  .hero-mobile__action svg { width: 1.0625rem; height: 1.0625rem; flex: 0 0 auto; }
  .hero-mobile__hours { margin: 1.3125rem 0 .3125rem; font: 400 .8125rem/1.6 var(--mobile-ui); color: var(--mobile-cream); }
  .hero-mobile__location { display: flex; justify-content: center; align-items: center; gap: .3125rem; margin: 0; font: 400 .75rem/1.6 var(--mobile-ui); color: var(--mobile-cream); }
  .hero-mobile__location svg { width: .875rem; height: .875rem; flex: 0 0 auto; }
  .hero-mobile__food { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; }
  .hero-mobile__food img { position: absolute; display: block; width: 50.625rem; max-width: none; height: auto; }
  .hero-mobile__food--top { width: 13.8125rem; height: 9.6875rem; top: -2.3125rem; left: -4.1875rem; mask-image: linear-gradient(to right,#000 65%,transparent),linear-gradient(to bottom,#000 70%,transparent); mask-composite: intersect; }
  .hero-mobile__food--top img { left: -4rem; top: 0; }
  .hero-mobile__food--left { width: 7rem; height: 13.4375rem; bottom: -.5rem; left: -2.25rem; mask-image: linear-gradient(to left,transparent,#000 45%),linear-gradient(to bottom,transparent,#000 18%); mask-composite: intersect; }
  .hero-mobile__food--left img { left: 0; top: -8.125rem; }
  .hero-mobile__food--right { width: 9.625rem; height: 18.5rem; bottom: -2rem; right: -2.1875rem; mask-image: linear-gradient(to right,transparent,#000 60%),linear-gradient(to bottom,transparent,#000 20%); mask-composite: intersect; }
  .hero-mobile__food--right img { right: 0; top: 0; }
  @supports not (mask-composite: intersect) {
    .hero-mobile__food--top { mask-image: linear-gradient(to right,#000 65%,transparent); }
    .hero-mobile__food--left { mask-image: linear-gradient(to left,transparent,#000 45%); }
    .hero-mobile__food--right { mask-image: linear-gradient(to right,transparent,#000 60%); }
  }
}