/*
 * The shop's sheets: the item card, the cart and its checkout, past purchases,
 * the customer sign-in (and its forgotten PIN), the payment frame — and, on
 * the landing page, Find my receipt, My reservation, Staff & Partners and the
 * hotel's booking sheet. One file for the landing page and the shelf (menu,
 * vip): the cart is one cart, so it is one look (two copies drifted until one
 * could take cashback and the other could not).
 *
 * On the storefront's tokens (storefront.css section 1: the business's own
 * colour, light and dark), 17 Oct 2026: a sheet rises from the foot of a phone
 * with a handle and the safe area kept clear, and is a dialog from 600 px; a
 * 40 px close square; titles 20 px; one flat button in the business's colour;
 * a product with no photograph shows the cards' quiet picture mark (no
 * /pp.png); no gradient, no blur. Compact since 18 Oct (owner: "modernize and
 * make it more arranged and compact"): fields and buttons 44 px with 16 px
 * words (a phone never zooms), a label 4 px over its field, 12 px between.
 *
 * Linked at the END of each page (the first paint never waits for it), after
 * storefront.css. Every rule begins html[data-sf] (<html data-sf>).
 */

/* ── the older names, for a page that has not given the storefront's tokens ──
 * Defaults only: storefront.css's html[data-sf] block outweighs :root. */
