/* The Tray menu: the stylesheet of the Tray menu prototype, copied as it is (menu, dock, sheets, offers, pager, structures), so
   the page looks exactly like the prototype. Only the page shell at the bottom is new. */
html { -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
/* ============ The menu preview and the shop's site share these tokens (set from script) ============ */
.scope { --bg: #eef3ec; --surface: #fff; --ink: #13261a; --muted: #5b6f61; --brand: #2f5d3f; --on-brand: #fff; --deep: #264a33; --on-deep: #fff; --soft: #d8e5d6; --pop: #e8803f; --on-pop: #101418; --line: rgba(19, 38, 26, .1); --r: 26px; --f-head: 'Bricolage Grotesque', 'Readex Pro', sans-serif; --f-body: 'Readex Pro', system-ui, sans-serif; --dock-bg: var(--deep); --dock-ink: var(--on-deep); --card-bg: var(--deep); --card-ink: var(--on-deep); --dirv: 1; font-family: var(--f-body); color: var(--ink); }
.scope *, .scope *::before, .scope *::after { box-sizing: border-box; }
.scope button { font-family: inherit; }
.scope[dir="rtl"] { --dirv: -1; }
.scope[data-theme="noir"] { --dock-bg: rgba(30, 30, 37, .72); --dock-ink: #f4eee3; }
.scope svg { display: block; }

.app { position: relative; height: 100%; overflow: clip; background: var(--bg) var(--bg-image, none) center / cover no-repeat; display: flex; flex-direction: column; isolation: isolate; }
.a-scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 168px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.a-scroll::-webkit-scrollbar { display: none; }
.a-top { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; gap: 10px; padding: 16px 16px 10px; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(14px); }
.a-top .logo { width: 40px; height: 40px; border-radius: calc(var(--r) * .5); background: var(--deep); color: var(--on-deep); display: grid; place-items: center; flex: none; }
.a-top .nm { flex: 1; min-width: 0; line-height: 1.15; }
.a-top .nm b { display: block; font: 700 17px var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-top .nm small { color: var(--muted); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.a-top .nm small::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2fb36b; }
.ib { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px var(--line); flex: none; font: 700 12.5px var(--f-body); }
.ib svg { width: 19px; height: 19px; }
.a-search { display: none; padding: 0 16px 10px; }
.a-search.on { display: block; }
.a-search input { width: 100%; height: 44px; border-radius: 99px; border: 0; padding-inline: 18px; background: var(--surface); color: var(--ink); font: 500 14px var(--f-body); box-shadow: 0 0 0 1px var(--line); outline: 0; }
.a-search input:focus { box-shadow: 0 0 0 2px var(--brand); }
.a-chips { display: none; position: sticky; top: 66px; z-index: 11; gap: 8px; padding: 6px 16px 10px; overflow-x: auto; scrollbar-width: none; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(10px); }
.a-chips::-webkit-scrollbar { display: none; }
.app[data-nav="classic"] .a-chips { display: flex; }
.chipb { flex: none; border: 0; border-radius: 99px; padding: 9px 15px; background: var(--surface); color: var(--ink); font: 600 13px var(--f-body); cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.chipb.on { background: var(--brand); color: var(--on-brand); box-shadow: none; }

.hero { position: relative; overflow: hidden; margin: 6px 16px 0; padding: 20px 20px 20px; border-radius: calc(var(--r) + 8px); background: var(--deep); color: var(--on-deep); min-height: 196px; }
.hero::before { content: ''; position: absolute; inset-inline-end: -44px; top: -56px; width: 190px; height: 190px; border-radius: 50%; background: color-mix(in srgb, var(--on-deep) 9%, transparent); }
.hero::after { content: ''; position: absolute; inset-inline-end: 52px; bottom: -70px; width: 140px; height: 140px; border-radius: 50%; background: color-mix(in srgb, var(--pop) 38%, transparent); }
.hero > * { position: relative; z-index: 1; }
.hero .hi { font: 600 12px var(--f-body); letter-spacing: .04em; opacity: .75; display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.hero .hi svg { width: 15px; height: 15px; }
.hero h2 { margin: 0 0 6px; max-width: 12ch; font: 700 27px/1.08 var(--f-head); text-wrap: balance; }
.hero p { margin: 0 0 16px; max-width: 24ch; font-size: 12.5px; opacity: .8; }
.hero .hero-art svg { width: 100%; height: 100%; }
.hero .hero-art { position: absolute; z-index: 1; inset-inline-end: -22px; bottom: -26px; width: 158px; height: 158px; transform: rotate(-8deg); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .3)); }
.moods { display: flex; gap: 7px; flex-wrap: wrap; max-width: 68%; }
.mood { border: 0; border-radius: 99px; padding: 8px 12px; background: color-mix(in srgb, var(--on-deep) 15%, transparent); color: var(--on-deep); font: 600 12px var(--f-body); display: flex; gap: 6px; align-items: center; cursor: pointer; backdrop-filter: blur(4px); }
.mood svg { width: 14px; height: 14px; }
.mood:active { transform: scale(.96); }

.sec { padding: 24px 16px 0; scroll-margin-top: 66px; }
.sec > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.sec h2 { margin: 0; font: 700 21px var(--f-head); }
.sec > header span { color: var(--muted); font-size: 12px; }
.grid { display: grid; gap: 14px; }
.card { position: relative; background: var(--surface); border-radius: var(--r); color: var(--ink); }
.card h3 { margin: 0; font: 700 15px/1.2 var(--f-head); }
.card p { margin: 3px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.price { font: 700 15px var(--f-head); white-space: nowrap; font-variant-numeric: tabular-nums; }
.price i { font: 500 10.5px var(--f-body); margin-inline-start: 3px; opacity: .6; font-style: normal; }
.badge { font: 600 10.5px var(--f-body); padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--pop) 20%, transparent); color: var(--pop-ink, var(--ink)); white-space: nowrap; }
.add { margin-inline-start: auto; width: 38px; height: 38px; border-radius: calc(var(--r) * .5); border: 0; background: var(--pop); color: var(--on-pop); display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .15s; }
.add:active { transform: scale(.9); }
.add svg { width: 18px; height: 18px; }
.art { position: relative; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--tint) 40%, var(--surface)); cursor: pointer; flex: none; }
.art svg { width: 88%; height: 88%; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, .2)); }
.app[data-shape="circle"] .art, .site[data-shape="circle"] .art { border-radius: 50%; }
.app[data-shape="squircle"] .art, .site[data-shape="squircle"] .art { border-radius: 32%; }
.app[data-shape="arch"] .art, .site[data-shape="arch"] .art { border-radius: 50% 50% 18% 18% / 44% 44% 18% 18%; }

/* card style 1: overlap */
.app[data-card="overlap"] .grid { gap: 18px; }
.app[data-card="overlap"] .card { background: var(--card-bg); color: var(--card-ink); margin-inline-start: 34px; padding: 14px 14px 14px 88px; padding-inline: 90px 14px; min-height: 116px; display: flex; flex-direction: column; justify-content: center; }
.app[data-card="overlap"] .card p { color: color-mix(in srgb, var(--card-ink) 70%, transparent); }
.app[data-card="overlap"] .card .art { position: absolute; inset-inline-start: -34px; top: 50%; transform: translateY(-50%); width: 118px; height: 118px; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .45); }
.app[data-card="overlap"] .badge { color: var(--card-ink); }
/* card style 2: poster */
.app[data-card="poster"] .grid { grid-template-columns: 1fr 1fr; gap: 12px; }
.app[data-card="poster"] .card { padding: 9px 9px 12px; box-shadow: 0 0 0 1px var(--line); }
.app[data-card="poster"] .card .art { width: 100%; aspect-ratio: 1; margin-bottom: 9px; }
.app[data-card="poster"] .card .body { padding-inline: 4px; }
.app[data-card="poster"] .card .badge { position: absolute; top: 16px; inset-inline-start: 16px; background: var(--surface); }
.app[data-card="poster"] .card .meta { margin-top: 8px; }
.app[data-theme="noir"][data-card="poster"] .card { background: linear-gradient(165deg, color-mix(in srgb, var(--tint) 70%, #000) 0%, #0d0d10 78%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 30px -18px #000; color: #f6efe3; }
.app[data-theme="noir"][data-card="poster"] .card p { color: rgba(246, 239, 227, .62); }
.app[data-theme="noir"][data-card="poster"] .card .art { background: transparent; }
.app[data-theme="noir"][data-card="poster"] .badge { background: rgba(0, 0, 0, .5); color: #f6efe3; backdrop-filter: blur(6px); }
/* card style 3: row */
.app[data-card="row"] .grid { gap: 10px; }
.app[data-card="row"] .card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; padding: 10px 12px 10px 10px; padding-inline: 10px 12px; box-shadow: 0 0 0 1px var(--line); }
.app[data-card="row"] .card .art { width: 76px; height: 76px; }
.app[data-card="row"] .card .meta { margin-top: 6px; }
.app[data-card="row"] .card p { -webkit-line-clamp: 1; }
.flash { animation: flash 1.4s ease; }
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px var(--pop); } }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }

