/* Static-commerce additions. The original Mellow Market theme remains intact above this layer. */

[hidden] { display: none !important; }

.catalog-heading { max-width: 920px; margin-bottom: 42px; }
.catalog-heading .page-title { margin-bottom: 18px; }
.catalog-intro { max-width: 640px; margin: 0; font-size: 18px; font-weight: 700; }
.catalog-tools { display: grid; grid-template-columns: 1fr minmax(240px, .7fr) minmax(190px, .38fr); align-items: end; gap: 18px; margin-bottom: 34px; padding: 16px; background: var(--cream); border: var(--line); }
.catalog-tools p { margin: 0; }
.catalog-search,.catalog-sort { display: grid; gap: 6px; font-family: var(--label); font-size: 9px; letter-spacing: .05em; text-transform: uppercase; }
.catalog-search input,.catalog-sort select { min-height: 44px; padding: 8px 11px; background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); text-transform: none; }
.catalog-grid { clear: both; }
.catalog-grid [hidden] { display: none; }
.empty-shelf button { min-height: 44px; padding: 10px 16px; background: var(--ink); border: 0; color: var(--cream); font-weight: 800; cursor: pointer; }
.category-shortcuts { display: flex; gap: 8px; margin: -14px 0 28px; padding: 3px 2px 8px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.category-shortcuts a { flex: 0 0 auto; min-height: 40px; padding: 10px 13px; background: var(--cream); border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font: 700 9px/1 var(--label); letter-spacing: .04em; text-decoration: none; text-transform: uppercase; }
.category-shortcuts a:hover,.category-shortcuts a:focus-visible,.category-shortcuts a.is-active { background: var(--ink); color: var(--cream); }
.market-product__deal,.static-product__deal { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 7px 9px; background: var(--acid); border: 1.5px solid var(--ink); color: var(--ink); font: 800 8px/1 var(--label); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-1deg); }
.market-product__price span { display: inline-block; margin-left: 7px; padding: 3px 5px; background: var(--acid); border: 1px solid var(--ink); font-size: 8px; }
.market-product__visual > img { width: calc(100% - 24px); height: calc(100% - 24px); margin: 12px; padding: 10px; background: #fff; border-radius: 14px; object-fit: contain; }

.static-product__visual { position: relative; display: grid; place-items: center; min-height: 560px; overflow: hidden; background: var(--blue) !important; border: var(--line) !important; border-radius: 6px !important; }
.static-product__visual > img { width: calc(100% - 64px); height: calc(100% - 64px); max-height: 540px; margin: 32px; padding: 20px; background: #fff; border-radius: 20px; object-fit: contain; }
.product-gallery { align-self: stretch; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; width: 100%; min-width: 0; padding: 32px; }
.product-gallery > img.product-gallery__main { width: 100%; height: 100%; min-height: 0; max-height: 452px; padding: 20px; background: #fff; border-radius: 20px; object-fit: contain; }
.product-gallery__rail { display: flex; gap: 8px; max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: thin; }
.product-gallery__thumb { flex: 0 0 66px; width: 66px; height: 66px; padding: 4px; overflow: hidden; background: #fff; border: 2px solid transparent; border-radius: 10px; cursor: pointer; }
.product-gallery__thumb[aria-pressed="true"] { border-color: var(--ink); }
.product-gallery__thumb:focus-visible { outline: 3px solid var(--acid); outline-offset: 2px; }
.product-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.static-product__visual .market-pack--large { width: min(260px, 52%); max-width: none; }
.static-product__aisle { position: absolute; top: 18px; left: 18px; padding: 7px 9px; background: var(--cream); border: var(--line); font-family: var(--label); font-size: 9px; text-transform: uppercase; }
.static-product.market-product--snack-cabinet .static-product__visual { background: var(--coral) !important; }
.static-product.market-product--mushroom-pantry .static-product__visual { background: var(--sun) !important; }
.static-product.market-product--mellow-goods .static-product__visual { background: var(--violet) !important; }
.static-product .summary { align-self: center; }
.static-product .summary .price { margin: 24px 0 12px; }
.product-deal-callout { max-width: 520px; margin: 0 0 18px; padding: 12px 14px; background: var(--acid); border: 1.5px solid var(--ink); font-weight: 800; }
.product-purchase { display: grid; grid-template-columns: 78px minmax(0, 260px); gap: 10px; margin: 24px 0; }
.product-purchase input { min-width: 0; padding: 9px; background: #fff; border: var(--line); font: 700 16px/1 var(--label); }
.product-purchase button { min-height: 50px; margin: 0 !important; cursor: pointer; }
.product-summary { max-width: 560px; font-size: 18px; font-weight: 700; }
.product-taxonomy { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 22px; font: 700 9px/1 var(--label); text-transform: uppercase; }
.product-taxonomy a { padding: 7px 9px; background: var(--paper); border: 1px solid var(--ink); color: var(--ink); text-decoration: none; }
.product-facts { display: grid; gap: 0; max-width: 580px; margin-top: 22px; border-top: 1px dashed var(--ink); }
.product-facts div { display: grid; grid-template-columns: minmax(90px, .35fr) 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--ink); }
.product-facts dt { font: 700 9px/1.4 var(--label); letter-spacing: .04em; text-transform: uppercase; }
.product-facts dd { margin: 0; font-size: 14px; font-weight: 700; }
.static-product .quantity { display: grid; grid-template-columns: auto 82px; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--label); font-size: 11px; }
.static-product .quantity input { width: 82px; }
.static-product form.cart { margin-top: 28px; }
.static-product form.cart .single_add_to_cart_button { min-width: 220px; cursor: pointer; }
.static-product .product_meta { display: grid; gap: 6px; margin-top: 26px; font-family: var(--label); font-size: 10px; }
.static-product__description { padding: 44px; background: var(--cream); border: var(--line); }
.static-product__description h2,.static-related > h2 { margin-top: 0; font-size: clamp(30px, 4vw, 52px); letter-spacing: -.045em; }
.static-product__description p { max-width: 760px; font-size: 18px; font-weight: 700; white-space: pre-line; }
.static-product__description .review-note { margin-top: 28px; padding-top: 18px; border-top: 1px dashed var(--ink); font-family: var(--label); font-size: 10px; font-weight: 400; }
.static-related { padding-top: 44px; }
.static-related .market-product-grid { grid-template-columns: repeat(2, minmax(0, 310px)); }

.static-cart { min-height: 300px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; gap: 28px; }
.cart-lines { display: grid; gap: 14px; }
.cart-line { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 14px; background: var(--cream); border: var(--line); }
.cart-line__pack { display: grid; place-items: center; min-height: 130px; background: var(--blue); border: 1.5px solid var(--ink); overflow: hidden; }
.cart-line__pack > img { width: 100%; height: 130px; padding: 8px; background: #fff; object-fit: contain; }
.cart-line__pack.market-product--snack-cabinet { background: var(--coral); }
.cart-line__pack.market-product--mushroom-pantry { background: var(--sun); }
.cart-line__pack.market-product--mellow-goods { background: var(--violet); }
.cart-line__pack .market-pack { width: 68px; min-width: 0; padding: 8px 4px; box-shadow: 4px 4px 0 var(--ink); }
.cart-line__pack .market-pack__label { font-size: 18px; }
.cart-line__pack .market-pack__stamp { font-size: 5px; }
.cart-line__copy h2 { margin: 0; font-size: 25px; line-height: 1.05; }
.cart-line__copy h2 a { text-decoration: none; }
.cart-line__copy p { margin: 7px 0 0; }
.cart-line__controls { display: grid; justify-items: end; gap: 9px; font-family: var(--label); font-size: 10px; }
.cart-line__controls input { width: 64px; min-height: 38px; padding: 4px 7px; border: 1.5px solid var(--ink); }
.cart-line__controls strong { font-size: 13px; }
.cart-line__controls button { padding: 0; background: transparent; border: 0; border-bottom: 1px solid currentColor; color: var(--ink); cursor: pointer; font: inherit; }
.cart-summary { position: sticky; top: 112px; padding: 21px; background: var(--sun); border: var(--line); box-shadow: 8px 8px 0 var(--ink); font-family: var(--label); }
.cart-summary > span { display: block; padding-bottom: 12px; border-bottom: 1px dashed var(--ink); font-size: 10px; }
.cart-summary dl { margin: 17px 0; }
.cart-summary dl div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; border-bottom: 1px dotted var(--ink); font-size: 10px; }
.cart-summary dd { margin: 0; text-align: right; }
.cart-summary [data-cart-discount-row] dd { color: #9f1d20; font-weight: 800; }
.cart-summary > strong { display: block; margin: 26px 0; font-family: var(--body); font-size: 28px; line-height: 1.05; }
.checkout-review-button { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--ink); border: 0; color: var(--cream); cursor: pointer; font-weight: 700; }
.checkout-review-button:disabled { opacity: .62; cursor: not-allowed; }
.cart-summary > p,.checkout-review-message { font-size: 9px; line-height: 1.45; }
.checkout-review-message { padding: 10px; background: var(--cream); border: 1.5px solid var(--ink); }
.empty-cart { padding: clamp(40px, 8vw, 96px); background: var(--cream); border: var(--line); text-align: center; }
.empty-cart h2 { margin: 0; font-size: clamp(38px, 6vw, 70px); letter-spacing: -.055em; line-height: .95; }
.empty-cart p:not(.market-kicker) { max-width: 520px; margin: 22px auto 30px; font-weight: 700; }
.empty-cart .market-button { margin-inline: auto; }

.account-note,.prose-page { max-width: 860px; padding: clamp(36px, 6vw, 72px); background: var(--cream); border: var(--line); box-shadow: 10px 10px 0 var(--coral); }
.account-note .page-title,.prose-page h1 { margin: 0; font-size: clamp(52px, 8vw, 96px); letter-spacing: -.06em; line-height: .9; }
.account-note h2 { margin: 40px 0 0; font-size: clamp(26px, 4vw, 42px); }
.account-note p:not(.market-kicker),.prose-page p { max-width: 700px; font-size: 18px; font-weight: 700; }
.account-note .market-button { margin-top: 18px; }
.not-found h1 { margin: 0; font-size: clamp(54px, 9vw, 110px); letter-spacing: -.065em; }
.not-found .market-button { margin-top: 22px; }

@media (max-width: 900px) {
  .catalog-tools { grid-template-columns: 1fr 1fr; }
  .catalog-tools .woocommerce-result-count { grid-column: 1 / -1; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .static-product__visual { min-height: 480px; }
}

@media (max-width: 620px) {
  .catalog-tools { grid-template-columns: 1fr; }
  .catalog-tools .woocommerce-result-count { grid-column: auto; }
  .catalog-intro { font-size: 15px; }
  .category-shortcuts { margin-inline: -2px; }
  .static-product__visual { min-height: 360px; }
  .static-product__visual > img { width: calc(100% - 28px); height: calc(100% - 28px); margin: 14px; padding: 10px; border-radius: 14px; }
  .product-gallery { gap: 8px; padding: 14px; }
  .product-gallery > img.product-gallery__main { max-height: 300px; padding: 10px; border-radius: 14px; }
  .product-gallery__thumb { flex-basis: 56px; width: 56px; height: 56px; }
  .static-product__visual .market-pack--large { width: 46%; }
  .static-product__description { padding: 24px 18px; }
  .product-purchase { grid-template-columns: 68px 1fr; }
  .product-facts div { grid-template-columns: 84px 1fr; }
  .market-product__deal { right: 7px; bottom: 7px; padding: 5px 6px; font-size: 6px; }
  .market-product__price span { display: block; width: max-content; margin: 5px 0 0; }
  .static-related .market-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-line { grid-template-columns: 92px 1fr; gap: 12px; }
  .cart-line__pack { min-height: 100px; }
  .cart-line__pack > img { height: 100px; }
  .cart-line__controls { grid-column: 1 / -1; grid-template-columns: 1fr auto auto; align-items: center; justify-items: start; width: 100%; padding-top: 12px; border-top: 1px dashed var(--ink); }
  .cart-line__controls strong { justify-self: end; }
  .cart-line__controls button { justify-self: end; }
  .account-note,.prose-page { padding: 34px 20px; box-shadow: 6px 6px 0 var(--coral); }
}

/* Checkout (review order flow) */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; margin-top: 8px; }
.checkout-form { display: grid; gap: 14px; background: var(--cream); border: var(--line); box-shadow: var(--hard-shadow); padding: 26px; }
.checkout-form h2 { margin: 8px 0 0; font-size: 20px; }
.checkout-agree { display: flex; align-items: flex-start; margin: 6px 0 4px; font-size: 14px; line-height: 1.45; font-weight: 600; }
.checkout-agree input { flex: none; width: 18px; height: 18px; margin: 2px 10px 0 0; }
.checkout-agree a { text-decoration: underline; }
.checkout-form label { display: grid; gap: 4px; font-family: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.checkout-form input[type="text"], .checkout-form input[type="email"], .checkout-form input[type="tel"] { font: 16px/1.4 var(--body); padding: 10px 12px; border: var(--line); background: #fff; }
.checkout-form input:focus-visible, .checkout-form button:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.checkout-form button[type="submit"] { width: 100%; min-height: 50px; padding: 12px 14px; background: var(--ink); border: var(--line); color: var(--cream); cursor: pointer; font: 700 15px/1.2 var(--label); }
.checkout-form button[type="submit"]:disabled { opacity: .62; cursor: not-allowed; }
.checkout-delivery { border: var(--line); padding: 12px 14px; display: grid; gap: 8px; }
.checkout-delivery legend { font-family: var(--label); font-size: 12px; text-transform: uppercase; padding: 0 6px; }
.checkout-delivery label { display: flex; align-items: center; gap: 8px; text-transform: none; font-family: var(--body); font-size: 15px; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.checkout-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 14px; }
.checkout-card-grid .checkout-card-field:first-child { grid-column: 1 / -1; }
.checkout-card-field { display: grid; gap: 4px; font-family: var(--label); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.checkout-card-field input { font: 16px/1.4 var(--body); padding: 10px 12px; border: var(--line); background: #fff; }
.checkout-card-field input:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }
.mystery-bag-picker { margin: 14px 0; }
.mystery-bag-list { display: grid; gap: 10px; margin-top: 8px; }
.mystery-bag-option { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; border: var(--line); background: var(--cream); padding: 12px 14px; }
.mystery-bag-option__name { font: 700 16px/1.2 var(--body); }
.mystery-bag-option__price { font-family: var(--label); font-size: 15px; }
.mystery-bag-option button { min-height: 40px; padding: 8px 16px; }
.mystery-bag-option button:disabled { opacity: .6; cursor: default; }
.checkout-notice { font-size: 13px; opacity: .85; max-width: 560px; }
.checkout-summary dl { margin: 12px 0; display: grid; gap: 6px; }
.checkout-summary dl div { display: flex; justify-content: space-between; gap: 12px; }
.checkout-confirmation { background: var(--cream); border: var(--line); box-shadow: var(--hard-shadow); padding: 30px; margin-top: 18px; display: grid; gap: 10px; justify-items: start; }
.checkout-confirmation h2 { margin: 0; font-size: clamp(26px, 4vw, 40px); }
.shell-hint { font-size: 14px; opacity: .8; }
@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .checkout-grid { grid-template-columns: 1fr; }
  .checkout-form { padding: 18px; }
}

/* ---- staff register (/register/) ---- */
.register-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 800px) { .register-layout { grid-template-columns: 1fr; } }
.register-search { width: 100%; padding: 12px; font-size: 1.05rem; margin-bottom: 12px; }
.register-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.register-item { display: flex; flex-direction: column; gap: 4px; padding: 12px; text-align: left; cursor: pointer; border: 2px solid currentColor; border-radius: 10px; background: transparent; font: inherit; }
.register-item:disabled { opacity: 0.45; cursor: not-allowed; }
.register-item strong { font-size: 1.1rem; }
.register-item small { opacity: 0.7; }
.register-side { position: sticky; top: 90px; display: grid; gap: 14px; align-content: start; }
.register-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; }
.register-line-controls { display: inline-flex; align-items: center; gap: 8px; }
.register-line-controls button { width: 34px; height: 34px; font-size: 1.2rem; cursor: pointer; }
.register-charge { margin-top: 20px; }
.register-charge-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.register-clear { margin-top: 8px; }
/* explicit height, not aspect-ratio (Chrome 88+; the L1400 is on 83) */
.register-item-photo { width: 100%; height: 120px; object-fit: cover; border-radius: 8px; display: block; background: rgba(0,0,0,0.06); }
.register-item-photo--empty { display: block; }
.register-item:disabled .register-item-photo { filter: grayscale(1); }

/* ==========================================================================
   MELLOW LANE REGISTER — touch layout for the 15" PAX L1400.

   Engine floor is Chrome 83 (PayDroid WebView): no `inset`, no
   `aspect-ratio`, no flex `gap`, no `:is()`. Grid gap IS supported and used.
   Every control is >= 56px tall — this is operated with a thumb, standing up,
   under fluorescent light, in a hurry.

   The sale column is styled as an actual receipt (perforated edge, monospace
   ledger, dashed rules). That is the store's own footer motif turned into the
   one thing a cashier stares at all day.
   ========================================================================== */

.kiosk-page { min-height: 100vh; background: #efe9d6; }
.kiosk-shell { padding: 0; max-width: none; }
/* the shopper theme centres content in a `--container` width; a register
   must use the whole 15" panel, so override width outright (max-width
   cannot beat a `width` declaration) */
.kiosk-shell .shop-shell__inner { width: 100%; max-width: none; margin: 0; padding: 0; }
.kiosk-page .catalog-heading,
.kiosk-page .pos-heading { display: none; }

/* ---- top bar ---- */
.pos-topbar {
  display: flex; align-items: center; height: 56px; padding: 0 16px;
  background: #0d3b28; color: #f4f1dc;
}
.pos-mark {
  font-family: var(--display, inherit); font-size: 20px; font-weight: 800;
  letter-spacing: .02em; color: #e6d24a; margin-right: 14px;
}
.pos-lane { font: 700 13px/1 var(--label, monospace); letter-spacing: .12em; text-transform: uppercase; }
.pos-topbar-spacer { flex: 1 1 auto; }
.pos-chip {
  display: inline-block; margin-left: 10px; padding: 7px 12px; border-radius: 999px;
  background: rgba(244,241,220,.12); color: #f4f1dc;
  font: 600 12px/1 var(--label, monospace); letter-spacing: .06em; white-space: nowrap;
}
.pos-chip--button { border: 0; cursor: pointer; font-family: var(--label, monospace); }
.pos-chip--warn { background: #c1452f; color: #fff; }
.pos-alert {
  margin: 0; padding: 12px 16px; background: #c1452f; color: #fff;
  font-weight: 700; font-size: 14px; cursor: pointer;
}

/* ---- three columns: nav / work area / receipt ---- */
.register-layout {
  display: grid; grid-template-columns: 172px minmax(0, 1fr) 340px;
  align-items: start; gap: 0; height: calc(100vh - 56px);
}
@media (max-width: 1180px) { .register-layout { grid-template-columns: 140px minmax(0, 1fr) 300px; } }

/* ---- left nav ---- */
.pos-nav {
  display: block; height: 100%; padding: 12px 10px; overflow-y: auto;
  background: #163f2c;
}
.pos-nav button {
  display: block; width: 100%; margin: 0 0 8px; padding: 12px 12px;
  border: 0; border-radius: 12px; background: transparent; color: #cfe3d8;
  text-align: left; font: inherit; cursor: pointer; min-height: 60px;
}
.pos-nav button b { display: block; font-size: 16px; font-weight: 800; color: #f4f1dc; }
.pos-nav button small { display: block; margin-top: 2px; font-size: 11px; opacity: .7; }
.pos-nav button.is-active { background: #e6d24a; }
.pos-nav button.is-active b,
.pos-nav button.is-active small { color: #0d3b28; opacity: 1; }
.pos-nav button:focus-visible { outline: 3px solid #e6d24a; outline-offset: 2px; }

/* ---- work area ---- */
.register-catalog { height: 100%; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.pos-toolbar { margin-bottom: 14px; }
.pos-search {
  width: 100%; min-height: 56px; padding: 12px 16px; margin-bottom: 10px;
  border: 2px solid #0d3b28; border-radius: 12px; background: #fffdf2;
  font-size: 17px; color: #0d3b28;
}
.pos-search::placeholder { color: #7d8f84; }
.pos-scan-btn {
  width: 100%; min-height: 56px; margin-bottom: 10px; padding: 12px 16px;
  border: 2px solid #0d3b28; border-radius: 12px; background: #e6d24a; color: #0d3b28;
  font-size: 17px; font-weight: 800; letter-spacing: 0.01em; cursor: pointer;
}
.pos-scan-btn:active { transform: scale(0.98); }
.pos-scan-pick .pos-btn { display: block; width: 100%; margin: 6px 0; }
.pos-bag-scan { width: 100%; margin: 4px 0 8px; }

/* category rail — horizontal scroll, thumb-sized chips */
.pos-rail { display: block; white-space: nowrap; overflow-x: auto; padding-bottom: 6px; }
.pos-rail button {
  display: inline-block; margin: 0 8px 0 0; padding: 12px 18px; min-height: 48px;
  border: 2px solid #0d3b28; border-radius: 999px; background: #fffdf2; color: #0d3b28;
  font: 700 14px/1.2 inherit; white-space: nowrap; cursor: pointer;
}
.pos-rail button.is-active { background: #0d3b28; color: #f4f1dc; }

.pos-filters { display: block; margin-top: 10px; font-size: 13px; }
.pos-filters > * { display: inline-block; margin: 0 14px 6px 0; vertical-align: middle; }
.pos-select select {
  min-height: 44px; margin-left: 6px; padding: 6px 10px;
  border: 2px solid #0d3b28; border-radius: 8px; background: #fffdf2; font: inherit;
}
.pos-toggle input { width: 22px; height: 22px; margin-right: 6px; vertical-align: middle; }
.pos-count { color: #4a5f54; font: 600 12px/1 var(--label, monospace); letter-spacing: .08em; }

/* ---- product grid ---- */
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.pos-tile {
  display: block; width: 100%; padding: 0 0 10px; overflow: hidden;
  border: 2px solid #0d3b28; border-radius: 14px; background: #fffdf2;
  text-align: left; font: inherit; color: #0d3b28; cursor: pointer;
  box-shadow: 3px 3px 0 #0d3b28;
}
.pos-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0d3b28; }
.pos-tile:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }
.pos-tile:focus-visible { outline: 3px solid #e6d24a; outline-offset: 2px; }
.pos-tile-photo { display: block; width: 100%; height: 124px; object-fit: cover; background: #e7e0c9; }
.pos-tile-photo--empty { display: block; width: 100%; height: 124px; background: #e7e0c9; }
.pos-tile-name {
  display: block; padding: 8px 10px 0; font-size: 14px; font-weight: 700; line-height: 1.3;
  height: 62px; overflow: hidden;
}
.pos-tile-price { display: block; padding: 2px 10px 0; font-size: 18px; font-weight: 800; }
.pos-tile-stock {
  display: block; padding: 2px 10px 0;
  font: 600 11px/1 var(--label, monospace); letter-spacing: .06em; color: #4a5f54;
}
.pos-tile-stock--low { color: #c1452f; }
.pos-tile-deal {
  display: inline-block; margin: 6px 0 0 10px; padding: 3px 7px;
  background: #e6d24a; border: 1px solid #0d3b28; border-radius: 4px;
  font: 700 10px/1 var(--label, monospace); letter-spacing: .06em;
}
.pos-empty { padding: 40px 10px; text-align: center; color: #4a5f54; font-size: 16px; }

/* ---- receipt column (the signature) ---- */
.pos-receipt {
  position: relative; height: 100%; overflow-y: auto;
  background: #fffdf2; border-left: 2px solid #0d3b28;
  display: flex; flex-direction: column;
}
/* perforated top edge: a real receipt tear, not a border */
.pos-receipt-tear {
  height: 10px; flex: 0 0 auto;
  background-image: radial-gradient(circle at 6px 10px, transparent 5px, #0d3b28 5px, #0d3b28 6px, transparent 6px);
  background-size: 12px 12px; background-repeat: repeat-x; background-color: #fffdf2;
}
.pos-receipt-body { flex: 1 1 auto; padding: 12px 16px 16px; font-family: var(--label, monospace); }
.pos-receipt-head {
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px dashed #0d3b28;
  font-size: 13px; font-weight: 800; letter-spacing: .16em; color: #0d3b28;
}
.pos-receipt-head span { display: block; margin-top: 3px; font-size: 10px; letter-spacing: .1em; opacity: .6; font-weight: 600; }

.pos-line { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; padding: 8px 0; border-bottom: 1px dotted #b9c7bd; }
.pos-line-name { font-size: 13px; font-weight: 700; color: #0d3b28; line-height: 1.3; }
.pos-line-amount { font-size: 14px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.pos-line-controls { grid-column: 1 / -1; margin-top: 6px; }
.pos-line-controls button {
  width: 46px; height: 46px; margin-right: 8px;
  border: 2px solid #0d3b28; border-radius: 10px; background: #fffdf2;
  font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; color: #0d3b28;
}
.pos-line-qty { display: inline-block; min-width: 34px; font-size: 15px; font-weight: 800; }
.pos-line--manual .pos-line-name::after {
  content: " MANUAL"; font-size: 9px; letter-spacing: .1em; color: #8a6d1f;
}

.pos-tote { margin-top: 12px; padding-top: 10px; border-top: 2px dashed #0d3b28; }
.pos-tote-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; column-gap: 8px; font-size: 13px; padding: 3px 0; }
.pos-tote-row span:nth-child(2) { font-variant-numeric: tabular-nums; }
.pos-tote-row--save { color: #1f7a4d; font-weight: 700; }
.pos-tote-row--off { color: #8a6d3b; }
.pos-tote-x { border: none; background: transparent; color: #b23; font-size: 18px; line-height: 1; min-width: 30px; min-height: 30px; padding: 0; cursor: pointer; border-radius: 6px; }
.pos-tote-x:active { background: rgba(180, 40, 40, 0.14); }
.pos-tote-x--undo { color: #1f7a4d; }
.pos-confirm .pos-btn { display: block; width: 100%; margin: 6px 0; }
.pos-total { display: grid; grid-template-columns: 1fr auto; margin-top: 8px; padding-top: 8px; border-top: 2px solid #0d3b28; }
.pos-total span { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.pos-total span:last-child { font-variant-numeric: tabular-nums; }
.pos-who { margin: 10px 0 0; font-size: 12px; color: #4a5f54; }
.pos-who b { color: #0d3b28; }

.pos-receipt-cta { margin-top: 14px; }
.pos-btn {
  display: block; width: 100%; min-height: 62px; margin-bottom: 10px; padding: 14px;
  border: 2px solid #0d3b28; border-radius: 12px; background: #fffdf2; color: #0d3b28;
  font: 800 17px/1.2 inherit; cursor: pointer; box-shadow: 3px 3px 0 #0d3b28;
}
.pos-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0d3b28; }
.pos-btn--go { background: #e6d24a; }
.pos-btn--danger { background: #f3d9d3; }
.pos-btn--quiet { min-height: 52px; font-size: 15px; box-shadow: none; }
.pos-btn:disabled { opacity: .5; box-shadow: none; }

.pos-receipt-foot { flex: 0 0 auto; padding: 14px 16px 18px; border-top: 2px dashed #0d3b28; background: #f6f2e0; }
.pos-status { margin: 0 0 12px; font-size: 15px; font-weight: 700; line-height: 1.35; color: #0d3b28; }
.pos-actions > * { margin-bottom: 10px; }

/* ---- shared panel furniture (manual, discounts, customer, reports…) ---- */
.pos-panel-title { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.pos-panel-lede { margin: 0 0 18px; font-size: 15px; color: #4a5f54; max-width: 60ch; }
.pos-panel-subtitle {
  margin: 26px 0 10px; font: 700 12px/1 var(--label, monospace);
  letter-spacing: .14em; text-transform: uppercase; color: #4a5f54;
}
.pos-card { padding: 16px; margin-bottom: 14px; background: #fffdf2; border: 2px solid #0d3b28; border-radius: 14px; }
.pos-field { display: block; margin-bottom: 12px; }
.pos-field span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; }
/* checkboxes must stay checkbox-sized — the full-width rule below is for
   text-shaped fields only */
.pos-field input[type="checkbox"] {
  width: 28px; height: 28px; min-height: 0; margin-right: 10px; vertical-align: middle;
}
.pos-field input:not([type="checkbox"]), .pos-field select, .register-catalog input[type="text"],
.register-catalog input[type="email"], .register-catalog input[type="tel"],
.register-catalog input[type="number"], .register-catalog input[type="search"] {
  width: 100%; min-height: 54px; padding: 12px 14px;
  border: 2px solid #0d3b28; border-radius: 10px; background: #fffdf2; font-size: 16px; color: #0d3b28;
}
.pos-field-hint { margin: 14px 0 6px; font-size: 13px; color: #4a5f54; }

/* keypad */
.pos-keypad { max-width: 340px; }
.pos-keypad-display {
  padding: 16px; margin-bottom: 10px; border: 2px solid #0d3b28; border-radius: 12px;
  background: #fffdf2; text-align: right; font: 800 34px/1 var(--label, monospace);
  font-variant-numeric: tabular-nums; color: #0d3b28;
}
.pos-keypad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.pos-keypad-grid button {
  min-height: 64px; border: 2px solid #0d3b28; border-radius: 12px; background: #fffdf2;
  font: 800 22px/1 inherit; color: #0d3b28; cursor: pointer;
}
.pos-keypad-grid button:active { background: #e6d24a; }
.pos-keypad-actions > * { margin: 0 10px 10px 0; display: inline-block; width: auto; min-width: 150px; }

/* rows / lists */
.pos-rows { display: block; }
.pos-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid #d8d2bd; font-size: 15px;
}
.pos-row-main b { display: block; font-size: 16px; }
.pos-row-main small { display: block; margin-top: 3px; font-size: 12px; color: #4a5f54; }
.pos-row button {
  min-height: 48px; padding: 10px 16px; border: 2px solid #0d3b28; border-radius: 10px;
  background: #fffdf2; font: 700 14px/1 inherit; color: #0d3b28; cursor: pointer;
}
.pos-row button.is-danger { background: #f3d9d3; }

/* Attaching a shopper to a sale that already happened. The panel opens
   inside the row it belongs to, so a cashier can see which sale they are
   editing while they search. Spans the row's two grid columns. */
.pos-attach {
  grid-column: 1 / -1; margin-top: 12px; padding: 16px;
  border: 2px dashed #0d3b28; border-radius: 12px; background: #fffdf2;
}
.pos-attach .pos-panel-subtitle { margin-top: 0; }
.pos-attach .pos-rows { max-height: 260px; overflow-y: auto; }
.pos-row-who { font-size: 13px; color: #4a5f54; }

.pos-chipset > * { display: inline-block; margin: 0 10px 10px 0; }

/* metrics (reports / CDP traits) */
.pos-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.pos-metric { padding: 14px; border: 2px solid #0d3b28; border-radius: 12px; background: #fffdf2; }
.pos-metric b { display: block; font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-metric span {
  display: block; margin-top: 4px; font: 700 11px/1.3 var(--label, monospace);
  letter-spacing: .1em; text-transform: uppercase; color: #4a5f54;
}
.pos-note { margin: 12px 0 0; padding: 12px 14px; border-left: 4px solid #e6d24a; background: #fbf7e4; font-size: 14px; }
.pos-error { margin: 12px 0 0; padding: 12px 14px; border-left: 4px solid #c1452f; background: #fbeae6; font-size: 14px; font-weight: 700; }

/* PIN overlay — explicit offsets, `inset` is Chrome 87+ */
.pos-pin-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60;
  background: rgba(13,59,40,.97); display: grid; place-items: center;
}
.pos-pin-box { display: grid; gap: 16px; justify-items: center; color: #f4f1dc; }
.pos-pin-box strong { font-size: 24px; }
.pos-pin-dots { font-size: 30px; letter-spacing: .35em; min-height: 34px; }
.pos-pin-pad { display: grid; grid-template-columns: repeat(3, 96px); gap: 12px; }
.pos-pin-pad button {
  height: 76px; border: 2px solid #f4f1dc; border-radius: 14px; background: transparent;
  color: #f4f1dc; font: 700 24px/1 inherit; cursor: pointer;
}
.pos-pin-pad button:active { background: #e6d24a; color: #0d3b28; }
.pos-pin-box .pos-error { color: #ffd9d2; background: transparent; border: 0; }

/* ---- customer display (/customer/) ---- */
/* Declaring the scheme stops the WebView's auto-dark pass from rewriting our
   colours; the meta tag in the kiosk document says the same thing earlier. */
.customer-display { height: 100vh; overflow: hidden; display: grid; background: #0d3b28; color: #f4f1dc; color-scheme: dark; }
.customer-screen {
  height: 100vh; overflow: hidden; display: grid; align-content: center; justify-items: center;
  gap: clamp(8px, 2.2vmin, 18px); padding: clamp(14px, 3.5vmin, 40px); text-align: center;
}
.customer-screen[hidden] { display: none; }
.customer-logo { width: min(300px, 46vw); max-height: 22vh; object-fit: contain; }
.customer-logo--big { width: min(420px, 52vw); max-height: 34vh; object-fit: contain; }
.customer-logo--small { width: clamp(64px, 14vmin, 130px); max-height: 12vh; object-fit: contain; }
.customer-title { margin: 0; font-size: clamp(26px, 7vmin, 66px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.customer-note { margin: 0; font-size: clamp(14px, 3vmin, 24px); opacity: .85; max-width: 40ch; line-height: 1.35; }
.customer-attract { font: 700 clamp(12px, 3vmin, 26px)/1.4 var(--label, monospace); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.customer-screen--cart {
  align-content: stretch; justify-items: stretch; text-align: left;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(12px, 2.6vmin, 28px) clamp(14px, 3vmin, 34px);
}
.customer-header { display: flex; align-items: center; margin-bottom: clamp(6px, 1.6vmin, 14px); }
.customer-header img { margin-right: 16px; }
.customer-header h1 { margin: 0; font-size: clamp(18px, 4vmin, 40px); }
.customer-lines { display: block; overflow-y: auto; min-height: 0; }
.customer-line {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid rgba(244,241,220,.18);
  font-size: clamp(19px, 2.4vw, 28px);
}
.customer-line-qty { opacity: .65; font-variant-numeric: tabular-nums; }
.customer-line-amount { font-variant-numeric: tabular-nums; font-weight: 700; }
.customer-totals { margin-top: clamp(8px, 2vmin, 20px); padding-top: clamp(8px, 1.8vmin, 16px); border-top: 3px solid #e6d24a; }
.customer-total { display: grid; grid-template-columns: 1fr auto; font-size: clamp(15px, 3vmin, 28px); padding: 2px 0; }
.customer-total span:last-child { font-variant-numeric: tabular-nums; }
.customer-total--grand span { font-size: clamp(22px, 5vmin, 46px); font-weight: 800; color: #e6d24a; }
.customer-tip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(96px, 18vmin, 150px), 1fr)); gap: clamp(8px, 2vmin, 18px); width: min(760px, 92vw); }
.customer-tip-grid--busy { opacity: .5; pointer-events: none; }
.customer-tip-button {
  display: grid; justify-items: center; gap: 6px; padding: 30px 14px;
  border: 3px solid #f4f1dc; border-radius: 18px; background: transparent; color: #f4f1dc;
  font: inherit; cursor: pointer;
}
.customer-tip-button strong { font-size: clamp(20px, 5vmin, 42px); }

/* The join prompt rides along with the sale rather than living only on the
   idle screen, so a shopper can sign in while their items are still being
   scanned or in the moments after paying. Anchored with explicit
   bottom/left/right (not `inset`) and a flex row without `gap` — the PAX
   L1400's Chrome 83 supports neither. */
.customer-join-strip {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: block; max-width: 90vw; padding: 18px 34px;
  border: 3px solid #e4d34a; border-radius: 999px;
  background: #e4d34a; color: #0d3b28;
  font: inherit; text-align: center; cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.customer-join-strip[hidden] { display: none; }
/* The cart screen has no spare space: the totals own the bottom and the lines
   own the middle, so a floating prompt covers either the money or a price.
   The one genuinely empty region is the header row beside "Your order", so on
   this screen the prompt becomes a single-line pill short enough to sit in
   it. The subtitle goes — "Earn points" alone is clear, and a covered price
   is worse than a terse invitation. */
.customer-join-strip--corner {
  bottom: auto; left: auto; right: clamp(12px, 2.5vmin, 28px); top: clamp(6px, 1.4vmin, 14px);
  transform: none; padding: clamp(6px, 1.2vmin, 12px) clamp(14px, 3vmin, 26px);
}
.customer-join-strip strong { display: block; font-size: clamp(15px, 3vmin, 30px); font-weight: 800; }
.customer-join-strip small { display: block; margin-top: 2px; font-size: clamp(11px, 2vmin, 18px); opacity: .75; }
.customer-join-strip--corner small { display: none; }
.customer-join-strip--corner strong { font-size: clamp(13px, 2.4vmin, 22px); }
.customer-join-back {
  margin-top: 6px; padding: 14px 30px;
  border: 2px solid rgba(244, 241, 220, .5); border-radius: 999px;
  background: transparent; color: #f4f1dc; font: inherit;
  font-size: clamp(15px, 1.8vw, 21px); cursor: pointer;
}
.customer-join-back[hidden] { display: none; }

.customer-tip-button small { font-size: clamp(11px, 2.4vmin, 20px); opacity: .7; }
.customer-tip-button:active { background: #e6d24a; color: #0d3b28; }

/* loyalty enrolment on the customer screen */
.customer-join { width: min(720px, 92vw); display: grid; gap: clamp(8px, 2vmin, 18px); }
.customer-join-input {
  width: 100%; min-height: 74px; padding: 16px 20px; margin-bottom: 16px;
  border: 3px solid #f4f1dc; border-radius: 16px; background: rgba(244,241,220,.08);
  color: #f4f1dc; font: 700 clamp(22px, 3vw, 34px)/1 var(--label, monospace);
  text-align: center; letter-spacing: .06em;
}
.customer-join-input::placeholder { color: rgba(244,241,220,.45); letter-spacing: .02em; }
.customer-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(6px, 1.6vmin, 14px); }
.customer-keypad button {
  min-height: 84px; border: 3px solid #f4f1dc; border-radius: 16px; background: transparent;
  color: #f4f1dc; font: 700 clamp(24px, 3vw, 34px)/1 inherit; cursor: pointer;
}
.customer-keypad button:active { background: #e6d24a; color: #0d3b28; }
.customer-keypad button.is-go { background: #e6d24a; color: #0d3b28; border-color: #e6d24a; }
.customer-points { margin-top: 10px; font: 700 clamp(16px, 2vw, 22px)/1.4 var(--label, monospace); color: #e6d24a; }

/* Chrome 83 lacks flex `gap`; grid gap above is fine, these are the flex rows */
@supports not (inset: 0) {
  .customer-header img { margin-right: 16px; }
  .pos-keypad-actions > * { margin-right: 10px; }
}

.customer-consent {
  display: block; margin: 0 0 18px; padding: 14px 16px; text-align: left;
  border: 2px solid rgba(244,241,220,.4); border-radius: 14px;
  font-size: clamp(14px, 1.6vw, 19px); line-height: 1.4; color: #f4f1dc;
}
.customer-consent input { width: 30px; height: 30px; margin-right: 12px; vertical-align: middle; }
.customer-consent span { vertical-align: middle; }


/* The one thing a shopper can do on the idle screen. Solid brand yellow
   against the deep green rather than an outline, because an outlined button
   on a dark field reads as decoration and this needs to read as an
   invitation. Grid, not flex, so the PAX's Chrome 83 honours the gap. */
.customer-cta {
  display: grid; gap: clamp(2px, .8vmin, 8px); justify-items: center;
  padding: clamp(14px, 3.4vmin, 34px) clamp(20px, 5vmin, 48px);
  border: 0; border-radius: clamp(14px, 2.6vmin, 24px);
  background: #e6d24a; color: #0d3b28; -webkit-text-fill-color: #0d3b28; font: inherit; cursor: pointer;
  box-shadow: 0 clamp(4px, 1.2vmin, 12px) clamp(12px, 3vmin, 30px) rgba(0, 0, 0, .32);
}
.customer-cta strong { font-size: clamp(20px, 5.4vmin, 46px); font-weight: 800; letter-spacing: -.01em; }
.customer-cta small { font-size: clamp(12px, 2.6vmin, 22px); opacity: .72; }
.customer-cta:active { background: #f4f1dc; }

/* ---- customer display: short, wide screens -------------------------------
   The till's customer screen is a phone lying on its side: roughly 823x384
   CSS px. Stacking logo over tagline over card overflows a 384px height
   while leaving most of the width blank, so below this height the idle and
   join screens turn into two columns instead of shrinking into illegibility.
   Written with grid-template-areas rather than flex order so the DOM keeps
   reading top-to-bottom for anything that linearises it.                    */
@media (max-height: 560px) and (orientation: landscape) {
  /* The whole point of this screen is that a shopper can see their order.
     At full padding only four lines clear the fold on a 384px-tall display,
     so a six-item basket hides a third of itself behind a scroll the
     customer has no reason to expect. Trimming the row padding rather than
     the type keeps every line legible and fits about seven. */
  .customer-line { padding: clamp(4px, 1.2vmin, 12px) 0; gap: clamp(8px, 2vmin, 16px); }

  .customer-screen[data-screen="idle"] {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-content: center; justify-items: center;
    column-gap: clamp(16px, 4vmin, 48px);
  }
  .customer-screen[data-screen="idle"] .customer-logo--big {
    grid-column: 1; grid-row: 1; max-height: 52vh; width: min(520px, 47vw);
  }
  .customer-screen[data-screen="idle"] .customer-attract {
    grid-column: 1; grid-row: 2; max-width: 47vw;
    font-size: clamp(10px, 2.4vmin, 20px); letter-spacing: .1em;
  }
  .customer-screen[data-screen="idle"] .customer-cta {
    grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 100%;
  }

  /* The keypad is the tightest screen there is: title, note, input, consent
     and twelve keys. Side by side it fits without any of it shrinking to
     the point a thumb misses. */
  .customer-screen[data-screen="join"] { align-content: center; }
  /* The heading is the first thing to go: the button they just pressed said
     "Earn points", so the instruction is worth more than the label. Keeping
     both overflows a 384px-tall viewport and the title clips off the top. */
  .customer-screen[data-screen="join"] .customer-title { display: none; }
  .customer-screen[data-screen="join"] .customer-note {
    font-size: clamp(11px, 2.4vmin, 18px); max-width: 46vw; justify-self: start; text-align: left;
  }
  .customer-screen[data-screen="join"] .customer-join {
    width: min(1000px, 96vw);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start; column-gap: clamp(14px, 3vmin, 32px);
  }
  .customer-screen[data-screen="join"] .customer-join-input { grid-column: 1; }
  .customer-screen[data-screen="join"] .customer-consent { grid-column: 1; }
  .customer-screen[data-screen="join"] .customer-keypad { grid-column: 2; grid-row: 1 / span 3; }
  /* The keypad sets the height. Anything stacked BELOW it — the result line
     and the way back — pushes the whole screen past the viewport and clips
     the input off the top. The left column is empty under the consent box,
     so they live there instead of adding height. */
  .customer-screen[data-screen="join"] { position: relative; }
  .customer-screen[data-screen="join"] .customer-points {
    position: absolute; left: clamp(14px, 3.5vmin, 40px); bottom: clamp(52px, 12vmin, 96px);
    max-width: 44vw; margin: 0; text-align: left;
  }
  .customer-screen[data-screen="join"] .customer-join-back {
    position: absolute; left: clamp(14px, 3.5vmin, 40px); bottom: clamp(10px, 2.4vmin, 24px);
    margin: 0; padding: clamp(8px, 1.8vmin, 14px) clamp(16px, 3.5vmin, 30px);
  }
  .customer-screen[data-screen="join"] .customer-keypad button { padding: clamp(6px, 1.4vmin, 16px); }

  /* Short screens have no spare bottom edge — anything floating there lands
     on top of content. */
  .customer-join-strip {
    bottom: auto; left: auto; right: clamp(12px, 2.5vmin, 28px); top: clamp(10px, 2.2vmin, 24px);
    transform: none; padding: clamp(8px, 1.6vmin, 14px) clamp(14px, 3vmin, 26px);
  }
}

/* Very short screens: reclaim the vertical padding first, since that is the
   cheapest space to give back before type starts shrinking. */
@media (max-height: 420px) {
  .customer-screen { padding: 10px 16px; gap: 6px; }
  .customer-logo--big { max-height: 40vh; }
}
/* ---- register Catalog editor (touch-first; Chrome-83 safe: grid gap only,
   no aspect-ratio, no flex gap, no :has) ---- */
.pos-cat-bar { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin: 12px 0; }
.pos-cat-input { width: 100%; padding: 14px 16px; font-size: 18px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 12px; background: #fff; box-sizing: border-box; }
.pos-cat-list { display: grid; gap: 10px; }
.pos-cat-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 10px 14px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 14px; background: #fff; cursor: pointer; }
.pos-cat-row.is-dim { opacity: .55; }
.pos-cat-row-main { display: grid; gap: 2px; }
.pos-cat-row-main b { font-size: 18px; }
.pos-cat-row-main small { color: #4a6152; font-size: 14px; }
.pos-cat-row-go { font-size: 28px; color: #4a6152; }
.pos-cat-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 2px solid var(--pos-line, #1f3d2b); }
.pos-cat-thumb--empty { background: repeating-linear-gradient(45deg, #eee, #eee 6px, #fff 6px, #fff 12px); }

.pos-cat-form { display: grid; gap: 16px; margin-top: 8px; }
.pos-cat-field { display: grid; gap: 6px; }
.pos-cat-field > span { font-weight: 700; font-size: 14px; }
.pos-cat-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: end; }
.pos-cat-check { grid-template-columns: auto 1fr; align-items: center; }
.pos-cat-check input { width: 26px; height: 26px; }
.pos-cat-form textarea.pos-cat-input { resize: vertical; }
.pos-cat-save { width: 100%; padding: 18px; font-size: 20px; margin-top: 6px; }

.pos-cat-imgs { display: grid; grid-template-columns: repeat(auto-fill, 120px); gap: 12px; }
.pos-cat-img { position: relative; width: 120px; height: 120px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 12px; overflow: hidden; background: #fff; }
.pos-cat-img.is-primary { outline: 4px solid var(--pos-acid, #d9f24a); outline-offset: -4px; }
.pos-cat-img img { width: 100%; height: 100%; object-fit: cover; }
.pos-cat-img-badge { position: absolute; top: 5px; left: 5px; background: var(--pos-acid, #d9f24a); color: #143b28; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; }
.pos-cat-img-ctrls { position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-auto-flow: column; gap: 2px; padding: 3px; background: rgba(20,59,40,.82); }
.pos-cat-img-ctrls .pos-btn { padding: 5px 4px; font-size: 12px; }
.pos-cat-img-actions { display: grid; gap: 10px; margin-top: 10px; }

.pos-cat-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.pos-cat-chip { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: center; padding: 8px 14px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 22px; background: #fff; }
.pos-cat-chip input { width: 22px; height: 22px; }
.pos-cat-chip.is-on { background: var(--pos-acid, #d9f24a); }

/* max-height + scroll: a native <dialog> clips overflowing content with no
   scrollbar, which hid mystery bags below the fold on the register */
.pos-cat-picker { border: 2px solid var(--pos-line, #1f3d2b); border-radius: 16px; padding: 20px; max-width: min(720px, 94vw); max-height: 86vh; overflow-y: auto; }
.pos-cat-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; margin: 12px 0; }
.pos-cat-pick { padding: 0; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 10px; overflow: hidden; height: 100px; background: #fff; }
.pos-cat-pick img { width: 100%; height: 100%; object-fit: cover; }

/* ---- mystery bags (builder + picker; Chrome-83 safe: grid gap only) ---- */
.pos-bag-results { display: grid; gap: 8px; }
.pos-bag-result { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 12px; background: #fff; }
.pos-bag-result-info { display: grid; gap: 2px; min-width: 0; }
.pos-bag-result b { font-size: 16px; }
.pos-bag-result small { color: #4a6152; font-size: 13px; }
.pos-bag-thumb { width: 48px; height: 48px; flex: 0 0 auto; object-fit: cover; border-radius: 8px; border: 2px solid var(--pos-line, #1f3d2b); }
.pos-bag-thumb.is-empty { display: flex; align-items: center; justify-content: center; font-size: 22px; background: repeating-linear-gradient(45deg, #eee, #eee 6px, #fff 6px, #fff 12px); }
.pos-bag-build { display: grid; gap: 8px; }
.pos-bag-item { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 12px; background: #fff; }
.pos-bag-item-name { font-weight: 700; }
.pos-bag-qty { display: grid; grid-auto-flow: column; gap: 8px; align-items: center; }
.pos-bag-qty .pos-btn { min-width: 44px; padding: 6px 10px; }
.pos-bag-list { display: grid; gap: 10px; }
.pos-bag-card { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 2px solid var(--pos-line, #1f3d2b); border-radius: 14px; background: #fff; }
.pos-bag-card-main { display: grid; gap: 2px; }
.pos-bag-card-main b { font-size: 17px; }
.pos-bag-card-main small { color: #4a6152; font-size: 14px; }
button.pos-bag-card.pos-bag-pick { width: 100%; text-align: left; cursor: pointer; }

/* ---- cash tender: quick bills + live change (Chrome-83 safe: grid gap) ---- */
.pos-cash { display: grid; gap: 12px; }
.pos-cash-head {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  padding: 12px 16px; border: 2px solid #0d3b28; border-radius: 12px;
  background: #0d3b28; color: #f4f1dc;
}
.pos-cash-head-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.pos-cash-head-amount { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pos-cash-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pos-cash-quick-btn {
  display: grid; gap: 2px; padding: 12px 10px; text-align: center; cursor: pointer;
  border: 2px solid #0d3b28; border-radius: 12px; background: #fffdf2; color: #0d3b28;
  box-shadow: 3px 3px 0 #0d3b28; font: inherit;
}
.pos-cash-quick-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #0d3b28; }
.pos-cash-quick-btn b { font-size: 19px; font-variant-numeric: tabular-nums; }
.pos-cash-quick-btn small { font-size: 12px; color: #4f6a5c; }
.pos-cash-quick-btn.is-exact { background: #e6d24a; }
.pos-cash-hint { margin: 2px 0 0; font-size: 13px; color: #4f6a5c; }
.pos-cash-change {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  padding: 12px 16px; border: 2px dashed #0d3b28; border-radius: 12px; background: #fffdf2;
}
.pos-cash-change-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #4f6a5c; }
.pos-cash-change-amount { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; color: #0d3b28; }
.pos-cash-change[data-state="due"] { border-style: solid; border-color: #1c6b3a; background: #e7f1e5; }
.pos-cash-change[data-state="due"] .pos-cash-change-amount { color: #1c6b3a; }
.pos-cash-change[data-state="due"] .pos-cash-change-label { color: #1c6b3a; }
.pos-cash-change[data-state="exact"] { border-style: solid; background: #f6f2e0; }
.pos-cash-change[data-state="short"] { border-style: solid; border-color: #c1452f; background: #f7ddd6; }
.pos-cash-change[data-state="short"] .pos-cash-change-amount,
.pos-cash-change[data-state="short"] .pos-cash-change-label { color: #c1452f; }

/* ---- online orders queue (register) ------------------------------------ */
.pos-nav-badge { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 6px; border-radius: 999px; background: #c1452f; color: #fffdf2; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
.pos-orders { display: grid; gap: 14px; margin-top: 14px; }
.pos-order { border: 2px solid #0d3b28; border-radius: 12px; background: #fffdf2; padding: 14px; box-shadow: 3px 3px 0 rgba(13, 59, 40, 0.18); }
.pos-order.is-ship { border-left-width: 8px; border-left-color: #2e86c1; }
.pos-order.is-pickup { border-left-width: 8px; border-left-color: #e6a52e; }
.pos-order-head { display: flex; align-items: center; }
.pos-order-type { font-weight: 800; font-size: 13px; letter-spacing: 0.04em; margin-right: 10px; }
.pos-order-num { font-weight: 800; color: #0d3b28; }
.pos-order-total { margin-left: auto; font-weight: 800; font-size: 18px; }
.pos-order-sub { display: flex; justify-content: space-between; margin-top: 6px; color: #5c6b60; font-weight: 600; font-size: 14px; }
.pos-order-chips { display: flex; flex-wrap: wrap; margin-top: 6px; }
.pos-chip { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; background: #eee7cf; color: #0d3b28; margin: 2px 6px 2px 0; }
.pos-chip.is-done { background: #589535; color: #fffdf2; }
.pos-order-items { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 3px; }
.pos-order-items li { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.pos-order-addr { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #c9c2a8; display: grid; gap: 2px; font-size: 14px; }
.pos-order-addr b { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #5c6b60; }
.pos-order-addr span { white-space: pre-line; }
.pos-order-acts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.pos-order-toast { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 2147483000; min-width: 300px; max-width: 460px; display: grid; gap: 3px; padding: 14px 16px; border: 3px solid #0d3b28; border-radius: 14px; background: #0d3b28; color: #fffdf2; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25); }
.pos-order-toast.is-ship { border-color: #2e86c1; }
.pos-order-toast.is-pickup { border-color: #e6a52e; }
.pos-order-toast b { font-size: 15px; }
.pos-order-toast span { font-size: 13px; opacity: 0.9; }
.pos-order-toast .pos-btn { margin-top: 8px; }
.pos-order-toast.is-leaving { opacity: 0; transition: opacity 0.4s ease; }

/* SMS consent stays readable and optional on the store display. */
.customer-consent { font-size: clamp(12px, 1.7vmin, 18px); line-height: 1.4; text-align: left; }
.customer-sms-links { margin: 0; font-size: clamp(12px, 1.6vmin, 16px); line-height: 1.4; }
.customer-sms-links a { color: inherit; text-decoration: underline; }
.customer-screen[data-screen="join"] { overflow-y: auto; }
@media (min-width: 700px) { .customer-screen[data-screen="join"] .customer-sms-links { grid-column: 1; } }
.rewards-consent-card { border: 2px solid currentColor; border-radius: 20px; padding: 24px; margin: 28px 0; background: var(--cream, #f4f1dc); }

.customer-sms-links button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.customer-sms-policy { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; overflow-y: auto; padding: 18px; background: #0d3b28; color: #f4f1dc; }
.customer-sms-policy[hidden] { display: none; }
.customer-sms-policy article { max-width: 700px; margin: auto; font-size: 16px; line-height: 1.5; }
.customer-sms-policy button { min-height: 48px; padding: 12px 24px; border: 0; border-radius: 12px; background: #e6d24a; color: #0d3b28; font: inherit; }
@media (orientation: landscape) and (max-height: 540px) {
  .customer-screen[data-screen="join"] { align-content: start; padding-top: 10px; padding-bottom: 10px; }
  .customer-screen[data-screen="join"] .customer-join-input { min-height: 54px; padding: 10px; margin-bottom: 0; }
  .customer-screen[data-screen="join"] .customer-keypad button { min-height: 60px; }
  .customer-screen[data-screen="join"] .customer-sms-links { grid-column: 1; }
}

.rewards-signup-preview { margin: 24px 0; }
.rewards-signup-preview img { display: block; max-width: 100%; height: auto; border-radius: 12px; }
.rewards-signup-preview figcaption { margin-top: 8px; font-size: 14px; }

/* The public rewards form shares the storefront's green and yellow palette. */
.rewards-page { max-width: 760px; }
.rewards-page h1 { font-size: clamp(2rem, 6vw, 3.5rem); }
.rewards-form { display: grid; gap: 12px; margin: 28px 0; }
.rewards-form[hidden], .rewards-success[hidden] { display: none; }
.rewards-form > label { font-size: 1rem; font-weight: 700; }
.rewards-form > label span { font-weight: 400; }
.rewards-form > input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 52px; padding: 12px 16px; border: 2px solid #0d3b28; border-radius: 10px; background: #fffdf2; color: #0d3b28; font: inherit; font-size: 1rem; }
.rewards-page .rewards-help { font-size: 0.875rem; line-height: 1.6; margin: 0 0 10px; }
.rewards-opt-in { display: flex; align-items: flex-start; gap: 12px; padding: 18px; margin-top: 12px; border: 2px solid #0d3b28; border-radius: 12px; font-size: 1rem; line-height: 1.6; }
.rewards-opt-in input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 4px; accent-color: #0d3b28; }
.rewards-form button { min-height: 54px; padding: 14px 22px; border: 2px solid #0d3b28; border-radius: 12px; background: #e6d24a; color: #0d3b28; font: inherit; font-weight: 800; cursor: pointer; }
.rewards-form button:disabled { opacity: 0.65; cursor: wait; }
.rewards-form :focus-visible, .rewards-success:focus-visible { outline: 3px solid #0d3b28; outline-offset: 4px; }
.rewards-form [role="alert"] { margin: 0; font-size: 1rem; }
.rewards-success { margin: 28px 0; padding: 24px; border: 2px solid #0d3b28; border-radius: 14px; background: #e6d24a; color: #0d3b28; }

/* Cashier rewards prompt: matches the register controls and fits the L1400. */
.pos-rewards-dialog { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); box-sizing: border-box; overflow-y: auto; padding: 24px; color: #0d3b28; background: #fffdf2; }
.pos-rewards-dialog h2 { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.2; }
.pos-rewards-dialog .pos-btn { min-height: 48px; white-space: normal; font-size: 1rem; }
.pos-rewards-dialog > .pos-btn { display: block; width: 100%; margin-top: 10px; }
.pos-rewards-script { font-size: 1.25rem; line-height: 1.4; font-weight: 700; }
.pos-rewards-form { display: grid; gap: 12px; }
.pos-rewards-form input { min-height: 48px; font-size: 1rem; }
.pos-rewards-results { display: grid; gap: 12px; max-height: 32vh; overflow-y: auto; margin: 14px 0; }
.pos-rewards-person { display: grid; gap: 6px; padding: 14px; border: 2px solid #0d3b28; border-radius: 10px; font-size: 1rem; overflow-wrap: anywhere; }
.pos-rewards-person .pos-btn { margin-top: 6px; }
.pos-rewards-dialog .pos-field-hint, .pos-rewards-dialog .pos-note { font-size: 0.875rem; line-height: 1.5; }
.pos-rewards-dialog :focus-visible { outline: 3px solid #0d3b28; outline-offset: 3px; }