:root {
  --text:         var(--ink, #13111c);
  --muted:        var(--ink-soft, #4b5563);
  --card-bg:      var(--surface, #ffffff);
  --glass-bg:     var(--surface, #ffffff);
  --glass-border: var(--line, #e6e4ee);
  --accent-text:  var(--brand, #6d28d9);
}

/* ── the sheet ──
 * 2000: over the shelf's sticky bar (1000) and its chips; under the toast
 * (10000) and the gateway's own frame (999999). */
html[data-sf] .pay-modal{position:fixed;inset:0;z-index:2000;display:none;align-items:flex-end;justify-content:center;padding:0;}
html[data-sf] .pay-modal.open{display:flex;}
html[data-sf] .pay-modal-backdrop{position:absolute;inset:0;background:var(--sf-veil);backdrop-filter:none;-webkit-backdrop-filter:none;}
html[data-sf] .pay-modal-box,html[data-sf] .pay-modal-box.glass{position:relative;display:flex;flex-direction:column;width:100%;max-width:none;max-height:92dvh;overflow:auto;
  overscroll-behavior:contain;padding:24px 16px calc(16px + env(safe-area-inset-bottom,0px));border:0;border-radius:var(--r-xl) var(--r-xl) 0 0;
  background:var(--surface);color:var(--ink-2);box-shadow:var(--lift-2);backdrop-filter:none;-webkit-backdrop-filter:none;}
/* the handle a thumb expects at the top of a sheet */
html[data-sf] .pay-modal-box::before{content:"";position:absolute;top:8px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:var(--r-pill);background:var(--line);}
/* A scrolling flex column must not squeeze what is inside it: a list with an
   overflow of its own has a minimum height of nothing, and collapsed under a
   long cart until what followed was drawn over it. The box scrolls instead. */
html[data-sf] .pay-modal-box > *{flex-shrink:0;}
@media (min-width:600px){
  html[data-sf] .pay-modal{align-items:center;padding:24px;}
  html[data-sf] .pay-modal-box,html[data-sf] .pay-modal-box.glass{max-width:480px;max-height:88vh;padding:24px;border-radius:var(--r-xl);}
  html[data-sf] .pay-modal-box::before{display:none;}
}
/* Staff & Partners stays a dialog in the middle on a phone too (owner,
   2026-10-04: "centralize it as a modal centered on the screen" — its access
   key never waits below the fold; signup_sheet_browser_test measures it). */
html[data-sf] #staffModal{align-items:center;padding:16px;}
html[data-sf] #staffModal .pay-modal-box{max-height:calc(100dvh - 32px);padding-bottom:20px;border-radius:var(--r-xl);}
html[data-sf] #staffModal .pay-modal-box::before{display:none;}
html[data-sf] .pay-modal-close{position:absolute;top:12px;right:12px;z-index:3;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);font-size:24px;font-weight:400;line-height:1;cursor:pointer;}
html[data-sf] .pay-modal-close:hover{background:var(--line);}
/* over the item's picture: a surface of its own, so it reads on any photograph */
html[data-sf] #itemModal .pay-modal-close{background:var(--surface);box-shadow:var(--lift);}
html[data-sf] .pay-modal-close[hidden]{display:none;}
html[data-sf] .cart-title{margin:0 52px 12px 0;font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
html[data-sf] .modal-note{margin:-8px 0 16px;font-size:14px;line-height:1.5;color:var(--mute);}
html[data-sf] .modal-note.agree{margin:4px 0 12px;font-size:13px;}
html[data-sf] .modal-note a{color:var(--brand-ink);font-weight:600;}
/* the sign-in card while the shop asks for it first: it is the page, not a sheet to push aside */
html[data-sf] .pay-modal.is-locked .pay-modal-backdrop{cursor:default;background:rgba(9,8,16,.72);}
html[data-sf] .pay-modal.is-locked .pay-modal-close{display:none;}

/* ── the item card ── */
html[data-sf] .item-hero{position:relative;width:100%;height:auto;aspect-ratio:4 / 3;max-height:40vh;margin:0 0 12px;overflow:hidden;border-radius:var(--r-lg);
  background:var(--surface-2);color:var(--faint);}
html[data-sf] .item-hero::before,html[data-sf] .cart-line-pic::before,html[data-sf] div.hline__pic::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;
  background:currentColor;-webkit-mask:var(--sf-photo) center / contain no-repeat;mask:var(--sf-photo) center / contain no-repeat;}
html[data-sf] .item-hero,html[data-sf] .cart-line-pic,html[data-sf] div.hline__pic{
  --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] .item-hero img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;background:var(--surface-2);}
html[data-sf] .item-hero.is-none img{visibility:hidden;}
html[data-sf] .item-thumbs{display:none;gap:8px;margin:0 0 12px;padding:2px;overflow-x:auto;scrollbar-width:none;}
html[data-sf] .item-thumbs::-webkit-scrollbar{display:none;}
html[data-sf] .item-thumbs img{flex:none;width:56px;height:56px;border:0;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2);box-shadow:0 0 0 1px var(--line);cursor:pointer;}
html[data-sf] .item-thumbs img.on{box-shadow:0 0 0 2px var(--brand);}
html[data-sf] .item-title{margin:4px 0;font-size:20px;line-height:26px;font-weight:700;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere;}
html[data-sf] .item-brand-line{margin:0 0 4px;font-size:13px;line-height:18px;font-weight:600;color:var(--mute);}
html[data-sf] .item-price{margin:4px 0 12px;font-size:22px;line-height:28px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
html[data-sf] .item-desc{margin:0 0 16px;font-size:14px;line-height:1.6;color:var(--ink-2);white-space:pre-line;}
html[data-sf] .item-desc:empty{display:none;}
html[data-sf] .item-qty-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);}
html[data-sf] .item-qty-label{font-size:14px;font-weight:600;color:var(--ink);}
html[data-sf] .qty-control{display:inline-flex;align-items:stretch;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);}
html[data-sf] .qty-control button{width:44px;height:44px;padding:0;border:0;background:var(--surface-2);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;}
html[data-sf] .qty-control button:hover{background:var(--line);}
html[data-sf] .qty-control input{width:56px;height:44px;padding:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;
  background:var(--surface);color:var(--ink);text-align:center;font:inherit;font-size:16px;font-weight:700;-moz-appearance:textfield;}
html[data-sf] .qty-control input::-webkit-outer-spin-button,html[data-sf] .qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
/* Copy link and Share (staff/copy_link.php): two quiet pills, a thumb's height */
html[data-sf] .pay-modal .cplinks{gap:8px;}
html[data-sf] .pay-modal .cplink{min-height:40px;padding:0 14px;gap:8px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);
  font-size:14px;font-weight:600;}
html[data-sf] .pay-modal .cplink:hover{background:var(--surface-2);border-color:var(--faint);}
html[data-sf] .pay-modal .cplink__g,html[data-sf] .pay-modal .cplink__k{width:16px;height:16px;}
html[data-sf] .pay-modal .cplink.is-copied{background:var(--good-wash);border-color:var(--good-wash);color:var(--good);}
html[data-sf] .pay-modal .cplink[hidden]{display:none;}

