/* Loaded ONLY on the Shopify editor page, after style.css.
   style.css assumes the editor owns the whole browser window. On a Shopify page the
   theme owns the document, so these rules hand control back: no page-level height or
   scroll locking, the editor sizes to its own wrapper, and nothing is pinned to the
   browser window. */

html, body { height: auto !important; overflow: auto !important; }
body { background: var(--page); }

/* The editor's wrapper defines the height, not the viewport. */
#greetd-app { --greetd-h: 86vh; min-height: 680px; display: flex; flex-direction: column;
  position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--white); }

#greetd-app #topbar { position: relative; z-index: 5; }
#greetd-app #app { height: var(--greetd-h); min-height: 520px; }

/* Mobile: keep the tool bar and total strip inside the editor, not stuck to the window. */
@media (max-width: 900px) {
  #greetd-app #app { height: calc(var(--greetd-h) - 56px - 44px - 60px); }
  #greetd-app #mobilebar, #greetd-app #mobilecta, #greetd-app #panel.open { position: absolute; }
  #greetd-app #mobilebar { bottom: 0; }
  #greetd-app #mobilecta { bottom: 60px; }
  #greetd-app #panel.open { bottom: 104px; }
  #greetd-app #toast { position: absolute; bottom: 120px; }
}
#greetd-app #modal { position: absolute; }

/* Order bar: let the quantity buttons wrap onto more than one row rather than
   pushing the total and Add to basket off the right-hand edge. */
#greetd-app #orderbar { flex-wrap: wrap; align-items: center; gap: 10px 22px;
  padding-top: 10px; padding-bottom: 10px; height: auto; min-height: 72px; overflow-x: visible; }
#greetd-app #orderbar .qtyrow { flex-wrap: wrap; gap: 5px; max-width: 100%; }
#greetd-app #orderbar .ob-group { flex-wrap: wrap; max-width: 100%; }
#greetd-app #orderbar .ob-total { margin-left: auto; }
@media (max-width: 1100px) {
  #greetd-app #orderbar .ob-total { margin-left: 0; width: 100%; justify-content: space-between; }
}