/* Large screens (owner approved 2026-09-19 · mockups screens/home-wide.html + large.html).
   Linked from index.html with media="(min-width: 600px)": phones never apply it (and it stays out of the phone
   startup budget); unfolding a phone or rotating a tablet applies it at once. Rules for phones (narrow covers,
   short screens, the website app banner) stay in glass.css / home.css.
   Selectors are one step more specific than what they override (`html …`, `.hm.home …`): this file can load
   before or after the others, and Tailwind hoists glass.css's @layer components rules late. */
/* ══════════ Large screens (owner approved 2026-09-19 · mockup screens/home-wide.html + large.html) ══════════
   Tiers by the space the app gets, never by device name — the same foldable reports different sizes with the
   owner's display-size setting: phone < 600 · medium 600–1099 (iPhone Duo open 951×669, Fold/Pixel Fold inner,
   iPad portrait) · wide ≥ 1100 (iPad landscape, laptop). Home uses the whole screen; every other page keeps the
   phone column until its own large-screen design is approved. */
@media (min-width: 600px) {
  html:has(.hm.home) #root { max-width: none; }
  /* a bottom sheet stretched across a wide screen looks lost: it becomes a centred card.
     `html` prefix: Tailwind hoists the @layer components block above (with .sheet) after these unlayered rules. */
  html .sheet { top: 50%; bottom: auto; width: min(480px, calc(100vw - 40px)); max-height: 86dvh; border-radius: calc(var(--r-card) + 4px); border: 1px solid var(--g-stroke); transform: translateY(-50%); padding-bottom: 0; animation: g-pop .35s var(--spring); }
  html .sheet .grab { display: none; }
  /* home: the nav and the cart bar share one row instead of stacking over a third of a short, wide screen */
  html:not([data-nav="bar"]):has(.hm.home) nav.nav { left: auto; right: auto; inset-inline-start: 28px; transform: none; }
  html:not([data-nav="bar"]):has(.hm.home) .cartbar:not(.nonav) { margin: 0; left: auto; right: auto; inset-inline-end: 28px; width: min(420px, calc(100vw - 340px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  html[data-nav="bar"]:has(.hm.home) .cartbar { width: min(440px, calc(100vw - 56px)); }
}
/* wide: the header carries the tabs and the cart stays open beside the menu */
@media (min-width: 1100px) {
  html:has(.hm.home) :is(nav.nav, .cartbar) { display: none; }
}

/* ══════════ Large screens (owner approved 2026-09-19 · mockup screens/home-wide.html) ══════════
   Home only (.hm.home); Menu and every other page keep the phone column for now. Studio block order, visibility
   and every data-* option keep working: the rules below only place the blocks. */
/* cart panel (wide only, CartPanel.jsx) */
.hm .cpanel { border-radius: var(--r-card); padding: 20px 18px 18px; background: var(--g-fill-strong); border: 1px solid var(--g-stroke); box-shadow: var(--g-shadow), var(--g-spec); color: var(--ink); }
.hm .cpanel h3 { font-size: 18px; font-weight: var(--w4); padding: 0 4px; margin: 0; } .hm .cpanel h3 .mute { font-size: 15px; }
.hm .cpanel .where { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--mute); padding: 4px 4px 12px; margin: 0; white-space: nowrap; } .hm .cpanel .where span { overflow: hidden; text-overflow: ellipsis; }
.hm .cpanel ul { list-style: none; margin: 0; padding: 0; max-height: 46dvh; overflow-y: auto; scrollbar-width: thin; }
.hm .cpanel .cl { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--hair); font-size: 14px; }
.hm .cpanel .cl .n { flex: 1; min-width: 0; } .hm .cpanel .cl .n small { display: block; font-size: 12px; color: var(--mute); } .hm .cpanel .cl .price { font-size: 16px; }
.hm .cpanel .tot { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 4px; font-size: 14.5px; font-weight: var(--w4); } .hm .cpanel .tot .price { font-size: 21px; }
.hm .cpanel .earn { font-size: 12px; color: var(--mute); padding: 0 4px; margin: 0; } .hm .cpanel .earn b { font-weight: 600; color: color-mix(in srgb, var(--tier, var(--accent)) 75%, var(--ink)); }
.hm .cpanel .cta { margin-top: 14px; height: 54px; }
.hm .cpanel .empty { text-align: center; padding: 18px 10px 10px; color: var(--mute); font-size: 13px; line-height: 1.8; margin: 0; }
.hm .cpanel .empty span { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 10px; display: grid; place-items: center; background: var(--lens); border: 1px solid var(--lens-stroke); color: var(--soft); }
.hm .cpanel .empty b { display: block; font-size: 14.5px; font-weight: var(--w4); color: var(--ink); }
.hm .top .tabs { display: flex; gap: 4px; margin-inline: auto; padding: 4px; border-radius: var(--r-ctl); background: var(--hair); }
.hm .top .tabs button { height: 46px; padding: 0 20px; border-radius: calc(var(--r-ctl) - 3px); display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--w3); color: color-mix(in srgb, var(--ink) 55%, transparent); white-space: nowrap; transition: background-color .3s, color .3s; }
.hm .top .tabs button:hover { color: var(--ink); }
.hm .top .tabs button.on { background: var(--lens); color: var(--ink); font-weight: var(--w4); box-shadow: var(--lens-shadow); }

