/* The shelf — the "All products" page (menu.php, vip.php beside it) on the
   storefront's look (SF2, 17 Oct 2026).

   Owner, 17 Oct 2026: "the 'All products' page and the item/cart sheets the
   same new look now — no jump between pages". Owner, 18 Oct 2026, of the
   same page: "only reverse the products listing grid styling".

   Linked at the END of those pages, after everything the first paint shows
   and before the scripts: the grid is drawn by shop_grid.js, which waits for
   it. What the first paint needs (the bar, the title, the search, the dock)
   is the SF2 section of storefront.css.

   The grid is shop_grid.php's (a public twin of the staff till) and keeps its
   markup, its classes and its behaviour: a tap adds a tile to the order,
   Details opens the item sheet, a product sold in forms asks "Which one?".
   Its tiles and section labels look as they did before 17 Oct: pos_grid.css
   (the till's) and shop_grid.css (the shop's own) draw them, both linked,
   both untouched, and no rule here names a tile (tests/shelf_look_test.php).
   What this sheet gives the grid: the storefront's tokens under the till's
   names (a tile takes the page's colours, light and dark, and the business's
   own), the chips as pills standing under the bar, the empty and one-service
   lines.

   Every rule begins html[data-sf]: it outweighs the two sheets under it
   whatever their order, and touches no page that has not asked for this look.
   Sections: 1 the page, 2 the chips and the groups, 3 no photograph (the
   sheets' mark), 4 "Which one?", 5 the order (the bar and the sheet), 6 the
   dock, 7 odds and ends. */

/* == 1 · the page ==== */
html[data-sf] #search-input::-webkit-search-cancel-button,
html[data-sf] #search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
html[data-sf] .ds-clear:hover { background: var(--surface-2); color: var(--ink); }
/* the deep search's answers, over the chips (950) and under the bar (1000) */
html[data-sf] .ds-results { position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 980; max-height: 60vh; overflow: auto;
  padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--lift-2); text-align: left; }
html[data-sf] .ds-group { padding: 10px 10px 6px; font-size: 12px; font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--mute); }
html[data-sf] .ds-empty, html[data-sf] .ds-busy { padding: 20px 12px; text-align: center; font-size: 14px; color: var(--mute); }
html[data-sf] .ds-near { margin: 2px 2px 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: 13px; line-height: 1.4; color: var(--mute); }
/* Scan, beside the search (shop_scan.js adds it and its own small sheet) */
html[data-sf] .search-container.has-scan { display: flex; align-items: stretch; gap: 8px; }
html[data-sf] .search-container > .scanbtn.shopscan { flex: none; height: 48px; min-width: 48px; padding: 0 16px; gap: 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: none; font-size: 14px; font-weight: 600; }
html[data-sf] .search-container > .scanbtn.shopscan:hover { border-color: var(--faint); color: var(--ink); }
html[data-sf] .search-container > .scanbtn.shopscan svg { width: 20px; height: 20px; flex: 0 0 20px; }
@media (max-width: 620px) { html[data-sf] .search-container > .scanbtn.shopscan { width: 48px; padding: 0; } }

/* == 2 · the chips and the groups ====
   The chips stand under the bar while the tiles pass beneath them — the bar's
   height, the safe area, and whatever shop_grid.js measured above them
   (--shop-stick: nothing now, the search is not pinned). */
html[data-sf] .pos--shop {
  --pos-line: var(--line); --pos-ink: var(--ink); --pos-mute: var(--mute); --pos-brand: var(--brand-fill);
  --pos-bg: var(--surface); --pos-soft: var(--surface-2); --pos-good: var(--good);
  --brand-soft: var(--brand-wash);   /* shop_grid.css: Details' hover tint, in the business's colour */
  color: var(--ink);
}
html[data-sf] .pos--shop .pos__bar { position: sticky; top: calc(var(--sf-bar) + env(safe-area-inset-top, 0px) + var(--shop-stick, 0px)); z-index: 950;
  margin: 16px calc(-1 * var(--sf-g)) 0; padding: 8px var(--sf-g); border: 0; background: var(--bg); box-shadow: 0 1px 0 var(--line); }
