/* Guest menu: restaurant identity, real food photography and touch-first controls. */
.guest-menu {
  --menu-accent:#345449;
  --menu-soft:#edf2ee;
  color:#242d28;
  background:#fffefa;
  text-align:left;
  font-size:15px;
  line-height:1.45;
}
.gm-header { display:flex; align-items:center; gap:10px; padding:16px 18px; }
.gm-monogram { display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:12px; background:var(--menu-accent); color:#fffefa; font-size:23px; font-weight:600; letter-spacing:-.08em; padding-right:3px; }
.gm-header>div { min-width:0; }
.gm-header strong { display:block; font-size:18px; font-weight:600; letter-spacing:-.035em; line-height:1.2; }
.gm-header>div>span { display:block; font-size:11px; color:#68716b; margin-top:2px; }
.gm-table { margin-left:auto; flex:none; font-size:11px; font-weight:500; border:1px solid #dce4dd; border-radius:20px; padding:6px 10px; }
.gm-cover { position:relative; height:148px; overflow:hidden; background:#3b443b; }
.gm-cover>img { width:100%; height:100%; display:block; object-fit:cover; object-position:60% 60%; }
.gm-cover:after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,#16221add,transparent 95%); }
.gm-cover>div { position:absolute; z-index:1; left:18px; right:18px; bottom:17px; color:white; }
.gm-cover span { font-size:11px; }
.gm-cover h3 { font-size:31px; font-weight:500; line-height:1.12; margin:3px 0 0; letter-spacing:-.045em; color:white; }
.gm-content { padding:16px 18px 0; }
.gm-search { display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; background:#f3f4ef; border:1px solid #e4e7df; border-radius:11px; }
.gm-search svg { width:18px; height:18px; flex:none; color:#6b746c; }
.gm-search input { border:0; background:transparent; width:100%; min-width:0; padding:0; outline-offset:5px; font:inherit; font-size:13px; color:inherit; height:40px; }
.gm-search input::placeholder { color:#6d756f; }
.gm-categories { display:flex; gap:7px; overflow-x:auto; padding:14px 0 4px; scrollbar-width:thin; scroll-padding-inline:2px; }
.gm-categories button { min-height:42px; padding:8px 14px; white-space:nowrap; border-radius:22px; background:transparent; color:#536057; font-size:12px; font-weight:500; flex:none; }
.gm-categories button[aria-pressed=true] { background:var(--menu-accent); color:white; }
.gm-categories button:hover { background:#e7ede7; color:#203a2f; }
.gm-categories button[aria-pressed=true]:hover { background:#294639; color:white; }
.gm-section-title { display:flex; align-items:baseline; gap:8px; justify-content:space-between; margin:22px 0 4px; }
.gm-section-title h3 { font-size:20px; font-weight:600; letter-spacing:-.035em; line-height:1.2; margin:0; }
.gm-section-title>span { font-size:11px; color:#6d756f; flex:none; }
.gm-dish { display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:16px; padding:20px 0; border-bottom:1px solid #e7e9e1; }
.gm-dish-info { min-width:0; }
.gm-diet { display:flex; align-items:center; gap:5px; flex-wrap:wrap; font-size:10px; color:#47694b; margin-bottom:7px; }
.gm-diet i { width:10px; height:10px; border:1px solid #46754d; border-radius:2px; position:relative; flex:none; }
.gm-diet i:after { content:''; position:absolute; inset:2px; border-radius:50%; background:#46754d; }
.gm-diet b { color:#9c482d; background:#fff0e6; padding:2px 5px; border-radius:4px; font-size:9px; font-weight:500; }
.gm-dish h4 { font-size:17px; line-height:1.2; font-weight:600; letter-spacing:-.025em; margin:0 0 6px; }
.gm-dish p { font-size:12px; color:#68716b; line-height:1.45; margin:0; }
.gm-price { display:block; font-size:15px; font-weight:600; margin-top:10px; }
.gm-dish-media { align-self:start; position:relative; padding-bottom:22px; }
.gm-dish-media img { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:13px; background:#eee7dc; }
.gm-controls { position:absolute; bottom:0; left:0; right:0; }
.gm-add,.gm-stepper { width:100%; min-height:44px; background:#fffefa; border:1px solid #d6ded5; border-radius:10px; box-shadow:0 3px 7px #1f392712; color:var(--menu-accent); }
.gm-add { display:flex; align-items:center; justify-content:center; gap:17px; font-size:14px; font-weight:600; }
.gm-add>span { font-size:20px; font-weight:400; }
.gm-add:hover { background:var(--menu-soft); }
.gm-stepper { display:grid; grid-template-columns:1fr 22px 1fr; align-items:center; font-size:14px; font-weight:600; text-align:center; }
.gm-stepper button { background:transparent; color:var(--menu-accent); min-height:42px; font-size:22px; padding:0; }
.gm-stepper button:hover { background:var(--menu-soft); border-radius:8px; }
.guest-menu button:disabled { opacity:.4; cursor:not-allowed; }
.guest-menu button:focus-visible,.guest-menu input:focus-visible { outline:2px solid #c35d3e; outline-offset:3px; }
.gm-kitchen-note { font-size:11px; color:#737b74; margin:17px 0 0; }
.gm-checkout-wrap { position:sticky; bottom:0; padding:15px 18px 16px; background:#fffefaf5; z-index:4; border-radius:0 0 20px 20px; }
.gm-checkout { display:flex; align-items:center; gap:10px; min-height:50px; padding:12px 15px; width:100%; border-radius:12px; background:var(--menu-accent); color:white; font-size:14px; font-weight:500; box-shadow:0 4px 12px #1c3a2312; }
.gm-checkout:hover { background:#263f35; }
.gm-checkout>svg { width:19px; height:19px; flex:none; }
.gm-checkout>strong { margin-left:auto; font-weight:600; }
.gm-checkout>span:last-child { margin-left:auto; }
.gm-checkout>strong+span:last-child { margin-left:0; }
.gm-order-count { display:grid; place-items:center; min-width:25px; height:25px; border:1px solid #ffffff63; border-radius:6px; font-size:12px; }
.gm-empty { padding:28px 0 20px; }
.gm-empty strong { font-size:17px; }
.gm-empty p { font-size:13px; color:#68716b; margin:7px 0; }
.gm-empty button { min-height:44px; background:var(--menu-soft); color:var(--menu-accent); font-size:12px; padding:9px 14px; border-radius:8px; margin-top:8px; }
.guest-menu-compact .gm-header { padding:13px 14px; gap:8px; }
.guest-menu-compact .gm-header strong { font-size:16px; }
.guest-menu-compact .gm-monogram { width:33px; height:33px; font-size:21px; border-radius:10px; }
.guest-menu-compact .gm-table { padding:5px 8px; font-size:10px; }
.guest-menu-compact .gm-cover { height:110px; }
.guest-menu-compact .gm-cover>div { left:14px; bottom:12px; }
.guest-menu-compact .gm-cover h3 { font-size:27px; }
.guest-menu-compact .gm-content { padding:12px 14px 0; }
.guest-menu-compact .gm-categories { gap:3px; padding-top:9px; }
.guest-menu-compact .gm-categories button { padding:7px 10px; font-size:11px; min-height:38px; }
.guest-menu-compact .gm-section-title { margin-top:14px; }
.guest-menu-compact .gm-section-title h3 { font-size:18px; }
.guest-menu-compact .gm-dish { grid-template-columns:minmax(0,1fr) 94px; gap:12px; padding:16px 0; }
.guest-menu-compact .gm-dish h4 { font-size:16px; }
.guest-menu-compact .gm-dish p { font-size:12px; }
.guest-menu-compact .gm-diet b { display:none; }
.guest-menu-compact .gm-price { margin-top:8px; font-size:14px; }
.guest-menu-compact .gm-kitchen-note { display:none; }
.guest-menu-compact .gm-checkout-wrap { position:static; padding:13px 14px 9px; }
.guest-menu-compact .gm-checkout { min-height:46px; font-size:13px; padding:10px 12px; }

/* The marketing device now follows its content instead of overlapping controls. */
.hero-product-scene { height:auto; display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; padding:24px 22px 20px; }
.hero-product-scene .showcase-phone { position:relative; inset:auto; grid-column:2; grid-row:1; min-width:0; width:340px; max-width:100%; min-height:0; padding:22px 0 10px; transform:none; border-width:5px; border-radius:32px; box-shadow:0 14px 35px #29242125; }
.showcase-phone [role=tabpanel]:not(#showcase-menu) { padding:0 18px; min-height:570px; }
.hero-product-scene .hero-switcher { position:relative; inset:auto; grid-column:1/-1; width:100%; margin:0; }
.hero-product-scene .scene-photo { height:65%; }
.hero-product-scene .scene-color { height:40%; }
.hero-product-scene .scene-caption { left:23px; top:34px; font-size:23px; max-width:150px; }
.hero-product-scene .qr-card { left:22px; bottom:110px; padding:12px; }
.hero-product-scene .qr-card img { width:90px; height:90px; }
.product-art .is-menu-phone { transform:none; width:340px; max-width:100%; padding:22px 0 10px; border-width:5px; border-radius:32px; }
.product-art.art-menu { height:auto; min-height:0; padding:24px 14px; }
.art-menu .art-sticker { display:none; }
.showcase-phone .screen-top { font-size:16px; }
.showcase-phone .screen-top>span:last-child { font-size:11px; }
.showcase-phone .screen-title h3 { font-size:32px; }
.showcase-phone .screen-title>small,.showcase-phone .screen-fine { font-size:12px; }
.showcase-phone .screen-bill-line { font-size:13px; margin-block:16px; }
.showcase-phone .screen-bill-total { font-size:16px; }
.showcase-phone .screen-action { font-size:13px; min-height:46px; }
.showcase-phone .screen-categories>span { font-size:12px; padding:8px 10px; }
.showcase-phone .order-visual strong,.showcase-phone .order-message { font-size:14px; }
.showcase-phone .order-visual small { font-size:11px; }

/* The demo is a usable app surface, not a tiny device inside a mobile page. */
.demo-page { grid-template-columns:minmax(0,1fr) minmax(0,480px); gap:64px; }
.demo-page-copy { position:sticky; top:112px; }
.demo-page .demo-stage { background:#e9eee7; padding:16px 20px 18px; border-radius:26px; }
.demo-page .demo-stage-label { font-size:12px; padding:0 4px; }
.demo-page .demo-phone { scroll-margin-top:90px; width:100%; max-width:420px; min-height:0; margin:16px auto 12px; border:1px solid #d7dfd5; padding:0; border-radius:22px; background:#fffefa; box-shadow:0 12px 30px #354a3210; overflow:visible; }
.demo-page .phone-camera { display:none; }
.demo-page .phone-top { padding:19px 20px; font-size:17px; }
.demo-page #demo-panel { min-height:0; padding:4px 20px 20px; }
.demo-page #demo-panel.has-guest-menu { padding:0; }
.demo-page .guest-menu { border-radius:22px; }
.demo-page .phone-brand { padding:12px; margin:0; border-top:1px solid #e7e9e1; }
.demo-page .demo-heading { font-size:28px; margin:20px 0 8px; }
.demo-page .demo-intro { font-size:14px; margin-bottom:24px; }
.demo-page .demo-cart-line { font-size:14px; padding-block:16px; gap:10px; }
.demo-page .demo-bill-row { font-size:14px; margin-block:15px; }
.demo-page .demo-bill-row.total { font-size:18px; }
.demo-page .demo-small-note { font-size:12px; line-height:1.6; }
.demo-page .demo-action { min-height:50px; font-size:15px; margin-top:20px; background:#345449; border-radius:12px; }
.demo-page .demo-button-link { font-size:13px; min-height:44px; }
.demo-page .split-choices button { font-size:12px; min-height:44px; }
.demo-page .demo-field { font-size:14px; gap:12px; }
.demo-page .demo-field input,.demo-page .demo-field select { min-height:44px; font-size:15px; }
.demo-page .demo-amount { padding:18px 14px; font-size:14px; background:#edf2ee; }
.demo-page .demo-amount strong { font-size:30px; }
.demo-page .empty-demo { font-size:14px; line-height:1.6; }
.demo-page .demo-receipt h3 { font-size:30px; }
.demo-page .demo-receipt p { font-size:14px; }
.demo-page .demo-error { font-size:13px; }
@media(max-width:1180px) {
  .hero-product-scene { grid-template-columns:minmax(0,1fr); padding:22px 16px 16px; }
  .hero-product-scene .showcase-phone { grid-column:1; justify-self:center; }
  .hero-product-scene .scene-caption,.hero-product-scene .qr-card { display:none; }
  .demo-page { gap:32px; grid-template-columns:minmax(0,1fr) minmax(0,440px); }
}
@media(max-width:900px) {
  .hero-product-scene { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:16px 12px 12px; max-width:430px; }
  .hero-product-scene .showcase-phone { width:360px; }
  .hero-product-scene .scene-photo { height:100%; }
  .hero-product-scene .scene-color { display:none; }
  .showcase-phone [role=tabpanel]:not(#showcase-menu) { min-height:0; padding:0 14px; }
  .demo-page { grid-template-columns:1fr; gap:20px; max-width:650px; }
  .demo-page-copy { position:static; }
  .demo-page h1 { font-size:40px; line-height:1.05; }
  .demo-page .hero-description { font-size:15px; margin-block:14px 18px; }
  .demo-page-copy>.product-label { display:none; }
  .demo-page .journey { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .demo-page .journey-step { display:block; padding:12px 8px; border:1px solid var(--line); border-radius:12px; min-height:62px; text-align:center; }
  .demo-page .journey-step.active { background:#345449; color:white; border-color:#345449; }
  .demo-page .journey-step strong { font-size:13px; line-height:1.2; letter-spacing:-.015em; }
  .demo-page .journey-step>span:first-child { display:none; }
  .demo-page .journey-step small,.demo-page .journey-step>span:last-child { display:none; }
  .demo-page .demo-safety { margin-top:12px; font-size:11px; max-width:none; }
}
@media(max-width:600px) {
  .demo-page { padding-block:24px; gap:18px; }
  .demo-page .demo-stage { padding:0; border-radius:0; background:transparent; min-width:0; }
  .demo-page .demo-stage-label { padding:0 0 10px; font-size:11px; }
  .demo-page .demo-phone { max-width:none; margin:0; width:100%; border-radius:20px; box-shadow:0 8px 24px #354a3210; }
  .demo-page .demo-disclaimer { margin-top:12px; }
  .gm-header { padding:15px; }
  .gm-content { padding-inline:15px; }
  .gm-dish { grid-template-columns:minmax(0,1fr) 104px; gap:13px; }
  .gm-dish h4 { font-size:16px; }
  .gm-checkout-wrap { padding-inline:15px; bottom:8px; }
  .gm-search input { font-size:16px; }
  .guest-menu-compact .gm-search input { font-size:16px; }
  .product-art .is-menu-phone { transform:none; width:340px; }
  .product-art.art-menu { min-height:0; padding:18px 10px; }
}
@media(max-width:350px) {
  .gm-categories { gap:4px; }
  .gm-categories button { font-size:11px; padding-inline:8px; }
  .gm-header strong { font-size:16px; }
  .gm-dish { grid-template-columns:minmax(0,1fr) 96px; gap:10px; }
  .gm-dish h4 { font-size:15px; }
  .gm-section-title h3 { font-size:18px; }
  .gm-diet b { display:none; }
  .guest-menu-compact .gm-header { padding-inline:11px; }
  .guest-menu-compact .gm-content { padding-inline:11px; }
  .guest-menu-compact .gm-monogram { display:none; }
  .guest-menu-compact .gm-dish { grid-template-columns:minmax(0,1fr) 88px; gap:9px; }
}