/*
 * Trellis Bay Market - online ordering kiosk.
 * Every rule is scoped under #tw-kiosk because the kiosk renders inside an Elementor canvas page
 * whose theme CSS must not leak in (and ours must not leak out). Component rules always carry
 * at least one class on top of the id so they beat the reset block below.
 */

/* ---------------------------------------------------------------- tokens */

#tw-kiosk {
  --bg: #0C0C0C;
  --sur: #161616;
  --sur2: #1F1F1F;
  --bdr: #282828;
  --red: #D9261C;
  --red-d: #B81E15;
  --gold: #F5B642;
  --txt: #F0EDE8;
  --mut: #8A837A;
  --dim: #333;
  --ok: #2EB86C;
  --shadow: rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .78);
  --toast: #1C2E22;
  --note-bg: #2A2112;
  --bad-bg: rgba(217, 38, 28, .14);
  --bad-bd: rgba(217, 38, 28, .5);
  --fd: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
  --fb: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sw: 210px;
  --hh: 66px;
  --bh: 66px;
  --r: 11px;
  --e: .2s cubic-bezier(.4, 0, .2, 1);
  /* Never `transition: all`: it would also animate the inherited visibility of overlay children and delay focus. */
  --tr: background-color var(--e), border-color var(--e), color var(--e), opacity var(--e), transform var(--e), box-shadow var(--e);

  color-scheme: dark;
  background: var(--bg);
  color: var(--txt);
  margin: 0;
  padding: 0;
  border: 0;
  float: none;
  width: auto;
  max-width: none;
  box-shadow: none;
  font: 400 16px/1.4 var(--fb);
  letter-spacing: normal;
  text-align: left;
  text-transform: none;
  text-shadow: none;
  direction: ltr;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  contain: layout style;
  box-sizing: border-box;
  transition: background-color var(--e), color var(--e);
}

#tw-kiosk[data-theme=light] {
  --bg: #F6F3EE;
  --sur: #FFFFFF;
  --sur2: #F1ECE5;
  --bdr: #E3DCD2;
  --gold: #9A5B00;
  --txt: #1A1714;
  --mut: #6B635A;
  --dim: #D9D2C8;
  --ok: #1E8449;
  --shadow: rgba(60, 40, 20, .12);
  --scrim: rgba(26, 20, 14, .45);
  --toast: #E7F5EC;
  --note-bg: #FFF4DD;
  --bad-bg: rgba(217, 38, 28, .08);
  --bad-bd: rgba(217, 38, 28, .45);
  color-scheme: light;
}

/* ------------------------------------------------- reset / theme defence */

#tw-kiosk *,
#tw-kiosk *::before,
#tw-kiosk *::after {
  box-sizing: border-box;
}

#tw-kiosk * {
  margin: 0;
  padding: 0;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
  text-shadow: none;
  text-align: inherit;
  font-style: normal;
  float: none;
  transition: none;
}

#tw-kiosk h1,
#tw-kiosk h2,
#tw-kiosk h3 {
  font-family: var(--fd);
  font-size: inherit;
  font-weight: 400;
  color: inherit;
}

#tw-kiosk button {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
  min-width: 0;
  min-height: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#tw-kiosk button:disabled {
  cursor: not-allowed;
}

#tw-kiosk input,
#tw-kiosk textarea {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font: inherit;
  color: inherit;
  min-height: 0;
  max-width: 100%;
}

#tw-kiosk label {
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  vertical-align: baseline;
}

#tw-kiosk img {
  display: block;
  max-width: none;
  border: 0;
  box-shadow: none;
}

#tw-kiosk svg {
  display: block;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#tw-kiosk [hidden] {
  display: none !important;
}

#tw-kiosk :focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

#tw-kiosk :focus:not(:focus-visible),
#tw-kiosk [tabindex="-1"]:focus {
  outline: none;
}

/* ---------------------------------------------------------------- header */

#tw-kiosk .hd {
  flex-shrink: 0;
  height: var(--hh);
  background: var(--sur);
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 0;
  z-index: 10;
}

#tw-kiosk .hd-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--sw);
  padding: 0 14px;
  border-right: 1px solid var(--bdr);
  height: 100%;
  flex-shrink: 0;
  background: var(--sur) !important;
  background-image: none !important;
}

/* Themes often style bare header/aside elements (sticky or fixed positions, decorative pseudo-elements). */
#tw-kiosk .hd,
#tw-kiosk .co-hd,
#tw-kiosk .tw-side {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

#tw-kiosk .hd::before,
#tw-kiosk .hd::after,
#tw-kiosk .co-hd::before,
#tw-kiosk .co-hd::after,
#tw-kiosk .bar::before,
#tw-kiosk .bar::after,
#tw-kiosk .hd-brand::before,
#tw-kiosk .hd-brand::after,
#tw-kiosk .tw-side::before,
#tw-kiosk .tw-side::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

#tw-kiosk .hd-logo {
  width: 46px;
  height: 46px;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  object-fit: contain;
  flex-shrink: 0;
}