html[data-sf] .pos--shop .pos__cats { display: flex; gap: 8px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
html[data-sf] .pos--shop .pos__cat { flex: none; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap;
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
html[data-sf] .pos--shop .pos__cat:hover { border-color: var(--faint); color: var(--ink); }
html[data-sf] .pos--shop .pos__cat.is-on { background: var(--brand-fill); border-color: var(--brand-fill); color: #fff; }
@media (hover: hover) { html[data-sf] .pos--shop .pos__cats { scrollbar-width: thin; padding-bottom: 4px; } }
html[data-sf] .pos--shop .pos__none { padding: 32px 0; text-align: center; font-size: 14px; color: var(--mute); }
html[data-sf] .sg__retry { min-height: 40px; margin-left: 8px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-weight: 600; }
/* opened on one service: "Showing Drinks only" and the way back to everything */
html[data-sf] .sg__dept { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin: 16px 0 0;
  padding: 8px 8px 8px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink-2); font-size: 14px; }
html[data-sf] .sg__dept-l b { font-weight: 700; color: var(--ink); }
html[data-sf] .sg__dept-x { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-pill);
  background: var(--brand-wash); color: var(--brand-ink); font: inherit; font-size: 14px; font-weight: 600; }
html[data-sf] .sg__dept-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; box-shadow: none; }

/* == 3 · no photograph: the sheets' mark ====
   A tile keeps its placeholder picture, as it always did (shop_grid.css).
   The order's lines and "Which one?" draw the quiet picture mark instead:
   the placeholder file (/pp.png, a green plus) and a picture that failed
   (shelfPhotoGuard() makes it a data: address) are hidden there. */
html[data-sf] .sg__sheet, html[data-sf] #sgAsk {
  --sf-photo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M20.5 15.5l-4.6-4.6a1.2 1.2 0 0 0-1.7 0L6.5 18.5'/%3E%3C/svg%3E"); }
html[data-sf] .sg__sheet .pos__lthumb[src$="/pp.png"], html[data-sf] #sgAsk .pos__fimg[src$="/pp.png"],
html[data-sf] .sg__sheet .pos__lthumb[src^="data:"], html[data-sf] #sgAsk .pos__fimg[src^="data:"] { display: none; }

/* == 4 · "Which one?" — a product sold in forms ====
   Centred on a phone too, never at its foot (owner, 2026-09-22: nothing that
   floats may ever cover an option). The same box, words and tokens as the
   item sheet. */
html[data-sf] #sgAsk { position: fixed; inset: 0; z-index: 2400; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--sf-veil); }
html[data-sf] #sgAsk[hidden] { display: none; }
html[data-sf] #sgAsk .pos__askbox { width: min(460px, 100%); max-height: min(84dvh, 680px); border-radius: var(--r-xl); background: var(--surface); color: var(--ink);
  box-shadow: var(--lift-2); animation: none; }