/* ── the cart ── */
html[data-sf] .cart-lines{max-height:none;overflow:visible;margin:0 0 8px;}
html[data-sf] .cart-line{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-bottom:1px solid var(--line-2);}
html[data-sf] .cart-line img,html[data-sf] .cart-line-pic{position:relative;flex:none;width:44px;height:44px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2);color:var(--faint);overflow:hidden;}
html[data-sf] .cart-line-pic::before{width:24px;height:24px;margin:-12px 0 0 -12px;}
html[data-sf] .cart-line-pic img{position:relative;z-index:1;display:block;width:100%;height:100%;border-radius:0;}
html[data-sf] .cart-line-body{flex:1;min-width:0;}
html[data-sf] .cart-line-name{display:block;font-size:15px;line-height:20px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
html[data-sf] .cart-line-meta{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--mute);font-variant-numeric:tabular-nums;}
html[data-sf] .cart-line-del{flex:none;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r);
  background:transparent;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;}
html[data-sf] .cart-line-del:hover{background:var(--bad-wash);color:var(--bad);}
/* a line on its way out of the cart — pressed, not yet confirmed */
html[data-sf] .cart-line.is-going{opacity:.35;pointer-events:none;transition:opacity .18s ease;}
html[data-sf] .cart-empty{padding:32px 12px;text-align:center;font-size:14px;color:var(--mute);}
html[data-sf] .cart-total{display:flex;align-items:center;justify-content:space-between;margin:0;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:14px;color:var(--mute);}
html[data-sf] .cart-total strong{font-size:18px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
/* the discount, and what a reservation adds (coupon_box.css shows and hides it) */
html[data-sf] .cbx-line{margin:8px 0;font-size:14px;font-weight:600;color:var(--good);}
/* who is in the cart, and the way out: one small line under the title (18 Oct;
   the pill beside the close button sat on the handle and hid it) */
html[data-sf] .cart-who{display:flex;align-items:center;gap:8px;min-height:32px;margin:-4px 0 8px;font-size:13px;color:var(--mute);}
html[data-sf] .cart-who[hidden]{display:none;}
html[data-sf] .cart-who__avatar{flex:0 0 24px;width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--r-pill);
  background:var(--brand-wash);color:var(--brand-ink);font-size:12px;font-weight:700;text-transform:uppercase;}
html[data-sf] .cart-who__avatar:empty{display:none;}
html[data-sf] .cart-who__txt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--ink-2);}
/* a 32 px pill, a 44 px reach (::before) */
html[data-sf] .cart-who__out{position:relative;flex:none;min-height:32px;margin-left:auto;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--mute);font-size:13px;font-weight:600;cursor:pointer;}
html[data-sf] .cart-who__out::before{content:"";position:absolute;inset:-6px 0;}
html[data-sf] .cart-who__out:hover{border-color:var(--bad);color:var(--bad);}

/* ── what happened to everything already bought: paid, then processed ────
   Quieter than the cart above them: a receipt, not a task. */