#tw-kiosk .hd-name h1 {
  font-size: 18px;
  letter-spacing: 2px;
  line-height: 1;
}

#tw-kiosk .hd-name span {
  display: block;
  font-size: 9px;
  color: var(--mut);
  letter-spacing: 2px;
  text-transform: uppercase;
}

#tw-kiosk .hd-acts {
  display: flex;
  align-items: center;
  gap: 8px;
}

#tw-kiosk .hd-theme {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--bdr);
  background: var(--sur2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
}

#tw-kiosk .hd-theme svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

#tw-kiosk .hd-theme .i-sun {
  display: none;
}

#tw-kiosk[data-theme=light] .hd-theme .i-sun {
  display: block;
}

#tw-kiosk[data-theme=light] .hd-theme .i-moon {
  display: none;
}

#tw-kiosk .hd-cart {
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  padding: 8px 15px;
  border-radius: 50px;
  transition: opacity var(--e), transform var(--e);
  user-select: none;
}

#tw-kiosk .hd-cn {
  font-weight: 800;
  font-size: 13px;
}

#tw-kiosk .hd-ct {
  font-weight: 700;
  font-size: 12px;
  border-left: 1px solid rgba(255, 255, 255, .3);
  padding-left: 8px;
}

/* --------------------------------------------- store-closed banner (sticky) */

#tw-kiosk .closed {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--bad-bg);
  border-bottom: 1px solid var(--bad-bd);
  color: var(--txt);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  z-index: 9;
}

#tw-kiosk .closed svg {
  width: 18px;
  height: 18px;
  color: var(--red);
}

/* ------------------------------------------------------------ layout rows */

#tw-kiosk .body-row {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

#tw-kiosk .tw-side {
  width: var(--sw);
  flex-shrink: 0;
  background: var(--sur) !important;
  background-image: none !important;
  border-right: 1px solid var(--bdr);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
  display: flex;
  flex-direction: column;
  padding: 10px 8px 16px;
  gap: 2px;
}

#tw-kiosk .tw-side::-webkit-scrollbar {
  width: 3px;
}

#tw-kiosk .tw-side::-webkit-scrollbar-thumb {
  background: var(--dim);
  border-radius: 2px;
}

#tw-kiosk .sb-lbl {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--mut);
  padding: 4px 8px 10px;
}

#tw-kiosk .cat-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  text-align: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  transition: var(--tr);
}

#tw-kiosk .cat-btn.on {
  background: rgba(217, 38, 28, .14);
  color: var(--txt);
  font-weight: 700;
}

#tw-kiosk .cat-btn.on .dot {
  background: var(--red);
}

#tw-kiosk .cat-lbl {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tw-kiosk .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background var(--e);
}

#tw-kiosk .new-tag,
#tw-kiosk .new-pill {
  background: var(--gold);
  color: #000;
  font-weight: 800;
  text-transform: uppercase;
}

#tw-kiosk[data-theme=light] .new-tag,
#tw-kiosk[data-theme=light] .new-pill {
  color: #fff;
}

#tw-kiosk .new-tag {
  font-size: 8px;
  letter-spacing: 1px;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
}

#tw-kiosk .mob-strip {
  display: none;
}

#tw-kiosk .scroll-pane {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
  min-width: 0;
}

#tw-kiosk .scroll-pane::-webkit-scrollbar {
  width: 4px;
}

#tw-kiosk .scroll-pane::-webkit-scrollbar-thumb {
  background: var(--dim);
  border-radius: 2px;
}

#tw-kiosk .content {
  max-width: none;
  padding: 24px 22px 32px;
}

/* ------------------------------------------------------- bottom order bar */

#tw-kiosk .bar {
  flex-shrink: 0;
  height: var(--bh);
  background: var(--sur);
  border-top: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  gap: 10px;
  box-shadow: 0 -4px 20px var(--shadow);
  z-index: 10;
}

#tw-kiosk .bar-l {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  min-width: 0;
}

#tw-kiosk .bar-l > span:last-child {
  display: block;
}

#tw-kiosk .bar-badge {
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#tw-kiosk .bar-lbl {
  display: block;
  font-size: 9px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#tw-kiosk .bar-tot {
  display: block;
  font-family: var(--fd);
  font-size: 19px;
  letter-spacing: 1px;
}

#tw-kiosk .bar-acts {
  display: flex;
  gap: 7px;
  align-items: center;
}

#tw-kiosk .bar-view {
  padding: 8px 13px;
  border-radius: 50px;
  border: 1px solid var(--bdr);
  font-weight: 600;
  font-size: 11px;
  color: var(--mut);
  transition: var(--tr);
  display: none;
}

#tw-kiosk .bar-co {
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--tr);
  white-space: nowrap;
}

#tw-kiosk .bar-co svg,
#tw-kiosk .drw-cta svg {
  width: 15px;
  height: 15px;
}

#tw-kiosk .bar-co:disabled {
  background: var(--dim);
  color: var(--mut);
}

/* ---------------------------------------------------------- menu sections */

#tw-kiosk .sec {
  margin-bottom: 40px;
}

#tw-kiosk .sec-hd {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--bdr);
}