html[data-sf] #sgAsk .pos__askh { min-height: 64px; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 18px; line-height: 24px; font-weight: 700; }
html[data-sf] #sgAsk .pos__askx, html[data-sf] .sg__sheet .pos__askx { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r); background: var(--surface-2); color: var(--ink); font-size: 22px; line-height: 1; }
html[data-sf] #sgAsk .pos__askx:hover, html[data-sf] .sg__sheet .pos__askx:hover { background: var(--line); color: var(--ink); }
html[data-sf] #sgAsk .pos__askl { gap: 8px; padding: 12px; }
html[data-sf] #sgAsk .pos__form { min-height: 64px; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); box-shadow: none; }
html[data-sf] #sgAsk .pos__form:hover { border-color: var(--faint); }
html[data-sf] #sgAsk .pos__form:active { transform: none; }
html[data-sf] #sgAsk .pos__form.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--surface); }
html[data-sf] #sgAsk .pos__form.is-out { opacity: .55; background: var(--surface); }
html[data-sf] #sgAsk .pos__fimg { flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--surface-2); object-fit: cover; }
html[data-sf] #sgAsk .pos__fname { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
html[data-sf] #sgAsk .pos__fon { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--brand-ink); }
html[data-sf] #sgAsk .pos__fprice { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-sf] #sgAsk .pos__fq { width: auto; height: auto; padding: 0; background: transparent; color: var(--mute); font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
html[data-sf] #sgAsk .pos__form.is-out .pos__fq { color: var(--bad); }
html[data-sf] #sgAsk .pos__fqty { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
html[data-sf] #sgAsk .pos__fqbtn { width: 40px; min-height: 40px; background: var(--surface-2); color: var(--ink); font-size: 18px; }
html[data-sf] #sgAsk .pos__fqbtn:hover { background: var(--line); }
html[data-sf] #sgAsk .pos__fqin { width: 44px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 16px; }
html[data-sf] #sgAsk .pos__askdone { min-height: 52px; height: auto; margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; }
html[data-sf] #sgAsk .pos__askdone:hover { background: var(--surface-2); }
html[data-sf] #sgAsk .pos__empty { color: var(--mute); font-size: 14px; }

/* == 5 · the order: the bar at the foot, and its sheet ====
   Flat in the business's colour (it was a gradient). After a send it is a
   quiet card that points at the cart. */
html[data-sf] .sg__peek { left: 12px; right: 12px; max-width: 560px; margin: 0 auto; min-height: 56px; gap: 12px; padding: 8px 8px 8px 12px;
  border: 0; border-radius: var(--r-lg); background: var(--brand-fill); color: #fff; box-shadow: var(--lift-2); animation: none; }
html[data-sf] .sg__peek-n { min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--r-pill); background: #fff; color: var(--brand-fill); font-size: 14px; font-weight: 700; }
html[data-sf] .sg__peek-l { font-size: 14px; font-weight: 600; opacity: 1; }
html[data-sf] .sg__peek-t { font-size: 15px; font-weight: 700; }
html[data-sf] .sg__peek-go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); background: #fff; color: var(--brand-fill);
  font-size: 14px; font-weight: 700; letter-spacing: 0; }
html[data-sf] .sg__peek.is-sent { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--lift-2); }
html[data-sf] .sg__peek.is-sent .sg__peek-n { background: var(--good-wash); color: var(--good); }
html[data-sf] .sg__peek.is-sent .sg__peek-go { background: var(--brand-fill); color: #fff; }
html[data-sf] .sg__sheet { z-index: 12000; background: transparent; transition: background-color .2s var(--ease); }
html[data-sf] .sg__sheet.is-in { background: var(--sf-veil); }
html[data-sf] .sg__sheetbox { max-width: 560px; max-height: 88dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--lift-2); }
html[data-sf] .sg__sheetbox::before { content: ""; display: block; flex: none; width: 36px; height: 4px; margin: 8px auto 0; border-radius: var(--r-pill); background: var(--line); }
@media (min-width: 600px) {
  html[data-sf] .sg__sheet { align-items: center; padding: 24px; }
  html[data-sf] .sg__sheetbox { border-radius: var(--r-xl); max-height: 80vh; }
  html[data-sf] .sg__sheetbox::before { display: none; }
}
html[data-sf] .sg__sheeth { min-height: 56px; gap: 8px; padding: 4px 12px 8px 20px; border-bottom: 1px solid var(--line); }
html[data-sf] .sg__sheett { font-size: 18px; line-height: 24px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
html[data-sf] .sg__clear { min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--bad); font: inherit; font-size: 14px; font-weight: 600; }
html[data-sf] .sg__clear:hover { background: var(--bad-wash); color: var(--bad); border-color: transparent; }
html[data-sf] .sg__sheet .pos__lines { padding: 4px 20px; }
html[data-sf] .sg__sheet .pos__line { gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-2); }
html[data-sf] .sg__sheet .pos__lthumb { flex: none; width: 48px; height: 48px; max-height: 48px; margin: 0; border-radius: var(--r-sm); background: var(--surface-2); object-fit: cover; }
/* a line whose product has no photograph: the same quiet mark in a square, the placeholder file hidden and never asked for */
html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src$="/pp.png"]), html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src^="data:"]) { position: relative; padding-left: 60px; }
html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src$="/pp.png"])::before, html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src^="data:"])::before { content: ""; position: absolute; left: 0; top: 12px; width: 48px; height: 48px;
  border-radius: var(--r-sm); background: var(--surface-2); }