html[data-sf] .cart-stage{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);}
html[data-sf] .cart-stage[hidden]{display:none;}
html[data-sf] .cart-stage__head{display:flex;align-items:center;gap:8px;margin:0 0 2px;font-size:14px;line-height:20px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);}
html[data-sf] .cart-stage__dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--faint);}
html[data-sf] .cart-stage__dot.is-paid{background:var(--warn);box-shadow:0 0 0 3px var(--warn-wash);}
html[data-sf] .cart-stage__dot.is-done{background:var(--good);box-shadow:0 0 0 3px var(--good-wash);}
html[data-sf] .cart-stage__dot.is-room{background:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);}
html[data-sf] .cart-stage__note{margin:0 0 8px;font-size:13px;color:var(--mute);}
html[data-sf] .cart-stage .cart-line{min-height:60px;padding:8px 0;opacity:.85;}
html[data-sf] .cart-stage .cart-line img,html[data-sf] .cart-stage .cart-line-pic{width:40px;height:40px;}
html[data-sf] .cart-stage .cart-line-name{font-size:14px;}
/* a balance on a sale already approved (renderBalance()) */
html[data-sf] .cart-balance{margin-top:12px;padding:12px 14px;border:0;border-radius:var(--r);background:var(--warn-wash);color:var(--ink-2);}
html[data-sf] .cart-balance__t{font-size:14px;font-weight:700;color:var(--ink);}
html[data-sf] .cart-balance__s{margin:4px 0 12px;font-size:13px;line-height:1.45;}
html[data-sf] .cart-balance__b{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:44px;padding:0 18px;border:0;border-radius:var(--r-pill);
  background:var(--brand-fill);color:#fff;font-size:15px;font-weight:650;cursor:pointer;}
html[data-sf] .cart-balance__b[disabled]{opacity:.6;cursor:default;}
/* past purchases: offered only to somebody who has some */
html[data-sf] .cart-hist-btn{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin:12px 0 0;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s;}
html[data-sf] .cart-hist-btn:hover{border-color:var(--faint);background:var(--surface-2);}
html[data-sf] .cart-hist-btn[hidden]{display:none;}
html[data-sf] .cart-hist-btn i{display:none;}
html[data-sf] .cart-hist-btn span{flex:1 1 auto;min-width:0;text-align:left;}
html[data-sf] .cart-hist-btn b{flex:0 0 auto;min-width:24px;padding:2px 8px;border-radius:var(--r-pill);background:var(--brand-wash);color:var(--brand-ink);font-size:12px;font-weight:700;text-align:center;}

/* ── the forms in the sheets ──
 * #pinResetPane is a SIBLING of #custForm, not a child, so it is named in the
 * same selector lists: one description of a field, so the two cannot drift. */
html[data-sf] .checkout-form label,html[data-sf] #custForm label,html[data-sf] .auth-form label,html[data-sf] #pinResetPane label{
  display:block;margin:0 0 12px;font-size:13px;font-weight:600;color:var(--ink-2);}
html[data-sf] .checkout-form input,html[data-sf] #custForm input,html[data-sf] .auth-form input,html[data-sf] .auth-form select,html[data-sf] .auth-form textarea,
html[data-sf] #pinResetPane select,html[data-sf] #pinResetPane input{
  display:block;width:100%;height:44px;margin-top:4px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);
  font-size:16px;font-family:inherit;outline:none;box-sizing:border-box;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s;}
html[data-sf] .auth-form textarea{height:auto;min-height:96px;padding:10px 12px;}
html[data-sf] .checkout-form input:focus,html[data-sf] #custForm input:focus,html[data-sf] .auth-form input:focus,
html[data-sf] .auth-form select:focus,html[data-sf] .auth-form textarea:focus,html[data-sf] #pinResetPane input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);}
html[data-sf] .checkout-form input::placeholder,html[data-sf] #custForm input::placeholder,html[data-sf] .auth-form input::placeholder,html[data-sf] #pinResetPane input::placeholder{color:var(--mute);opacity:1;}
/* the dial-code picker beside a phone box (phone_input.js): the same height, no gap above the box;
   its face reads "🇳🇬 +234", the list keeps the countries' names */
