/*
 * V15 mobile customer experience.
 * The desktop brand stays intact; these rules recompose the five customer flows
 * for one-handed use in iOS and Android browsers, including WeChat WebViews.
 */

html[data-cm-mobile-page] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 7rem;
}

html[data-cm-mobile-page] body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  min-height: var(--cm-viewport-height, 100dvh);
}

html[data-cm-mobile-page] :is(button, a, input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

html[data-cm-mobile-page] :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #A72C22;
  outline-offset: 3px;
}

html[data-cm-mobile-page] .cm-language-rail[data-cm-single-language="true"] {
  display: none !important;
}

html[data-cm-mobile-page="book"] .cm-mobile-map-details {
  grid-area: maps;
}

html[data-cm-mobile-page="book"] .cm-mobile-map-details > summary {
  display: none;
}

html[data-cm-mobile-page="seat-guide"] .mobile-zone-overview {
  display: none;
}

html[data-cm-mobile-page="seat-guide"] .cm-map-details {
  display: contents;
}

html[data-cm-mobile-page="seat-guide"] .cm-map-details > summary {
  display: none;
}

.cm-wechat-payment-note {
  width: 100%;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid #9A6A18;
  border-inline-start-width: 4px;
  background: #FFF3D7;
  color: #6A4910;
  text-align: start;
}

.cm-wechat-payment-note strong,
.cm-wechat-payment-note span {
  display: block;
}

.cm-wechat-payment-note strong {
  font-size: 12px;
}

.cm-wechat-payment-note span {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.6;
}