html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src$="/pp.png"])::after, html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src^="data:"])::after, html[data-sf] #sgAsk .pos__fimg--none::before { content: ""; position: absolute; width: 24px; height: 24px;
  background: var(--faint); -webkit-mask: var(--sf-photo) center / contain no-repeat; mask: var(--sf-photo) center / contain no-repeat; }
html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src$="/pp.png"])::after, html[data-sf] .sg__sheet .pos__line:has(> .pos__lthumb[src^="data:"])::after { left: 12px; top: 24px; }
html[data-sf] #sgAsk .pos__fimg--none { position: relative; }
html[data-sf] #sgAsk .pos__fimg--none::before { left: 12px; top: 12px; }
html[data-sf] .sg__sheet .pos__lname { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
html[data-sf] .sg__sheet .pos__lsum { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
html[data-sf] .sg__sheet .pos__lunit { font-size: 13px; color: var(--mute); }
html[data-sf] .sg__sheet .pos__lbot { margin-top: 8px; }
html[data-sf] .sg__sheet .pos__step { gap: 4px; }
html[data-sf] .sg__sheet .pos__step button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 18px; }
html[data-sf] .sg__sheet .pos__step button:hover { background: var(--surface-2); }
html[data-sf] .sg__sheet .pos__qin { width: 48px; height: 40px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 16px; text-align: center; }
html[data-sf] .sg__sheet .pos__lines .pos__step .pos__drop { margin-left: 4px; border-color: transparent; background: var(--bad-wash); color: var(--bad); }
html[data-sf] .sg__sheet .pos__foot { padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--surface); }
html[data-sf] .sg__sheet .pos__total > span { font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
html[data-sf] .sg__sheet .pos__total > b { font-size: 20px; font-weight: 700; color: var(--ink); }
html[data-sf] .sg__sheet .pos__count { font-size: 13px; color: var(--mute); }
html[data-sf] .sg__sheet .pos__send { height: 48px; margin-top: 12px; border-radius: var(--r-pill); background: var(--brand-fill); color: #fff; font-size: 15px; font-weight: 650; }
html[data-sf] .sg__sheet .pos__send:hover:not(:disabled) { background: var(--brand-fill-hover); filter: none; }
html[data-sf] .sg__sheet .pos__send:disabled { background: var(--surface-2); color: var(--mute); }
html[data-sf] .sg__keep { min-height: 48px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; }
html[data-sf] .sg__keep:hover { background: var(--surface-2); }
html[data-sf] .sg__sheet .pos__empty { color: var(--mute); font-size: 14px; }

/* == 6 · the dock ====
   Its place and its buttons are in storefront.css (the first paint); here,
   the cashback chip in it (flat, its card opening upward) and the rest. */
html[data-sf] .shop-dock__wa:hover { background: var(--line); }
html[data-sf] .shop-dock__call.is-sent { opacity: .5; cursor: default; transform: none; }
/* the Attendant (call_attendant.php): a dot while a call is going — amber sent, green coming — and its sheet */
html[data-sf] .shop-dock__call.is-open::after, html[data-sf] .shop-dock__call.is-coming::after { content: ""; position: absolute; top: 3px; right: 3px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--surface); }
html[data-sf] .shop-dock__call.is-coming::after { background: var(--good); }
html[data-sf] #callModal [hidden] { display: none !important; }
html[data-sf] .call-now__state { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; font-size: 20px; font-weight: 700; color: var(--ink); }
html[data-sf] .call-now__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); }
html[data-sf] .call-now.is-coming .call-now__dot { background: var(--good); }
html[data-sf] .call-now__where { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: var(--mute); overflow-wrap: anywhere; }
html[data-sf] .shop-dock > .cart-fab { transform: none; }
html[data-sf] .shop-dock > .cart-fab:hover { background: var(--brand-fill-hover); }
html[data-sf] .shop-dock > .cart-fab svg { width: 24px; height: 24px; }
html[data-sf] .shop-dock > .cart-fab .cart-fab-count { top: -4px; right: -4px; }
html[data-sf] .shop-dock .cbk { flex: none; }
html[data-sf] .shop-dock .cbk__btn { min-height: 44px; height: 44px; padding: 0 14px 0 12px; gap: 8px; border-radius: var(--r-pill); background: var(--good-wash); color: var(--good);
  box-shadow: none; transform: none; }