#tw-kiosk .sec-hd h2 {
  font-size: 24px;
  letter-spacing: 2px;
}

#tw-kiosk .sec-ct {
  font-size: 10px;
  color: var(--mut);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-left: auto;
}

#tw-kiosk .new-pill {
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 3px 7px;
  border-radius: 4px;
}

#tw-kiosk .grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 11px;
}

#tw-kiosk .card {
  background: var(--sur);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: 0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--e), transform var(--e), box-shadow var(--e);
  position: relative;
}

#tw-kiosk .card.ic {
  border-color: var(--ok);
}

#tw-kiosk .card.ic::after {
  content: '';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

#tw-kiosk .card.so {
  cursor: default;
  border-style: dashed;
}

#tw-kiosk .card.so .card-top,
#tw-kiosk .card.so .price {
  opacity: .5;
}

/* The text half of a card. Cards without a photo consist of this alone, so they look as they always did. */
#tw-kiosk .card-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tw-kiosk .card-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#tw-kiosk .c-name {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

#tw-kiosk .c-desc {
  font-size: 11px;
  color: var(--mut);
  margin-top: 3px;
  line-height: 1.5;
}

#tw-kiosk .c-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 4px;
}

#tw-kiosk .tag {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}

#tw-kiosk .tag-vegan {
  background: rgba(46, 184, 108, .12);
  color: var(--ok);
  border: 1px solid rgba(46, 184, 108, .2);
}

#tw-kiosk .tag-new {
  background: rgba(245, 182, 66, .12);
  color: var(--gold);
  border: 1px solid rgba(245, 182, 66, .25);
}

#tw-kiosk .tag-popular {
  background: rgba(217, 38, 28, .12);
  color: var(--red);
  border: 1px solid rgba(217, 38, 28, .2);
}

#tw-kiosk .card-ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

#tw-kiosk .price {
  font-family: var(--fd);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--gold);
}

#tw-kiosk .plus {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--e), background var(--e);
  flex-shrink: 0;
}

#tw-kiosk .plus svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
}

#tw-kiosk .so-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mut);
  background: var(--sur2);
  border: 1px solid var(--bdr);
  border-radius: 50px;
  padding: 5px 10px;
}

/* ------------------------------------------------------------ menu photos */

/* One box for every photo (card or modal hero). Its aspect ratio is reserved up front, so a photo that
   arrives late never moves anything, and a shimmer shows until the image has loaded. Photo URLs only
   ever reach an <img src>; no CSS rule builds a url() from data. */
#tw-kiosk .ph {
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sur2);
}

#tw-kiosk .ph:not(.ld) {
  background: linear-gradient(100deg, var(--sur2) 30%, var(--bdr) 50%, var(--sur2) 70%) 0 0 / 220% 100%;
  animation: twShimmer 1.5s ease-in-out infinite;
}

@supports not (aspect-ratio: 4 / 3) {
  #tw-kiosk .ph::before {
    content: '';
    display: block;
    padding-top: 75%;
  }
}

#tw-kiosk .ph-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

#tw-kiosk .ph.ld .ph-img {
  opacity: 1;
}

/* Sold out: the photo is dimmed and greyed, with the same label the footer badge uses. */
#tw-kiosk .card.so .ph.ld .ph-img,
#tw-kiosk .ph.so.ld .ph-img {
  opacity: .4;
  filter: grayscale(1);
}

#tw-kiosk .ph-so {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--mut);
  background: var(--sur);
  border: 1px solid var(--bdr);
  border-radius: 50px;
  padding: 5px 10px;
}

#tw-kiosk .card.so .ph-so,
#tw-kiosk .ph.so .ph-so {
  display: block;
}

/* Desktop and tablet: the photo sits on top of the card, flush with its edges. */
#tw-kiosk .card .ph {
  border-radius: calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0;
}

#tw-kiosk .card.has-ph.ic::after {
  box-shadow: 0 0 0 2px var(--sur);
}

/* Item modal hero. The close button and the grab handle float over the photo. */
#tw-kiosk .m-hero {
  max-height: 280px;
  max-height: min(360px, 38dvh);
}

#tw-kiosk .modal.has-hero .m-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%);
  z-index: 3;
  background: rgba(255, 255, 255, .8);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
}

#tw-kiosk .modal.has-hero .m-x {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(12, 12, 12, .62);
  color: #fff;
}

/* First-load skeleton and empty / error states */

#tw-kiosk .sk-card {
  height: 118px;
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  background: linear-gradient(100deg, var(--sur) 30%, var(--sur2) 50%, var(--sur) 70%) 0 0 / 220% 100%;
  animation: twShimmer 1.5s ease-in-out infinite;
}

#tw-kiosk .sk-title {
  width: 140px;
  height: 24px;
  margin-bottom: 18px;
  border-radius: 6px;
  background: var(--sur2);
}

#tw-kiosk .empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  color: var(--mut);
  font-size: 14px;
  line-height: 1.5;
  padding: 24px;
}

#tw-kiosk .empty-btn {
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  padding: 11px 22px;
  font-weight: 700;
  font-size: 13px;
  transition: var(--tr);
}