html[data-sf] .checkout-form .phone-field > input,html[data-sf] #custForm .phone-field > input,html[data-sf] .auth-form .phone-field > input,html[data-sf] #pinResetPane .phone-field > input{margin-top:0;}
html[data-sf] .phone-field{margin-top:4px;}
html[data-sf] .phone-cc-face{border-color:var(--line);border-radius:var(--r);background-color:var(--surface);color:var(--ink);}
html[data-sf] .phone-cc-box:focus-within .phone-cc-face{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);}
/* under a phone box, only what is wrong with it */
html[data-sf] .pay-modal .phone-note:not(.is-bad),html[data-sf] .pay-modal .phone-note:empty{display:none;}
html[data-sf] .pay-modal .phone-note{min-height:0;margin-top:4px;font-size:12px;color:var(--bad);}
/* Given, not chosen — it should not look like something to type in. */
html[data-sf] #pinResetPane input[readonly]{background:var(--surface-2);color:var(--mute);cursor:default;}
html[data-sf] .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media (max-width:599px){ html[data-sf] .field-row{grid-template-columns:1fr;gap:0;} }
/* the checkout stacks on a desk too: beside the name, the phone box was half cut */
html[data-sf] .checkout-form .field-row{grid-template-columns:1fr;gap:0;}
html[data-sf] .pay-modal .btn{min-height:44px;}
html[data-sf] .pay-modal .btn:disabled{opacity:.55;cursor:not-allowed;}
html[data-sf] #checkoutForm{margin-top:12px;}
/* the amount on the button that pays it (paintCouponSummary() writes data-amt); away while it says Processing… */
html[data-sf] #coBtn[data-amt]:not(:disabled){justify-content:space-between;padding:0 20px;}
html[data-sf] #coBtn[data-amt]:not(:disabled)::after{content:attr(data-amt);font-variant-numeric:tabular-nums;}
html[data-sf] .pay-modal form > .btn-block,html[data-sf] .pinreset-step > .btn-block,html[data-sf] .checkout-form > .btn-block{margin-top:4px;}
/* details already given: a line and a way back, never the three boxes again —
   Change beside the label, the details under them on a line of their own */
html[data-sf] .co-summary{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:8px;margin-bottom:12px;padding:8px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface-2);}
html[data-sf] .co-summary[hidden]{display:none;}
html[data-sf] .co-summary__label{display:block;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute);}
html[data-sf] .co-summary__row{display:contents;}
html[data-sf] .co-summary__text{grid-column:1 / -1;min-width:0;margin-top:2px;overflow-wrap:anywhere;font-size:14px;font-weight:600;color:var(--ink);}
html[data-sf] .co-summary__edit{grid-row:1;grid-column:2;display:inline-flex;align-items:center;min-height:40px;margin:-8px -8px -8px 0;padding:0 8px;font-size:14px;font-weight:600;color:var(--brand-ink);
  text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
html[data-sf] .co-summary__edit:hover{text-decoration:underline;}
/* cashback at the checkout: offered only when there is some */
html[data-sf] .co-cashback{margin:0 0 12px;padding:10px 12px;border:0;border-radius:var(--r);background:var(--good-wash);}
html[data-sf] .co-cashback[hidden]{display:none;}
/* .co-cashback first: the form's own label and field rules outweighed these, and the
   tick was drawn as an empty 44 px box over its words (18 Oct) */
html[data-sf] .co-cashback .co-cashback__row{display:flex;align-items:center;gap:12px;margin:0;cursor:pointer;}
html[data-sf] .co-cashback .co-cashback__row input{flex:none;width:20px;height:20px;margin:0;padding:0;-webkit-appearance:auto;appearance:auto;accent-color:var(--good);cursor:pointer;}
html[data-sf] .co-cashback__text{display:flex;flex-direction:column;gap:2px;line-height:1.35;}
html[data-sf] .co-cashback__text b{font-size:14px;color:var(--ink);}
html[data-sf] .co-cashback__text span{font-size:13px;color:var(--mute);}
html[data-sf] .co-cashback__applied{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;font-weight:600;color:var(--good);}
html[data-sf] .co-cashback__applied[hidden]{display:none;}
/* the discount code (coupon_box.js), folded into one row until it is wanted;
   no row at all while its script has not drawn the box */
html[data-sf] .cbx-wrap{border-bottom:1px solid var(--line-2);}
html[data-sf] .cbx-wrap:has(>#couponBox:empty){display:none;}
html[data-sf] .cbx-wrap>summary{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:14px;font-weight:600;color:var(--brand-ink);
  cursor:pointer;list-style:none;}
html[data-sf] .cbx-wrap>summary::-webkit-details-marker{display:none;}
html[data-sf] .cbx-wrap>summary::after{content:"+";font-size:20px;font-weight:400;color:var(--mute);}
html[data-sf] .cbx-wrap[open]>summary::after{content:"\2212";}
html[data-sf] .cbx{margin:0 0 12px;}
html[data-sf] .cbx .cbx__input{height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font-size:16px;}
html[data-sf] .cbx .cbx__input::placeholder{color:var(--mute);}
html[data-sf] .cbx .cbx__input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-wash);}
html[data-sf] .cbx__btn{min-height:44px;padding:0 16px;border:0;border-radius:var(--r);background:var(--brand-wash);color:var(--brand-ink);font-size:15px;font-weight:650;filter:none;}
html[data-sf] .cbx__btn:hover:not(:disabled){background:var(--line);filter:none;}
html[data-sf] .cbx__note{font-size:13px;}
html[data-sf] .cbx__note--good{color:var(--good);}
html[data-sf] .cbx__note--bad{color:var(--bad);}
html[data-sf] .cbx .cbx__tag{min-height:40px;padding:0 4px 0 14px;border:1px dashed var(--good);border-radius:var(--r-pill);background:var(--good-wash);color:var(--good);font-size:14px;}
html[data-sf] .cbx .cbx__remove{width:32px;height:32px;margin:0;border:0;border-radius:var(--r-pill);background:transparent;color:var(--good);font-size:18px;}
html[data-sf] .cbx__remove:hover{background:var(--surface);}