html[data-sf] .shop-dock .cbk__spark { display: none; }
html[data-sf] .shop-dock .cbk__label { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; opacity: 1; }
html[data-sf] .shop-dock .cbk__value { font-size: 14px; font-weight: 700; }
html[data-sf] .shop-dock .cbk__pop { top: auto; bottom: calc(100% + 14px); left: 0; right: auto; min-width: 232px; max-width: calc(100vw - 24px);
  padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--lift-2); animation: none; }
html[data-sf] .shop-dock .cbk__poprow { font-size: 13px; color: var(--ink-2); }
html[data-sf] .shop-dock .cbk__poprow b { color: var(--ink); }
html[data-sf] .shop-dock .cbk__poprow--held b { color: var(--warn); }
html[data-sf] .shop-dock .cbk__note { font-size: 12px; color: var(--mute); border-top-color: var(--line-2); }
@media (max-width: 359px) {
  html[data-sf] .shop-dock { gap: 4px; padding: 4px; }
  html[data-sf] .shop-dock__wa, html[data-sf] .shop-dock__call, html[data-sf] .shop-dock > .cart-fab, html[data-sf] .shop-dock__slot { width: 40px; height: 40px; }
}

/* == 7 · odds and ends ==== */
/* the page's own toast: only where the one message card (msg_card.js) is missing */
html[data-sf] #toast.sf-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10000;
  max-width: min(92vw, 420px); padding: 12px 16px; border-radius: var(--r); background: var(--ink); color: var(--surface); box-shadow: var(--lift-2);
  font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; cursor: pointer; }
html[data-sf] #toast .toast-close { margin-left: 8px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; }
/* the gateway's own page, in a frame, where the launcher is missing */
html[data-sf] .sf-gw { position: fixed; inset: 0; z-index: 999999; padding: 40px 0 0; background: var(--sf-veil); }
html[data-sf] .sf-gw__box { position: relative; width: 100%; max-width: 450px; height: 100%; margin: 0 auto; overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: #fff; }
html[data-sf] .sf-gw__box iframe { display: block; width: 100%; height: 100%; border: 0; }
html[data-sf] .sf-gw__x { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r); background: var(--surface-2); color: var(--ink); }
/* a hotel's rooms, the grid's last group (rooms_list_render.php): the grid's
   gutter, not the landing band's padding (storefront.css 13, #rooms) */
html[data-sf] .pos--shop #rooms { max-width: none; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) {
  html[data-sf] .pos__form.is-hit { animation: none; }
}