@keyframes twShimmer {
  from {
    background-position: 120% 0;
  }
  to {
    background-position: -120% 0;
  }
}

/* ------------------------------------------------------------- overlays */

#tw-kiosk .overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s;
}

#tw-kiosk .overlay.on {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transition: opacity .25s ease, visibility 0s;
}

#tw-kiosk .modal-bg {
  background: var(--scrim);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

#tw-kiosk .modal {
  position: relative;
  background: var(--sur);
  border: 1px solid var(--bdr);
  border-radius: 14px 14px 0 0;
  width: 100%;
  max-width: 580px;
  max-height: 85%;
  overflow: hidden;
  transform: translateY(28px);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
  display: flex;
  flex-direction: column;
}

#tw-kiosk .overlay.on .modal {
  transform: translateY(0);
}

#tw-kiosk .m-handle {
  width: 38px;
  height: 4px;
  background: var(--bdr);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

#tw-kiosk .m-hd {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--bdr);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  flex-shrink: 0;
}

#tw-kiosk .m-name {
  font-size: 22px;
  letter-spacing: 1.5px;
}

#tw-kiosk .m-pr {
  font-family: var(--fd);
  font-size: 17px;
  color: var(--gold);
  margin-top: 3px;
}

#tw-kiosk .m-x,
#tw-kiosk .drw-x {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sur2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
  transition: var(--tr);
  flex-shrink: 0;
}

#tw-kiosk .m-x svg,
#tw-kiosk .drw-x svg {
  width: 14px;
  height: 14px;
}

#tw-kiosk .m-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--bdr) transparent;
}

#tw-kiosk .notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 9px;
  background: var(--bad-bg);
  border: 1px solid var(--bad-bd);
  color: var(--txt);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

#tw-kiosk .notice svg {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--red);
}

#tw-kiosk .qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#tw-kiosk .qty-lbl,
#tw-kiosk .ao-hd,
#tw-kiosk .notes-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mut);
}

#tw-kiosk .qty-ctrl {
  display: flex;
  align-items: center;
  gap: 11px;
  background: var(--sur2);
  border-radius: 50px;
  padding: 4px 9px;
}

#tw-kiosk .qb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--dim);
  color: var(--txt);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--e), opacity var(--e);
}

#tw-kiosk .qb svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.6;
}

#tw-kiosk .qb[aria-disabled=true],
#tw-kiosk .ci-qb[aria-disabled=true] {
  opacity: .4;
  cursor: not-allowed;
}

#tw-kiosk .qn {
  font-family: var(--fd);
  font-size: 19px;
  min-width: 22px;
  text-align: center;
}

#tw-kiosk .ao-hd {
  letter-spacing: 2px;
  margin-bottom: 8px;
}

#tw-kiosk .ao-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 5px;
}

#tw-kiosk .chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 7px;
  border: 1px solid var(--bdr);
  background: var(--sur2);
  cursor: pointer;
  transition: var(--tr);
}

#tw-kiosk .chip.on {
  border-color: var(--gold);
  background: rgba(245, 182, 66, .08);
}

#tw-kiosk .chip-in {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#tw-kiosk .chip-in:focus-visible + .chk {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

#tw-kiosk .chk {
  color: transparent;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: var(--tr);
}

#tw-kiosk .chk svg {
  width: 10px;
  height: 10px;
  stroke-width: 3.4;
}

#tw-kiosk .chip.on .chk {
  background: var(--gold);
  color: #000;
  border-color: var(--gold);
}

#tw-kiosk[data-theme=light] .chip.on .chk {
  color: #fff;
}

#tw-kiosk .chip-nm {
  font-size: 10px;
  font-weight: 500;
  flex: 1;
  line-height: 1.3;
}

#tw-kiosk .chip-pr {
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

#tw-kiosk .notes-lbl {
  letter-spacing: 2px;
  margin-bottom: 6px;
}

#tw-kiosk .notes-ta {
  display: block;
  width: 100%;
  background: var(--sur2);
  border: 1px solid var(--bdr);
  border-radius: 7px;
  padding: 9px 11px;
  color: var(--txt);
  font-size: 12px;
  resize: none;
  height: 68px;
  transition: border-color var(--e);
}

#tw-kiosk .notes-ta:focus,
#tw-kiosk .fi:focus {
  border-color: var(--gold);
}

#tw-kiosk .notes-ta::placeholder,
#tw-kiosk .fi::placeholder {
  color: var(--mut);
  opacity: 1;
}

#tw-kiosk .m-ft {
  padding: 11px 18px 20px;
  border-top: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
  background: var(--sur);
}

#tw-kiosk .m-tl {
  display: block;
  font-size: 9px;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#tw-kiosk .m-tv {
  display: block;
  font-family: var(--fd);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 1px;
}

#tw-kiosk .m-add {
  flex: 1;
  max-width: 180px;
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  padding: 11px 18px;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: var(--tr);
}