/* ── signed in as: the other face of the sign-in card ── */
html[data-sf] .cust-me[hidden]{display:none;}
html[data-sf] .cust-me__row{display:flex;align-items:center;gap:12px;margin-bottom:4px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);}
html[data-sf] .cust-me__dot{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--good);box-shadow:0 0 0 3px var(--good-wash);}
html[data-sf] .cust-me__body{min-width:0;line-height:1.3;}
html[data-sf] .cust-me__label{display:block;font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mute);}
html[data-sf] .cust-me__num{display:block;font-size:16px;font-weight:700;color:var(--ink);overflow-wrap:anywhere;}
html[data-sf] .cust-me__out{margin-top:12px;}
html[data-sf] .btn-ghost{background:var(--surface);border:1px solid var(--line);color:var(--ink);font-weight:600;border-radius:var(--r-pill);cursor:pointer;}
html[data-sf] .btn-ghost:hover{background:var(--surface-2);border-color:var(--faint);}
/* forgotten PIN / create account — the way back for somebody who cannot get in */
html[data-sf] .pinreset-link{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;margin:8px 0 0;padding:0;border:0;background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--brand-ink);cursor:pointer;text-align:center;}
html[data-sf] .pinreset-link:hover{text-decoration:underline;}
html[data-sf] .pinreset-back{display:inline-flex;align-items:center;min-height:40px;margin:0 0 8px;padding:0;border:0;background:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--mute);cursor:pointer;}
html[data-sf] .pinreset-back:hover{color:var(--ink);}
/* any `display` above outranks the browser's own [hidden]{display:none}, so the attribute is honoured by name */
html[data-sf] .pinreset-back[hidden],html[data-sf] .pinreset-link[hidden]{display:none;}
html[data-sf] .pinreset-hint{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--mute);font-weight:400;}
/* No display rule for .pinreset-step: one beat [hidden] and every step showed at once. */