/* ---- the tray dock ---- */
.dock { position: absolute; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 20; }
.dock-bar { position: relative; height: 68px; border-radius: calc(var(--r) + 12px); background: var(--dock-bg); color: var(--dock-ink); display: flex; align-items: center; gap: 8px; padding: 9px; box-shadow: 0 22px 44px -14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(20px) saturate(1.3); }
.scope[data-theme="noir"] .dock-bar { box-shadow: 0 22px 44px -14px #000, inset 0 0 0 1px rgba(255, 255, 255, .1); }
.app[data-nav="classic"] .dock-bar { display: none; }
.d-svc, .d-tray { height: 50px; border: 0; cursor: pointer; color: var(--dock-ink); background: color-mix(in srgb, var(--dock-ink) 13%, transparent); border-radius: calc(var(--r) + 2px); display: flex; align-items: center; gap: 8px; flex: none; }
.d-svc { width: 50px; justify-content: center; }
.d-svc svg, .d-tray .plate svg { width: 23px; height: 23px; }
.d-svc[aria-expanded="true"] { background: var(--pop); color: var(--on-pop); }
.d-tray { min-width: 50px; justify-content: center; padding: 0 13px; transition: padding .3s, background .3s; }
.d-tray .thumbs, .d-tray .sum { display: none; }
.dock[data-has="1"] .d-tray { background: var(--pop); color: var(--on-pop); padding-inline: 8px 14px; }
.dock[data-has="1"] .d-tray .plate { display: none; }
.dock[data-has="1"] .d-tray .thumbs, .dock[data-has="1"] .d-tray .sum { display: flex; }
.thumbs i { width: 31px; height: 31px; border-radius: 50%; background: var(--surface); border: 2px solid var(--pop); display: grid; place-items: center; overflow: hidden; margin-inline-start: -11px; }
.thumbs i:first-child { margin-inline-start: 0; }
.thumbs i svg { width: 25px; height: 25px; }
.sum { flex-direction: column; text-align: start; line-height: 1.12; }
.sum b { font: 700 14px var(--f-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum small { font-size: 10.5px; opacity: .72; white-space: nowrap; }
.bump { animation: bump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.16); } 100% { transform: scale(1); } }
.d-scrub { flex: 1; min-width: 0; height: 50px; position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; padding: 0 10px 6px; border-radius: calc(var(--r) + 2px); background: color-mix(in srgb, var(--dock-ink) 9%, transparent); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; overflow: hidden; }
.d-scrub:active { cursor: grabbing; }
.d-scrub .cur { font: 700 14px var(--f-head); white-space: nowrap; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.d-scrub .cur.go-next { animation: goNext .28s cubic-bezier(.2, .9, .3, 1); }
.d-scrub .cur.go-prev { animation: goPrev .28s cubic-bezier(.2, .9, .3, 1); }
@keyframes goNext { from { opacity: 0; transform: translateX(calc(18px * var(--dirv))); } }
@keyframes goPrev { from { opacity: 0; transform: translateX(calc(-18px * var(--dirv))); } }
.d-scrub .h { font-size: 10.5px; opacity: .5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.d-scrub .h.n { justify-content: flex-end; }
.d-scrub .h svg { width: 11px; height: 11px; flex: none; }
.d-scrub .h.p svg { transform: scaleX(-1); }
.scope[dir="rtl"] .d-scrub .h.p svg { transform: none; }
.scope[dir="rtl"] .d-scrub .h.n svg { transform: scaleX(-1); }
.dock[data-has="1"] .d-scrub { grid-template-columns: 1fr; }
.dock[data-has="1"] .d-scrub .h { display: none; }
.d-scrub .dots { position: absolute; inset-inline: 0; bottom: 5px; display: flex; justify-content: center; gap: 4px; }
.d-scrub .dots i { width: 4px; height: 4px; border-radius: 3px; background: currentColor; opacity: .32; transition: width .25s, opacity .25s; }
.d-scrub .dots i.on { width: 15px; opacity: .95; }
.tabbar { display: none; height: 66px; border-radius: calc(var(--r) + 8px); background: var(--surface); box-shadow: 0 18px 38px -14px rgba(0, 0, 0, .35), 0 0 0 1px var(--line); grid-template-columns: repeat(4, 1fr); align-items: center; padding: 6px; }
.app[data-nav="classic"] .tabbar { display: grid; }
.tabbar button { border: 0; background: transparent; color: var(--muted); display: grid; justify-items: center; gap: 2px; padding: 6px 0; border-radius: 14px; cursor: pointer; font: 600 10.5px var(--f-body); position: relative; }
.tabbar button.on { color: var(--brand); }
.tabbar svg { width: 22px; height: 22px; }
.tabbar .cnt { position: absolute; top: 2px; inset-inline-start: calc(50% + 6px); min-width: 17px; height: 17px; border-radius: 9px; padding: 0 4px; background: var(--pop); color: var(--on-pop); font: 700 10px var(--f-body); display: grid; place-items: center; }

.live { position: absolute; inset-inline: 4px; bottom: calc(100% + 8px); display: flex; align-items: center; gap: 11px; padding: 8px 12px 8px 8px; padding-inline: 8px 12px; border-radius: calc(var(--r) + 6px); background: var(--surface); color: var(--ink); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .4), 0 0 0 1px var(--line); transform-origin: 50% 100%; animation: rise .5s cubic-bezier(.2, 1.15, .3, 1); }
.live[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.92); } }
.live .ring { width: 42px; height: 42px; flex: none; position: relative; }
.live .ring svg { width: 42px; height: 42px; transform: rotate(-90deg); }
.live .ring circle { fill: none; stroke-width: 3.4; }
.live .ring .bg { stroke: var(--line); }
.live .ring .fg { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 100.5; transition: stroke-dashoffset 1s ease; }
.live .ring .ic { position: absolute; inset: 0; display: grid; place-items: center; color: var(--brand); }
.live .ring .ic svg { width: 19px; height: 19px; transform: none; }
.live .txt { flex: 1; min-width: 0; line-height: 1.2; }
.live .txt b { display: block; font: 700 14px var(--f-head); }
.live .txt small { font-size: 11.5px; color: var(--muted); }
.live .stp { display: flex; gap: 4px; margin-top: 6px; }
.live .stp i { flex: 1; height: 3px; border-radius: 3px; background: var(--line); }
.live .stp i.on { background: var(--brand); }
.live .okb { border: 0; border-radius: 99px; padding: 10px 18px; background: var(--ink); color: var(--bg); font: 700 13px var(--f-body); cursor: pointer; }
.live[data-st="ready"] { background: var(--pop); color: var(--on-pop); animation: rise .5s cubic-bezier(.2, 1.15, .3, 1), glow 1.8s ease-in-out .5s infinite; }
.live[data-st="ready"] .txt small { color: color-mix(in srgb, var(--on-pop) 72%, transparent); }
.live[data-st="ready"] .ring .fg { stroke: var(--on-pop); }
.live[data-st="ready"] .ring .bg { stroke: color-mix(in srgb, var(--on-pop) 20%, transparent); }
.live[data-st="ready"] .ring .ic { color: var(--on-pop); }
@keyframes glow { 50% { box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .4), 0 0 0 5px color-mix(in srgb, var(--pop) 35%, transparent); } }
.dock[data-live="1"] .fan { bottom: calc(100% + 82px); }
.dock[data-live="1"] .chapters { bottom: calc(100% + 82px); }
.fan { position: absolute; inset-inline-start: 0; bottom: calc(100% + 10px); display: flex; flex-direction: column-reverse; gap: 8px; align-items: flex-start; pointer-events: none; }
.fan button { display: flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; padding-inline: 7px 18px; border-radius: 99px; border: 0; cursor: pointer; background: var(--surface); color: var(--ink); font: 600 13px var(--f-body); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); opacity: 0; transform: translateY(26px) scale(.8); transform-origin: 0 100%; transition: opacity .25s, transform .4s cubic-bezier(.2, 1.3, .3, 1); transition-delay: calc(var(--i) * 45ms); }
.scope[dir="rtl"] .fan button { transform-origin: 100% 100%; }
.fan button i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--soft); color: var(--brand); font-style: normal; }
.fan button i svg { width: 18px; height: 18px; }
.fan.on { pointer-events: auto; }
.fan.on button { opacity: 1; transform: none; }
.fan button.done i { background: #2fb36b; color: #fff; }
.chapters { position: absolute; inset-inline: 64px 64px; bottom: calc(100% + 10px); display: grid; gap: 2px; padding: 6px; border-radius: calc(var(--r) + 2px); background: var(--surface); color: var(--ink); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .45), 0 0 0 1px var(--line); opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none; transition: .3s cubic-bezier(.2, 1.2, .3, 1); }
.chapters.on { opacity: 1; transform: none; pointer-events: auto; }
.chapters button { display: flex; justify-content: space-between; align-items: center; border: 0; background: transparent; color: inherit; padding: 11px 12px; border-radius: 12px; font: 600 13.5px var(--f-body); cursor: pointer; }
.chapters button.on { background: var(--soft); color: var(--brand); }
.chapters button small { color: var(--muted); font-weight: 500; }