#tw-kiosk .m-add:disabled,
#tw-kiosk .drw-cta:disabled,
#tw-kiosk .place-btn:disabled,
#tw-kiosk .place-btn[aria-busy=true] {
  background: var(--dim);
  color: var(--mut);
}

#tw-kiosk .place-btn[aria-busy=true] {
  cursor: progress;
}

/* ---------------------------------------------------------------- drawer */

#tw-kiosk .drw-bg {
  background: var(--scrim);
  display: flex;
  justify-content: flex-end;
}

#tw-kiosk .drw {
  width: 100%;
  max-width: 380px;
  background: var(--sur);
  border-left: 1px solid var(--bdr);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

#tw-kiosk .overlay.on .drw {
  transform: translateX(0);
}

#tw-kiosk .drw-hd {
  padding: 14px 14px 11px;
  border-bottom: 1px solid var(--bdr);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

#tw-kiosk .drw-hd h2 {
  font-size: 19px;
  letter-spacing: 1.5px;
}

#tw-kiosk .drw-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 11px 13px;
  scrollbar-width: thin;
  scrollbar-color: var(--bdr) transparent;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#tw-kiosk .drw-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 9px;
  color: var(--mut);
  font-size: 13px;
}

#tw-kiosk .ci {
  background: var(--sur2);
  border: 1px solid var(--bdr);
  border-radius: 9px;
  padding: 10px;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

#tw-kiosk .ci-info {
  flex: 1;
  min-width: 0;
}

#tw-kiosk .ci-name {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tw-kiosk .ci-ao {
  font-size: 10px;
  color: var(--mut);
  margin-top: 2px;
  line-height: 1.4;
}

#tw-kiosk .ci-note {
  font-size: 10px;
  color: var(--gold);
  font-style: italic;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

#tw-kiosk .ci-pr {
  font-family: var(--fd);
  font-size: 14px;
  color: var(--gold);
  margin-top: 3px;
}

#tw-kiosk .ci-ctrl {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
}

#tw-kiosk .ci-qb {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--dim);
  color: var(--txt);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--e), opacity var(--e);
}

#tw-kiosk .ci-qb svg,
#tw-kiosk .ci-del svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.8;
}

#tw-kiosk .ci-qty {
  font-weight: 700;
  font-size: 12px;
  min-width: 16px;
  text-align: center;
}

#tw-kiosk .ci-del {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: rgba(217, 38, 28, .1);
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--e);
  margin-left: 2px;
}

#tw-kiosk .drw-ft {
  border-top: 1px solid var(--bdr);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

#tw-kiosk .drw-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mut);
}

#tw-kiosk .drw-tot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--bdr);
}

#tw-kiosk .drw-tot span:first-child {
  font-weight: 700;
  font-size: 13px;
}

#tw-kiosk .drw-grand {
  font-family: var(--fd);
  font-size: 22px;
  color: var(--gold);
  letter-spacing: 1px;
}

#tw-kiosk .drw-cta {
  width: 100%;
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  padding: 12px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: var(--tr);
}

/* -------------------------------------------------------------- checkout */

#tw-kiosk .co {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility .35s;
}

#tw-kiosk .co.on {
  transform: translateX(0);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease, visibility 0s;
}

#tw-kiosk .co-hd {
  background: var(--sur);
  border-bottom: 1px solid var(--bdr);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

#tw-kiosk .co-back {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--sur2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--tr);
}

#tw-kiosk .co-back svg {
  width: 16px;
  height: 16px;
}

#tw-kiosk .co-hd h2 {
  font-size: 19px;
  letter-spacing: 2px;
}

#tw-kiosk .co-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--dim) transparent;
}

#tw-kiosk .co-body {
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 16px 80px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#tw-kiosk .fsec h3 {
  font-size: 17px;
  letter-spacing: 1.5px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bdr);
}

#tw-kiosk .frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

#tw-kiosk .fg {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#tw-kiosk .fg.full {
  grid-column: 1 / -1;
}

#tw-kiosk .fg label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mut);
}

#tw-kiosk .fi {
  display: block;
  background: var(--sur);
  border: 1px solid var(--bdr);
  border-radius: 7px;
  padding: 10px 11px;
  color: var(--txt);
  font-size: 12px;
  transition: border-color var(--e);
  width: 100%;
}

#tw-kiosk textarea.fi {
  resize: none;
}

#tw-kiosk .fi.err {
  border-color: var(--red);
}

#tw-kiosk .ferr {
  font-size: 9px;
  color: var(--red);
  display: none;
}

#tw-kiosk .ferr.show {
  display: block;
}

/* Honeypot: invisible to people, tempting to bots. */
#tw-kiosk .hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

#tw-kiosk .sum-items {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 11px;
}

#tw-kiosk .si {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  background: var(--sur2);
  border-radius: 7px;
  border: 1px solid var(--bdr);
}

#tw-kiosk .si-l {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

#tw-kiosk .si-name {
  font-weight: 600;
  font-size: 12px;
}

#tw-kiosk .si-ext {
  font-size: 10px;
  color: var(--mut);
  margin-top: 1px;
  overflow-wrap: anywhere;
}

#tw-kiosk .si-ext.note {
  color: var(--gold);
}