/* ── medium: 600–1099 ── */
@media (min-width: 600px) {
  .hm.home.has-cart { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
  .hm.home .getapp { width: min(560px, calc(100% - 40px)); margin-inline: auto; }
  .hm.home .flow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 0; padding-inline: 8px; }
  .hm.home .flow > * { grid-column: 1 / -1; }
  /* order type and search share a row (whatever sits between them in the studio order moves below) */
  .hm.home .flow:has(> [data-block="orderType"]):has(> [data-block="search"]) > [data-block="orderType"] { grid-column: 1; }
  .hm.home .flow:has(> [data-block="orderType"]):has(> [data-block="search"]) > [data-block="search"] { grid-column: 2; }
  .hm.home .flow:has(> [data-block="search"]) > [data-block="orderType"] :is(.otype, .locked) { margin-inline: 20px 6px; width: auto; }
  .hm.home .flow:has(> [data-block="orderType"]) > [data-block="search"] .search { margin-inline: 6px 20px; height: 52px; }
  .hm.home .ban .s { aspect-ratio: 2.9 / 1; }
  /* the wheel keeps its phone size, centred: wider, its outer items slide far down the dome into the cards */
  .hm.home .arcw { width: min(100%, 600px); margin-inline: auto; }
  .hm.home .arcw:not(.stuck) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  .hm.home .pgrid:is([data-layout="grid2"], [data-layout="magazine"], :not([data-layout])) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .hm.home .pgrid:is([data-layout="list"], [data-layout="big"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm.home .pgrid[data-layout="compact3"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hm.home .icog { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}
/* two offers side by side only when each keeps room for its text */
@media (min-width: 760px) { .hm.home .ban .s { flex-basis: calc(50% - 6px); } }
@media (min-width: 860px) {
  .hm.home .pgrid:is([data-layout="grid2"], [data-layout="magazine"], :not([data-layout])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm.home .pgrid[data-layout="compact3"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ── wide: ≥ 1100 — categories down one side, the cart open on the other, tabs in the header ── */
@media (min-width: 1100px) {
  .hm.home, .hm.home.has-cart { padding-top: 0; padding-bottom: 48px; }
  .hm.home .getapp { display: none; }
  .hm.home .flow { grid-template-columns: 204px minmax(0, 1.2fr) minmax(0, 1fr) 300px; grid-auto-rows: max-content; padding-inline: max(28px, calc((100% - 1360px) / 2)); }
  /* main blocks: pull their own 20px phone gutters out to the column edges */
  .hm.home .flow > .blk { grid-column: 2 / 4; margin-inline: -20px; width: auto; }  /* width:auto — a 100% block would overflow its column by its margins */
  .hm.home .flow > [data-block="header"] { grid-column: 1 / -1; grid-row: 1; margin: 14px 0 6px; position: sticky; top: calc(14px + env(safe-area-inset-top, 0px)); z-index: 30; }
  .hm.home .flow > [data-block="header"] .top { height: 70px; padding: 0 16px; border-radius: var(--r-ctl); background: var(--chrome-fill); -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur); border: 1px solid var(--g-stroke); box-shadow: var(--g-shadow), var(--g-spec); }
  .hm.home .flow > [data-block="header"] .who { flex: 0 1 auto; min-width: 190px; }
  .hm.home .flow > [data-block="header"] .pnudge { margin-top: 10px; }
  .hm.home .flow:has(> [data-block="orderType"]):has(> [data-block="search"]) > [data-block="orderType"] { grid-column: 2; margin-inline: -20px 0; }
  .hm.home .flow:has(> [data-block="orderType"]):has(> [data-block="search"]) > [data-block="search"] { grid-column: 3; margin-inline: 0 -20px; }
  .hm.home .flow > [data-block="categories"], .hm.home .flow > [data-block="cartpanel"] { grid-row: 2 / span var(--rows, 12); align-self: start; position: sticky; top: calc(100px + env(safe-area-inset-top, 0px)); z-index: 5; margin: 0; }
  .hm.home .flow > [data-block="categories"] { grid-column: 1; margin-inline-end: 24px; }
  .hm.home .flow > [data-block="cartpanel"] { grid-column: 4; margin-inline-start: 24px; }
  .hm.home .flow > [data-block="announcement"].pin { position: relative; top: 0; }
  /* the wheel stands up as a sticky side menu (it is made for a thumb, not a mouse) */
  .hm.home [data-block="categories"] .arcw, .hm.home [data-block="categories"] .arcw.stuck { width: auto; height: auto; margin: 0; overflow: visible; pointer-events: auto; -webkit-mask-image: none; mask-image: none; }
  .hm.home [data-block="categories"] .arcw::before, .hm.home [data-block="categories"] .pinbg { display: none; }
  .hm.home [data-block="categories"] :is(.arc, .arc.few), .hm.home [data-block="categories"] .catbar .rail { position: static; flex-direction: column; justify-content: flex-start; height: auto; padding: 8px; gap: 2px; overflow: visible; scroll-snap-type: none; border-radius: var(--r-card); background: var(--g-fill-strong); border: 1px solid var(--g-stroke); box-shadow: var(--g-shadow), var(--g-spec); -webkit-mask-image: none; mask-image: none; }
  .hm.home [data-block="categories"] .cat[aria-hidden="true"] { display: none; }
  .hm.home [data-block="categories"] .cat, .hm.home [data-block="categories"] .arcw.stuck .cat { flex: 0 0 auto; width: 100%; flex-direction: row; justify-content: flex-start; gap: 12px; height: 54px; min-height: 54px; padding: 0 8px; border-radius: calc(var(--r-ctl) - 3px); font-size: 14px; transform: none !important; opacity: 1 !important; transition: background-color .25s; }
  .hm.home [data-block="categories"] .cat > span:not(.ico) { max-width: none; }
  .hm.home [data-block="categories"] .cat .ico { width: 40px; height: 40px; font-size: 20px; transform: none !important; } .hm.home [data-block="categories"] .cat .ico img { width: 26px; height: 26px; }
  .hm.home [data-block="categories"] .cat .ico.photo img { width: 100%; height: 100%; }
  .hm.home [data-block="categories"] .cat u { display: none; }
  .hm.home [data-block="categories"] :is(.cat, .chipc, .tabc):hover { background: color-mix(in srgb, var(--lens) 60%, transparent); }
  .hm.home [data-block="categories"] .cat[aria-pressed="true"] { background: var(--lens); box-shadow: var(--lens-shadow); font-weight: var(--w4); }
  .hm.home [data-block="categories"] .chipc { width: 100%; justify-content: flex-start; box-shadow: none; }
  .hm.home [data-block="categories"] .tabc { width: 100%; text-align: start; height: 46px; border-radius: calc(var(--r-ctl) - 3px); } .hm.home [data-block="categories"] .tabc::after { display: none; }
  .hm.home [data-block="categories"] .tabc[aria-pressed="true"] { background: var(--lens); box-shadow: var(--lens-shadow); color: var(--ink); }
  .hm.home [data-block="categories"] .icog { margin: 0; grid-template-columns: 1fr 1fr; }
  .hm.home .ban .s { aspect-ratio: auto; height: 180px; } /* a grid track cannot resolve aspect-ratio from a % width */
  html[data-banner-h="S"] .hm.home .ban .s { height: 150px; } html[data-banner-h="L"] .hm.home .ban .s { height: 220px; }
  .hm.home .nudge { top: 84px; }
}
@media (min-width: 1280px) {
  .hm.home .flow { grid-template-columns: 236px minmax(0, 1.2fr) minmax(0, 1fr) 344px; }
}

/* ══════════ Other pages · batch 1 — approved 2026-09-19 (cart, product, orders, order, account) ══════════
   Built on the real pages, CSS only: the phone column simply gets wider on medium screens (--app-w drives the page,
   its docks and bars), and wide screens split the busy pages in two. */
@media (min-width: 600px) {
  html:has(:is(.cartpg, .pd-page, .o-page, .acc)) { --app-w: 640px; }
}
@media (min-width: 1100px) {
  /* orders + account are tab roots: their tabs sit at the top centre, where the home header keeps them */
  html:has(:is(.o-list, .acc:not(.sub))) nav.nav { top: calc(14px + env(safe-area-inset-top, 0px)); bottom: auto; }
  html .o-page.o-list, html .acc:not(.sub) { padding-top: calc(92px + env(safe-area-inset-top, 0px)); padding-bottom: 48px; }

  /* orders: the cards in three columns */
  html:has(.o-list) { --app-w: 1120px; }
  html .o-page.o-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: max-content; align-content: start; column-gap: 16px; padding-inline: 20px; }
  html .o-page.o-list > * { grid-column: 1 / -1; }
  html .o-page.o-list > .ord { grid-column: auto; margin: 16px 0 0; }
  html .o-page.o-list .o-title { padding-inline: 4px; } html .o-page.o-list .o-tabs { margin-inline: 0; width: 440px; }

  /* account: profile on top, the two menus side by side */
  html:has(.acc:not(.sub)) { --app-w: 920px; }
  html .acc:not(.sub) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; }
  html .acc:not(.sub) > * { grid-column: 1 / -1; }
  html .acc:not(.sub) > .menu { grid-column: auto; align-self: start; margin-inline: 20px 8px; }
  html .acc:not(.sub) > .menu + .menu { margin-inline: 8px 20px; }
  html .acc:not(.sub) > .menu:has(.out) { grid-column: 1 / -1; margin-inline: 20px; }

  /* one order: status and tracking on one side, items and bill on the other */
  html:has(.o-detail) { --app-w: 1120px; }
  html .o-page.o-detail { column-count: 2; column-gap: 12px; column-fill: balance; }
  html .o-page.o-detail > * { break-inside: avoid; }
  html .o-page.o-detail > :is(.appbar, header, :first-child) { column-span: all; }
  html .o-page.o-detail > h3.h:has(+ .items) { break-before: column; }

  /* cart: the bill and the pay button stay in a column beside the order */
  html:has(.cartpg) { --app-w: 1120px; }
  html .cartpg { padding-inline-end: 400px; }
  html .cartpg > .cside { position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); width: 390px; inset-inline-end: max(20px, calc((100vw - 1120px) / 2 + 12px)); max-height: calc(100dvh - 96px); overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
  html .cartpg > .cside > section > * { margin-inline: 0; }
  html .cartpg > .cside > .dock.co { position: static; width: auto; margin: 0; }
  html .cartpg > .cside > .dock-pad { display: none; }

  /* product: the food stands still on one side while the options scroll on the other */
  html:has(.pd-page) { --app-w: 1120px; }
  html .pd-page { padding-inline-start: 520px; padding-bottom: 130px; }
  html .pd-page > .hero { position: fixed; top: 120px; width: 480px; height: 420px; inset-inline-start: max(20px, calc((100vw - 1120px) / 2 + 20px)); }
  html .pd-page > .hero img { max-height: 330px; max-width: 86%; }
  html .pd-page > .hero::before { top: 90px; }
  html .pd-page .dock { left: auto; right: auto; margin: 0; width: 560px; inset-inline-end: max(20px, calc((100vw - 1120px) / 2 + 20px)); }
}

/* ══════════ Other pages · batch 2 — approved 2026-09-19 (menu, account sub-pages, table) ══════════ */
@media (min-width: 600px) {
  html:has(:is(.acc.sub, .acc.docked, .tb, .hm.menu)) { --app-w: 640px; }
}
@media (min-width: 1100px) {
  /* account sub-pages, table bill: a comfortable reading column (settings pages on the web look like this) */
  html:has(:is(.acc.sub, .acc.docked, .tb)) { --app-w: 720px; }
}
/* menu page: the home product grid (search, filters and the wheel keep their phone look, centred) */
@media (min-width: 600px) {
  html .hm.menu .flow { padding-inline: 8px; }
  html .hm.menu .arcw { width: min(100%, 600px); margin-inline: auto; }
  html .hm.menu .arcw:not(.stuck) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
  html .hm.menu .pgrid:is([data-layout="grid2"], [data-layout="magazine"], :not([data-layout])) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  html .hm.menu .pgrid:is([data-layout="list"], [data-layout="big"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html .hm.menu .pgrid[data-layout="compact3"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  html:has(.hm.menu) .cartbar { width: min(440px, calc(100vw - 56px)); }
}
@media (min-width: 860px) {
  html:has(.hm.menu) { --app-w: 1120px; }
  html .hm.menu .pgrid:is([data-layout="grid2"], [data-layout="magazine"], :not([data-layout])) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html .hm.menu .search { max-width: 640px; margin-inline: auto; }
}
/* empty / choose-a-branch card (EmptyState is max-w-md): centred instead of hugging one side */
@media (min-width: 600px) { html .hm .empty { margin-inline: auto; } }