/* Photo treatment for the burger sample, alongside the shared ordering UI. */
.demo-art img[data-demo-food-photo] {display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff;}
.demo-art:has(img[data-demo-food-photo]) svg {display:none;}
.demo-phone .demo-toolbar {display:flex;gap:10px;align-items:center;padding-block:10px;}
.demo-phone .demo-wordmark {flex-shrink:0;}
.demo-phone .demo-wordmark img {width:56px;}
.demo-phone .demo-wordmark span {display:none;}
.demo-phone .demo-toolbar-controls {flex:0 1 150px;width:auto;margin:0 0 0 auto;gap:6px;}
.demo-phone .demo-toolbar-controls label {font-size:0;gap:0;}
.demo-phone .demo-toolbar-controls select {padding-inline:8px 20px;font-size:12px;}
body.service-site.apple-home :is(#menu-demo,.demo-dialog) .demo-phone .demo-app p.demo-notice {font-size:10px!important;line-height:1.5!important;padding:7px 16px;}
.demo-phone .demo-app[data-stage=menu] .demo-nav {margin-bottom:10px;}
.demo-phone .demo-app[data-stage=menu] .demo-search>span {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.demo-phone .demo-product .demo-art:has(img) {border:0;}
.demo-phone .demo-product img[data-demo-food-photo] {height:136px;aspect-ratio:auto;object-fit:contain;}
.demo-phone .demo-app[data-theme=burger] {--demo-blue:#b7400c;--demo-ink:#24211f;--demo-line:#e9e6e1;}
.demo-phone .demo-app[data-theme=burger] .demo-product {border-color:#eeece8;border-radius:16px;}
.demo-phone .demo-app[data-theme=burger] .demo-product-copy {padding:9px 11px 12px;}
.demo-phone .demo-app[data-theme=burger] .demo-product-copy strong {color:#24211f;font-size:14px;line-height:1.4;}
.demo-phone .demo-app[data-theme=burger] .demo-product-copy>span {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.demo-phone .demo-app[data-theme=burger] .demo-product-copy b {padding-right:29px;color:#b7400c;white-space:nowrap;font-size:13px;}
.demo-phone .demo-app[data-theme=burger] .demo-product-plus {display:grid;position:absolute;right:8px;bottom:8px;width:30px;height:30px;border:0;border-radius:50%;background:#c54712;color:#fff;font-size:23px;line-height:1;}
.demo-phone .demo-app[data-theme=burger] .demo-categories {flex-wrap:nowrap;overflow:auto;scrollbar-width:none;padding:2px 2px 4px;}
.demo-phone .demo-app[data-theme=burger] .demo-categories button {flex-shrink:0;min-height:44px;}
.demo-phone .demo-app[data-theme=burger] .demo-categories [aria-pressed=true] {border-color:#c54712;background:#c54712;color:#fff;}
.demo-phone .demo-app[data-theme=burger] .demo-button--primary {background:#b7400c;border-color:#b7400c;color:#fff;}
.demo-phone .demo-app[data-theme=burger] .demo-bottom-action[aria-current=page] {color:#b7400c;}
.demo-phone .demo-app[data-theme=burger] .demo-product:disabled {opacity:1;background:#faf9f7;}
.demo-phone .demo-app[data-theme=burger] .demo-product:disabled .demo-art {opacity:.55;}
.demo-phone .demo-app[data-theme=burger] .demo-product:disabled .demo-product-plus {display:none;}
.demo-phone .demo-app[data-theme=burger] .demo-product-copy small {color:#675e54;}
.demo-phone .demo-art--large:has(img) {width:100%;max-width:260px;}
.demo-phone .demo-status:empty {min-height:0;padding:0;}
body :is(#menu-demo,.demo-dialog) .demo-photo-note {margin:16px 0 0;color:#6f6258;font-size:11px!important;line-height:1.6!important;}
/* The standalone ordering screen must not inherit landing-page section spacing. */
body.service-site.apple-home.demo-standalone main#main-content {padding-top:0;}
body.service-site.apple-home.demo-standalone main#main-content #menu-demo {padding-block:0;margin:0;}
body.demo-standalone:has(#totio-local-preview-banner) {--demo-preview-height:24px;}
body.demo-standalone #totio-local-preview-banner {height:24px;padding:4px 12px!important;font:10px/16px system-ui!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
body.demo-standalone .demo-phone .demo-app {height:calc(100dvh - 36px - var(--demo-preview-height,0px));}
@media(max-height:600px) {
 body.demo-standalone .demo-phone .demo-app {height:auto;min-height:calc(100dvh - 36px - var(--demo-preview-height,0px));}
}
@media(max-width:360px) {
 .demo-phone .demo-product img[data-demo-food-photo] {height:114px;}
 .demo-phone .demo-app[data-theme=burger] .demo-product-copy strong {font-size:13px;}
 .demo-phone .demo-app[data-theme=burger] .demo-product-copy b {font-size:11px;}
}

/* Reference: MyPhrase's split explanation/device hierarchy, adapted to totio. */
#menu-demo {background:#fff;}
#menu-demo>.service-shell {max-width:1120px;padding-block:clamp(32px,5vw,72px);column-gap:clamp(36px,8vw,112px);}
#menu-demo .demo-section-heading {max-width:510px;}
body #menu-demo .demo-section-heading h2 {font-size:clamp(30px,3.4vw,46px);line-height:1.24;letter-spacing:-.025em;max-width:12em;margin-bottom:22px;}
body #menu-demo .demo-section-heading>p {max-width:32em;line-height:1.85;color:#59687c;}
#menu-demo .demo-enlarge {min-height:48px;padding:12px 24px;border-radius:999px;background:#194c9f;color:#fff;border:1px solid #194c9f;font-weight:600;box-shadow:0 6px 18px #194c9f19;}
#menu-demo .demo-enlarge:hover {background:#123b80;}
#menu-demo .demo-mobile-link {margin-top:14px;font-weight:600;text-decoration:underline;text-underline-offset:5px;}
.demo-phone .demo-toolbar-controls select {border-radius:12px;border-color:#dce3ec;background-color:#fff;}
.demo-phone .demo-search input {border-radius:14px;border-color:#dce3ec;background:#fff;}
.demo-phone .demo-bottom-nav {border-top-color:#e4e9f0;}
@media(max-width:850px) {
 #menu-demo>.service-shell {padding-block:28px;row-gap:32px;}
 #menu-demo .demo-section-heading {max-width:560px;}
}
@media(prefers-reduced-motion:no-preference) {
 #menu-demo .demo-enlarge {transition:background-color .18s ease,box-shadow .18s ease;}
}

/* Compact embedded preview; the dedicated mobile view keeps its viewport sizing. */
body.service-site.apple-home:not(.demo-standalone) #menu-demo {padding-block:24px;}
body:not(.demo-standalone) #menu-demo>.service-shell {padding-block:12px;row-gap:0;}
@media(min-width:521px) and (min-height:601px) {
 body:not(.demo-standalone) #menu-demo .demo-phone {max-width:368px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-app {height:clamp(440px,calc(100svh - 156px),718px);}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-view {padding:12px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-view-heading {margin-bottom:10px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-search {margin-bottom:8px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-categories {margin-bottom:10px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-product img[data-demo-food-photo] {height:112px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-product-copy {padding:8px 9px 10px;}
}

/* Real phone browsers use an app viewport, with independently scrolling content. */
@media(max-width:520px) {
 body:not(.demo-standalone) #menu-demo .demo-phone {scroll-margin-top:12px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-app {
  height:calc(100svh - 88px);max-height:760px;min-height:0;overflow:hidden;
 }
 .demo-phone .demo-view {flex:1;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;}
 .demo-phone .demo-toolbar {padding:8px 12px;}
 .demo-phone .demo-toolbar-controls select {font-size:16px;}
 .demo-phone .demo-art--large:has(img) {max-width:168px;margin-inline:auto;}
 .demo-phone .demo-detail-layout {gap:12px;}
 .demo-phone .demo-view-heading {margin-bottom:12px;}
 .demo-phone .demo-footer:not(:empty) {padding:10px 12px;}
 .demo-phone .demo-bottom-nav {padding-bottom:max(4px,env(safe-area-inset-bottom,0px));}
 .demo-dialog .demo-phone .demo-app {height:calc(100dvh - 92px);overflow:hidden;}
 body.demo-standalone .demo-phone .demo-app {
  height:calc(100dvh - 36px - var(--demo-preview-height,0px));min-height:0;overflow:hidden;
 }
 body.demo-standalone .demo-phone .demo-view {flex:1;min-height:0;overflow-y:auto;}
}

/* Keep the same device presentation when the sample is viewed on a phone. */
@media(max-width:520px) {
 body:not(.demo-standalone) #menu-demo .demo-phone {
  max-width:368px;border:6px solid #101113;border-radius:44px;
  box-shadow:0 0 0 1px #55585c,0 0 0 3px #c3c5c7,0 0 0 4px #85898e,0 12px 32px #172c4817;
 }
 body:not(.demo-standalone) #menu-demo .demo-device-chrome {
  display:flex;height:40px;padding-inline:18px;font-size:10px;
 }
 body:not(.demo-standalone) #menu-demo .demo-device-chrome i {width:96px;height:24px;top:6px;}
 body:not(.demo-standalone) #menu-demo .demo-home-indicator {display:block;height:18px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-app {
  height:calc(100svh - 158px);max-height:690px;
 }
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-view {padding:12px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-product img[data-demo-food-photo] {height:108px;}
 body:not(.demo-standalone) #menu-demo .demo-phone .demo-bottom-nav {padding-bottom:4px;}
}