/* ---- sheets ---- */
.scrim { position: absolute; inset: 0; z-index: 30; background: rgba(8, 10, 14, .52); opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet { position: absolute; inset-inline: 0; bottom: 0; z-index: 40; max-height: 90%; overflow-y: auto; overscroll-behavior: contain; background: var(--surface); color: var(--ink); border-radius: calc(var(--r) + 10px) calc(var(--r) + 10px) 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateY(104%); transition: transform .45s cubic-bezier(.2, .9, .25, 1); scrollbar-width: none; }
.sheet.on { transform: none; }
.sheet::-webkit-scrollbar { display: none; }
.grab { width: 40px; height: 4px; border-radius: 4px; background: var(--line); margin: 0 auto 12px; }
.sheet h3 { margin: 0; font: 700 21px var(--f-head); }
.sh-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.sh-head .tbl { margin-inline-start: auto; padding: 6px 12px; border-radius: 99px; background: var(--soft); color: var(--brand); font: 700 12px var(--f-body); }
.x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--bg); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.x svg { width: 17px; height: 17px; }
.d-art { margin: 6px auto 14px; width: min(58%, 210px); aspect-ratio: 1; }
.d-art.art { cursor: default; }
.d-rate { margin: 4px 0 8px; display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
.d-rate svg { width: 14px; height: 14px; color: #f1b02b; fill: #f1b02b; }
.d-desc { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.opt { margin: 0 0 14px; }
.opt > span { display: block; margin-bottom: 8px; font: 700 12.5px var(--f-body); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 8px 14px; font: 600 13px var(--f-body); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.chip small { color: var(--muted); font-weight: 500; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.chip.on small { color: inherit; opacity: .8; }
.d-foot { display: flex; gap: 10px; align-items: center; position: sticky; bottom: -18px; padding: 10px 0 2px; background: var(--surface); }
.qty { display: flex; align-items: center; border-radius: 99px; background: var(--bg); flex: none; }
.qty button { width: 38px; height: 38px; border: 0; background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.qty button svg { width: 16px; height: 16px; }
.qty output { min-width: 22px; text-align: center; font: 700 14px var(--f-body); font-variant-numeric: tabular-nums; }
.cta { flex: 1; border: 0; border-radius: calc(var(--r) * .75); padding: 15px 18px; background: var(--brand); color: var(--on-brand); font: 700 15px var(--f-body); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.t-seg { display: flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--bg); margin: 8px 0 4px; }
.t-seg button { flex: 1; border: 0; border-radius: 99px; padding: 9px; background: transparent; color: var(--muted); font: 600 13px var(--f-body); cursor: pointer; }
.t-seg button.on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.t-line { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); }
.t-line .art { width: 54px; height: 54px; cursor: default; }
.t-line b { display: block; font: 700 14px var(--f-head); }
.t-line small { color: var(--muted); font-size: 11.5px; }
.t-line .qty { margin-top: 6px; display: inline-flex; }
.t-line .qty button { width: 30px; height: 30px; }
.t-line .pr { font: 700 14px var(--f-head); font-variant-numeric: tabular-nums; align-self: start; padding-top: 2px; }
.t-empty { padding: 34px 0; text-align: center; color: var(--muted); }
.pairs { margin: 14px 0 4px; }
.pairs > span { display: block; font: 700 12.5px var(--f-body); margin-bottom: 8px; }
.pair-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pair-row::-webkit-scrollbar { display: none; }
.pair { flex: none; width: 138px; display: grid; grid-template-columns: 38px 1fr; gap: 8px; align-items: center; padding: 7px; border-radius: calc(var(--r) * .7); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; text-align: start; }
.pair .art { width: 38px; height: 38px; cursor: pointer; }
.pair b { font: 700 11.5px/1.2 var(--f-head); display: block; }
.pair small { color: var(--muted); font-size: 10.5px; }
.totals { margin: 12px 0 14px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.totals div { display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
.totals .tt { color: var(--ink); font: 700 17px var(--f-head); padding-top: 6px; border-top: 1px dashed var(--line); }
.slide { position: relative; height: 58px; border-radius: 99px; background: var(--deep); color: var(--on-deep); display: grid; place-items: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.slide .lb { padding-inline: 70px 22px; font: 600 14px var(--f-body); opacity: .92; pointer-events: none; text-align: center; }
.slide .fl { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--pop); opacity: .38; pointer-events: none; }
.slide .hd { position: absolute; inset-inline-start: 5px; top: 5px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--pop); color: var(--on-pop); display: grid; place-items: center; cursor: grab; transform: translateX(calc(var(--dx, 0px) * var(--dirv))); }
.slide .hd svg { width: 21px; height: 21px; }
.scope[dir="rtl"] .slide .hd svg { transform: scaleX(-1); }
.slide.back .hd, .slide.back .fl { transition: transform .35s cubic-bezier(.2, 1.2, .3, 1), width .35s; }
.toast { position: absolute; z-index: 60; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 84%; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); padding: 10px 16px; border-radius: 99px; background: var(--deep); color: var(--on-deep); box-shadow: 0 0 0 2px var(--bg), 0 6px 18px rgba(0,0,0,.25); font: 600 13px var(--f-body); opacity: 0; transform: translateY(10px); transition: .3s; pointer-events: none; text-align: center; }
.toast.on { opacity: 1; transform: none; }
.fly { position: absolute; z-index: 70; pointer-events: none; border-radius: 50%; background: var(--surface); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); display: grid; place-items: center; overflow: hidden; }
.fly svg { width: 86%; height: 86%; }

/* ---- more card styles ---- */
.p-hd, .ld { display: none; }
.hd { display: flex; align-items: baseline; gap: 8px; }
.hd h3 { min-width: 0; }
.price:not(.p-hd) { display: inline-flex; align-items: baseline; gap: 5px; }
.price s { font: 500 11px var(--f-body); opacity: .55; order: 2; }
.price i { order: 3; }
.app[data-card="magazine"] .grid { gap: 24px; }
.app[data-card="magazine"] .card { background: transparent; border-radius: 0; display: flex; flex-direction: column; color: var(--ink); }
.app[data-card="magazine"] .card .art { width: 100%; aspect-ratio: 16 / 10; border-radius: calc(var(--r) * .7); margin-bottom: 12px; }
.app[data-card="magazine"] .card .art svg { width: auto; height: 92%; aspect-ratio: 1; }
.app[data-card="magazine"] .card h3 { font-size: 22px; font-weight: 600; }
.app[data-card="magazine"] .card p { font-size: 13px; -webkit-line-clamp: 3; }
.app[data-card="magazine"] .card .badge { position: absolute; top: 12px; inset-inline-start: 12px; background: var(--surface); }
.app[data-card="leader"] .grid { gap: 0; }
.app[data-card="leader"] .card { display: grid; grid-template-columns: 60px 1fr; gap: 12px; align-items: start; padding: 14px 2px; background: transparent; border-radius: 0; border-bottom: 1px dashed var(--line); }
.app[data-card="leader"] .card .art { width: 60px; height: 60px; }
.app[data-card="leader"] .ld { display: block; flex: 1; min-width: 12px; border-bottom: 2px dotted color-mix(in srgb, var(--ink) 30%, transparent); transform: translateY(-4px); }
.app[data-card="leader"] .p-hd { display: inline-flex; align-items: baseline; gap: 5px; }
.app[data-card="leader"] .p-meta { display: none; }
.app[data-card="leader"] .card p { -webkit-line-clamp: 1; }
.app[data-card="leader"] .meta { margin-top: 6px; }
.app[data-card="leader"] .add { width: 32px; height: 32px; }
.app[data-card="compact"] .grid { gap: 8px; }
.app[data-card="compact"] .card { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: center; padding: 8px 10px; box-shadow: 0 0 0 1px var(--line); }
.app[data-card="compact"] .card .art { width: 50px; height: 50px; }
.app[data-card="compact"] .card p { display: none; }
.app[data-card="compact"] .p-hd { display: inline-flex; align-items: baseline; gap: 5px; margin-inline-start: auto; }
.app[data-card="compact"] .p-meta { display: none; }
.app[data-card="compact"] .meta { margin-top: 4px; }
.app[data-card="compact"] .add { width: 30px; height: 30px; }
.app[data-card="row"] .p-hd, .app[data-card="row"] .ld { display: none; }
/* flair per template */
.app[data-theme="maison"] .sec h2, .app[data-theme="maison"] .o-slide h2 { font-weight: 500; }
.app[data-theme="maison"] .sec > header { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.app[data-theme="velvet"] .o-slide[data-k="mood"] { background: linear-gradient(140deg, color-mix(in srgb, var(--brand) 75%, #000), var(--deep)); }
.app[data-theme="pulse"] .card { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent), 0 0 26px -10px var(--brand); }
.app[data-theme="street"] .card { box-shadow: 3px 3px 0 var(--ink); border: 2px solid var(--ink); }
.app[data-theme="street"] .sec h2, .app[data-theme="street"] .o-slide h2 { text-transform: uppercase; letter-spacing: .01em; }
.app[data-theme="levant"] .sec > header { border-bottom: 3px double var(--line); padding-bottom: 8px; }
.app[data-theme="roast"] .card { box-shadow: 0 0 0 1px var(--line), inset 0 0 0 4px var(--surface), inset 0 0 0 5px var(--line); }
.app[data-theme="sorbet"] .a-scroll { background: radial-gradient(60% 24% at 100% 0, color-mix(in srgb, var(--pop) 16%, transparent), transparent), var(--bg); }
.app[data-theme="mint"] .sec h2 { color: var(--brand); }
.app[data-theme="cloud"] .a-top { backdrop-filter: blur(18px); }
/* photos can be switched off by the shop */
.app[data-photos="0"] .card .art, .app[data-photos="0"] .o-art, .app[data-photos="0"] .hero-art { display: none; }
.app[data-photos="0"] .grid { grid-template-columns: 1fr; gap: 10px; }
.app[data-photos="0"] .card { display: block; margin: 0; padding: 14px 16px; min-height: 0; }
.app[data-photos="0"] .card .badge { position: static; }
.app[data-photos="0"] .o-slide .tx { max-width: none; }
.app[data-photos="0"] .moods { max-width: none; }
.app[data-photos="0"] .hero h2, .app[data-photos="0"] .hero p { max-width: none; }
.app[data-photos="0"] .o-slide h2, .app[data-photos="0"] .o-slide p { max-width: none; }
/* dock shape */
.app[data-dock="square"] .dock-bar { border-radius: 20px; }
.app[data-dock="square"] .d-svc, .app[data-dock="square"] .d-tray, .app[data-dock="square"] .d-scrub, .app[data-dock="square"] .d-ready { border-radius: 13px; }
.app[data-dock="island"] .dock { inset-inline: 22px; }
.app[data-dock="island"] .dock-bar { box-shadow: 0 26px 40px -16px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }

/* ---- offers slider ---- */
.offers { margin-top: 6px; }
.o-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16px 2px; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.o-track::-webkit-scrollbar { display: none; }
.o-slide { --oc: var(--deep); --oi: var(--on-deep); flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; position: relative; overflow: hidden; min-height: 214px; border-radius: calc(var(--r) + 8px); padding: 20px; background: var(--oc); color: var(--oi); display: flex; flex-direction: column; align-items: flex-start; }
.o-slide.hero { margin: 0; --oc: var(--deep); }
.o-slide[data-k="happy"] { --oc: var(--pop); --oi: var(--on-pop); }
.o-slide[data-k="bundle"] { --oc: var(--brand); --oi: var(--on-brand); }
.o-slide[data-k="new"] { --oc: var(--surface); --oi: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.o-slide[data-k="goal"] { --oc: var(--soft); --oi: var(--ink); }
.o-slide > * { position: relative; z-index: 1; }
.o-slide .pat { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; }
.offers[data-pat="dots"] .o-slide .pat { opacity: .2; background-image: radial-gradient(currentColor 1.4px, transparent 1.7px); background-size: 14px 14px; }
.offers[data-pat="lines"] .o-slide .pat { opacity: .16; background-image: repeating-linear-gradient(135deg, currentColor 0 1.2px, transparent 1.2px 11px); }
.offers[data-pat="grid"] .o-slide .pat { opacity: .13; background-image: linear-gradient(currentColor 1px, transparent 1px), linear-gradient(90deg, currentColor 1px, transparent 1px); background-size: 24px 24px; }
.offers[data-pat="stripes"] .o-slide .pat { opacity: .09; background-image: repeating-linear-gradient(90deg, currentColor 0 12px, transparent 12px 24px); }
.offers[data-pat="waves"] .o-slide .pat, .offers[data-pat="circles"] .o-slide .pat, .offers[data-pat="diamonds"] .o-slide .pat { opacity: .2; background: currentColor; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.offers[data-pat="waves"] .o-slide .pat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 8Q11 0 22 8T44 8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='16'%3E%3Cpath d='M0 8Q11 0 22 8T44 8' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E"); }
.offers[data-pat="circles"] .o-slide .pat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Ccircle cx='18' cy='18' r='12' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E"); }
.offers[data-pat="diamonds"] .o-slide .pat { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3 25 14 14 25 3 14Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 3 25 14 14 25 3 14Z' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E"); }
/* the big card's background: a gradient from its colour towards the accent, or the shop's own photo under a tint of the colour */
.offers[data-cbg="gradient"] .o-slide { background: linear-gradient(140deg, var(--oc) 15%, color-mix(in srgb, var(--oc) 28%, var(--pop))); }
.offers[data-cbg="image"] .o-slide { background: linear-gradient(color-mix(in srgb, var(--oc) 58%, transparent), color-mix(in srgb, var(--oc) 78%, transparent)), var(--card-img) center / cover; }
.kick { display: inline-flex; align-items: center; gap: 6px; font: 700 11px var(--f-body); letter-spacing: .05em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; background: color-mix(in srgb, var(--oi) 14%, transparent); }
.kick svg { width: 13px; height: 13px; }
.o-slide h2 { margin: 10px 0 4px; max-width: 13ch; font: 700 25px/1.08 var(--f-head); text-wrap: balance; }
.o-slide p { margin: 0 0 12px; max-width: 24ch; font-size: 12.5px; opacity: .82; }
.o-slide .grow { flex: 1; }
.o-cta { border: 0; border-radius: 99px; padding: 11px 18px; background: var(--oi); color: var(--oc); font: 700 13px var(--f-body); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin-top: auto; }
.o-cta svg { width: 16px; height: 16px; }
.scope[dir="rtl"] .o-cta svg.dir { transform: scaleX(-1); }
.o-cta:disabled { opacity: .45; cursor: default; }
.o-cta:active { transform: scale(.97); }
.o-art { position: absolute !important; z-index: 1; inset-inline-end: -16px; bottom: -22px; width: 148px; height: 148px; transform: rotate(-8deg); filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .3)); pointer-events: none; }
.o-art svg { width: 100%; height: 100%; }
.o-art.two { width: 168px; height: 150px; }
.o-art.two svg { position: absolute; width: 104px; height: 104px; }
.o-art.two svg:first-child { inset-inline-end: 0; top: 0; }
.o-art.two svg:last-child { inset-inline-start: 0; bottom: 0; transform: rotate(14deg); }
.o-cd { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 12px; font: 700 13px ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.o-cd b { background: color-mix(in srgb, var(--oi) 16%, transparent); border-radius: 7px; padding: 3px 6px; font-weight: 700; }
.o-cd em { font: 600 11px var(--f-body); opacity: .75; font-style: normal; margin-inline-end: 4px; }
.o-price { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; font: 700 22px var(--f-head); font-variant-numeric: tabular-nums; }
.o-price s { font: 500 13px var(--f-body); opacity: .65; }
.o-price span { font: 700 11.5px var(--f-body); padding: 3px 8px; border-radius: 99px; background: color-mix(in srgb, var(--oi) 16%, transparent); }
.o-bar { width: min(62%, 190px); height: 8px; border-radius: 8px; background: color-mix(in srgb, var(--oi) 14%, transparent); overflow: hidden; margin: 0 0 6px; }
.o-bar i { display: block; height: 100%; border-radius: 8px; background: var(--brand); transition: width .5s; }
.o-sub { font: 600 12px var(--f-body); opacity: .75; margin-bottom: 12px; }
.o-dots { display: flex; justify-content: center; gap: 5px; margin-top: 10px; }
.o-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 6px; background: var(--ink); opacity: .2; cursor: pointer; transition: width .25s, opacity .25s; }
.o-dots button.on { width: 20px; opacity: .7; }
.usual { margin: 14px 16px 0; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: calc(var(--r) * .8); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.usual .art { width: 46px; height: 46px; cursor: default; }
.usual .tx { flex: 1; min-width: 0; line-height: 1.25; }
.usual .tx small { display: block; color: var(--muted); font-size: 11.5px; }
.usual .tx b { font: 700 14px var(--f-head); }
.usual button { border: 0; border-radius: 99px; padding: 10px 14px; background: var(--brand); color: var(--on-brand); font: 700 12.5px var(--f-body); cursor: pointer; display: flex; gap: 6px; align-items: center; }
.usual button svg { width: 14px; height: 14px; }

/* ---- the pager in the tray ---- */
.d-tray .trk { display: none; }
.dock[data-trk] .d-tray { background: var(--pop); color: var(--on-pop); padding-inline: 6px 14px; }
.dock[data-trk] .d-tray .plate, .dock[data-trk] .d-tray .thumbs { display: none; }
.dock[data-trk] .d-tray .trk, .dock[data-trk] .d-tray .sum { display: flex; }
.trk { width: 40px; height: 40px; position: relative; flex: none; }
.trk svg { width: 40px; height: 40px; transform: rotate(-90deg); }
.trk circle { fill: none; stroke-width: 3.4; }
.trk .bg { stroke: color-mix(in srgb, currentColor 24%, transparent); }
.trk .fg { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 100.5; transition: stroke-dashoffset 1s; }
.trk b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 13px var(--f-head); font-variant-numeric: tabular-nums; }
.trk b svg { width: 18px; height: 18px; transform: none; }
.d-ready { display: none; flex: 1; min-width: 0; height: 50px; border: 0; border-radius: calc(var(--r) + 2px); padding: 0 12px; align-items: center; gap: 10px; background: var(--pop); color: var(--on-pop); cursor: pointer; text-align: start; animation: pulse2 1.7s ease-in-out infinite; }
.d-ready .ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--on-pop) 16%, transparent); flex: none; }
.d-ready .ic svg { width: 18px; height: 18px; }
.d-ready .tx { min-width: 0; line-height: 1.15; }
.d-ready b { display: block; font: 700 13.5px var(--f-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-ready small { font-size: 10.5px; opacity: .78; white-space: nowrap; }
@keyframes pulse2 { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--pop) 35%, transparent); } }
.dock[data-st="ready"] .d-scrub { display: none; }
.dock[data-st="ready"] .d-ready { display: flex; }
.dock[data-st="ready"][data-trk] .d-tray { background: color-mix(in srgb, var(--dock-ink) 14%, transparent); color: var(--dock-ink); }
.live { cursor: pointer; padding-block: 6px; }
.live .stp { display: none; }
.live[data-st="ready"] { display: none; }
.ordlink { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 4px; padding: 10px 12px; border: 0; border-radius: calc(var(--r) * .8); background: var(--soft); color: var(--ink); cursor: pointer; text-align: start; font: 600 13px var(--f-body); }
.ordlink b { font: 700 14px var(--f-head); display: block; }
.ordlink small { color: var(--muted); font-size: 11.5px; }
.ordlink > svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.ordlink .go { margin-inline-start: auto; }
.scope[dir="rtl"] .ordlink .go { transform: scaleX(-1); }
.ticket { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 12px 0 12px; padding: 18px 22px; border-radius: calc(var(--r) + 4px); background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; transition: background .4s; }
.ticket::before, .ticket::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transform: translateY(-50%); }
.ticket::before { inset-inline-start: -9px; }
.ticket::after { inset-inline-end: -9px; }
.tk-n small { display: block; opacity: .7; font: 600 11px var(--f-body); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; }
.tk-n b { font: 800 56px/1 var(--f-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tk-ring { width: 84px; height: 84px; position: relative; flex: none; }
.tk-ring svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.tk-ring circle { fill: none; stroke-width: 3; }
.tk-ring .bg { stroke: color-mix(in srgb, currentColor 20%, transparent); }
.tk-ring .fg { stroke: var(--pop); stroke-linecap: round; stroke-dasharray: 100.5; transition: stroke-dashoffset 1s; }
.tk-ring > span { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1; font: 800 28px var(--f-head); font-variant-numeric: tabular-nums; }
.tk-ring > span small { display: block; font: 600 10.5px var(--f-body); opacity: .72; margin-top: 3px; }
.tk-ring > span svg { width: 34px; height: 34px; transform: none; }
.ticket[data-st="ready"] { background: var(--pop); color: var(--on-pop); }
.ticket[data-st="ready"] .tk-ring .fg { stroke: currentColor; }
.tk-msg { margin: 0 0 14px; }
.tk-msg b { display: block; font: 700 19px var(--f-head); }
.tk-msg span { color: var(--muted); font-size: 13px; }
.note { display: flex; gap: 9px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--pop) 18%, transparent); font-size: 12.5px; }
.note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.tl { list-style: none; margin: 0 0 16px; padding: 0; }
.tl li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: start; position: relative; padding-bottom: 16px; color: var(--muted); font-size: 13.5px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before { content: ''; position: absolute; inset-inline-start: 10px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl li i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; background: var(--surface); position: relative; z-index: 1; }
.tl li i svg { width: 12px; height: 12px; }
.tl li.done { color: var(--ink); }
.tl li.done i { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.tl li.done::before { background: var(--brand); }
.tl li.now { color: var(--ink); font-weight: 700; }
.tl li.now i { border-color: var(--pop); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pop) 25%, transparent); }
.tl li time { font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 500; }
.o-items { margin: 0 0 14px; padding: 12px 14px; border-radius: 16px; background: var(--bg); display: grid; gap: 7px; font-size: 13px; }
.o-items div { display: flex; justify-content: space-between; gap: 10px; }
.o-items div span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.reply { margin: 0 0 14px; }
.reply > span, .buzz > span { display: block; font: 700 12.5px var(--f-body); margin-bottom: 8px; }
.reply .ok2 { display: flex; gap: 9px; align-items: center; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, #2fb36b 16%, transparent); font: 600 13px var(--f-body); }
.reply .ok2 svg { width: 17px; height: 17px; color: #1f9d5b; flex: none; }
.buzz { margin: 0 0 14px; }
.buzz small { display: block; margin-top: 7px; color: var(--muted); font-size: 11.5px; }
.chip svg { width: 14px; height: 14px; }
.acts { display: flex; gap: 8px; flex-wrap: wrap; }
.acts .chip { flex: 1 1 auto; justify-content: center; }
.mates { display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 10px 12px; border-radius: calc(var(--r) * .7); background: var(--bg); }
.mates .av { display: flex; }
.mates .av i { width: 30px; height: 30px; border-radius: 50%; margin-inline-start: -8px; border: 2px solid var(--bg); display: grid; place-items: center; font: 700 11px var(--f-body); color: #fff; font-style: normal; }
.mates .av i:first-child { margin-inline-start: 0; }
.mates .tx { flex: 1; font-size: 12px; color: var(--muted); line-height: 1.3; }
.mates .tx b { display: block; color: var(--ink); font-size: 13px; }
.mates button { border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 99px; padding: 7px 12px; font: 600 12px var(--f-body); cursor: pointer; }
.mates button.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.t-tag { display: inline-block; margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--pop) 22%, transparent); font: 700 10px var(--f-body); vertical-align: 1px; }
.totals .sv { color: #1f9d5b; }

/* ================= screen structures ================= */
.rail { display: none; }
.lay { display: block; }
/* tile cards (the visual structure) */
.app[data-card="tile"] .grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.app[data-card="tile"] .card { padding: 0; overflow: hidden; aspect-ratio: 3 / 4; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: color-mix(in srgb, var(--tint) 55%, var(--deep)); }
.app[data-card="tile"] .card:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.app[data-card="tile"] .card .art { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; background: transparent; }
.app[data-card="tile"] .card .art svg { width: 66%; height: 66%; margin-top: -16%; }
.app[data-card="tile"] .card .body { position: relative; padding: 46px 12px 12px; background: linear-gradient(transparent, rgba(0, 0, 0, .74)); }
.app[data-card="tile"] .card p, .app[data-card="tile"] .card .p-hd { display: none; }
.app[data-card="tile"] .card h3 { font-size: 16px; }
.app[data-card="tile"] .card .badge { color: #fff; background: rgba(255, 255, 255, .22); }
.app[data-card="tile"] .card .meta { margin-top: 6px; }
/* side rail */
.app[data-layout="rail"] .lay { display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: start; }
.app[data-layout="rail"] .rail { display: grid; gap: 6px; position: sticky; top: 64px; padding: 14px 8px 0; align-content: start; }
.rail button { border: 0; background: transparent; color: var(--muted); padding: 8px 2px; border-radius: calc(var(--r) * .6); font: 600 11px/1.25 var(--f-body); text-align: center; cursor: pointer; display: grid; justify-items: center; gap: 5px; }
.rail button i { width: 42px; height: 42px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.rail button i svg { width: 32px; height: 32px; }
.rail button.on { background: var(--brand); color: var(--on-brand); }
.rail button.on i { box-shadow: none; }
.app[data-layout="rail"] .sec { padding-inline: 2px 14px; }
.app[data-layout="rail"] .a-chips { display: none; }
/* one category at a time: pages and swipe */
.app[data-layout="pages"] .a-chips, .app[data-layout="swipe"] .a-chips { display: flex; }
.app[data-layout="pages"] .sec:not(.cur) { display: none; }
.app[data-layout="pages"] #secs.q .sec { display: block; }
.app[data-layout="pages"] .sec.cur { animation: pgIn .3s ease; }
.app[data-layout="pages"] #secs { touch-action: pan-y; min-height: 60vh; }
@keyframes pgIn { from { opacity: 0; transform: translateX(calc(24px * var(--dirv, 1) * -1)); } }
.app[data-layout="swipe"] #offers, .app[data-layout="swipe"] #usual { display: none; }
.app[data-layout="swipe"] .a-scroll { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 92px; }
.app[data-layout="swipe"] .lay { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.app[data-layout="swipe"] #secs { flex: 1; min-height: 0; }
.swipe { height: 100%; }
.sw-track { height: 100%; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sw-track::-webkit-scrollbar { display: none; }
.sw-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 6px 26px 0; text-align: center; }
.sw-art { width: min(64%, 250px); aspect-ratio: 1; box-shadow: 0 34px 50px -26px rgba(0, 0, 0, .5); }
.sw-info { display: grid; gap: 6px; justify-items: center; }
.sw-info h3 { margin: 0; font: 700 28px/1.1 var(--f-head); cursor: pointer; }
.sw-info p { margin: 0; max-width: 28ch; color: var(--muted); font-size: 13.5px; }
.sw-row { display: flex; gap: 10px; align-items: center; }
.sw-row .price { font-size: 22px; }
.sw-add { margin-top: 8px; border: 0; border-radius: 99px; padding: 14px 30px; background: var(--pop); color: var(--on-pop); font: 700 15px var(--f-body); display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.sw-add svg { width: 18px; height: 18px; }
.sw-n { position: absolute; top: 4px; inset-inline-end: 26px; color: var(--muted); font: 600 12px var(--f-body); font-variant-numeric: tabular-nums; }
/* the board: text first, quick to read */
.app[data-layout="board"] .o-art, .app[data-layout="board"] .hero-art { display: none; }
.app[data-layout="board"] .o-slide { min-height: 160px; }
.app[data-layout="board"] .sec h2 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.app[data-layout="board"] .sec > header { border-bottom: 2px solid var(--ink); padding-bottom: 6px; }
.app[data-layout="board"] .card { padding-block: 12px; }
/* wording editor */
.wf { display: grid; gap: 5px; }
.wf > span { font: 600 12px 'Readex Pro'; color: var(--st-mut); }
.wf em { font-style: normal; font-family: ui-monospace, monospace; background: var(--st-chip); padding: 1px 6px; border-radius: 6px; color: var(--st-ink); }
.wf textarea { width: 100%; resize: vertical; min-height: 54px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--st-line); background: var(--st-chip); color: var(--st-ink); font: 500 13px/1.45 'Readex Pro', sans-serif; }
.wf textarea:focus { outline: 0; border-color: var(--st-accent); }
.wf .ghost { justify-self: start; padding: 4px 10px; font-size: 11.5px; }
.wf .ghost[hidden] { display: none; }

/* ================= The page around the prototype's app ================= */
html, body { height: 100%; margin: 0; background: var(--page-bg, #eef3ec); }
body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
/* The app is the whole screen on a phone; on a wide screen it is one centred column. */
.app { position: fixed; inset: 0; width: 100%; max-width: 520px; margin-inline: auto; height: 100dvh; background: var(--bg) var(--bg-image, none) center / cover no-repeat; }
.a-scroll { padding-bottom: 176px; }
.app.sheet-open .a-scroll { overflow: hidden; }
@media (min-width: 640px) { .app { box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(0, 0, 0, .35); } }
button { -webkit-tap-highlight-color: transparent; }
.muted { color: var(--muted); font-size: 12.5px; margin: 6px 0; }
.center { text-align: center; }
.lnk { border: 0; background: none; color: var(--brand); font: 600 13px var(--f-body); cursor: pointer; padding: 6px 2px; display: inline-flex; gap: 6px; align-items: center; }
.lnk svg { width: 16px; height: 16px; }
.lnk.gift { margin: 4px auto 0; display: flex; }

/* top: the shop's name can be long, the branch picker sits under it */
.a-top .nm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-top .loc select { border: 0; background: none; color: var(--muted); font: 500 11.5px var(--f-body); max-width: 100%; padding: 0; outline: 0; cursor: pointer; }
.a-top .logo[data-shape="circle"] { border-radius: 50%; }
.a-top .logo[data-shape="square"] { border-radius: 4px; }
.a-top .logo[data-shape="free"] { border-radius: 0; background: transparent !important; }
.a-top .logo[data-frame="bare"] { background: transparent !important; }
.a-top .logo[data-size="small"] { width: 32px; height: 32px; }
.a-top .logo[data-size="large"] { width: 50px; height: 50px; }
.a-top .logo[data-size="xlarge"] { width: 62px; height: 62px; }
.a-top .logo-img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.note.notice { margin: 4px 16px 10px; }
.closed { display: flex; align-items: center; gap: 6px; margin: -4px 2px 8px; font-size: 12px; color: var(--muted); }
.closed svg { width: 14px; height: 14px; }
.empty { padding: 40px 16px; text-align: center; color: var(--muted); }
.card.off { opacity: .62; }

/* long names and prices never push a card wider than the screen */
.grid { grid-template-columns: minmax(0, 1fr); }
.app[data-card="tile"] .grid, .app[data-card="poster"] .grid, .app[data-photos="0"] .grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.app[data-photos="0"] .grid { grid-template-columns: minmax(0, 1fr); }
.card, .card .body { min-width: 0; }
.card h3 { overflow-wrap: anywhere; }
.card .meta { flex-wrap: wrap; }

/* the footer: hours, address, a line of text, links, the rating button */
.a-foot { margin: 26px 16px 8px; padding: 18px 16px; border-radius: calc(var(--r) + 4px); background: var(--surface); box-shadow: 0 0 0 1px var(--line); text-align: center; display: grid; gap: 8px; justify-items: center; color: var(--muted); font-size: 12.5px; }
.a-foot p { margin: 0; display: flex; gap: 6px; align-items: center; justify-content: center; }
.a-foot p svg { width: 15px; height: 15px; flex: none; color: var(--brand); }
.a-foot .ftext { color: var(--ink); }
.a-foot .socials { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.a-foot .socials a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: var(--soft); color: var(--brand); font: 600 12px var(--f-body); text-decoration: none; }
.a-foot .socials a i { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.rate-link { border: 0; border-radius: 99px; padding: 9px 16px; background: var(--brand); color: var(--on-brand); font: 700 12.5px var(--f-body); display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.rate-link svg { width: 15px; height: 15px; }

/* sheets: the page behind does not scroll; fields, notes, chips */
.sheet h4.qz-t { margin: 14px 0 10px; font: 700 15px var(--f-head); }
.sheet h4.qz-t.sub { margin-top: 18px; font-size: 13px; color: var(--muted); }
.d-art { margin-bottom: 8px; }
.d-rate { color: var(--ink); font-size: 13px; flex-wrap: wrap; }
.d-rate .price { font: 700 18px var(--f-head); }
.d-rate .price s { margin-inline-start: 6px; opacity: .5; font-weight: 500; font-size: 13px; }
.d-fields, .d-allergen { margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.d-warn { margin: 0 0 10px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, #d64545 14%, var(--surface)); color: #b3261e; font-size: 12.5px; display: flex; gap: 8px; align-items: center; }
.d-warn svg { width: 16px; height: 16px; flex: none; }
.d-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.d-tags .tg { padding: 4px 10px; border-radius: 99px; font: 600 11.5px var(--f-body); background: color-mix(in srgb, var(--tag, var(--brand)) 16%, var(--surface)); }
.opt > span small { color: var(--muted); font-weight: 500; }
.chip { transition: background .2s, color .2s, border-color .2s; }
.chip.on { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.chip.on small { color: inherit; opacity: .75; }
.chip:disabled, .chip[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.chip svg { width: 15px; height: 15px; flex: none; }
.chip em { font-style: normal; font-size: 10.5px; opacity: .7; }
.chip.stp { cursor: default; padding-inline-end: 6px; }
.chip.stp button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; display: grid; place-items: center; cursor: pointer; padding: 0; }
.chip.stp button:disabled { opacity: .35; cursor: default; }
.chip.stp button svg { width: 12px; height: 12px; }
.chip.stp output { min-width: 14px; text-align: center; font: 700 13px var(--f-body); }
.inp, .fld input, .fld textarea, .fld select { width: 100%; border: 0; border-radius: calc(var(--r) * .6); padding: 12px 14px; background: var(--bg); color: var(--ink); font: 500 14px var(--f-body); box-shadow: 0 0 0 1px var(--line); outline: 0; resize: none; }
.inp:focus { box-shadow: 0 0 0 2px var(--brand); }
.fld { display: grid; gap: 6px; margin: 0 0 10px; font: 700 12.5px var(--f-body); }
label.opt { display: block; }
.t-form { margin-top: 14px; }
.t-lbl { display: block; margin: 12px 0 8px; font: 700 12.5px var(--f-body); }
.t-note { display: flex; gap: 8px; align-items: center; margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: var(--soft); color: var(--ink); font-size: 12.5px; }
.t-note svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.t-note.warn { background: color-mix(in srgb, #d64545 14%, var(--surface)); color: #b3261e; }
.t-note.warn svg { color: inherit; }
.t-note.ok { background: color-mix(in srgb, #2fb36b 18%, var(--surface)); }
.t-goal { margin: 10px 0; padding: 12px; border-radius: 14px; background: var(--soft); font-size: 12.5px; }
.t-goal p { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.t-goal p svg { width: 16px; height: 16px; flex: none; color: var(--brand); }
.t-goal .o-bar { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.t-goal .o-bar i { background: var(--pop); }
.t-pay { margin: 4px 0 8px; }
.cliq { margin-top: 10px; padding: 12px; border-radius: 14px; background: var(--bg); font-size: 13px; }
.cliq p { margin: 0 0 6px; }
.cliq .alias b { font: 700 15px var(--f-head); }
.pair-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.pair { flex: none; display: flex; gap: 8px; align-items: center; padding: 7px 12px 7px 7px; border: 0; border-radius: 99px; background: var(--bg); color: var(--ink); cursor: pointer; text-align: start; }
.pair .art { width: 38px; height: 38px; }
.pair b { display: block; font: 600 12.5px var(--f-body); }
.pair small { color: var(--muted); font-size: 11px; }
.totals .tt { font: 700 16px var(--f-head); }
.slide { margin-top: 12px; }
.o-items .tot { border-top: 1px dashed var(--line); padding-top: 7px; color: var(--ink); font-weight: 700; }
.o-items small { color: var(--muted); }
.t-line.bl .pr { white-space: nowrap; }
.t-line .ps { display: block; margin-top: 2px; font-weight: 600; }
.t-line .ps.paid { color: #2a8f57; }
.bl-pick input { accent-color: var(--brand); width: 18px; height: 18px; margin-inline-end: 8px; vertical-align: middle; }
.share-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 10px; font: 600 12.5px var(--f-body); }
.share-row > span { display: flex; align-items: center; gap: 8px; }
.qz-card { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.qz-card .art { width: 56px; height: 56px; cursor: default; }
.qz-card b { display: block; font: 700 14px var(--f-head); }
.qz-card small { display: block; color: var(--muted); font-size: 11.5px; margin: 2px 0; }
.stars { display: flex; justify-content: center; gap: 6px; margin: 14px 0 6px; }
.stars button { border: 0; background: none; color: color-mix(in srgb, var(--muted) 45%, transparent); cursor: pointer; padding: 2px; }
.stars button svg { width: 36px; height: 36px; fill: none; }
.stars button.on { color: #f1b02b; }
.stars button.on svg { fill: currentColor; }
.gift-code { margin: 18px 0 6px; text-align: center; font: 800 28px var(--f-head); letter-spacing: .08em; }
.sheet .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fly { position: absolute; z-index: 60; pointer-events: none; border-radius: 32%; overflow: hidden; background: var(--surface); display: grid; place-items: center; box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .5); }
.fly svg, .fly img { width: 88%; height: 88%; object-fit: cover; }
.toast { position: absolute; z-index: 90; inset-inline: 16px; bottom: 112px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); padding: 11px 18px; border-radius: 99px; background: var(--deep); color: var(--on-deep); box-shadow: 0 0 0 2px var(--bg), 0 6px 18px rgba(0,0,0,.25); font: 600 13px var(--f-body); text-align: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .25s, transform .25s; }
.toast.on { opacity: 1; transform: none; }
button.live { font: inherit; text-align: start; border: 0; }
.live { cursor: pointer; }
[hidden] { display: none !important; }
.d-scrub .h { min-width: 0; }
.d-scrub .h .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.a-top .nm small .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.app.sheet-open .toast { bottom: auto; top: 16px; }

/* the assistant's chat, the passport bar */
.note.pass { margin: 0 16px 10px; flex-wrap: wrap; }
.note.pass .pass-acts { margin-inline-start: auto; display: flex; gap: 6px; align-items: center; }
.sheet.ask { display: flex; flex-direction: column; height: 90%; overflow: hidden; }
.ask-log { flex: 1; min-height: 0; overflow-y: auto; display: grid; gap: 10px; align-content: start; padding: 6px 0 10px; scrollbar-width: none; }
.ask-msg { max-width: 92%; padding: 10px 14px; border-radius: 18px; background: var(--bg); font-size: 13.5px; line-height: 1.45; }
.ask-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-msg.user { justify-self: end; background: var(--brand); color: var(--on-brand); }
.ask-msg.error { background: color-mix(in srgb, #d64545 14%, var(--surface)); color: #b3261e; }
.ask-msg .qz-card { grid-template-columns: 48px 1fr auto; padding: 10px 0 2px; border: 0; }
.ask-msg .qz-card .art { width: 48px; height: 48px; }
.ask-opts { grid-column: 1 / -1; display: grid; gap: 6px; }
.ask-group small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 11px; }
.ask-add b { margin-inline-start: 6px; }
.chat-order { margin-top: 8px; display: grid; gap: 6px; }
.chat-order ul { margin: 0; padding-inline-start: 18px; }
.typing { display: flex; gap: 4px; width: 56px; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: pulse2 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
.ask-chips { margin: 4px 0 8px; }
.ask-input { display: flex; gap: 8px; align-items: center; }
.ask-input .cta { flex: none; padding: 12px 18px; }
.chip.pk { cursor: pointer; }
.chip.pk input { display: none; }

/* the smart waiter's pieces: hints on a dish, the table's guests, the nudge from the assistant */
.w-hints { display: grid; gap: 8px; margin: 4px 0 14px; }
.w-hint { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--soft); font-size: 12.5px; }
.w-hint > svg { width: 18px; height: 18px; flex: none; color: var(--brand); }
.w-hint > span { flex: 1; min-width: 0; }
.w-hint small { display: block; color: var(--muted); font-size: 11px; }
.w-hint.soft { background: color-mix(in srgb, var(--pop) 14%, var(--surface)); }
.tbl-bar { display: grid; gap: 8px; margin: 0 16px 10px; }
.tbl-bar:empty { display: none; }
.tbl-bar .t-note { margin: 0; }
.chip.wide { justify-content: center; width: 100%; }
.guest-dots { display: inline-flex; margin-inline-end: 6px; }
.guest-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font: 700 10px var(--f-body); color: #fff; margin-inline-end: -4px; box-shadow: 0 0 0 2px var(--surface); background: #888; }
.guest-dot.me { box-shadow: 0 0 0 2px var(--pop); }
.guest-dot.g1 { background: #c2571f; } .guest-dot.g2 { background: #2f7d5b; } .guest-dot.g3 { background: #3a6ea5; } .guest-dot.g4 { background: #8a4fa0; }
.guest-dot.g5 { background: #b8892b; } .guest-dot.g6 { background: #c0405a; } .guest-dot.g7 { background: #2a8f9a; } .guest-dot.g8 { background: #6b7a2c; }
.a-top .nm .ppl { display: flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ask-nudge { position: absolute; z-index: 30; inset-inline: 16px; bottom: 110px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); border: 0; border-radius: 99px; padding: 11px 18px; background: var(--pop); color: var(--on-pop); font: 700 13px var(--f-body); box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5); cursor: pointer; animation: rise .5s both; }
.ask-mic.on { background: var(--pop); color: var(--on-pop); }
.t-goal .pair { margin-top: 8px; }

/* filters: hot/iced and tags; the last pieces */
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 0 16px 10px; align-items: center; }
.filters::-webkit-scrollbar { display: none; }
.filters .chip { flex: none; background: var(--surface); }
.filters .chip.on { background: var(--brand); }
.filters .lbl { flex: none; display: inline-flex; gap: 5px; align-items: center; font: 700 12px var(--f-body); color: var(--muted); }
.filters .lbl svg { width: 14px; height: 14px; color: var(--pop); }

/* Arabic letters join: letter-spacing would pull them apart (numbers and codes keep theirs). */
html[lang="ar"] .app *:not(.gift-code):not(.tk-n b) { letter-spacing: 0; }

/* Arabic needs room: its dots and tails sit well below and above the line, so tight lines clip (text boxes that cut after two
   lines) or touch the line under them. A roomy base, and the few places that set their own line height follow it. */
html[lang="ar"] .app { line-height: 1.65; }
html[lang="ar"] .app :is(.a-top .nm, .sum, .live .txt, .usual .tx, .d-ready .tx, .mates .tx) { line-height: 1.5; }
html[lang="ar"] .app .card p { line-height: 1.75; padding-bottom: .12em; }
html[lang="ar"] .app :is(h1, h2, h3, h4) { line-height: 1.5; }
html[lang="ar"] .app .o-slide h2 { line-height: 1.45; margin-bottom: 10px; }
html[lang="ar"] .app .o-slide p { line-height: 1.7; }
html[lang="ar"] .app .ask-msg { line-height: 1.7; }

/* Every photo fills its own frame: cropped to cover and centred, never its natural size and never stretched. The frame (a card
   picture, a round thumbnail, a slide) sets the size; the picture is laid over it, so it can never change the frame. */
.thumbs i, .rail button i { position: relative; }
.app :is(.art, .o-art, .hero-art, .fly, .thumbs i, .rail button i) > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.o-art.two > img { inset: auto; width: 104px; height: 104px; border-radius: 24%; }
.o-art.two > img:first-child { inset-inline-end: 0; top: 0; }
.o-art.two > img:last-child { inset-inline-start: 0; bottom: 0; transform: rotate(14deg); }
/* A photo in the tilted picture of a slide: a rounded, clipped frame with a soft shadow (a drop-shadow filter on a clipped photo
   can render black on some phones). */
.hero-art:has(> img), .o-art:has(> img) { overflow: hidden; border-radius: 24%; filter: none; box-shadow: 0 14px 24px -8px rgba(0, 0, 0, .45); }
article.card[data-id], article.sw-slide[data-id] { cursor: pointer; }
/* the welcome card's suggestions */
.o-slide[data-k="moment"] { --oc: var(--deep); --oi: var(--on-deep); }
.o-slide[data-mo="last"], .o-slide[data-mo="hot"], .o-slide[data-mo="morning"], .o-slide[data-mo="noon"] { --oc: var(--pop); --oi: var(--on-pop); }
.o-slide[data-mo="cold"], .o-slide[data-mo="rain"], .o-slide[data-mo="afternoon"] { --oc: var(--brand); --oi: var(--on-brand); }
.o-slide[data-k="moment"] h2, .o-slide.hero h2 { font-size: 22px; max-width: 16ch; }

/* ================= Every screen: a folded phone's cover, a phone, an open foldable, a tablet, a laptop, a big screen ================= */
/* The cover screen of a folded phone (about 280 to 340 px): tighter, and nothing wider than the screen. */
@media (max-width: 340px) {
  .a-top { padding: 12px 10px 8px; gap: 6px; }
  .ib { width: 34px; height: 34px; }
  .ib svg { width: 17px; height: 17px; }
  .a-top .nm b { font-size: 15px; }
  .sec, .a-search, .a-chips, .a-foot { padding-inline: 10px; }
  .a-foot { margin-inline: 10px; }
  .hero, .usual, .note.notice { margin-inline: 10px; }
  .o-track { padding-inline: 10px; scroll-padding-inline: 10px; }
  .o-slide { padding: 16px; min-height: 200px; }
  .o-slide h2 { font-size: 21px; }
  .hero h2 { font-size: 23px; }
  .app[data-card="overlap"] .card { padding-inline: 74px 10px; margin-inline-start: 26px; min-height: 100px; }
  .app[data-card="overlap"] .card .art { width: 96px; height: 96px; inset-inline-start: -26px; }
  .dock { inset-inline: 6px; }
  .dock-bar { padding: 7px; gap: 6px; height: 62px; }
  .d-svc, .d-tray, .d-scrub { height: 46px; }
  .d-svc { width: 46px; }
  .sheet { padding-inline: 12px; }
  .t-line { grid-template-columns: 44px 1fr auto; gap: 8px; }
  .t-line .art { width: 44px; height: 44px; }
}

/* An open foldable and a tablet held upright: the menu uses the width, two dishes side by side, two offers at a time. */
@media (min-width: 600px) {
  .app { max-width: 940px; }
  .a-top { padding-inline: 24px; }
  .a-search, .a-chips { padding-inline: 24px; }
  .sec { padding-inline: 24px; }
  .hero, .usual, .note.notice { margin-inline: 24px; }
  .a-foot { margin-inline: 24px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .app[data-card="overlap"] .grid { gap: 18px 22px; }
  .app[data-card="magazine"] .grid { gap: 26px 22px; }
  .app[data-card="leader"] .grid { column-gap: 32px; }
  .app[data-card="poster"] .grid, .app[data-card="tile"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .app[data-card="tile"] .card:first-child { grid-column: span 2; }
  .app[data-photos="0"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .o-track { padding-inline: 24px; scroll-padding-inline: 24px; }
  .o-slide { flex: 0 0 calc(50% - 6px); }
  .o-slide:only-child { flex-basis: 100%; }
  /* the tray and the sheets are one centred card, not as wide as the screen */
  .dock { inset-inline: 0; margin-inline: auto; width: min(560px, calc(100% - 24px)); }
  .sheet { inset-inline: 0; margin-inline: auto; width: min(560px, calc(100% - 24px)); bottom: 12px; max-height: calc(100% - 24px); border-radius: calc(var(--r) + 12px); transform: translateY(calc(100% + 40px)); }
  .sheet.on { transform: none; }
  .scrim { backdrop-filter: blur(2px); }
  .app[data-layout="rail"] .lay { grid-template-columns: 110px minmax(0, 1fr); }
  .app[data-layout="rail"] .sec { padding-inline: 8px 24px; }
  .sw-art { width: min(52%, 320px); }
}

/* A laptop, a tablet held sideways and a big screen: three dishes across, the rail with room for names. */
@media (min-width: 1000px) {
  .app { max-width: 1280px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app[data-card="poster"] .grid, .app[data-card="tile"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app[data-card="leader"] .grid, .app[data-card="compact"] .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app[data-photos="0"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .a-top, .a-search, .a-chips, .sec { padding-inline: 32px; }
  .hero, .usual, .note.notice, .a-foot { margin-inline: 32px; }
  .o-track { padding-inline: 32px; scroll-padding-inline: 32px; }
  .app[data-layout="rail"] .lay { grid-template-columns: 190px minmax(0, 1fr); }
  .app[data-layout="rail"] .rail { padding-inline: 14px 8px; }
  .app[data-layout="rail"] .rail button { display: flex; align-items: center; gap: 10px; text-align: start; padding: 8px 10px; font-size: 13px; }
  .app[data-layout="rail"] .sec { padding-inline: 8px 32px; }
  .a-scroll { scrollbar-width: thin; }
}
@media (min-width: 1500px) {
  .app { max-width: 1480px; }
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app[data-card="poster"] .grid, .app[data-card="tile"] .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .app[data-card="leader"] .grid, .app[data-card="compact"] .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app[data-photos="0"] .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .o-slide { flex-basis: calc(33.333% - 8px); }
}

/* A short, wide screen (a phone or a foldable on its side): less chrome, more dishes. */
@media (max-height: 520px) and (orientation: landscape) {
  .a-top { padding-block: 8px 6px; }
  .hero { min-height: 0; padding-block: 14px; }
  .o-slide { min-height: 170px; }
  .dock-bar { height: 58px; }
  .a-scroll { padding-bottom: 120px; }
  .sheet { max-height: calc(100% - 12px); bottom: 6px; }
}

/* "Send me offers on WhatsApp" at checkout */
.chk { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 12px; font-size: .92rem; color: var(--ink); }
.chk input { margin-top: 3px; }