#tw-kiosk .si-price {
  font-family: var(--fd);
  font-size: 14px;
  color: var(--gold);
  white-space: nowrap;
}

#tw-kiosk .sum-tots {
  border-top: 1px solid var(--bdr);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#tw-kiosk .sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--mut);
}

#tw-kiosk .sum-row.grand {
  border-top: 1px solid var(--bdr);
  padding-top: 8px;
  margin-top: 3px;
}

#tw-kiosk .sum-row.grand span:first-child {
  font-weight: 700;
  font-size: 13px;
  color: var(--txt);
}

#tw-kiosk .sum-row.grand span:last-child {
  font-family: var(--fd);
  font-size: 19px;
  color: var(--gold);
}

#tw-kiosk .place-btn {
  width: 100%;
  background: var(--red);
  color: #fff;
  border-radius: 50px;
  padding: 14px;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  transition: var(--tr);
}

/* --------------------------------------------------------------- success */

#tw-kiosk .success {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 40px;
  text-align: center;
  transform: scale(.92);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease, visibility .35s;
}

#tw-kiosk .success.on {
  transform: scale(1);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease, visibility 0s;
}

#tw-kiosk .s-title {
  font-family: var(--fd);
  font-size: 38px;
  letter-spacing: 3px;
}

#tw-kiosk .s-msg {
  color: var(--mut);
  font-size: 13px;
  max-width: 320px;
  line-height: 1.6;
}

#tw-kiosk .s-spin {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(46, 184, 108, .1);
  border: 1px solid rgba(46, 184, 108, .25);
  color: var(--ok);
  padding: 8px 14px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 600;
}

#tw-kiosk .spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(46, 184, 108, .3);
  border-top-color: var(--ok);
  border-radius: 50%;
  animation: twSpin .8s linear infinite;
}

@keyframes twSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ----------------------------------------------------------------- toast */

#tw-kiosk .toast {
  position: absolute;
  bottom: calc(var(--bh) + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: max-content;
  max-width: calc(100% - 24px);
  background: var(--toast);
  border: 1px solid var(--ok);
  color: var(--ok);
  padding: 8px 14px;
  border-radius: 22px;
  box-shadow: none;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

#tw-kiosk .toast.on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

#tw-kiosk .toast.note {
  background: var(--note-bg);
  border-color: var(--gold);
  color: var(--txt);
}

#tw-kiosk .toast svg {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

#tw-kiosk .toast.note svg {
  color: var(--gold);
}

#tw-kiosk .toast-msgs span {
  display: block;
}

/* ----------------------------------------------- hover (real pointers only) */

@media (hover: hover) {
  #tw-kiosk .hd-theme:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  #tw-kiosk .hd-cart:hover {
    opacity: .85;
  }

  #tw-kiosk .cat-btn:hover {
    background: var(--sur2);
    color: var(--txt);
  }

  #tw-kiosk .bar-view:hover {
    border-color: var(--red);
    color: var(--red);
  }

  #tw-kiosk .bar-co:not(:disabled):hover,
  #tw-kiosk .drw-cta:not(:disabled):hover,
  #tw-kiosk .place-btn:not(:disabled):hover,
  #tw-kiosk .empty-btn:hover {
    background: var(--red-d);
  }

  #tw-kiosk .card:not(.so):hover {
    border-color: rgba(217, 38, 28, .5);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--shadow);
  }

  #tw-kiosk .card:not(.so):hover .plus {
    transform: scale(1.12);
    background: var(--red-d);
  }

  #tw-kiosk .m-x:hover,
  #tw-kiosk .drw-x:hover,
  #tw-kiosk .co-back:hover,
  #tw-kiosk .qb:not([aria-disabled=true]):hover,
  #tw-kiosk .ci-qb:not([aria-disabled=true]):hover,
  #tw-kiosk .ci-del:hover {
    background: var(--red);
    color: #fff;
  }

  #tw-kiosk .modal.has-hero .m-x:hover {
    background: var(--red);
    color: #fff;
  }

  #tw-kiosk .chip:hover {
    border-color: var(--gold);
  }

  #tw-kiosk .m-add:not(:disabled):hover {
    background: var(--red-d);
    transform: scale(1.02);
  }
}

/* ------------------------------------------------------- press feedback */

#tw-kiosk .hd-cart:active,
#tw-kiosk .bar-co:not(:disabled):active,
#tw-kiosk .m-add:not(:disabled):active,
#tw-kiosk .drw-cta:not(:disabled):active,
#tw-kiosk .place-btn:not(:disabled):active {
  transform: scale(.97);
}

/* --------------------------------------------------------- WordPress admin bar */

body.admin-bar #tw-kiosk {
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
}

@media (max-width: 782px) {
  body.admin-bar #tw-kiosk {
    height: calc(100vh - 46px);
    height: calc(100dvh - 46px);
  }
}

/* ------------------------------------------------------------ phone layout */