/* ── past purchases ── */
html[data-sf] .hist-box{width:100%;}
@media (min-width:600px){ html[data-sf] .pay-modal-box.hist-box{max-width:560px;} }
html[data-sf] .hist-sub{margin:-8px 0 12px;font-size:14px;color:var(--mute);}
html[data-sf] .hist-scroll{max-height:none;overflow:auto;margin:0;padding:0;}
html[data-sf] .hist-empty{margin:32px 0;text-align:center;font-size:14px;color:var(--mute);}
html[data-sf] .hgrp{margin-bottom:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);}
html[data-sf] .hgrp--return{background:var(--bad-wash);border-color:var(--bad-wash);}
html[data-sf] .hgrp--unpaid{background:var(--warn-wash);border-color:var(--warn-wash);}
html[data-sf] .hgrp__top{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:8px;}
html[data-sf] .hgrp__tag{padding:3px 10px;border-radius:var(--r-pill);background:var(--good-wash);color:var(--good);font-size:12px;font-weight:650;letter-spacing:0;text-transform:none;}
html[data-sf] .hgrp--return .hgrp__tag{background:var(--surface);color:var(--bad);}
html[data-sf] .hgrp--unpaid .hgrp__tag{background:var(--surface);color:var(--warn);}
html[data-sf] .hgrp__when{margin-left:auto;font-size:12px;color:var(--mute);white-space:nowrap;}
html[data-sf] .hgrp__tot{font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
html[data-sf] .hgrp__note{margin:0 0 8px;font-size:13px;line-height:1.45;color:var(--mute);}
html[data-sf] .hgrp__meta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-bottom:8px;font-size:13px;color:var(--mute);}
html[data-sf] .hgrp__meta b{font-weight:700;color:var(--ink);}
html[data-sf] .hline{display:flex;align-items:center;gap:12px;padding:8px 0;border-top:1px solid var(--line-2);}
html[data-sf] .hline:first-of-type{border-top:0;}
html[data-sf] .hline__pic{position:relative;flex:0 0 40px;width:40px;height:40px;border-radius:var(--r-sm);object-fit:cover;background:var(--surface-2);color:var(--faint);overflow:hidden;}
html[data-sf] div.hline__pic::before{width:20px;height:20px;margin:-10px 0 0 -10px;}
html[data-sf] .hline__b{flex:1 1 auto;min-width:0;}
html[data-sf] .hline__n{font-size:14px;line-height:1.3;font-weight:600;color:var(--ink);overflow-wrap:anywhere;}
html[data-sf] .hline__s{margin-top:2px;font-size:13px;color:var(--mute);}
html[data-sf] .hline__t{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;}
@media (max-width:430px){ html[data-sf] .hgrp__when{margin-left:0;width:100%;} }

/* ── the payment frame (a gateway without the launcher) ─────────────────── */
html[data-sf] .pay-frame{width:100%;height:min(560px,70vh);border:0;border-radius:var(--r);background:#fff;}
html[data-sf] .pay-modal-status{padding:48px 12px;text-align:center;}
html[data-sf] .pay-modal-status p{margin-top:16px;font-size:14px;color:var(--mute);}
html[data-sf] .pay-modal-fallback{padding:20px 4px 4px;text-align:center;}
html[data-sf] .pay-modal-fallback p{margin-bottom:16px;font-size:14px;line-height:1.6;color:var(--mute);}
html[data-sf] .spinner{width:32px;height:32px;margin:0 auto;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:spin .8s linear infinite;}

/* ── Find my receipt (track_modal.php), My reservation (booking_modal.php) ── */
html[data-sf] .track-row .btn{flex:none;min-height:44px;padding:0 20px;font-size:15px;}
html[data-sf] .track-row input{height:44px;}
html[data-sf] .track-actions .btn{flex:1;min-width:140px;min-height:40px;padding:0 16px;font-size:14px;}
@media (max-width:520px){ html[data-sf] .track-row .btn{width:100%;} }
html[data-sf] .booking-feedback:empty{display:none;}
html[data-sf] .booking-feedback{margin-top:12px;font-size:14px;line-height:1.5;color:var(--ink-2);}

/* ── the hotel's booking sheet (rooms_section.php): the same sheet, its own inside ── */
html[data-sf] .booking-modal{align-items:flex-end;padding:0;}
html[data-sf] .booking-modal.open{display:flex;}
html[data-sf][data-theme] .bk-sheet{--bk-ink:var(--ink);--bk-mute:var(--mute);--bk-line:var(--line);--bk-accent:var(--brand-ink);--bk-surface:var(--surface);--bk-soft:var(--surface-2);
  max-width:none;max-height:92dvh;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--lift-2);}
html[data-sf] .bk-sheet .bk-close{width:40px;height:40px;border:0;border-radius:var(--r);background:var(--surface-2);}
html[data-sf] .bk-steps li.is-on::before{background:var(--brand-fill);}
html[data-sf] .bk-steps li.is-done::before{background:var(--good);}
@media (min-width:600px){
  html[data-sf] .booking-modal{align-items:center;padding:24px;}
  html[data-sf][data-theme] .bk-sheet{max-width:640px;max-height:min(92vh,900px);border-radius:var(--r-xl);}
}