.payment-error {
  margin: 12px 0 0;
  padding: 10px 11px;
  border: 1px solid var(--red, #B5372A);
  background: #FBE9E5;
  color: #6D2A21;
  font-size: 12px;
  font-weight: 800;
}

@media (max-width: 767px), (max-width: 950px) and (orientation: landscape) and (max-height: 430px) {
  html[data-cm-mobile-page] {
    scroll-padding-top: 4.5rem;
  }

  html[data-cm-mobile-page] body {
    overflow-x: hidden;
    overflow-x: clip;
  }

  html[data-cm-mobile-page] :is(input, select, textarea) {
    font-size: 16px !important;
  }

  html[data-cm-mobile-page] :is(button, a, summary, [role="button"]) {
    touch-action: manipulation;
  }

  html[data-cm-mobile-page] .cm-language-rail {
    position: relative !important;
    top: auto !important;
    height: 46px !important;
    padding: 2px 10px !important;
    border-bottom: 1px solid var(--line, #D9CCB6) !important;
    background: var(--paper, #FBF5E8) !important;
    background: color-mix(in srgb, var(--paper, #FBF5E8) 96%, transparent) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html[data-cm-mobile-page] .cm-language-dock {
    width: 100% !important;
    justify-content: center;
    gap: 2px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html[data-cm-mobile-page] .cm-language-dock button {
    flex: 1 1 0;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }

  /* Homepage */
  html[data-cm-mobile-page="index"] body {
    padding-bottom: 68px;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }

  html[data-cm-mobile-page="index"] .site-header {
    top: 0;
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 97%, transparent);
  }

  html[data-cm-mobile-page="index"] .header-inner {
    min-height: 56px;
    gap: 10px;
  }

  html[data-cm-mobile-page="index"] .brand-link img {
    width: 112px;
  }

  html[data-cm-mobile-page="index"] .header-cta {
    min-height: 44px;
    padding: 8px 14px;
    font-size: 12px;
  }

  html[data-cm-mobile-page="index"] .hero {
    min-height: 0;
    padding: 26px 0 34px;
  }

  html[data-cm-mobile-page="index"] .hero-grid {
    gap: 18px;
  }

  html[data-cm-mobile-page="index"] .hero-copy h1 {
    margin: 8px 0 14px;
    font-size: clamp(34px, 10.5vw, 42px);
    line-height: 1.02;
    letter-spacing: -.03em;
    text-wrap: balance;
  }

  html[data-cm-mobile-page="index"] .hero-copy h1 span {
    margin-top: 10px;
    font-size: .52em;
    line-height: 1.35;
    letter-spacing: 0;
  }

  html[data-cm-mobile-page="index"] .hero-lead {
    font-size: 15px;
    line-height: 1.75;
  }

  html[data-cm-mobile-page="index"] .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 20px;
  }

  html[data-cm-mobile-page="index"] .hero-actions .btn {
    width: 100%;
    min-height: 48px;
    padding-inline: 12px;
    font-size: 13px;
  }

  html[data-cm-mobile-page="index"] .hero-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 20px;
    padding-top: 14px;
    font-size: 12px;
  }

  html[data-cm-mobile-page="index"] .hero-meta > div {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: 8px;
    align-items: baseline;
  }

  html[data-cm-mobile-page="index"] .hero-meta b {
    margin: 0;
    font-size: 13px;
  }

  html[data-cm-mobile-page="index"] .hero-art {
    min-height: 205px;
  }

  html[data-cm-mobile-page="index"] .sun {
    width: 176px;
    height: 176px;
    top: 14px;
  }

  html[data-cm-mobile-page="index"] .logo-card {
    width: min(248px, 78vw);
    padding: 38px 22px 20px;
    border-width: 1.5px;
    box-shadow: 7px 7px 0 var(--ink);
  }

  html[data-cm-mobile-page="index"] .logo-card::before {
    top: 13px;
    right: 15px;
    font-size: 10px;
  }

  html[data-cm-mobile-page="index"] .logo-caption {
    margin-top: 13px;
    padding-top: 11px;
    font-size: 9px;
  }

  html[data-cm-mobile-page="index"] .seal {
    width: 42px;
    height: 42px;
    font-size: 14px;
  }

  html[data-cm-mobile-page="index"] .promise {
    padding: 0 0 36px;
  }

  html[data-cm-mobile-page="index"] .promise-grid {
    display: block;
    overflow: visible;
    padding: 0;
    border-block: 1px solid var(--ink);
  }

  html[data-cm-mobile-page="index"] .promise-card {
    min-height: 0;
    padding: 15px 0;
    border: 0 !important;
    border-bottom: 1px solid var(--line) !important;
    background: transparent;
  }

  html[data-cm-mobile-page="index"] .promise-card:last-child {
    border-bottom: 0 !important;
  }

  html[data-cm-mobile-page="index"] .promise-card i {
    margin-bottom: 5px;
  }

  html[data-cm-mobile-page="index"] .promise-card h3 {
    margin-bottom: 4px;
    font-size: 19px;
  }

  html[data-cm-mobile-page="index"] .promise-card p {
    font-size: 12px;
  }

  html[data-cm-mobile-page="index"] :is(.photo-head h2, .section-head h2, .gallery-heading h2) {
    font-size: clamp(28px, 8.5vw, 34px);
    letter-spacing: -.025em;
  }

  html[data-cm-mobile-page="index"] .photo-head p,
  html[data-cm-mobile-page="index"] .section-head p {
    font-size: 13px;
    line-height: 1.75;
  }

  html[data-cm-mobile-page="index"] .photo-lead .photo-frame {
    min-height: 220px;
    height: 220px;
  }

  html[data-cm-mobile-page="index"] .photo-note {
    padding: 20px 16px;
  }

  html[data-cm-mobile-page="index"] .photo-rail {
    grid-auto-columns: min(78vw, 286px);
  }

  html[data-cm-mobile-page="index"] .photo-rail .photo-frame {
    height: 178px;
  }

  html[data-cm-mobile-page="index"] .menu-section,
  html[data-cm-mobile-page="index"] .spaces,
  html[data-cm-mobile-page="index"] .booking,
  html[data-cm-mobile-page="index"] .guestbook,
  html[data-cm-mobile-page="index"] .contact-section {
    padding-block: 40px;
  }

  html[data-cm-mobile-page="index"] .dish {
    padding: 14px;
  }

  html[data-cm-mobile-page="index"] .space-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
    overflow: visible;
    border-block: 1px solid var(--ink);
  }

  html[data-cm-mobile-page="index"] .space-card,
  html[data-cm-mobile-page="index"] .space-card:first-child,
  html[data-cm-mobile-page="index"] .space-card:nth-child(4) {
    min-height: 156px;
    padding: 18px 16px;
    border: 0;
    border-bottom: 1px solid var(--line);
  }

  html[data-cm-mobile-page="index"] .space-card:last-child {
    border-bottom: 0;
  }

  html[data-cm-mobile-page="index"] .space-no {
    position: static;
    align-self: flex-start;
    margin: 0 0 auto;
    padding-bottom: 12px;
    line-height: 1.35;
  }

  html[data-cm-mobile-page="index"] .booking-copy,
  html[data-cm-mobile-page="index"] .booking-steps {
    padding: 25px 18px;
  }

  html[data-cm-mobile-page="index"] .mobile-nav {
    min-height: 62px;
    padding: 6px 8px;
    padding: 6px max(8px, env(safe-area-inset-right, 0px))
      calc(6px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }

  html[data-cm-mobile-page="index"] .mobile-nav button {
    min-height: 48px;
    font-size: 12px;
  }

  html[data-cm-mobile-page="index"] .to-top {
    bottom: 76px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  }

  /* Booking */
  html[data-cm-mobile-page="book"] .site-head {
    top: 0;
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  html[data-cm-mobile-page="book"] .head-inner {
    min-height: 56px;
    gap: 8px;
  }

  html[data-cm-mobile-page="book"] .head-title {
    font-size: 17px;
    letter-spacing: .04em;
  }

  html[data-cm-mobile-page="book"] .back {
    min-height: 44px;
    padding-inline: 12px;
  }

  html[data-cm-mobile-page="book"] main {
    padding: 20px 0 76px;
    padding: 20px 0 calc(76px + env(safe-area-inset-bottom, 0px));
  }

  html[data-cm-mobile-page="book"] .intro {
    margin-bottom: 14px;
    text-align: start;
  }

  html[data-cm-mobile-page="book"] .intro h1 {
    margin-bottom: 7px;
    font-size: clamp(27px, 8vw, 32px);
    white-space: normal;
    text-wrap: balance;
  }

  html[data-cm-mobile-page="book"] .intro p {
    font-size: 12px;
    line-height: 1.7;
  }

  html[data-cm-mobile-page="book"] .guide-link {
    min-height: 44px;
    margin-top: 4px;
    align-items: center;
  }

  html[data-cm-mobile-page="book"] .steps {
    margin-bottom: 12px;
    border-radius: 10px;
  }

  html[data-cm-mobile-page="book"] .steps span {
    min-width: 0;
    padding: 9px 4px;
    font-size: 11px;
  }

  html[data-cm-mobile-page="book"] .panel {
    padding: 14px;
    border-width: 1px;
    border-radius: 12px;
    box-shadow: none;
  }

  html[data-cm-mobile-page="book"] .row {
    align-items: stretch;
    gap: 8px;
    margin-bottom: 12px;
  }

  html[data-cm-mobile-page="book"] :is(select, .contact-field input, .contact-field select) {
    min-height: 48px;
  }

  html[data-cm-mobile-page="book"] .slots button,
  html[data-cm-mobile-page="book"] .choice button,
  html[data-cm-mobile-page="book"] .zone-tabs button {
    min-height: 46px;
  }

  html[data-cm-mobile-page="book"] .slots button:not(:disabled) {
    border-color: #a98f6b;
    background: var(--paper, #fffdf6);
    color: var(--ink, #221d18);
    font-weight: 800;
    box-shadow: 0 4px 0 #c9b08b, 0 10px 20px rgb(54 43 30 / 0.14);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  }

  html[data-cm-mobile-page="book"] .slots button:not(:disabled):active {
    box-shadow: 0 1px 0 #c9b08b, 0 4px 9px rgb(54 43 30 / 0.12);
    transform: translateY(3px);
  }

  html[data-cm-mobile-page="book"] .slots button:not(:disabled):focus-visible {
    outline: 3px solid #d2a739;
    outline-offset: 3px;
  }

  html[data-cm-mobile-page="book"] .slots button.act:not(:disabled) {
    border-color: var(--red, #bd352b);
    background: var(--red, #bd352b);
    color: #fff;
    box-shadow: 0 4px 0 #87271f, 0 11px 22px rgb(189 53 43 / 0.32);
  }

  html[data-cm-mobile-page="book"] .slots button:disabled {
    box-shadow: none;
  }

  html[data-cm-mobile-page="book"] .booking-layout {
    gap: 12px;
  }

  html[data-cm-mobile-page="book"] .option-panel {
    border-radius: 12px;
  }

  html[data-cm-mobile-page="book"] .option-head {
    padding: 14px 12px 8px;
  }

  html[data-cm-mobile-page="book"] .option-head h2 {
    font-size: 20px;
  }

  html[data-cm-mobile-page="book"] .zone-tabs {
    padding-inline: 10px;
  }

  html[data-cm-mobile-page="book"] .option-list {
    gap: 7px;
    padding: 4px 10px 10px;
  }

  html[data-cm-mobile-page="book"] .option-card {
    min-height: 68px;
    padding: 10px 11px;
    border-radius: 10px;
  }

  html[data-cm-mobile-page="book"] .option-footer {
    bottom: 0;
    padding: 10px;
    padding: 10px 10px max(10px, env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -5px 10px rgba(46, 40, 35, .08);
  }

  html[data-cm-mobile-page="book"] .cm-mobile-map-details {
    display: block;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
    overflow: clip;
  }

  html[data-cm-mobile-page="book"] .cm-mobile-map-details > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 13px;
    cursor: pointer;
    color: var(--ink);
    font-size: 13px;
    font-weight: 900;
    list-style: none;
  }

  html[data-cm-mobile-page="book"] .cm-mobile-map-details > summary::-webkit-details-marker {
    display: none;
  }

  html[data-cm-mobile-page="book"] .cm-mobile-map-details > summary::after {
    content: "展开";
    color: var(--red);
    font-size: 11px;
  }

  html[data-cm-mobile-page="book"] .cm-mobile-map-details[open] > summary::after {
    content: "收起";
  }

  html[data-cm-mobile-page="book"] .map-column {
    gap: 10px;
    padding: 0 10px 10px;
  }

  html[data-cm-mobile-page="book"] .booking-map {
    min-width: 700px;
  }

  html[data-cm-mobile-page="book"] .map-scroll-hint {
    display: block;
  }

  html[data-cm-mobile-page="book"] .policy-grid {
    gap: 8px;
  }

  html[data-cm-mobile-page="book"] .policy-card {
    min-height: 0;
    padding: 13px;
    border-radius: 10px;
  }

  html[data-cm-mobile-page="book"] .pay-card img {
    width: min(210px, 64vw);
  }

  html[data-cm-mobile-page="book"] .to-top {
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* Seat guide */
  html[data-cm-mobile-page="seat-guide"] .page {
    padding: 18px 12px 76px;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 12px
      calc(76px + env(safe-area-inset-bottom, 0px));
  }

  html[data-cm-mobile-page="seat-guide"] .head {
    padding-bottom: 14px;
  }

  html[data-cm-mobile-page="seat-guide"] .eyebrow {
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: .1em;
  }

  html[data-cm-mobile-page="seat-guide"] h1 {
    font-size: clamp(27px, 8vw, 33px);
    line-height: 1.1;
    letter-spacing: -.03em;
    white-space: normal;
    text-wrap: balance;
  }

  html[data-cm-mobile-page="seat-guide"] .head-copy {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.65;
  }

  html[data-cm-mobile-page="seat-guide"] .notice {
    gap: 4px;
    margin: 12px 0;
    padding: 12px;
    border-radius: 10px;
  }

  html[data-cm-mobile-page="seat-guide"] .mobile-zone-overview {
    display: grid;
    margin: 0 0 14px;
    border-block: 1px solid var(--ink);
  }

  html[data-cm-mobile-page="seat-guide"] .mobile-zone-row {
    display: grid;
    grid-template-columns: minmax(7.5em, .8fr) 1.2fr;
    gap: 12px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--line);
  }

  html[data-cm-mobile-page="seat-guide"] .mobile-zone-row:last-child {
    border-bottom: 0;
  }

  html[data-cm-mobile-page="seat-guide"] .mobile-zone-row b {
    font-size: 13px;
  }

  html[data-cm-mobile-page="seat-guide"] .mobile-zone-row span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
  }

  html[data-cm-mobile-page="seat-guide"] .floor {
    margin-top: 12px;
    border-width: 1px;
    border-radius: 12px;
    box-shadow: none;
    overflow: hidden;
    overflow: clip;
  }

  html[data-cm-mobile-page="seat-guide"] .floor-head {
    padding: 13px;
  }

  html[data-cm-mobile-page="seat-guide"] .floor-head h2 {
    font-size: 21px;
  }

  html[data-cm-mobile-page="seat-guide"] .floor-head p {
    margin-top: 5px;
    font-size: 11px;
  }

  html[data-cm-mobile-page="seat-guide"] .cm-map-details {
    display: block;
  }

  html[data-cm-mobile-page="seat-guide"] .cm-map-details > summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    padding: 9px 13px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    color: var(--red);
    font-size: 12px;
    font-weight: 900;
    list-style: none;
  }

  html[data-cm-mobile-page="seat-guide"] .cm-map-details > summary::-webkit-details-marker {
    display: none;
  }

  html[data-cm-mobile-page="seat-guide"] .cm-map-details > summary::after {
    content: "＋";
    font-size: 18px;
  }

  html[data-cm-mobile-page="seat-guide"] .cm-map-details[open] > summary::after {
    content: "−";
  }

  html[data-cm-mobile-page="seat-guide"] .map-scroll {
    padding: 8px;
  }

  html[data-cm-mobile-page="seat-guide"] svg {
    min-width: 760px;
  }

  html[data-cm-mobile-page="seat-guide"] .legend {
    gap: 10px;
    padding: 0 12px 12px;
    font-size: 11px;
  }

  html[data-cm-mobile-page="seat-guide"] .notes {
    display: block;
    margin-top: 14px;
    border-block: 1px solid var(--ink);
  }

  html[data-cm-mobile-page="seat-guide"] .note {
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }

  html[data-cm-mobile-page="seat-guide"] .note:last-child {
    border-bottom: 0;
  }

  html[data-cm-mobile-page="seat-guide"] .page-actions {
    position: sticky;
    bottom: 0;
    z-index: 8;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 14px -4px 0;
    padding: 8px 4px;
    padding: 8px 4px max(8px, env(safe-area-inset-bottom, 0px));
    background: var(--paper);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html[data-cm-mobile-page="seat-guide"] .page-actions a {
    width: 100%;
    min-height: 48px;
    padding-inline: 8px;
  }

  /* Ordering */
  html[data-cm-mobile-page="order"] .app {
    min-height: 100vh;
    min-height: 100dvh;
    min-height: var(--cm-viewport-height, 100dvh);
    padding-bottom: 92px;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    box-shadow: none;
  }

  html[data-cm-mobile-page="order"] .app-head {
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  html[data-cm-mobile-page="order"] .top {
    padding: 8px 12px 7px;
  }

  html[data-cm-mobile-page="order"] .topline {
    min-height: 44px;
    gap: 8px;
  }

  html[data-cm-mobile-page="order"] .title {
    font-size: 18px;
  }

  html[data-cm-mobile-page="order"] .back {
    min-height: 44px;
    padding-inline: 10px;
  }

  html[data-cm-mobile-page="order"] .table-row {
    margin-top: 6px;
  }

  html[data-cm-mobile-page="order"] .table-row select {
    min-height: 44px;
  }

  html[data-cm-mobile-page="order"] .ticket :is(button, a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  html[data-cm-mobile-page="order"] .spice-block {
    padding: 0 12px 8px;
  }

  html[data-cm-mobile-page="order"] .spice-label {
    margin-bottom: 5px;
  }

  html[data-cm-mobile-page="order"] .spice-label span:last-child {
    max-width: 58%;
    overflow: hidden;
    text-align: end;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-cm-mobile-page="order"] .spices {
    gap: 5px;
  }

  html[data-cm-mobile-page="order"] .spices button {
    min-height: 44px;
    padding-inline: 4px;
  }

  html[data-cm-mobile-page="order"] .tabs-hint {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  html[data-cm-mobile-page="order"] .tabs {
    gap: 5px;
    padding: 6px 12px;
    scrollbar-width: none;
  }

  html[data-cm-mobile-page="order"] .tabs::-webkit-scrollbar {
    display: none;
  }

  html[data-cm-mobile-page="order"] .tabs button {
    min-height: 44px;
    padding: 7px 12px;
  }

  html[data-cm-mobile-page="order"] .list {
    padding: 4px 12px;
  }

  html[data-cm-mobile-page="order"] .item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 9px;
    padding: 12px 0;
  }

  html[data-cm-mobile-page="order"] .dish-photo {
    width: 56px;
    height: 56px;
  }

  html[data-cm-mobile-page="order"] .name {
    font-size: 14px;
    line-height: 1.35;
  }

  html[data-cm-mobile-page="order"] .line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  html[data-cm-mobile-page="order"] .step {
    gap: 5px;
  }

  html[data-cm-mobile-page="order"] .step button {
    width: 44px;
    height: 44px;
    border-radius: 10px;
  }

  html[data-cm-mobile-page="order"] .qty {
    min-width: 18px;
  }

  html[data-cm-mobile-page="order"] .bar {
    min-height: 68px;
    padding: 9px 12px;
    padding: 9px max(12px, env(safe-area-inset-right, 0px))
      calc(9px + env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }

  html[data-cm-mobile-page="order"] .submit {
    min-height: 48px;
  }

  html[data-cm-mobile-page="order"] .to-top {
    bottom: 82px;
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  html[data-cm-mobile-page="order"] .checkin {
    top: var(--cm-viewport-offset-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 100vh;
    height: var(--cm-viewport-height, 100dvh);
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      max(16px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
  }

  html[data-cm-mobile-page="order"] .checkin-card {
    max-height: 92vh;
    max-height: 92dvh;
    max-height: calc(var(--cm-viewport-height, 100dvh) - 24px);
    overflow-y: auto;
    padding: 20px 18px;
    border-radius: 12px;
    box-shadow: none;
  }

  /* Customer bill */
  html[data-cm-mobile-page="customer-bill"] .top {
    padding-top: 0;
    padding-top: env(safe-area-inset-top, 0px);
  }

  html[data-cm-mobile-page="customer-bill"] .top .wrap {
    min-height: 56px;
    gap: 7px;
  }

  html[data-cm-mobile-page="customer-bill"] .top .title {
    min-width: 0;
    overflow: hidden;
    font-size: 15px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-cm-mobile-page="customer-bill"] .back {
    min-height: 44px;
    padding-inline: 10px;
  }

  html[data-cm-mobile-page="customer-bill"] main {
    padding: 20px 0 82px;
    padding: 20px 0 calc(82px + env(safe-area-inset-bottom, 0px));
  }

  html[data-cm-mobile-page="customer-bill"] .hero h1 {
    margin: 8px 0 5px;
    font-size: clamp(28px, 8.5vw, 34px);
    letter-spacing: -.025em;
  }

  html[data-cm-mobile-page="customer-bill"] .hero p {
    font-size: 12px;
    line-height: 1.65;
  }

  html[data-cm-mobile-page="customer-bill"] .card {
    margin-top: 14px;
    padding: 15px;
    border-width: 1px;
    border-radius: 12px;
    box-shadow: none;
  }

  html[data-cm-mobile-page="customer-bill"] .card h2 {
    font-size: 21px;
  }

  html[data-cm-mobile-page="customer-bill"] .row {
    gap: 10px;
    padding: 9px 0;
    font-size: 12px;
  }

  html[data-cm-mobile-page="customer-bill"] .row strong {
    white-space: nowrap;
  }

  html[data-cm-mobile-page="customer-bill"] .row.due {
    font-size: 16px;
  }

  html[data-cm-mobile-page="customer-bill"] .tabs button {
    min-height: 48px;
  }

  html[data-cm-mobile-page="customer-bill"] .qr {
    padding: 12px;
    border-radius: 10px;
  }

  html[data-cm-mobile-page="customer-bill"] .qr img {
    width: min(205px, 58vw);
  }

  html[data-cm-mobile-page="customer-bill"] .actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 8px;
    margin: 14px -6px -6px;
    padding: 8px 6px;
    padding: 8px 6px max(8px, env(safe-area-inset-bottom, 0px));
    background: var(--card);
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  html[data-cm-mobile-page="customer-bill"] .actions .btn {
    width: 100%;
    min-height: 48px;
    padding-inline: 8px;
  }

  html[data-cm-keyboard="open"][data-cm-mobile-page="index"] .mobile-nav,
  html[data-cm-keyboard="open"][data-cm-mobile-page="order"] :is(.bar, .to-top) {
    display: none !important;
  }

  html[data-cm-keyboard="open"][data-cm-mobile-page] {
    scroll-padding-bottom: 20px;
  }

  html[dir="rtl"][data-cm-mobile-page] :is(.photo-rail, .floor-wrap, .map-scroll) {
    direction: ltr;
  }
}

@media (max-width: 359px) {
  html[data-cm-mobile-page="index"] .hero-actions,
  html[data-cm-mobile-page="seat-guide"] .page-actions,
  html[data-cm-mobile-page="customer-bill"] .actions {
    grid-template-columns: 1fr;
  }

  html[data-cm-mobile-page="order"] .item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  html[data-cm-mobile-page="order"] .dish-photo {
    width: 48px;
    height: 48px;
  }

  html[data-cm-mobile-page="order"] .step {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

@media (max-width: 950px) and (orientation: landscape) and (max-height: 430px) {
  html[data-cm-mobile-page="index"] .wrap,
  html[data-cm-mobile-page="book"] .wrap,
  html[data-cm-mobile-page="customer-bill"] .wrap {
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
  }

  html[data-cm-mobile-page="book"] .table-panel {
    width: calc(
      100vw
      - max(14px, env(safe-area-inset-left, 0px))
      - max(14px, env(safe-area-inset-right, 0px))
    );
  }

  html[data-cm-mobile-page="seat-guide"] .page {
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    padding-left: max(14px, env(safe-area-inset-left, 0px));
  }

  html[data-cm-mobile-page="order"] :is(.top, .spice-block, .list) {
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
  }

  html[data-cm-mobile-page="index"] .hero-art {
    display: none;
  }

  html[data-cm-mobile-page="order"] .checkin-card {
    max-height: 84vh;
    max-height: 84dvh;
    max-height: calc(var(--cm-viewport-height, 100dvh) - 12px);
  }
}

@media (hover: hover) and (pointer: fine) {
  html[data-cm-mobile-page] :is(button, a, summary):hover {
    text-decoration-thickness: from-font;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-cm-mobile-page] {
    scroll-behavior: auto !important;
  }

  html[data-cm-mobile-page] *,
  html[data-cm-mobile-page] *::before,
  html[data-cm-mobile-page] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}