@media (max-width: 600px) {
  #tw-kiosk {
    --sw: 0px;
    --hh: 58px;
    --bh: 64px;
  }

  #tw-kiosk .tw-side {
    display: none;
  }

  #tw-kiosk .hd {
    padding: 0 12px 0 0;
  }

  #tw-kiosk .hd-brand {
    width: auto;
    min-width: 0;
    border-right: none;
    padding: 0 10px 0 12px;
    gap: 8px;
  }

  #tw-kiosk .hd-logo {
    width: 40px;
    height: 40px;
  }

  #tw-kiosk .hd-name {
    min-width: 0;
  }

  #tw-kiosk .hd-name h1 {
    font-size: 17px;
    white-space: nowrap;
  }

  #tw-kiosk .hd-name span {
    font-size: 9px;
    letter-spacing: 1.5px;
    white-space: nowrap;
  }

  #tw-kiosk .hd-theme {
    width: 44px;
    height: 44px;
  }

  #tw-kiosk .hd-cart {
    padding: 9px 13px;
    min-height: 44px;
  }

  #tw-kiosk .closed {
    padding: 10px 12px;
  }

  #tw-kiosk .mob-strip {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 6px;
    padding: 7px 12px;
    background: var(--sur);
    border-bottom: 1px solid var(--bdr);
    flex-shrink: 0;
    scroll-padding: 0 12px;
    -webkit-overflow-scrolling: touch;
  }

  #tw-kiosk .mob-strip::-webkit-scrollbar {
    display: none;
  }

  #tw-kiosk .mob-strip .cat-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    min-height: 44px;
    border: 1px solid var(--bdr);
    border-radius: 50px;
    width: auto;
    font-size: 13px;
  }

  #tw-kiosk .mob-strip .cat-btn.on {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
  }

  #tw-kiosk .mob-strip .dot {
    display: none;
  }

  #tw-kiosk .content {
    padding: 16px 12px 28px;
  }

  #tw-kiosk .sec {
    margin-bottom: 28px;
  }

  #tw-kiosk .sec-hd {
    margin-bottom: 12px;
  }

  #tw-kiosk .sec-hd h2 {
    font-size: 22px;
  }

  #tw-kiosk .sec-ct {
    font-size: 11px;
  }

  #tw-kiosk .grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  #tw-kiosk .card-body {
    padding: 14px;
    gap: 10px;
  }

  /* Compact horizontal card: text on the left, a 92px square photo on the right keeps the list dense. */
  #tw-kiosk .card.has-ph {
    flex-direction: row;
  }

  #tw-kiosk .card.has-ph .ph {
    order: 2;
    flex: 0 0 92px;
    width: 92px;
    height: 92px;
    aspect-ratio: auto;
    align-self: flex-start;
    margin: 12px 12px 12px 0;
    border-radius: 10px;
  }

  #tw-kiosk .card.has-ph .card-body {
    padding-right: 12px;
  }

  #tw-kiosk .card.has-ph.ic::after {
    top: 18px;
    right: 18px;
  }

  #tw-kiosk .card.has-ph .ph-so {
    font-size: 9px;
    letter-spacing: 1px;
    padding: 4px 8px;
  }

  #tw-kiosk .c-name {
    font-size: 15px;
  }

  #tw-kiosk .c-desc {
    font-size: 13px;
  }

  #tw-kiosk .tag {
    font-size: 10px;
    padding: 3px 7px;
  }

  #tw-kiosk .price {
    font-size: 22px;
  }

  #tw-kiosk .plus {
    width: 40px;
    height: 40px;
  }

  #tw-kiosk .plus svg {
    width: 20px;
    height: 20px;
  }

  #tw-kiosk .so-badge {
    font-size: 11px;
  }

  #tw-kiosk .bar {
    padding: 0 12px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    height: calc(var(--bh) + env(safe-area-inset-bottom, 0px));
  }

  #tw-kiosk .bar-l {
    min-height: 44px;
  }

  #tw-kiosk .bar-lbl {
    font-size: 10px;
  }

  #tw-kiosk .bar-tot {
    font-size: 21px;
  }

  #tw-kiosk .bar-badge {
    min-width: 28px;
    height: 28px;
    font-size: 12px;
  }

  #tw-kiosk .bar-co {
    padding: 12px 20px;
    font-size: 14px;
    min-height: 44px;
  }

  #tw-kiosk .modal {
    max-height: 92%;
    border-radius: 18px 18px 0 0;
  }

  #tw-kiosk .m-hd {
    padding: 12px 16px 12px;
  }

  #tw-kiosk .m-name {
    font-size: 24px;
    line-height: 1.1;
  }

  #tw-kiosk .m-pr {
    font-size: 19px;
  }

  #tw-kiosk .m-x,
  #tw-kiosk .drw-x {
    width: 44px;
    height: 44px;
  }

  #tw-kiosk .m-x svg,
  #tw-kiosk .drw-x svg {
    width: 16px;
    height: 16px;
  }

  #tw-kiosk .m-body {
    padding: 14px 16px;
    gap: 18px;
  }

  #tw-kiosk .notice {
    font-size: 13px;
  }

  #tw-kiosk .qty-lbl,
  #tw-kiosk .ao-hd,
  #tw-kiosk .notes-lbl {
    font-size: 11px;
  }

  #tw-kiosk .qty-ctrl {
    gap: 14px;
    padding: 5px 8px;
  }

  #tw-kiosk .qb {
    width: 44px;
    height: 44px;
  }

  #tw-kiosk .qb svg {
    width: 18px;
    height: 18px;
  }

  #tw-kiosk .qn {
    font-size: 22px;
  }

  #tw-kiosk .ao-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #tw-kiosk .chip {
    padding: 11px 12px;
    gap: 10px;
    min-height: 46px;
  }

  #tw-kiosk .chk {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  #tw-kiosk .chk svg {
    width: 13px;
    height: 13px;
  }

  #tw-kiosk .chip-nm {
    font-size: 13px;
  }

  #tw-kiosk .chip-pr {
    font-size: 13px;
  }

  #tw-kiosk .notes-ta {
    font-size: 16px;
    height: 84px;
  }

  #tw-kiosk .m-ft {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  #tw-kiosk .m-tl {
    font-size: 10px;
  }

  #tw-kiosk .m-tv {
    font-size: 24px;
  }

  #tw-kiosk .m-add {
    max-width: none;
    padding: 14px 18px;
    font-size: 14px;
    min-height: 48px;
  }

  #tw-kiosk .drw {
    max-width: none;
    border-left: none;
  }

  #tw-kiosk .drw-hd {
    padding: 12px 14px;
  }

  #tw-kiosk .drw-hd h2 {
    font-size: 22px;
  }

  #tw-kiosk .ci {
    padding: 12px;
  }

  #tw-kiosk .ci-name {
    font-size: 14px;
    white-space: normal;
  }

  #tw-kiosk .ci-ao,
  #tw-kiosk .ci-note {
    font-size: 12px;
  }

  #tw-kiosk .ci-pr {
    font-size: 17px;
  }

  #tw-kiosk .ci-ctrl {
    gap: 8px;
    margin-top: 8px;
  }

  #tw-kiosk .ci-qb,
  #tw-kiosk .ci-del {
    width: 44px;
    height: 44px;
  }

  #tw-kiosk .ci-qb svg,
  #tw-kiosk .ci-del svg {
    width: 16px;
    height: 16px;
  }

  #tw-kiosk .ci-qty {
    font-size: 14px;
    min-width: 20px;
  }

  #tw-kiosk .drw-ft {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  #tw-kiosk .drw-row {
    font-size: 13px;
  }

  #tw-kiosk .drw-cta {
    padding: 15px;
    font-size: 15px;
  }

  #tw-kiosk .co-hd {
    padding: 10px 12px;
  }

  #tw-kiosk .co-back {
    width: 44px;
    height: 44px;
  }

  #tw-kiosk .co-back svg {
    width: 18px;
    height: 18px;
  }

  #tw-kiosk .co-hd h2 {
    font-size: 21px;
  }

  #tw-kiosk .co-body {
    padding: 18px 14px calc(40px + env(safe-area-inset-bottom, 0px));
  }

  #tw-kiosk .frow {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #tw-kiosk .fg label {
    font-size: 10px;
  }

  #tw-kiosk .fi {
    font-size: 16px;
    padding: 12px;
  }

  #tw-kiosk .ferr {
    font-size: 11px;
  }

  #tw-kiosk .si-name {
    font-size: 14px;
  }

  #tw-kiosk .si-ext {
    font-size: 12px;
  }

  #tw-kiosk .si-price {
    font-size: 16px;
  }

  #tw-kiosk .sum-row {
    font-size: 13px;
  }

  #tw-kiosk .place-btn {
    padding: 16px;
    font-size: 15px;
    min-height: 48px;
  }

  #tw-kiosk .toast {
    font-size: 13px;
    padding: 10px 16px;
    bottom: calc(var(--bh) + env(safe-area-inset-bottom, 0px) + 12px);
  }

  #tw-kiosk .toast svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 380px) {
  #tw-kiosk .hd-name span {
    display: none;
  }

  #tw-kiosk .hd-ct {
    display: none;
  }

  #tw-kiosk .hd-cn {
    border: 0;
  }

  #tw-kiosk .bar-co {
    padding: 12px 16px;
  }
}

@media (min-width: 601px) {
  #tw-kiosk .bar-view {
    display: flex;
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  #tw-kiosk,
  #tw-kiosk *,
  #tw-kiosk *::before,
  #tw-kiosk *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  #tw-kiosk .modal,
  #tw-kiosk .success,
  #tw-kiosk .drw,
  #tw-kiosk .co {
    transform: none;
  }

  #tw-kiosk .toast {
    transform: translateX(-50%);
  }

  #tw-kiosk .card:not(.so):hover,
  #tw-kiosk .card:not(.so):hover .plus,
  #tw-kiosk .m-add:not(:disabled):hover {
    transform: none;
  }

  #tw-kiosk .sk-card {
    animation: none;
    background: var(--sur);
  }

  #tw-kiosk .ph:not(.ld) {
    animation: none;
    background: var(--sur2);
  }
}