/* ── the cart's own toast, where the page has no kind-aware one ─────────── */
html[data-sf] .shop-toastbox{position:fixed;left:50%;bottom:calc(88px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10000;
  display:flex;flex-direction:column;align-items:center;gap:8px;width:min(92vw,420px);pointer-events:none;}
html[data-sf] .shop-toast{max-width:100%;padding:12px 16px;border-radius:var(--r);background:var(--ink);color:var(--surface);font-size:14px;font-weight:600;line-height:1.4;
  text-align:center;box-shadow:var(--lift-2);opacity:0;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease;}
html[data-sf] .shop-toast.on{opacity:1;transform:none;}
html[data-sf] .shop-toast.is-success{background:var(--ink);}
html[data-sf] .shop-toast.is-error{background:#be3d2a;color:#fff;}

/* A tap should register on the first try: no 300 ms wait, no doubled click. */
html[data-sf] .btn,html[data-sf] .pay-modal button,html[data-sf] .menu-card,html[data-sf] .card-add{touch-action:manipulation;}
html[data-sf] .cart-hist-btn .sf-i{color:var(--mute);}
/* the Show / Hide in a PIN or password box (pw_show.js): a thumb's height */
html[data-sf] input[data-show="1"] + button{min-height:40px;min-width:40px;}
/* the receipt and reservation boxes stand in a column on a phone: their own height, not the row's share */
html[data-sf] .track-row input{flex:1 1 auto;height:44px;}

/* ── the variant picker inside the item card (variant_picker.css, shared with the
   dashboards): on the tokens here — a question until an option is picked (the
   warning's wash), quiet and green once it is ── */
html[data-sf] .pay-modal .vp{margin-top:16px;padding:16px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2);}
html[data-sf] .pay-modal .vp--needed{border-color:var(--warn);background:var(--warn-wash);}
html[data-sf] .pay-modal .vp--done{border-color:var(--good);background:var(--good-wash);}
html[data-sf] .pay-modal .vp__title{font-size:15px;font-weight:700;color:var(--ink);}
html[data-sf] .pay-modal .vp__req{padding:3px 10px;background:var(--surface);color:var(--warn);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;}
html[data-sf] .pay-modal .vp__label{font-size:13px;font-weight:600;color:var(--ink-2);}
html[data-sf] .pay-modal .vp__count,html[data-sf] .pay-modal .vp__empty,html[data-sf] .pay-modal .vp__sku,html[data-sf] .pay-modal .vp__chipk{color:var(--mute);}
html[data-sf] .pay-modal .vp__select{min-height:44px;border:1px solid var(--line);border-radius:var(--r);background-color:var(--surface);color:var(--ink);}
html[data-sf] .pay-modal .vp__card{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);transform:none;}
html[data-sf] .pay-modal .vp__card:hover{border-color:var(--faint);transform:none;}
html[data-sf] .pay-modal .vp__card.is-on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);}
html[data-sf] .pay-modal .vp__thumb,html[data-sf] .pay-modal .vp__chip{background:var(--surface-2);}
html[data-sf] .pay-modal .vp__chipv{color:var(--ink);}
html[data-sf] .pay-modal .vp__price{font-weight:700;color:var(--ink);}
html[data-sf] .pay-modal .vp__stock--in{background:var(--good-wash);color:var(--good);}
html[data-sf] .pay-modal .vp__stock--out{background:var(--bad-wash);color:var(--bad);}
html[data-sf] .pay-modal .vp-chosen{border:0;border-radius:var(--r);background:var(--brand-wash);}
html[data-sf] .pay-modal .vp-chosen__head{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--brand-ink);}

/* ── a search answer with no photograph (search_result.js, on the landing page and
   the shelf): a neutral square in its place — the placeholder file hidden, and
   the rows being lazy, never asked for ── */
html[data-sf] .sr-hit__img[src$="/pp.png"]{display:none;}
html[data-sf] .sr-hit:has(> .sr-hit__img[src$="/pp.png"])::before{content:"";flex:0 0 44px;width:44px;height:44px;border-radius:9px;background:var(--surface-2);}

/* the install card's ×, a thumb's size (pwa-install.js draws it at 28) */
html[data-sf] .pwa-sheet__close{min-width:40px;min-height:40px;top:4px;right:4px;}
html[data-sf] .pay-modal .vp__clear{min-height:40px;border-color:var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);}