@seatlayer/js 0.50.2 → 0.52.0

package/dist/index.js

@@ -2114,6 +2114,13 @@ var BuyerAssetObjectUrls = class {
   }
 };
 
+// src/SeatPicker.ts
+import {
+  createMinimapTransform,
+  minimapPointToWorld,
+  minimapViewportPlan
+} from "@seatlayer/core/picker/minimapGeometry";
+
 // src/offerAvailability.ts
 var SALE_STATES = [
   "on-sale",
@@ -2248,6 +2255,16 @@ var DEFAULT_MAX_SELECTION2 = 10;
 var EXTEND_PROMPT_MS = 6e4;
 var MAX_3D_SEATS_DEFAULT = 6e4;
 var MAX_3D_SECTION_PILLS = 12;
+function tfStatic(key, fallback) {
+  const v = t2(key);
+  return v === key ? fallback : v;
+}
+var chartsLoadedThisPage = /* @__PURE__ */ new Set();
+function markChartLoaded(eventKey) {
+  const seen = chartsLoadedThisPage.has(eventKey);
+  chartsLoadedThisPage.add(eventKey);
+  return seen;
+}
 function pointInPolygon(x, y, poly) {
   let inside = false;
   for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
@@ -2350,9 +2367,13 @@ var CSS = (
      the WIDGET's meanings, not an org's brand: premium gold, environment
      warning, danger, success. Hosts can still override them with CSS. */
   --sl-premium:#e8c15a;--sl-premium-deep:#c9a24b;--sl-premium-ink:#1c1608;
-  --sl-warn:#d8a425;--sl-danger:#e5484d;--sl-success:#22a06b}
+  --sl-premium-text:color-mix(in srgb,var(--sl-premium-deep) 48%,var(--sl-text));
+  --sl-warn:#d8a425;--sl-warn-text:color-mix(in srgb,var(--sl-warn) 48%,var(--sl-text));
+  --sl-danger:#e5484d;--sl-success:#22a06b}
 .sl-picker *{box-sizing:border-box;margin:0;padding:0}
-.sl-picker button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
+/* Keep the reset intentionally specificity-free. Standalone map and panel
+   controls must be able to establish their own token surfaces in either theme. */
+.sl-picker :where(button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
 
 /* header */
 .sl-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--sl-line);flex:none}
@@ -2422,11 +2443,30 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-map{min-height:0;flex:1}
 .sl-picker[data-layout="narrow"] .sl-side{width:100%;border-left:0;border-top:1px solid var(--sl-line);
   flex:none;height:min(72%,480px);overflow:hidden;transition:height .3s cubic-bezier(.2,.8,.2,1);overscroll-behavior:contain}
-.sl-picker[data-layout="narrow"][data-sheet="open"][data-has-selection="false"] .sl-side{height:min(252px,52%)}
+.sl-picker[data-layout="narrow"][data-sheet="open"][data-has-selection="false"] .sl-side{height:min(380px,64%)}
+/* With the price list expanded the sheet takes the with-selection height so
+   the tray (cart + best-seats) is never crushed under the fixed-size list. */
+.sl-picker[data-layout="narrow"][data-sheet="open"][data-prices-open="true"] .sl-side{height:min(480px,74%)}
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side{height:76px;overflow:hidden}
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-side > :not(.sl-sheet-head){display:none}
-.sl-picker[data-layout="narrow"] .sl-tray{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
+.sl-picker[data-layout="narrow"] .sl-tray{flex:1;min-height:96px;overflow-y:auto;overscroll-behavior:contain}
+.sl-picker[data-layout="narrow"][data-prices-open="true"] .sl-tray{min-height:48px}
+.sl-picker[data-layout="narrow"] .sl-prices{max-height:150px;overflow-y:auto;overscroll-behavior:contain}
 .sl-picker[data-layout="narrow"] .sl-foot{position:static;background:var(--sl-bg)}
+/* NARROW FOOT SAYS EVERYTHING ONCE (owner report: with a hold the footer ate
+   ~190px and the ticket list got a sliver). The sheet head already carries
+   "N tickets \xB7 $total" and the header pill already ticks the clock \u2014 so the
+   total row hides, the secured note collapses to one compact line, and the
+   badge tucks in. The tray gets the pixels; a thin scrollbar shows there is
+   more to scroll. */
+.sl-picker[data-layout="narrow"] .sl-total{display:none}
+.sl-picker[data-layout="narrow"] .sl-foot{padding:8px 12px 8px}
+.sl-picker[data-layout="narrow"] .sl-hold-note{margin-bottom:6px;padding:5px 9px}
+.sl-picker[data-layout="narrow"] .sl-hold-note svg{display:none}
+.sl-picker[data-layout="narrow"] .sl-hold-note b{display:inline;margin-right:6px;font-size:11px}
+.sl-picker[data-layout="narrow"] .sl-hold-copy{display:inline;white-space:normal;font-size:10.5px}
+.sl-picker[data-layout="narrow"] .sl-powered{margin-top:4px;padding:2px 8px;font-size:11px}
+.sl-picker[data-layout="narrow"] .sl-tray{scrollbar-width:thin}
 .sl-picker[data-layout="narrow"] .sl-foot.empty{display:none}
 .sl-picker[data-layout="narrow"] .sl-sheet-head{order:0}
 .sl-picker[data-layout="narrow"] .sl-seats-sec{display:none}
@@ -2434,6 +2474,7 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-filtersec{order:3}
 .sl-picker[data-layout="narrow"] .sl-filters{order:4}
 .sl-picker[data-layout="narrow"] .sl-prices-sec{order:5}
+.sl-picker[data-layout="narrow"] .sl-prices-hint{order:6}
 .sl-picker[data-layout="narrow"] .sl-pricef{order:6}
 .sl-picker[data-layout="narrow"] .sl-prices{order:7}
 .sl-picker[data-layout="narrow"] .sl-foot{order:8}
@@ -2441,6 +2482,7 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-filtersec,
 .sl-picker[data-layout="narrow"] .sl-filters,
 .sl-picker[data-layout="narrow"] .sl-prices-sec,
+.sl-picker[data-layout="narrow"] .sl-prices-hint,
 .sl-picker[data-layout="narrow"] .sl-prices{display:none!important}
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filtersec,
 .sl-picker[data-layout="narrow"][data-has-selection="true"] .sl-filters,
@@ -2458,7 +2500,13 @@ var CSS = (
    head is the tap/swipe toggle target (min 44px), so it reads as one control. */
 .sl-sheet-head{display:none;flex-direction:column;justify-content:center;padding:6px 12px 8px;min-height:56px;
   cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;flex:none}
-.sl-picker[data-layout="narrow"] .sl-sheet-head{display:flex;min-height:64px;padding:4px 10px 6px}
+.sl-picker[data-layout="narrow"] .sl-sheet-head{display:flex;min-height:52px;padding:3px 10px 5px}
+/* OPEN sheet: the head is context, not controls \u2014 the pill it carries at peek
+   ("Best seats"/"Continue") duplicates the card and CTA right below it, and
+   every saved pixel is tray room (owner call 2026-08-14). */
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-sheet-head{min-height:42px}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-sheet-bar{min-height:32px}
+.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-sheet-peek .go{display:none}
 .sl-picker[data-layout="narrow"][data-sheet="peek"] .sl-sheet-head{height:100%}
 .sl-sheet-grab{width:36px;height:4px;border-radius:999px;background:var(--sl-muted);opacity:.55;margin:1px auto 5px}
 .sl-sheet-bar{display:flex;align-items:center;gap:8px;min-height:44px}
@@ -2499,9 +2547,19 @@ var CSS = (
    sheet brings it back, exactly like the filters row above. The tray hint comes
    back with it: the first-time buyer on a phone needs the instruction more than
    the desktop buyer, not less. */
-.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-prices-sec{display:flex!important}
-.sl-picker[data-layout="narrow"][data-sheet="open"] .sl-prices{display:flex!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"][data-prices-open="true"] .sl-prices-sec{display:flex!important}
+/* MOBILE SPACE BELONGS TO THE CART (owner call 2026-08-14): the price list is
+   one tap away behind the "Ticket prices" row, not a permanent tenant. Zone
+   flags and section taps already answer "what does it cost" in context. */
+.sl-picker[data-layout="narrow"][data-sheet="open"][data-prices-open="true"] .sl-prices-hint{display:block!important}
+.sl-picker[data-layout="narrow"][data-sheet="open"][data-prices-open="true"] .sl-prices{display:flex!important}
 .sl-picker[data-layout="narrow"][data-sheet="open"] .sl-tray-hint{display:block!important}
+/* The row reads as the toggle it is on narrow: chevron + pointer. */
+.sl-picker[data-layout="narrow"] .sl-prices-sec{cursor:pointer}
+.sl-picker[data-layout="narrow"] .sl-prices-sec::after{content:'';width:8px;height:8px;flex:none;margin-left:auto;
+  border-right:2px solid var(--sl-muted);border-bottom:2px solid var(--sl-muted);
+  transform:rotate(45deg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
+.sl-picker[data-layout="narrow"][data-prices-open="true"] .sl-prices-sec::after{transform:rotate(-135deg)}
 .sl-cbbtn{width:32px;height:32px;border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);
   color:var(--sl-text);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-cbbtn:hover{border-color:var(--sl-muted)}
@@ -2511,24 +2569,30 @@ var CSS = (
 .sl-offer{display:none;margin:12px 14px 2px;padding:12px;border:1px solid color-mix(in srgb,var(--sl-accent) 34%,var(--sl-line));
   border-radius:12px;background:color-mix(in srgb,var(--sl-accent) 8%,var(--sl-surface));color:var(--sl-text)}
 .sl-offer.has{display:block}.sl-offer-main{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
-.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent)}
+.sl-offer-copy{min-width:0}.sl-offer-kicker{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-accent-text)}
 .sl-offer-name{display:block;margin-top:2px;font-size:13px;font-weight:800;line-height:1.3}.sl-offer-line{display:block;margin-top:3px;font-size:11px;line-height:1.35;color:var(--sl-muted)}
 .sl-offer-info{position:relative;flex:none}.sl-offer-info>summary{list-style:none;width:25px;height:25px;border:1px solid var(--sl-line);border-radius:999px;
   display:grid;place-items:center;cursor:pointer;font-size:12px;font-weight:850;color:var(--sl-text);background:var(--sl-surface)}
-.sl-offer-info>summary::-webkit-details-marker{display:none}.sl-offer-info[open]>summary{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-offer-info>summary::-webkit-details-marker{display:none}.sl-offer-info[open]>summary{border-color:var(--sl-accent);color:var(--sl-accent-text)}
 .sl-offer-detail{margin-top:10px;padding-top:9px;border-top:1px solid var(--sl-line);font-size:10.5px;line-height:1.45;color:var(--sl-muted)}
 .sl-sec{padding:14px 14px 4px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--sl-muted);font-weight:700}
 .sl-prices-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:13px}
 .sl-price-select{min-height:32px;max-width:130px;padding:5px 28px 5px 9px;border:1px solid var(--sl-line);border-radius:9px;
-  background:var(--sl-surface);color:var(--sl-text);font:inherit;font-size:11px;font-weight:750;letter-spacing:0;text-transform:none}
+  background-color:var(--sl-surface);color:var(--sl-text);font:inherit;font-size:11px;font-weight:750;letter-spacing:0;text-transform:none}
+/* One sentence that teaches the whole colour code \u2014 a first-time buyer sees
+   "Head Tables \xB7 $165" and coloured dots with nothing connecting them. Gone
+   the moment they have seats (they've learned it) and while sales are closed. */
+.sl-prices-hint{padding:0 14px 7px;font-size:11px;line-height:1.45;color:var(--sl-muted)}
+.sl-picker[data-has-selection="true"] .sl-prices-hint,
+.sl-picker[data-sales-closed="true"] .sl-prices-hint{display:none}
 .sl-prices{display:flex;flex-direction:column;padding:4px 14px 8px;border-bottom:1px solid var(--sl-line)}
 .sl-prices-sec,.sl-prices,.sl-seats-sec{flex:none}
 .sl-price-row{display:flex;align-items:center;gap:7px;min-height:28px;font-size:12px;
   padding:0 6px;margin:0 -6px;border-radius:8px;cursor:pointer;transition:background .15s}
 .sl-price-row:hover,.sl-price-row:focus-visible{background:color-mix(in srgb,var(--sl-line) 40%,transparent)}
 .sl-price-row.sl-active{background:color-mix(in srgb,var(--sl-accent) 9%,transparent)}
-.sl-price-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent);font-size:10px;font-weight:750}
-.sl-price-row.sl-active .sl-price-label{color:var(--sl-accent)}
+.sl-price-was{margin-left:auto;color:var(--sl-muted);font-size:10px;text-decoration:line-through}.sl-price-offer{display:block;color:var(--sl-accent-text);font-size:10px;font-weight:750}
+.sl-price-row.sl-active .sl-price-label{color:var(--sl-accent-text)}
 .sl-dot{width:9px;height:9px;border-radius:50%;flex:none}
 .sl-price-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
 .sl-price-left{font-size:11px;color:var(--sl-muted);font-variant-numeric:tabular-nums}
@@ -2563,7 +2627,7 @@ var CSS = (
   box-shadow:inset 3px 0 0 color-mix(in srgb,var(--sl-accent) 72%,transparent)}
 .sl-ticket-state{width:17px;height:17px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;
   background:var(--sl-accent);color:var(--sl-accent-ink)}
-.sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent)}
+.sl-ticket-state.held{background:color-mix(in srgb,var(--sl-accent) 18%,var(--sl-surface));color:var(--sl-accent-text)}
 .sl-ticket-state svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
 .sl-chip-main{min-width:0;padding:8px 10px 8px 11px;display:flex;flex-direction:column;justify-content:center;gap:5px}
 .sl-chip-id{display:flex;gap:12px;min-width:0}
@@ -2606,7 +2670,7 @@ var CSS = (
 .sl-ga-qty span{min-width:16px;text-align:center;font-weight:800;font-variant-numeric:tabular-nums}
 
 /* footer */
-.sl-foot{position:relative;z-index:2;padding:12px 16px 14px;border-top:1px solid var(--sl-line);flex:none;
+.sl-foot{position:relative;z-index:2;padding:10px 16px 8px;border-top:1px solid var(--sl-line);flex:none;
   background:var(--sl-bg);box-shadow:0 -10px 24px -22px rgba(0,0,0,.72)}
 .sl-hold-note{display:none;align-items:center;gap:7px;margin-bottom:8px;padding:7px 8px;border-radius:var(--sl-r-sm);
   border:1px solid var(--sl-line);background:color-mix(in srgb,var(--sl-accent) 7%,var(--sl-surface));
@@ -2620,14 +2684,13 @@ var CSS = (
 .sl-hold-note>span{flex:1;min-width:0}
 .sl-hold-change{flex:none;min-height:30px;padding:5px 8px;border-radius:8px;border:1px solid var(--sl-line);
   color:var(--sl-text);font-size:10.5px;font-weight:750;white-space:nowrap}
-.sl-hold-change:hover,.sl-hold-change:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent)}
+.sl-hold-change:hover,.sl-hold-change:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent-text)}
 .sl-hold-change:disabled{opacity:.58;cursor:wait}
 .sl-total{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:10px}
 .sl-total b{font-size:17px;font-variant-numeric:tabular-nums}
 .sl-value-pop{animation:slValuePop .32s cubic-bezier(.2,.8,.2,1)}
-/* Primary checkout CTA. Scoped under .sl-picker so it OUTWEIGHS the
-   '.sl-picker button' reset (0,1,1) \u2014 an unscoped '.sl-cta' (0,1,0) loses to it
-   and the button renders as plain text with no accent fill. */
+/* Primary checkout CTA. The extra root scope documents that this is widget
+   chrome and keeps the contract resilient when embedded beside host styles. */
 .sl-picker .sl-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;
   padding:12px 16px;border-radius:var(--sl-r-sm);font-weight:800;font-size:14px;line-height:1.1;
   background:var(--sl-accent);color:var(--sl-accent-ink);
@@ -2638,8 +2701,8 @@ var CSS = (
 .sl-cta-spin,.sl-ba-spin{width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;
   animation:slspin .7s linear infinite;flex:none}
 /* Disabled ("Select seats"): quieter, but still a full-width button shape. */
-.sl-picker .sl-cta:disabled{background:var(--sl-surface);color:var(--sl-muted);opacity:1;
-  cursor:not-allowed;filter:none;transform:none}
+.sl-picker .sl-cta:disabled{background:color-mix(in srgb,var(--sl-bg) 35%,var(--sl-surface));color:var(--sl-muted);
+  box-shadow:inset 0 0 0 1px var(--sl-line);opacity:1;cursor:not-allowed;filter:none;transform:none}
 
 /* Chrome anchor regions (Feature 6) \u2014 every interactive map overlay is APPENDED
    INTO one of these positioned flex containers and flows/stacks within it, so no
@@ -2669,7 +2732,7 @@ var CSS = (
    in the same region, so no displacement hack is needed. */
 .sl-testbadge{display:inline-flex;align-items:center;padding:5px 10px;border-radius:7px;pointer-events:none;
   font-size:10px;font-weight:850;letter-spacing:.13em;line-height:1.2;text-transform:uppercase;white-space:nowrap;
-  color:var(--sl-warn);background:color-mix(in srgb,var(--sl-warn) 13%,var(--sl-surface));
+  color:var(--sl-warn-text);background:color-mix(in srgb,var(--sl-warn) 13%,var(--sl-surface));
   border:1px dashed color-mix(in srgb,var(--sl-warn) 55%,transparent)}
 
 /* zoom column (flows within the bottom-right region) */
@@ -2680,11 +2743,11 @@ var CSS = (
   color:var(--sl-text);font-size:17px;font-weight:700;display:flex;align-items:center;justify-content:center;transition:border-color .15s}
 .sl-zoom button:hover{border-color:var(--sl-muted)}
 .sl-zoom svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
-/* Full-screen promotion on phones: the capability existed (native + iOS overlay
-   + framed-host paths) but hid as the 4th unlabelled glyph in a corner stack.
-   On narrow layouts dockLayoutChrome moves the SAME button into the top-right
-   region beside Map|3D and this class dresses it as a labelled pill \u2014 the one
-   accelerator with the highest payoff on a small screen gets words. */
+/* Full-screen promotion: the capability existed (native + iOS overlay +
+   framed-host paths) but hid as the 4th unlabelled glyph in a corner stack \u2014
+   even the owner could not pick it out. dockLayoutChrome docks the SAME
+   button into the top-right region beside Map|3D on EVERY layout and this
+   class dresses it as a labelled pill. */
 .sl-zfs-lbl{display:none}
 .sl-fs-pill.sl-fs-pill{display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:40px;height:auto;
   padding:0 13px;gap:6px;border-radius:999px;font-size:11px;font-weight:800;
@@ -2692,6 +2755,16 @@ var CSS = (
 .sl-fs-pill.sl-fs-pill:hover{border-color:var(--sl-muted)}
 .sl-fs-pill svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
 .sl-fs-pill .sl-zfs-lbl{display:inline;letter-spacing:.02em;white-space:nowrap}
+/* In the header, icons carry it (owner call): square Full screen glyph, and
+   on narrow a price-tag toggle that opens the sheet with the list expanded. */
+.sl-head .sl-fs-pill{min-height:34px;min-width:34px;width:34px;padding:0;flex:none}
+.sl-head .sl-fs-pill .sl-zfs-lbl{display:none}
+.sl-prices-btn{display:none;align-items:center;justify-content:center;width:34px;min-height:34px;flex:none;
+  border-radius:999px;background:var(--sl-surface);border:1px solid var(--sl-line);color:var(--sl-text);transition:border-color .15s}
+.sl-prices-btn:hover{border-color:var(--sl-muted)}
+.sl-prices-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
+.sl-prices-btn[aria-pressed="true"]{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
+.sl-picker[data-layout="narrow"] .sl-prices-btn{display:inline-flex}
 
 /* toast + boot states (toast flows in the bottom-center region) */
 .sl-toast{transform:translateY(6px) scale(.98);max-width:100%;
@@ -2726,7 +2799,7 @@ var CSS = (
 .sl-extend-btn{flex:none;padding:8px 14px;border-radius:999px;font-weight:800;font-size:12.5px;
   background:var(--sl-accent);color:var(--sl-accent-ink);transition:filter .15s,opacity .15s}
 .sl-extend-btn:hover{filter:brightness(1.08)}
-.sl-extend-btn:disabled{opacity:.5;cursor:not-allowed}
+.sl-extend-btn:disabled{opacity:.62;cursor:not-allowed}
 
 /* booked confirmation overlay (covers the widget once the held seats are sold) */
 .sl-booked{position:absolute;inset:0;z-index:11;display:flex;flex-direction:column;align-items:center;
@@ -2753,7 +2826,7 @@ var CSS = (
   justify-content:center;text-align:center;gap:8px;padding:24px;
   background:color-mix(in srgb,var(--sl-bg) 82%,transparent);backdrop-filter:blur(4px)}
 .sl-soldout.on{display:flex}
-.sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent);font-weight:800}
+.sl-soldout-eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--sl-accent-text);font-weight:800}
 .sl-soldout-title{font-size:32px;font-weight:800;color:var(--sl-text);line-height:1.05}
 .sl-soldout-copy{max-width:360px;font-size:13px;color:var(--sl-muted);line-height:1.5}
 
@@ -2769,9 +2842,9 @@ var CSS = (
 /* "Powered by SeatLayer" attribution badge (side-panel foot) \u2014 the canonical
    Layered Rows mark + wordmark. Hidden when the host opts out or the org's paid
    theme sets hideBadge. */
-.sl-powered{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;
-  font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--sl-text);opacity:.72;
-  text-decoration:none;padding:6px 10px;border-radius:999px;width:fit-content;margin-inline:auto;
+.sl-powered{display:flex;align-items:center;justify-content:center;gap:5px;margin-top:2px;
+  font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--sl-text);opacity:.72;
+  text-decoration:none;padding:2px 8px;border-radius:999px;width:fit-content;margin-inline:auto;
   transition:opacity .15s ease,background-color .15s ease}
 .sl-powered:hover{opacity:1;background:color-mix(in srgb,var(--sl-text) 8%,transparent)}
 .sl-powered:focus-visible{opacity:1;outline:2px solid var(--sl-accent);outline-offset:2px}
@@ -2809,18 +2882,44 @@ var CSS = (
 .sl-confirm-field:first-child .sl-confirm-value{font-size:13.5px;line-height:1.25;white-space:normal;
   display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 .sl-confirm-cat{display:flex;align-items:center;gap:8px;padding:10px 12px;background:color-mix(in srgb,var(--sl-cat) 76%,var(--sl-surface))}
-.sl-confirm-cat .sl-dot{border:2px solid rgba(255,255,255,.78);width:11px;height:11px}
-.sl-confirm-cat-name{font-size:13.5px;font-weight:800;color:#fff;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.sl-confirm-price{font-size:17px;font-weight:850;color:#fff;font-variant-numeric:tabular-nums}
+.sl-confirm-cat .sl-dot{border:2px solid color-mix(in srgb,var(--sl-cat-ink) 78%,transparent);width:11px;height:11px}
+.sl-confirm-cat-name{font-size:13.5px;font-weight:800;color:var(--sl-cat-ink);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-confirm-price{font-size:17px;font-weight:850;color:var(--sl-cat-ink);font-variant-numeric:tabular-nums}
 .sl-confirm-body{padding:11px 12px 12px}
+.sl-confirm-tiers{display:grid;gap:6px;margin:0 0 9px;padding:0;border:0}
+.sl-confirm-tiers legend{margin:0 0 6px;padding:0;color:var(--sl-muted);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
+.sl-confirm-tier{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--sl-line);
+  border-radius:9px;color:var(--sl-text);background:color-mix(in srgb,var(--sl-bg) 72%,var(--sl-surface));text-align:left}
+.sl-confirm-tier:hover{border-color:color-mix(in srgb,var(--sl-accent) 58%,var(--sl-line))}
+.sl-confirm-tier[aria-pressed="true"]{border-color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 13%,var(--sl-surface));
+  box-shadow:inset 3px 0 0 var(--sl-accent)}
+.sl-confirm-tier-copy{min-width:0;flex:1;display:grid;gap:2px}
+.sl-confirm-tier-name{min-width:0;font-size:12.5px;font-weight:800}
+.sl-confirm-tier-note,.sl-tier-note{color:var(--sl-muted);font-size:10.5px;line-height:1.3}
+.sl-confirm-tier[aria-pressed="true"] .sl-confirm-tier-note{color:var(--sl-text)}
+.sl-confirm-tier-price{font-size:13px;font-weight:850;font-variant-numeric:tabular-nums}
 .sl-confirm-row{display:flex;gap:8px;margin-top:10px}
 .sl-confirm-row button{flex:1;min-height:44px;padding:9px 12px;border-radius:9px;font-weight:800;font-size:13px}
 .sl-confirm-add{background:var(--sl-accent)!important;color:var(--sl-accent-ink)!important;display:flex;align-items:center;justify-content:center;gap:7px}
 .sl-confirm-add svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
 .sl-confirm-cancel{background:color-mix(in srgb,var(--sl-line) 44%,transparent)!important;border:1px solid var(--sl-line)!important;color:var(--sl-muted)!important}
 .sl-confirm-cancel:hover{color:var(--sl-text)}
-.sl-picker[data-layout="narrow"] .sl-confirm{left:50%!important;top:auto!important;bottom:14px;width:min(342px,calc(100% - 24px));
+.sl-picker[data-layout="narrow"] .sl-confirm{left:50%!important;top:auto!important;bottom:14px;width:min(310px,calc(100% - 24px));
   transform:translateX(-50%);animation:slConfirmMobileIn .24s cubic-bezier(.2,.8,.2,1) both}
+/* Phone-size confirm card (owner call 2026-08-14): same content \u2014 identity,
+   price band, view photo, 3D link \u2014 on a tighter grid. The values stay large
+   enough to double-check against the map; buttons keep tap-size. */
+.sl-picker[data-layout="narrow"] .sl-confirm-field{padding:9px 9px 8px}
+.sl-picker[data-layout="narrow"] .sl-confirm-value{font-size:15px}
+.sl-picker[data-layout="narrow"] .sl-confirm-cat{padding:8px 10px}
+.sl-picker[data-layout="narrow"] .sl-confirm-cat-name{font-size:12.5px}
+.sl-picker[data-layout="narrow"] .sl-confirm-price{font-size:15px}
+.sl-picker[data-layout="narrow"] .sl-confirm-body{padding:9px 10px 10px}
+.sl-picker[data-layout="narrow"] .sl-confirm-tier{min-height:38px;padding:7px 9px}
+.sl-picker[data-layout="narrow"] .sl-confirm-thumbwrap{height:62px;margin-bottom:6px}
+.sl-picker[data-layout="narrow"] .sl-confirm-3d{margin-top:7px;padding:6px}
+.sl-picker[data-layout="narrow"] .sl-confirm-row{margin-top:8px}
+.sl-picker[data-layout="narrow"] .sl-confirm-row button{min-height:42px}
 
 /* Atomic whole/variable-table chooser. Lives inside the widget so the same
    accessible dialog works in inline, modal, desktop and 390px mobile hosts. */
@@ -2840,7 +2939,7 @@ var CSS = (
 .sl-table-stepper{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;border:1px solid var(--sl-line);
   border-radius:12px;overflow:hidden;background:var(--sl-bg)}
 .sl-table-stepper button{height:48px;font-size:24px;font-weight:700;background:color-mix(in srgb,var(--sl-line) 34%,transparent)!important}
-.sl-table-stepper button:disabled{opacity:.38;cursor:not-allowed}
+.sl-table-stepper button:disabled{opacity:.58;cursor:not-allowed}
 .sl-table-stepper output{text-align:center;font-size:19px;font-weight:850;font-variant-numeric:tabular-nums}
 .sl-table-range{margin-top:7px;color:var(--sl-muted);font-size:11px;text-align:center}
 .sl-table-actions{display:flex;gap:9px;margin-top:17px}.sl-table-actions button{flex:1;min-height:46px;border-radius:10px;font-weight:800}
@@ -2882,22 +2981,25 @@ var CSS = (
 .sl-ba::after{content:'\u2726';position:absolute;right:10px;top:3px;color:color-mix(in srgb,var(--sl-accent) 20%,transparent);font-size:42px;line-height:1}
 .sl-ba-title,.sl-ba-copy,.sl-ba select,.sl-ba-qty,.sl-ba-go{position:relative;z-index:1}
 .sl-ba-title{grid-column:1/-1;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:850}
-.sl-ba-title .spark{color:var(--sl-accent);font-size:16px}
+.sl-ba-title .spark{color:var(--sl-accent-text);font-size:16px}
 .sl-ba-copy{grid-column:1/-1;margin:-4px 0 2px 23px;color:var(--sl-muted);font-size:10.5px;line-height:1.35}
 .sl-ba-copy .narrow{display:none}
 /* "\u2605 Best seats" premium quick-pick \u2014 gold accent echoing the \u2605 Premium pill on
    the confirm popover; deliberately distinct from the accent-toned qty/go. */
 .sl-ba-premium{position:relative;z-index:1;grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;
   padding:6px 12px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em;cursor:pointer;
-  color:var(--sl-premium-deep);background:color-mix(in srgb,var(--sl-premium) 10%,var(--sl-surface));
+  color:var(--sl-premium-text);background:color-mix(in srgb,var(--sl-premium) 10%,var(--sl-surface));
   border:1px solid color-mix(in srgb,var(--sl-premium) 34%,var(--sl-line));transition:filter .15s,background .15s,color .15s}
 .sl-ba-premium .star{font-size:12px;line-height:1;color:var(--sl-premium)}
 .sl-ba-premium:hover{filter:brightness(1.05)}
 .sl-ba-premium.on{color:var(--sl-premium-ink);background:linear-gradient(135deg,#f0cf6b,#e0b23f);border-color:transparent;
   box-shadow:0 6px 16px color-mix(in srgb,var(--sl-premium) 26%,transparent)}
 .sl-ba-premium.on .star{color:#5a4410}
-.sl-ba select{background:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:8px;
-  font:inherit;font-size:11px;padding:7px 8px;min-width:0;width:100%;max-width:none}
+.sl-ba select,.sl-price-select{appearance:none;-webkit-appearance:none;
+  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23949ca9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat:no-repeat;background-position:right 10px center}
+.sl-ba select{background-color:var(--sl-surface);color:var(--sl-text);border:1px solid var(--sl-line);border-radius:8px;
+  font:inherit;font-size:11px;padding:7px 26px 7px 8px;min-width:0;width:100%;max-width:none}
 .sl-ba-qty{display:flex;align-items:center;gap:7px;padding:3px;border:1px solid var(--sl-line);border-radius:9px;background:var(--sl-surface)}
 .sl-ba-qty button{width:25px;height:25px;border-radius:7px;background:color-mix(in srgb,var(--sl-line) 35%,transparent);border:0;
   font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center}
@@ -2927,9 +3029,23 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-ba-copy{display:none}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .wide{display:none}
 .sl-picker[data-layout="narrow"] .sl-ba-copy .narrow{display:inline}
-.sl-picker[data-layout="narrow"] .sl-ba select{min-height:40px}
+.sl-picker[data-layout="narrow"] .sl-ba{grid-template-columns:auto minmax(0,1fr)}
+.sl-picker[data-layout="narrow"] .sl-ba select{grid-column:1/-1;min-height:38px}
 .sl-picker[data-layout="narrow"] .sl-ba-qty button{width:30px;height:30px}
-.sl-picker[data-layout="narrow"] .sl-ba-go{min-height:40px}
+/* Quantity and Go share ONE row: a full-width row holding only "\u2212 2 +" was
+   dead space, and the Find button still gets the lion's share. */
+.sl-picker[data-layout="narrow"] .sl-ba-qty{grid-column:1}
+.sl-picker[data-layout="narrow"] .sl-ba-go{grid-column:2;min-height:40px}
+/* Re-entry to best-available once the cart has seats (the card yields its
+   space to chips, but the accelerator must stay reachable) + the quiet way
+   back out of a reopened card. */
+.sl-ba-reopen{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 12px;margin-top:2px;
+  border:1px dashed color-mix(in srgb,var(--sl-accent) 40%,var(--sl-line));border-radius:999px;
+  color:var(--sl-accent-text);font-size:11.5px;font-weight:750;transition:border-color .15s,background .15s}
+.sl-ba-reopen:hover,.sl-ba-reopen:focus-visible{background:color-mix(in srgb,var(--sl-accent) 8%,transparent)}
+.sl-ba-back{grid-column:1/-1;justify-self:start;min-height:30px;padding:3px 0;color:var(--sl-muted);
+  font-size:11px;font-weight:700;text-decoration:underline;text-underline-offset:3px;transition:color .15s}
+.sl-ba-back:hover,.sl-ba-back:focus-visible{color:var(--sl-text)}
 
 /* Sales-closed is a designed state, not a set of disables: one statement in
    the tray where the buying flow was, carrying the event's own date so the
@@ -2948,9 +3064,9 @@ var CSS = (
    (the cart chip's remove/view rail) instead get real height on narrow. */
 @media (pointer:coarse){
   .sl-zoom button,.sl-cbbtn,.sl-close,.sl-ga-qty button,.sl-ba-qty button,.sl-price-more,
-  .sl-hold-change,.sl-seccard-x,.sl-fs-pill,.sl-side-toggle{position:relative}
+  .sl-hold-change,.sl-seccard-x,.sl-fs-pill,.sl-side-toggle,.sl-ba-reopen{position:relative}
   .sl-zoom button::after,.sl-cbbtn::after,.sl-close::after,.sl-ga-qty button::after,.sl-ba-qty button::after,
-  .sl-price-more::after,.sl-hold-change::after,.sl-seccard-x::after,.sl-fs-pill::after,.sl-side-toggle::after{
+  .sl-price-more::after,.sl-hold-change::after,.sl-seccard-x::after,.sl-fs-pill::after,.sl-side-toggle::after,.sl-ba-reopen::after{
     content:'';position:absolute;top:50%;left:50%;width:max(100%,44px);height:max(100%,44px);
     transform:translate(-50%,-50%)}
   /* The chip rail stacks remove over view in ~53px \u2014 pseudo-targets would
@@ -3047,18 +3163,12 @@ var CSS = (
   border:1px solid rgba(150,165,205,.35);backdrop-filter:blur(6px);cursor:pointer}
 .sl-view3d-nav button:hover,.sl-view3d-nav button:focus-visible{color:#eef1f8;border-color:rgba(190,205,240,.6)}
 .sl-view3d-nav button[aria-pressed="true"]{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
-.sl-view3d-nav button:disabled{opacity:.45;cursor:not-allowed}
+.sl-view3d-nav button:disabled{opacity:.6;cursor:not-allowed}
 .sl-view3d-nav-toggle{display:none!important}
 .sl-view3d-nav select{min-height:38px;max-width:100%;padding:7px 34px 7px 12px;
   border-radius:999px;font:700 11.5px/1 inherit;color:#eef1f8;background:rgba(12,18,32,.86);
   border:1px solid rgba(150,165,205,.45);backdrop-filter:blur(6px);cursor:pointer}
 .sl-view3d-nav select:focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}
-.sl-view3d-nav .sl-view3d-locator{display:grid;grid-template-columns:minmax(150px,1.25fr) minmax(110px,.8fr) minmax(105px,.7fr) auto;
-  width:min(720px,100%);overflow:visible}
-.sl-view3d-nav.is-seat-focused .sl-view3d-locator{display:none}
-.sl-view3d-locator select{width:100%;min-width:0}
-.sl-picker[data-layout="narrow"] .sl-view3d-nav .sl-view3d-locator{display:flex;width:100%;overflow-x:auto}
-.sl-picker[data-layout="narrow"] .sl-view3d-locator select{flex:0 0 155px}
 /* On phones the library owns the bottom edge for seat/panorama/overview actions.
    Keep venue navigation in a separate top rail so those control families never
    stack over one another. */
@@ -3068,9 +3178,6 @@ var CSS = (
 .sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open{left:12px;top:68px;max-width:calc(100% - 24px);padding:8px;
   border:1px solid rgba(150,165,205,.35);border-radius:14px;background:rgba(8,12,22,.9);backdrop-filter:blur(10px)}
 .sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open>div{display:flex}
-.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open .sl-view3d-locator{display:grid;grid-template-columns:1fr 1fr;width:100%;overflow:visible}
-.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open .sl-view3d-locator select{width:100%;min-width:0;flex:auto}
-.sl-picker[data-layout="narrow"] .sl-view3d-nav.is-open .sl-view3d-locator button{width:100%}
 /* Seat-eye is a decision state, not another venue-navigation state. Once the
    buyer arrives, clear the floor/area/locator rails and the module's duplicate
    Overview action. The picker-owned Back button becomes the one predictable
@@ -3104,7 +3211,7 @@ var CSS = (
 .sl-confirm-confidence strong,.sl-confirm-confidence small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sl-confirm-confidence strong{font-size:11px}.sl-confirm-confidence small{margin-top:2px;color:var(--sl-muted);font-size:9.5px}
 .sl-confirm-confidence em{display:none;font-style:normal}
-.sl-confirm-confidence>b{flex:none;font-size:11px;color:var(--sl-accent)}
+.sl-confirm-confidence>b{flex:none;font-size:11px;color:var(--sl-accent-text)}
 .sl-confirm-confidence:hover,.sl-confirm-confidence:focus-visible{border-color:var(--sl-accent)}
 /* The production 3D decision dock is deliberately denser than the 2D popup:
    the venue remains the main content and the two inspection actions share one
@@ -3186,7 +3293,7 @@ var CSS = (
 .sl-view3d-compare-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}
 .sl-view3d-compare-actions button{min-height:44px;border-radius:9px;border:1px solid var(--sl-line);font-size:12px;font-weight:800}
 .sl-view3d-compare-actions .select{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
-.sl-view3d-compare-actions button:disabled{opacity:.5;cursor:not-allowed}
+.sl-view3d-compare-actions button:disabled{opacity:.62;cursor:not-allowed}
 .sl-view3d-passport-shell{position:absolute;inset:0;z-index:40;display:grid;place-items:center;padding:16px}
 .sl-view3d-passport-scrim{position:absolute;inset:0;background:rgba(3,6,12,.8);backdrop-filter:blur(6px)}
 .sl-view3d-passport{position:relative;width:min(540px,100%);max-height:min(700px,calc(100% - 20px));overflow:auto;
@@ -3227,14 +3334,17 @@ var CSS = (
 .sl-confirm-3d:hover,.sl-confirm-3d:focus-visible{border-color:var(--sl-accent);background:color-mix(in srgb,var(--sl-accent) 20%,transparent)}
 .sl-confirm-3d svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
 
-/* multi-floor switcher (flows within the left-rail region) */
-.sl-floors{display:none;flex-direction:column;gap:6px;max-width:100%}
+/* One compact multi-floor selector (flows within the left-rail region). */
+.sl-floors{display:none;align-items:center;gap:6px;max-width:min(260px,100%);padding:5px;border-radius:999px;
+  background:color-mix(in srgb,var(--sl-surface) 92%,transparent);border:1px solid var(--sl-line);
+  box-shadow:var(--sl-shadow);backdrop-filter:blur(8px)}
 .sl-floors.on{display:flex}
-.sl-floors button{padding:7px 13px;border-radius:999px;font-size:12px;font-weight:700;background:var(--sl-surface);
-  border:1px solid var(--sl-line);color:var(--sl-muted);white-space:nowrap;max-width:100%;overflow:hidden;
-  text-overflow:ellipsis;transition:color .15s,border-color .15s}
-.sl-floors button:hover{color:var(--sl-text)}
-.sl-floors button.on{background:var(--sl-accent);color:var(--sl-accent-ink);border-color:transparent}
+.sl-floors select{min-width:0;max-width:210px;min-height:34px;padding:6px 30px 6px 10px;border:0;border-radius:999px;
+  font:700 12px/1 inherit;color:var(--sl-text);background:var(--sl-surface);cursor:pointer}
+.sl-floors select:focus-visible,.sl-floor-info:focus-visible{outline:2px solid var(--sl-accent);outline-offset:2px}
+.sl-floor-info{display:inline-grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:999px;
+  border:1px solid var(--sl-line);color:var(--sl-muted);background:transparent;font:800 13px/1 inherit;cursor:help}
+.sl-floor-info:hover{color:var(--sl-text);border-color:var(--sl-accent)}
 
 /* tapped-section summary card \u2014 docks INSIDE the top-center anchor region on
    wide (flows below the rung pills, never over them, never floating over the
@@ -3269,8 +3379,14 @@ var CSS = (
 .sl-seccard-mix-dot{width:8px;height:8px;border-radius:50%;flex:none}
 .sl-seccard-mix-price{font-weight:700;color:var(--sl-text)}
 .sl-seccard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px}
-.sl-seccard-overview{font-size:12px;font-weight:800;color:var(--sl-accent)}
+.sl-seccard-overview{font-size:12px;font-weight:800;color:var(--sl-accent-text)}
 .sl-seccard-hint{font-size:10.5px;color:var(--sl-muted)}
+.sl-seccard-nav{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
+.sl-seccard-nav button{width:28px;height:28px;border:1px solid var(--sl-line);border-radius:999px;color:var(--sl-text);
+  background:color-mix(in srgb,var(--sl-surface) 88%,var(--sl-bg));font-size:14px;font-weight:850;line-height:1}
+.sl-seccard-nav button:hover,.sl-seccard-nav button:focus-visible{border-color:var(--sl-accent);color:var(--sl-accent-text)}
+.sl-seccard.mini .sl-seccard-nav,.sl-seccard.strip .sl-seccard-nav{margin-left:2px}
+.sl-seccard.mini .sl-seccard-nav button,.sl-seccard.strip .sl-seccard-nav button{width:24px;height:24px;font-size:12px}
 
 /* view-from-seat button on the confirm popover */
 /* Eager sightline preview inside the confirm card */
@@ -3323,10 +3439,29 @@ var CSS = (
   white-space:nowrap;pointer-events:none;max-width:90%;overflow:hidden;text-overflow:ellipsis}
 
 /* F3 minimap \u2014 venue overview + live viewport rect (flows in the bottom-left region) */
-.sl-minimap{border:1px solid var(--sl-line);border-radius:9px;
-  overflow:hidden;background:var(--sl-surface);box-shadow:0 12px 34px -14px rgba(0,0,0,.55);line-height:0;cursor:pointer}
+.sl-minimap{border:1px solid var(--sl-line);border-radius:9px;overflow:hidden;background:var(--sl-surface);
+  box-shadow:0 12px 34px -14px rgba(0,0,0,.55);line-height:0;touch-action:none}
+.sl-minimap-bar{min-height:24px;padding:3px 5px 3px 8px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--sl-line);
+  color:var(--sl-muted);font-size:9px;font-weight:800;line-height:1.2;letter-spacing:.06em;text-transform:uppercase}
+.sl-minimap-label{min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.sl-minimap-key{display:inline-flex;align-items:center;gap:3px;flex:none}
+.sl-minimap-key i{width:6px;height:6px;border-radius:999px;background:var(--sl-success)}
+.sl-minimap-key i.selected{background:var(--sl-accent)}
+.sl-minimap-key i.inactive{background:var(--sl-muted);opacity:.45}
+.sl-minimap-key i.focused{background:transparent;border:1.5px solid var(--sl-accent);width:7px;height:7px}
+.sl-minimap-close{display:none;width:24px;height:24px;border-radius:6px;color:var(--sl-muted);font-size:15px;line-height:1}
 .sl-minimap canvas{display:block}
+.sl-minimap canvas:focus-visible{outline:2px solid var(--sl-accent);outline-offset:-3px}
+.sl-minimap canvas.sl-dragging{cursor:grabbing}
+.sl-minimap-toggle{display:none;width:42px;height:42px;border:1px solid var(--sl-line);border-radius:10px;background:var(--sl-surface);
+  color:var(--sl-text);box-shadow:0 10px 28px -14px rgba(0,0,0,.65);align-items:center;justify-content:center}
+.sl-minimap-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
 .sl-picker[data-layout="narrow"] .sl-minimap{display:none}
+.sl-picker[data-layout="narrow"] .sl-minimap-toggle{display:flex}
+.sl-picker[data-layout="narrow"][data-minimap-open="true"] .sl-minimap{display:block}
+.sl-picker[data-layout="narrow"][data-minimap-open="true"] .sl-minimap-toggle{display:none}
+.sl-picker[data-layout="narrow"] .sl-minimap canvas{width:min(168px,42vw)!important;height:auto!important}
+.sl-picker[data-layout="narrow"] .sl-minimap-close{display:grid;place-items:center}
 
 /* F4 legend reflection: rows + counts for out-of-band categories read muted */
 /* Out-of-band rows are exactly the rows a buyer reads while deciding whether
@@ -3404,17 +3539,88 @@ function formatWhen(startsAt, timezone, locale) {
   }
   return at.toLocaleString(locale, options);
 }
-function resolveTokens(chart, host) {
+function parseThemeColor(value) {
+  if (!value) return null;
+  const color = value.trim().toLowerCase();
+  if (color === "white") return { r: 255, g: 255, b: 255 };
+  if (color === "black") return { r: 0, g: 0, b: 0 };
+  const hex = /^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(color)?.[1];
+  if (hex) {
+    const expanded = hex.length <= 4 ? [...hex].map((digit) => `${digit}${digit}`).join("") : hex;
+    return {
+      r: Number.parseInt(expanded.slice(0, 2), 16),
+      g: Number.parseInt(expanded.slice(2, 4), 16),
+      b: Number.parseInt(expanded.slice(4, 6), 16)
+    };
+  }
+  const rgb = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*[\d.]+%?)?\s*\)$/i.exec(color);
+  if (!rgb) return null;
+  return {
+    r: Math.max(0, Math.min(255, Number(rgb[1]))),
+    g: Math.max(0, Math.min(255, Number(rgb[2]))),
+    b: Math.max(0, Math.min(255, Number(rgb[3])))
+  };
+}
+function relativeLuminance(color) {
+  const channel = (value) => {
+    const normalized = value / 255;
+    return normalized <= 0.04045 ? normalized / 12.92 : ((normalized + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(color.r) + 0.7152 * channel(color.g) + 0.0722 * channel(color.b);
+}
+function themeContrast(foreground, background) {
+  const fg = parseThemeColor(foreground);
+  const bg = parseThemeColor(background);
+  if (!fg || !bg) return null;
+  const lighter = Math.max(relativeLuminance(fg), relativeLuminance(bg));
+  const darker = Math.min(relativeLuminance(fg), relativeLuminance(bg));
+  return (lighter + 0.05) / (darker + 0.05);
+}
+function highestContrastInk(background, dark = "#172033", light = "#eef1f8") {
+  return (themeContrast(dark, background) ?? 0) >= (themeContrast(light, background) ?? 0) ? dark : light;
+}
+function rgbHex(color) {
+  const channel = (value) => Math.round(value).toString(16).padStart(2, "0");
+  return `#${channel(color.r)}${channel(color.g)}${channel(color.b)}`;
+}
+function mixThemeColors(first, second, firstWeight) {
+  const a = parseThemeColor(first);
+  const b = parseThemeColor(second);
+  if (!a || !b) return null;
+  const weight = Math.max(0, Math.min(1, firstWeight));
+  return rgbHex({
+    r: a.r * weight + b.r * (1 - weight),
+    g: a.g * weight + b.g * (1 - weight),
+    b: a.b * weight + b.b * (1 - weight)
+  });
+}
+function readableAccentText(accent, text, background, surface) {
+  if ((themeContrast(accent, background) ?? 4.5) >= 4.5 && (themeContrast(accent, surface) ?? 4.5) >= 4.5) return accent;
+  if (!parseThemeColor(accent) || !parseThemeColor(text)) return text;
+  for (let textWeight = 0.15; textWeight <= 1; textWeight += 0.05) {
+    const candidate = mixThemeColors(accent, text, 1 - textWeight);
+    if (candidate && (themeContrast(candidate, background) ?? 0) >= 4.5 && (themeContrast(candidate, surface) ?? 0) >= 4.5) return candidate;
+  }
+  return text;
+}
+function resolvePickerTokens(chart, host) {
+  const background = host?.background ?? chart?.background ?? "#0f1522";
+  const isLight = parseThemeColor(background) ? highestContrastInk(background) === "#172033" : false;
+  const surface = host?.surface ?? (isLight ? "#ffffff" : "#1a2234");
   const accent = host?.accent ?? chart?.accent ?? "#f4b740";
-  const accentInk = host?.accentInk ?? chart?.accentInk ?? "#1a1200";
+  const chartAccentInk = chart?.accentInk;
+  const accentInk = host?.accentInk ?? (chartAccentInk && (themeContrast(chartAccentInk, accent) ?? 4.5) >= 4.5 ? chartAccentInk : highestContrastInk(accent, "#1a1200", "#ffffff"));
+  const chartText = chart?.textColor;
+  const text = host?.text ?? (chartText && (themeContrast(chartText, background) ?? 4.5) >= 4.5 && (themeContrast(chartText, surface) ?? 4.5) >= 4.5 ? chartText : highestContrastInk(background));
   return {
     "--sl-accent": accent,
     "--sl-accent-ink": accentInk,
-    "--sl-bg": host?.background ?? chart?.background ?? "#0f1522",
-    "--sl-surface": host?.surface ?? "#1a2234",
-    "--sl-text": host?.text ?? chart?.textColor ?? "#eef1f8",
-    "--sl-muted": host?.muted ?? "#8b93a7",
-    "--sl-line": host?.line ?? "rgba(139,147,167,.22)",
+    "--sl-accent-text": readableAccentText(accent, text, background, surface),
+    "--sl-bg": background,
+    "--sl-surface": surface,
+    "--sl-text": text,
+    "--sl-muted": host?.muted ?? (isLight ? "#667085" : "#a5aec2"),
+    "--sl-line": host?.line ?? (isLight ? "rgba(23,32,51,.16)" : "rgba(165,174,194,.24)"),
     "--sl-font": host?.fontFamily ?? chart?.fontFamily ?? "-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,sans-serif",
     "--sl-radius": `${host?.radius ?? 14}px`
   };
@@ -3496,6 +3702,15 @@ var SeatPicker = class _SeatPicker {
     this.baZone = "";
     /** "★ Best seats" premium quick-pick toggle — biases best-available to premium seats. */
     this.baPremium = false;
+    /**
+     * The buyer re-opened the best-seats form with seats already in the cart
+     * ("I picked one, actually find us three together"). The card normally
+     * yields this space to the ticket chips the moment anything is selected —
+     * which removed the accelerator at exactly the moment a one-handed phone
+     * buyer wants it. Cleared when the cart empties, a hold lands, or the
+     * buyer backs out.
+     */
+    this.baReopen = false;
     this.bestAvailableConfirm = false;
     this.releasingHold = false;
     /** Event sales window is closed (read-only load state / live close). */
@@ -3537,7 +3752,13 @@ var SeatPicker = class _SeatPicker {
     // F3 minimap
     this.miniCanvas = null;
     this.miniBase = null;
+    this.miniWrap = null;
+    this.miniToggle = null;
+    this.miniLabel = null;
     this.miniTf = null;
+    this.miniDrag = null;
+    this.miniSuppressClick = false;
+    this.pickerLayoutSize = { width: 0, height: 0 };
     // F4 price-band filter — active band's category keys (null = all prices)
     this.priceBandKeys = null;
     this.focusedCatKey = null;
@@ -3573,6 +3794,7 @@ var SeatPicker = class _SeatPicker {
     /** Wide-layout ticket panel collapsed (map owns the full width). */
     this.sideCollapsed = false;
     this.sideToggleEl = null;
+    this.pricesBtnEl = null;
     /** True once we've asked the host page to pin us fullscreen (framed, no native). */
     this.framedFs = false;
     /** Last height (px) posted to a host frame; dedupes redundant reports. */
@@ -3637,6 +3859,7 @@ var SeatPicker = class _SeatPicker {
       mapTheme: options.theme?.map ?? null,
       onSelectionChange: () => {
         this.syncTray();
+        this.refreshMinimap();
         if (this.committedSelection().length) this.collapseSectionCard();
         this.syncSelectionTo3d();
       },
@@ -3685,7 +3908,7 @@ var SeatPicker = class _SeatPicker {
         if (this.tableDialog?.physicalSeatIds.includes(seat.id)) this.dismissTableDialog();
       },
       onSelectionLimit: () => {
-        this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
+        this.toast(t2("picker.maxTicketsForOrder", { count: this.maxTickets }), "warning");
       },
       onViewChange: () => {
         this.reanchorConfirm();
@@ -3696,6 +3919,12 @@ var SeatPicker = class _SeatPicker {
       },
       // Tapped-section glide-in → surface (or clear) the section-summary card.
       onSectionFocus: (summary) => this.showSectionCard(summary),
+      onDeckTap: () => {
+        this.showSectionCard(null);
+        this.syncFloors();
+        this.syncRung();
+        this.refreshMinimap();
+      },
       onFocusSeat: (seat) => this.announceSeat(seat),
       onSeatHover: (d) => this.updateTooltip(d),
       onHint: (m) => {
@@ -3801,8 +4030,8 @@ var SeatPicker = class _SeatPicker {
     return `<span class="sl-cx-mark" role="img" aria-label="${title}" title="${title}">\u25D0</span>`;
   }
   wheelchairProvisionLabel(type) {
-    if (type === "no-seat") return "Empty wheelchair space";
-    if (type === "seat-present") return "Accessible physical seat";
+    if (type === "no-seat") return this.tf("picker.emptyWheelchairSpace", "Empty wheelchair space");
+    if (type === "seat-present") return this.tf("picker.accessiblePhysicalSeat", "Accessible physical seat");
     return "";
   }
   wheelchairConfirmHtml(type) {
@@ -3883,9 +4112,9 @@ var SeatPicker = class _SeatPicker {
     const hideEventDetails = this.eventDetailsHidden && !active;
     this.root?.setAttribute("data-event-details-hidden", String(hideEventDetails));
     this.els.zfs?.setAttribute("aria-pressed", String(active));
-    this.els.zfs?.setAttribute("title", active ? "Exit full screen" : "Full screen");
+    this.els.zfs?.setAttribute("title", active ? this.tf("picker.exitFullScreen", "Exit full screen") : this.tf("picker.fullScreen", "Full screen"));
     const zfsLabel = this.els.zfs?.querySelector(".sl-zfs-lbl");
-    if (zfsLabel) zfsLabel.textContent = active ? "Exit full screen" : "Full screen";
+    if (zfsLabel) zfsLabel.textContent = active ? this.tf("picker.exitFullScreen", "Exit full screen") : this.tf("picker.fullScreen", "Full screen");
     this.view3dEl?.querySelector(".sl-view3d-fs")?.setAttribute("aria-pressed", String(active));
   }
   /**
@@ -3913,7 +4142,7 @@ var SeatPicker = class _SeatPicker {
       window.removeEventListener("keydown", this.fsEscHandler);
       this.fsEscHandler = null;
     }
-    requestAnimationFrame(() => this.controller.zoomToFit());
+    requestAnimationFrame(() => this.controller.refitCurrentView());
   }
   setFsFallback(on) {
     if (this.fsFallback === on) return;
@@ -3929,7 +4158,7 @@ var SeatPicker = class _SeatPicker {
       window.removeEventListener("keydown", this.fsEscHandler);
       this.fsEscHandler = null;
     }
-    requestAnimationFrame(() => this.controller.zoomToFit());
+    requestAnimationFrame(() => this.controller.refitCurrentView());
   }
   /**
    * Close the picker. In modal mode (SeatPicker.open()) this dismisses the
@@ -3950,7 +4179,7 @@ var SeatPicker = class _SeatPicker {
     frame.className = "sl-modal-frame";
     frame.setAttribute("role", "dialog");
     frame.setAttribute("aria-modal", "true");
-    frame.setAttribute("aria-label", "Seat selection");
+    frame.setAttribute("aria-label", tfStatic("picker.seatSelection", "Seat selection"));
     frame.tabIndex = -1;
     scrim.appendChild(frame);
     document.body.appendChild(scrim);
@@ -4069,11 +4298,17 @@ var SeatPicker = class _SeatPicker {
   }
   async render() {
     if (this.rendered) return this;
+    const renderStartedAt = performance.now();
+    const renderProfile = {};
+    const duration = (startedAt) => Math.round((performance.now() - startedAt) * 100) / 100;
     this.rendered = true;
     ensureStyle();
+    const localeStartedAt = performance.now();
     await loadLocale2(this.opts.locale);
+    renderProfile.loadLocale = duration(localeStartedAt);
     if (this.opts.messages) setStringOverrides2(this.opts.messages);
     if (this.checkoutMode === "hosted") this.paymentOptions = this.pubApi.paymentOptions(this.opts.event);
+    const shellStartedAt = performance.now();
     const mount = resolveContainer3(this.opts.container);
     const root = document.createElement("div");
     root.className = "sl-picker";
@@ -4097,7 +4332,7 @@ var SeatPicker = class _SeatPicker {
         this.syncTray();
       }
     });
-    Object.entries(resolveTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
+    Object.entries(resolvePickerTokens(void 0, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     root.innerHTML = `
       <div class="sl-head">
         <div class="sl-logo" data-ref="logo"></div>
@@ -4110,7 +4345,7 @@ var SeatPicker = class _SeatPicker {
           <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
           <span data-ref="closedPillText"></span>
         </span>
-        <button type="button" class="sl-close" data-ref="close" aria-label="Close">
+        <button type="button" class="sl-close" data-ref="close" aria-label="${this.tf("picker.close", "Close")}">
           <svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
         </button>
       </div>
@@ -4118,17 +4353,17 @@ var SeatPicker = class _SeatPicker {
         <div class="sl-map">
           <div class="sl-map-host" data-ref="map"></div>
           <div class="sl-zoom" data-ref="zoom">
-            <button type="button" aria-label="Zoom in" title="Zoom in" data-ref="zin">+</button>
-            <button type="button" aria-label="Zoom out" title="Zoom out" data-ref="zout">\u2212</button>
-            <button type="button" aria-label="Fit to screen" title="Fit to screen" data-ref="zfit">
+            <button type="button" aria-label="${this.tf("picker.zoomIn", "Zoom in")}" title="${this.tf("picker.zoomIn", "Zoom in")}" data-ref="zin">+</button>
+            <button type="button" aria-label="${this.tf("picker.zoomOut", "Zoom out")}" title="${this.tf("picker.zoomOut", "Zoom out")}" data-ref="zout">\u2212</button>
+            <button type="button" aria-label="${this.tf("picker.fitToScreen", "Fit to screen")}" title="${this.tf("picker.fitToScreen", "Fit to screen")}" data-ref="zfit">
               <svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
             </button>
-            <button type="button" aria-label="Full screen" title="Full screen" aria-pressed="false" data-ref="zfs">
+            <button type="button" aria-label="${this.tf("picker.fullScreen", "Full screen")}" title="${this.tf("picker.fullScreen", "Full screen")}" aria-pressed="false" data-ref="zfs">
               <svg viewBox="0 0 24 24"><path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/></svg>
-              <span class="sl-zfs-lbl" aria-hidden="true">Full screen</span>
+              <span class="sl-zfs-lbl" aria-hidden="true">${this.tf("picker.fullScreen", "Full screen")}</span>
             </button>
           </div>
-          <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>Loading seat map\u2026</div>
+          <div class="sl-boot" data-ref="boot"><span class="sl-boot-spin"></span>${this.tf("picker.loadingSeatMap", "Loading seat map\u2026")}</div>
           <div class="sl-toast" data-ref="toast" role="status" aria-live="polite"></div>
         </div>
         <div class="sl-side" data-ref="side">
@@ -4136,24 +4371,25 @@ var SeatPicker = class _SeatPicker {
             <div class="sl-sheet-grab"></div>
             <div class="sl-sheet-bar">
               <div class="sl-sheet-peek" data-ref="peek"></div>
-              <button type="button" class="sl-sheet-toggle" data-ref="sheetToggle" aria-label="Open ticket panel" aria-expanded="false">
+              <button type="button" class="sl-sheet-toggle" data-ref="sheetToggle" aria-label="${this.tf("picker.openTicketPanel", "Open ticket panel")}" aria-expanded="false">
                 <svg viewBox="0 0 24 24"><path d="M6 15l6-6 6 6"/></svg>
               </button>
             </div>
           </div>
-          <div class="sl-sec sl-filtersec" data-ref="filtersSec">Filters</div>
+          <div class="sl-sec sl-filtersec" data-ref="filtersSec">${this.tf("picker.filters", "Filters")}</div>
           <div class="sl-filters" data-ref="filters"></div>
           <div class="sl-offer" data-ref="offer" role="status" aria-live="polite"></div>
-          <div class="sl-sec sl-prices-sec" data-ref="pricesSec"><span>Ticket prices</span></div>
+          <div class="sl-sec sl-prices-sec" data-ref="pricesSec"><span>${this.tf("picker.ticketPrices", "Ticket prices")}</span></div>
+          <div class="sl-prices-hint" data-ref="pricesHint"></div>
           <div class="sl-prices" data-ref="prices"></div>
-          <div class="sl-live" data-ref="live" role="status" aria-live="polite"><span class="dot" aria-hidden="true"></span><span data-ref="liveText">Live availability \u2014 seats update in real time</span></div>
-          <div class="sl-sec sl-seats-sec"><span>Your seats</span><span class="sl-seat-summary" data-ref="seatSummary"></span></div>
+          <div class="sl-live" data-ref="live" role="status" aria-live="polite"><span class="dot" aria-hidden="true"></span><span data-ref="liveText">${this.tf("picker.liveAvailability", "Live availability \u2014 seats update in real time")}</span></div>
+          <div class="sl-sec sl-seats-sec"><span>${this.tf("picker.yourSeats", "Your seats")}</span><span class="sl-seat-summary" data-ref="seatSummary"></span></div>
           <div class="sl-tray" data-ref="tray"></div>
           <div class="sl-foot" data-ref="foot">
             <div class="sl-hold-note" data-ref="holdNote" role="status" aria-live="polite">
               <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg>
-              <span><b data-ref="holdTitle">Seats secured</b><span class="sl-hold-copy" data-ref="holdCopy">You won\u2019t be charged yet.</span></span>
-              <button type="button" class="sl-hold-change" data-ref="holdChange" aria-label="Release held tickets and choose different seats">Change</button>
+              <span><b data-ref="holdTitle">${this.tf("picker.seatsSecured", "Seats secured")}</b><span class="sl-hold-copy" data-ref="holdCopy">${this.tf("picker.notChargedYet", "You won\u2019t be charged yet.")}</span></span>
+              <button type="button" class="sl-hold-change" data-ref="holdChange" aria-label="${this.tf("picker.releaseHeldTickets", "Release held tickets and choose different seats")}">${this.tf("picker.change", "Change")}</button>
             </div>
             <div class="sl-total"><span data-ref="count"></span><b data-ref="total"></b></div>
             <button type="button" class="sl-cta" data-ref="cta" disabled></button>
@@ -4175,14 +4411,20 @@ var SeatPicker = class _SeatPicker {
     const applyLayout = () => {
       const w = root.clientWidth;
       if (w <= 0) return;
+      const h = root.clientHeight;
+      const sizeChanged = w !== this.pickerLayoutSize.width || h !== this.pickerLayoutSize.height;
+      this.pickerLayoutSize = { width: w, height: h };
       this.reportFramedHeight();
       const next = w < 640 ? "narrow" : "wide";
-      const density = root.clientHeight < 560 ? "compact" : "comfortable";
-      if (root.dataset.layout === next && root.dataset.density === density) return;
-      root.dataset.layout = next;
-      root.dataset.density = density;
-      if (next === "narrow" && !root.dataset.sheet) root.dataset.sheet = "peek";
-      this.dockLayoutChrome();
+      const density = h < 560 ? "compact" : "comfortable";
+      const layoutChanged = root.dataset.layout !== next || root.dataset.density !== density;
+      if (layoutChanged) {
+        root.dataset.layout = next;
+        root.dataset.density = density;
+        if (next === "narrow" && !root.dataset.sheet) root.dataset.sheet = "peek";
+        this.dockLayoutChrome();
+      }
+      if (sizeChanged && this.miniBase) this.refreshMinimap();
     };
     this.ro = new ResizeObserver(applyLayout);
     this.ro.observe(root);
@@ -4195,7 +4437,7 @@ var SeatPicker = class _SeatPicker {
     this.fsChangeHandler = () => {
       if (!document.fullscreenElement) this.setFsFallback(false);
       this.syncFullscreenButtons();
-      requestAnimationFrame(() => this.controller.zoomToFit());
+      requestAnimationFrame(() => this.controller.refitCurrentView());
     };
     document.addEventListener("fullscreenchange", this.fsChangeHandler);
     const head = this.els.sheetHead;
@@ -4204,7 +4446,7 @@ var SeatPicker = class _SeatPicker {
       const setSheet = (open) => {
         root.dataset.sheet = open ? "open" : "peek";
         toggle?.setAttribute("aria-expanded", String(open));
-        toggle?.setAttribute("aria-label", open ? "Collapse ticket panel" : "Open ticket panel");
+        toggle?.setAttribute("aria-label", open ? this.tf("picker.collapseTicketPanel", "Collapse ticket panel") : this.tf("picker.openTicketPanel", "Open ticket panel"));
       };
       setSheet(root.dataset.sheet === "open");
       toggle?.addEventListener("click", (e) => {
@@ -4250,6 +4492,39 @@ var SeatPicker = class _SeatPicker {
         head.releasePointerCapture?.(e.pointerId);
       });
     }
+    const togglePrices = () => {
+      if (this.root?.dataset.layout !== "narrow") return;
+      const open = this.root.getAttribute("data-prices-open") === "true";
+      this.root.setAttribute("data-prices-open", String(!open));
+      this.els.pricesSec?.setAttribute("aria-expanded", String(!open));
+      this.pricesBtnEl?.setAttribute("aria-pressed", String(!open));
+      if (!open && this.root.dataset.sheet !== "open") {
+        this.root.dataset.sheet = "open";
+        const sheetToggle = this.els.sheetToggle;
+        sheetToggle?.setAttribute("aria-expanded", "true");
+        sheetToggle?.setAttribute("aria-label", "Collapse ticket panel");
+      }
+    };
+    this.els.pricesSec?.addEventListener("click", (e) => {
+      if (e.target.closest("select,button")) return;
+      togglePrices();
+    });
+    this.els.pricesSec?.addEventListener("keydown", (e) => {
+      if (e.key !== "Enter" && e.key !== " ") return;
+      if (e.target.closest("select,button")) return;
+      e.preventDefault();
+      togglePrices();
+    });
+    const pricesBtn = document.createElement("button");
+    pricesBtn.type = "button";
+    pricesBtn.className = "sl-prices-btn";
+    pricesBtn.setAttribute("aria-label", this.tf("picker.ticketPrices", "Ticket prices"));
+    pricesBtn.setAttribute("title", this.tf("picker.ticketPrices", "Ticket prices"));
+    pricesBtn.setAttribute("aria-pressed", "false");
+    pricesBtn.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V5a2 2 0 0 1 2-2h8l7.6 7.6a2 2 0 0 1 0 2.8z"/><circle cx="7.5" cy="7.5" r="1.3"/></svg>';
+    pricesBtn.addEventListener("click", () => togglePrices());
+    this.els.headInfo?.parentElement?.insertBefore(pricesBtn, this.els.hold ?? null);
+    this.pricesBtnEl = pricesBtn;
     this.tipEl = document.createElement("div");
     this.tipEl.setAttribute("role", "tooltip");
     this.tipEl.className = "sl-tip";
@@ -4264,10 +4539,13 @@ var SeatPicker = class _SeatPicker {
     const canvasHost = document.createElement("div");
     canvasHost.style.cssText = "position:absolute;inset:0";
     this.mapHost.appendChild(canvasHost);
+    renderProfile.mountBuyerShell = duration(shellStartedAt);
+    const chartStartedAt = performance.now();
     const info = await this.controller.render(canvasHost);
+    renderProfile.loadChartAndStatuses = duration(chartStartedAt);
     if (this.destroyed) return this;
     if (!info) {
-      this.els.boot.innerHTML = '<div class="sl-boot-title">The seat map didn\u2019t load</div><div>Check your connection and try again.</div><button type="button" class="sl-boot-retry">Try again</button>';
+      this.els.boot.innerHTML = `<div class="sl-boot-title">${this.tf("picker.mapDidNotLoad", "The seat map didn\u2019t load")}</div><div>${this.tf("picker.checkConnection", "Check your connection and try again.")}</div><button type="button" class="sl-boot-retry">${this.tf("picker.accessRetry", "Try again")}</button>`;
       this.els.boot.querySelector("button").addEventListener("click", () => {
         const container = this.opts.container;
         const opts = this.opts;
@@ -4276,7 +4554,9 @@ var SeatPicker = class _SeatPicker {
       });
       return this;
     }
+    Object.assign(renderProfile, info.performanceProfile);
     this.els.boot.remove();
+    const controlsStartedAt = performance.now();
     this.startRealtime();
     this.salesClosed = !!info.salesClosed || !!this.opts.readOnly;
     root.dataset.eventMode = info.mode === "test" ? "test" : "live";
@@ -4292,7 +4572,7 @@ var SeatPicker = class _SeatPicker {
       this.regions["top-left"].appendChild(badge);
     }
     const chartTheme = this.controller.doc?.theme;
-    Object.entries(resolveTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
+    Object.entries(resolvePickerTokens(chartTheme, this.opts.theme)).forEach(([k, v]) => root.style.setProperty(k, v));
     this.currency = info.currency ?? this.opts.currency ?? "USD";
     this.eventTimezone = info.timezone ?? null;
     const logoUrl = this.opts.theme?.logoUrl ?? chartTheme?.logoUrl ?? info.posterUrl ?? null;
@@ -4302,6 +4582,12 @@ var SeatPicker = class _SeatPicker {
     const when = info.startsAt ? formatWhen(info.startsAt, info.timezone ?? null, this.opts.locale) : "";
     this.eventWhenText = when || null;
     this.els.meta.textContent = [info.venue, when].filter(Boolean).join(" \xB7 ");
+    if (this.els.pricesHint) {
+      this.els.pricesHint.textContent = this.tf(
+        "picker.priceHint",
+        "Colours on the map are ticket types \u2014 tap one below to show just those seats."
+      );
+    }
     this.buildBadge(chartTheme);
     const present = /* @__PURE__ */ new Set();
     let hasLimitedView = false;
@@ -4328,7 +4614,7 @@ var SeatPicker = class _SeatPicker {
         const mk = (key, label) => `<button type="button" class="sl-chip-f${key === "all" ? " on" : ""}" data-a11y="1" data-f="${key}">${label}</button>`;
         chips.insertAdjacentHTML(
           "beforeend",
-          mk("all", "All seats") + ACCESSIBILITY_TYPES.filter(({ key }) => present.has(key)).map(({ key, short, icon }) => mk(key, `${icon} ${short}`)).join("")
+          mk("all", this.tf("picker.allSeats", "All seats")) + ACCESSIBILITY_TYPES.filter(({ key }) => present.has(key)).map(({ key, short, icon }) => mk(key, `${icon} ${short}`)).join("")
         );
         const active = /* @__PURE__ */ new Set();
         const syncChips = () => {
@@ -4374,7 +4660,7 @@ var SeatPicker = class _SeatPicker {
     cb.type = "button";
     cb.className = "sl-cbbtn";
     this.cbEl = cb;
-    cb.setAttribute("aria-label", "Toggle colorblind-friendly colors");
+    cb.setAttribute("aria-label", this.tf("picker.toggleColorblindColors", "Toggle colorblind-friendly colors"));
     cb.setAttribute("aria-pressed", String(this.cbSafe));
     cb.innerHTML = '<svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>';
     this.els.zfit.parentElement.appendChild(cb);
@@ -4394,12 +4680,34 @@ var SeatPicker = class _SeatPicker {
     this.buildPanelToggle();
     if (this.opts.panelCollapsed) this.setPanelCollapsed(true);
     this.dockLayoutChrome();
+    renderProfile.buildBuyerControls = duration(controlsStartedAt);
+    const holdStartedAt = performance.now();
     await this.restoreRememberedHold();
+    renderProfile.restoreHold = duration(holdStartedAt);
     if (this.destroyed) return this;
     if (this.salesClosed) this.applySalesClosed();
     this.syncPrices();
     this.syncTray();
     this.resumeHostedOrder();
+    const doc = this.controller.doc;
+    this.emitAnalytics("chart_rendered", {
+      renderingTimeMillis: duration(renderStartedAt),
+      performanceProfile: renderProfile,
+      seatCount: this.allSeats().length,
+      objectCount: doc?.objects.length ?? 0,
+      sectionCount: doc?.objects.filter((object) => object.type === "section").length ?? 0,
+      view: this.buyerView,
+      // Dimensions a host needs to read the timings above as anything other
+      // than one undifferentiated number: WHICH chart, HOW big, WHICH data
+      // path, and whether the browser had already warmed for this chart.
+      // The event key is the chart's identity here — an event owns exactly one
+      // chart — and the name is the same string already drawn in the header.
+      eventKey: this.opts.event,
+      chartName: doc?.name,
+      floorCount: this.controller.getFloors().length,
+      transport: this.opts.transport ? "custom" : "pubapi",
+      load: markChartLoaded(this.opts.event) ? "repeat" : "cold"
+    });
     return this;
   }
   /**
@@ -4460,8 +4768,9 @@ var SeatPicker = class _SeatPicker {
     if (!btn) return;
     const collapsed = this.sideCollapsed;
     btn.setAttribute("aria-expanded", String(!collapsed));
-    btn.setAttribute("aria-label", collapsed ? "Show the ticket panel" : "Hide the ticket panel");
-    btn.innerHTML = collapsed ? '<svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg><span>Tickets</span>' : '<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg><span>Hide panel</span>';
+    btn.setAttribute("aria-label", collapsed ? this.tf("picker.showTicketPanel", "Show the ticket panel") : this.tf("picker.hideTicketPanel", "Hide the ticket panel"));
+    btn.title = collapsed ? this.tf("picker.showTicketPanel", "Show the ticket panel") : this.tf("picker.hideTicketPanel", "Hide the ticket panel");
+    btn.innerHTML = collapsed ? `<svg viewBox="0 0 24 24"><path d="M15 6l-6 6 6 6"/></svg><span>${this.tf("picker.tickets", "Tickets")}</span>` : `<svg viewBox="0 0 24 24"><path d="M9 6l6 6-6 6"/></svg>`;
   }
   /**
    * Collapse or reopen the wide-layout ticket panel in place (host-drivable —
@@ -4474,7 +4783,7 @@ var SeatPicker = class _SeatPicker {
     if (this.destroyed) return;
     this.sideCollapsed = collapsed;
     this.applyPanelCollapsed();
-    this.scheduleMotion(() => this.controller.zoomToFit(), 340);
+    this.scheduleMotion(() => this.controller.refitCurrentView(), 340);
   }
   /** Idempotent DOM apply, also run on every layout flip (inert must lift on narrow). */
   applyPanelCollapsed() {
@@ -4487,13 +4796,24 @@ var SeatPicker = class _SeatPicker {
     const narrow = this.root?.dataset.layout === "narrow";
     this.applyPanelCollapsed();
     const zfs = this.els.zfs;
-    if (zfs) {
-      if (narrow && this.regions["top-right"]) {
-        zfs.classList.add("sl-fs-pill");
-        this.regions["top-right"].appendChild(zfs);
-      } else if (!narrow && this.els.zoom && zfs.parentElement !== this.els.zoom) {
-        zfs.classList.remove("sl-fs-pill");
-        this.els.zoom.appendChild(zfs);
+    const head = this.els.headInfo?.parentElement;
+    if (zfs && head && zfs.parentElement !== head) {
+      zfs.classList.add("sl-fs-pill");
+      head.insertBefore(zfs, this.els.hold ?? null);
+    }
+    const pricesSec = this.els.pricesSec;
+    if (pricesSec) {
+      if (narrow) {
+        pricesSec.setAttribute("role", "button");
+        pricesSec.tabIndex = 0;
+        pricesSec.setAttribute(
+          "aria-expanded",
+          String(this.root?.getAttribute("data-prices-open") === "true")
+        );
+      } else {
+        pricesSec.removeAttribute("role");
+        pricesSec.removeAttribute("aria-expanded");
+        pricesSec.tabIndex = -1;
       }
     }
     const filters = this.els.filters;
@@ -4520,7 +4840,7 @@ var SeatPicker = class _SeatPicker {
     this.extendEl = el;
     this.els.extendTxt = el.querySelector('[data-ref="extendTxt"]');
     this.els.extendBtn = el.querySelector('[data-ref="extendBtn"]');
-    this.els.extendBtn.textContent = "Add time";
+    this.els.extendBtn.textContent = this.tf("picker.addTime", "Add time");
     this.els.extendBtn.addEventListener("click", () => void this.handleExtend());
   }
   /** Success overlay + onBooked fire when the held seats settle to booked. */
@@ -4529,7 +4849,7 @@ var SeatPicker = class _SeatPicker {
     el.className = "sl-booked";
     el.setAttribute("role", "status");
     el.setAttribute("aria-live", "polite");
-    el.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">You're all set</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
+    el.innerHTML = `<div class="sl-booked-badge"><svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg></div><div class="sl-booked-title">${this.tf("picker.allSetTitle", "You're all set")}</div><div class="sl-booked-sub" data-ref="bookedSub"></div>`;
     this.root.appendChild(el);
     this.bookedEl = el;
     this.els.bookedSub = el.querySelector('[data-ref="bookedSub"]');
@@ -4540,8 +4860,7 @@ var SeatPicker = class _SeatPicker {
    * host `messages` override (which makes `t()` return the override, not the key).
    */
   tf(key, fallback) {
-    const v = t2(key);
-    return v === key ? fallback : v;
+    return tfStatic(key, fallback);
   }
   /** Sold-out overlay — an informational state with no unavailable action. */
   buildSoldoutOverlay() {
@@ -4726,7 +5045,7 @@ var SeatPicker = class _SeatPicker {
   }
   canAddTicket() {
     if (this.totalTicketCount() < this.maxTickets) return true;
-    this.toast(`You can select up to ${this.maxTickets} tickets for this order.`, "warning");
+    this.toast(t2("picker.maxTicketsForOrder", { count: this.maxTickets }), "warning");
     return false;
   }
   pendingGATotal(gaAreas) {
@@ -4749,21 +5068,21 @@ var SeatPicker = class _SeatPicker {
     }
     if (this.confirmSeat || this.tableDialog && !this.tableDialogHeld) {
       cta.disabled = true;
-      cta.textContent = this.tableDialog ? "Confirm your table" : "Confirm or cancel this seat";
+      cta.textContent = this.tableDialog ? this.tf("picker.confirmYourTable", "Confirm your table") : this.tf("picker.confirmOrCancelSeat", "Confirm or cancel this seat");
       return;
     }
     if (this.ctaPhase === "holding") {
       cta.disabled = true;
-      cta.innerHTML = '<span class="sl-cta-spin" aria-hidden="true"></span>Securing seats\u2026';
+      cta.innerHTML = `<span class="sl-cta-spin" aria-hidden="true"></span>${this.tf("picker.securingSeats", "Securing your seats\u2026")}`;
       return;
     }
     if (this.ctaPhase === "checkout") {
       cta.disabled = true;
-      cta.innerHTML = '<span class="sl-cta-spin" aria-hidden="true"></span>Opening secure checkout\u2026';
+      cta.innerHTML = `<span class="sl-cta-spin" aria-hidden="true"></span>${this.tf("picker.openingCheckout", "Opening secure checkout\u2026")}`;
       return;
     }
     cta.disabled = count === 0;
-    cta.textContent = this.hold ? pending ? `Secure ${pending} more & checkout` : "Continue to checkout" : count ? "Hold seats & checkout" : "Select seats";
+    cta.textContent = this.hold ? pending ? t2("picker.secureMoreAndCheckout", { count: pending }) : this.tf("picker.continueToCheckout", "Continue to checkout") : count ? this.tf("picker.holdSeatsAndCheckout", "Hold seats & checkout") : this.tf("picker.selectSeats", "Select seats");
   }
   setCtaPhase(phase) {
     this.ctaPhase = phase;
@@ -4824,7 +5143,7 @@ var SeatPicker = class _SeatPicker {
       this.syncTray();
       this.emitHoldChange();
       this.opts.onHoldRestored?.(restored, restored.seats ?? [], this.buildHandoff(restored));
-      if (automatic) this.toast("Your held tickets have been restored.", "success");
+      if (automatic) this.toast(this.tf("picker.heldTicketsRestored", "Your held tickets have been restored."), "success");
       return restored;
     } catch (error) {
       const status = error?.status;
@@ -4859,10 +5178,77 @@ var SeatPicker = class _SeatPicker {
   buildMinimap() {
     const vp = this.controller.getViewport();
     if (!vp || !this.els.map) return;
-    const b = vp.bounds;
-    if (!(b.width > 0 && b.height > 0)) return;
-    const MAXW = 158;
-    const MAXH = 118;
+    const host = this.regions["bottom-left"] ?? this.els.map;
+    const toggle = document.createElement("button");
+    toggle.type = "button";
+    toggle.className = "sl-minimap-toggle";
+    toggle.setAttribute("aria-label", this.tf("picker.openVenueMap", "Open venue overview map"));
+    toggle.setAttribute("aria-expanded", "false");
+    toggle.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6l5-2 8 3 5-2v13l-5 2-8-3-5 2zM8 4v13M16 7v13"/></svg>';
+    host.appendChild(toggle);
+    this.miniToggle = toggle;
+    const wrap = document.createElement("div");
+    wrap.className = "sl-minimap";
+    wrap.setAttribute("role", "group");
+    const bar = document.createElement("div");
+    bar.className = "sl-minimap-bar";
+    const label = document.createElement("span");
+    label.className = "sl-minimap-label";
+    const key = document.createElement("span");
+    key.className = "sl-minimap-key";
+    key.setAttribute("aria-label", this.tf("picker.minimapStateKey", "Focused, selected, available, and inactive sections"));
+    key.innerHTML = '<i class="focused" title="Focused"></i><i class="selected" title="Selected"></i><i title="Available"></i><i class="inactive" title="Inactive"></i>';
+    const close = document.createElement("button");
+    close.type = "button";
+    close.className = "sl-minimap-close";
+    close.setAttribute("aria-label", this.tf("picker.closeVenueMap", "Close venue overview map"));
+    close.textContent = "\xD7";
+    bar.append(label, key, close);
+    const canvas = document.createElement("canvas");
+    canvas.tabIndex = 0;
+    canvas.setAttribute("role", "application");
+    canvas.setAttribute("aria-label", this.tf("picker.venueMapInstructions", "Venue overview map. Drag the viewport, click a section, or use arrow keys to pan."));
+    wrap.append(bar, canvas);
+    host.appendChild(wrap);
+    this.miniWrap = wrap;
+    this.miniLabel = label;
+    this.miniCanvas = canvas;
+    const base = document.createElement("canvas");
+    this.miniBase = base;
+    toggle.addEventListener("click", () => this.setMinimapOpen(true));
+    close.addEventListener("click", () => this.setMinimapOpen(false));
+    canvas.addEventListener("click", (event) => {
+      if (this.miniSuppressClick) {
+        this.miniSuppressClick = false;
+        return;
+      }
+      this.minimapJump(event);
+    });
+    canvas.addEventListener("pointerdown", (event) => this.minimapPointerDown(event));
+    canvas.addEventListener("pointermove", (event) => this.minimapPointerMove(event));
+    canvas.addEventListener("pointerup", (event) => this.minimapPointerUp(event));
+    canvas.addEventListener("pointercancel", (event) => this.minimapPointerUp(event));
+    canvas.addEventListener("keydown", (event) => this.minimapKeydown(event));
+    this.layoutMinimap();
+    this.syncMinimapLabel();
+    this.drawMinimapStatic();
+    this.drawMinimapRect();
+  }
+  setMinimapOpen(open) {
+    this.root?.setAttribute("data-minimap-open", String(open));
+    this.miniToggle?.setAttribute("aria-expanded", String(open));
+    if (open) this.miniCanvas?.focus();
+    else this.miniToggle?.focus();
+  }
+  /** Re-fit the thumbnail whenever the active floor or complete overview
+   * changes bounds. This is presentation-only; the source chart is untouched. */
+  layoutMinimap() {
+    const canvas = this.miniCanvas;
+    const base = this.miniBase;
+    const b = this.controller.getViewport()?.bounds;
+    if (!canvas || !base || !b || !(b.width > 0 && b.height > 0)) return;
+    const MAXW = 196;
+    const MAXH = 146;
     const PAD = 6;
     const aspect = b.width / Math.max(1, b.height);
     let w = MAXW;
@@ -4874,32 +5260,40 @@ var SeatPicker = class _SeatPicker {
     w = Math.max(64, w);
     h = Math.max(48, h);
     const dpr = Math.min(2, window.devicePixelRatio || 1);
-    const wrap = document.createElement("div");
-    wrap.className = "sl-minimap";
-    wrap.setAttribute("aria-hidden", "true");
-    const canvas = document.createElement("canvas");
     canvas.width = Math.round(w * dpr);
     canvas.height = Math.round(h * dpr);
     canvas.style.width = `${w}px`;
     canvas.style.height = `${h}px`;
-    wrap.appendChild(canvas);
-    (this.regions["bottom-left"] ?? this.els.map).appendChild(wrap);
-    this.miniCanvas = canvas;
-    const scale = Math.min((w - PAD * 2) / Math.max(1, b.width), (h - PAD * 2) / Math.max(1, b.height)) * dpr;
-    const offX = (w * dpr - b.width * scale) / 2 - b.x * scale;
-    const offY = (h * dpr - b.height * scale) / 2 - b.y * scale;
-    this.miniTf = { scale, offX, offY, dpr };
-    const base = document.createElement("canvas");
     base.width = canvas.width;
     base.height = canvas.height;
-    this.miniBase = base;
-    wrap.addEventListener("click", (e) => this.minimapJump(e));
-    this.drawMinimapStatic();
-    this.drawMinimapRect();
+    this.miniTf = createMinimapTransform(b, canvas.width, canvas.height, dpr, PAD);
+  }
+  syncMinimapLabel() {
+    if (!this.miniLabel || !this.miniWrap) return;
+    const floors = this.controller.getFloors();
+    const floor = this.controller.isFloorOverview() ? this.tf("picker.allFloors", "All floors") : floors.find((candidate) => candidate.id === this.controller.getActiveFloorId())?.name ?? this.tf("picker.venueOverview", "Venue overview");
+    const sections = this.controller.getMinimapSnapshot().sections;
+    const focused = sections.find((section) => section.active);
+    const focusedLabel = focused?.label ?? this.lastSection?.label;
+    const label = focusedLabel ? `${floor} \xB7 ${focusedLabel}` : floor;
+    this.miniLabel.textContent = label;
+    const selected = sections.filter((section) => section.state === "selected").length;
+    const available = sections.filter((section) => section.state === "available").length;
+    const inactive = sections.filter((section) => section.state === "inactive").length;
+    this.miniWrap.setAttribute(
+      "aria-label",
+      sections.length ? `${label}. ${selected} selected, ${available} available, ${inactive} inactive sections.` : label
+    );
+    this.miniCanvas?.setAttribute(
+      "aria-label",
+      sections.length ? `${label}. ${selected} selected, ${available} available, ${inactive} inactive sections. ${this.tf("picker.venueMapInstructions", "The outlined region is the visible map area. Drag it, click a section, or use arrow keys to pan.")}` : `${label}. ${this.tf("picker.venueMapInstructions", "The outlined region is the visible map area. Drag it, click elsewhere, or use arrow keys to pan.")}`
+    );
   }
   /** Repaint the static overview + rect (floor switch, live open/close). */
   refreshMinimap() {
     if (!this.miniBase) return;
+    this.layoutMinimap();
+    this.syncMinimapLabel();
     this.drawMinimapStatic();
     this.drawMinimapRect();
   }
@@ -4907,8 +5301,7 @@ var SeatPicker = class _SeatPicker {
   drawMinimapStatic() {
     const base = this.miniBase;
     const tf = this.miniTf;
-    const doc = this.controller.doc;
-    if (!base || !tf || !doc) return;
+    if (!base || !tf) return;
     const ctx = base.getContext("2d");
     if (!ctx) return;
     ctx.clearRect(0, 0, base.width, base.height);
@@ -4917,34 +5310,42 @@ var SeatPicker = class _SeatPicker {
     const line = this.cssVar("--sl-line") || "rgba(139,147,167,.5)";
     const muted = this.cssVar("--sl-muted") || "#8b93a7";
     const accent = this.cssVar("--sl-accent") || "#6e7bff";
-    const zoneColor = new Map((doc.zones ?? []).map((z) => [z.id, z.color]));
-    let drewSection = false;
-    for (const o of this.activeFloorObjects()) {
-      if (o.type !== "section" || !o.outline || o.outline.length < 3) continue;
-      drewSection = true;
-      const closed = this.controller.isSectionClosed(o.id);
-      const fill = closed ? muted : o.color ?? (o.zone && zoneColor.get(o.zone)) ?? accent;
+    const available = this.cssVar("--sl-success") || "#22a06b";
+    const snapshot = this.controller.getMinimapSnapshot();
+    for (const section of snapshot.sections) {
+      if (section.outline.length < 3) continue;
       ctx.beginPath();
-      o.outline.forEach((p, i) => i === 0 ? ctx.moveTo(fx(p.x), fy(p.y)) : ctx.lineTo(fx(p.x), fy(p.y)));
+      section.outline.forEach((point, index) => index === 0 ? ctx.moveTo(fx(point.x), fy(point.y)) : ctx.lineTo(fx(point.x), fy(point.y)));
       ctx.closePath();
-      ctx.globalAlpha = closed ? 0.26 : 0.42;
-      ctx.fillStyle = fill;
+      ctx.globalAlpha = section.state === "inactive" ? 0.18 : section.state === "selected" ? 0.72 : 0.34;
+      ctx.fillStyle = section.state === "inactive" ? muted : section.state === "selected" ? accent : available;
       ctx.fill();
-      ctx.globalAlpha = 0.85;
+      ctx.globalAlpha = 0.82;
       ctx.lineWidth = Math.max(1, tf.dpr);
       ctx.strokeStyle = line;
       ctx.stroke();
+      if (section.active) {
+        ctx.globalAlpha = 1;
+        ctx.lineJoin = "round";
+        ctx.lineWidth = Math.max(4, tf.dpr * 3.5);
+        ctx.strokeStyle = this.cssVar("--sl-surface") || "#fff";
+        ctx.stroke();
+        ctx.lineWidth = Math.max(2, tf.dpr * 1.75);
+        ctx.strokeStyle = accent;
+        ctx.stroke();
+      }
     }
     ctx.globalAlpha = 1;
-    if (!drewSection) {
+    if (!snapshot.sections.length) {
       const r = Math.max(1, tf.dpr);
-      for (const seat of expandChart(doc)) {
-        const cat = doc.categories.find((c) => c.key === seat.categoryKey);
-        ctx.fillStyle = cat?.color ?? accent;
+      for (const seat of snapshot.seats) {
+        ctx.globalAlpha = seat.state === "inactive" ? 0.22 : 0.78;
+        ctx.fillStyle = seat.state === "inactive" ? muted : seat.state === "selected" ? accent : available;
         ctx.beginPath();
         ctx.arc(fx(seat.x), fy(seat.y), r, 0, Math.PI * 2);
         ctx.fill();
       }
+      ctx.globalAlpha = 1;
     }
   }
   /** Blit the base overview, then stroke the current viewport rectangle on top. */
@@ -4959,41 +5360,106 @@ var SeatPicker = class _SeatPicker {
     ctx.drawImage(base, 0, 0);
     const vp = this.controller.getViewport();
     if (!vp) return;
-    const v = vp.visible;
-    const x = v.x * tf.scale + tf.offX;
-    const y = v.y * tf.scale + tf.offY;
-    const w = v.width * tf.scale;
-    const h = v.height * tf.scale;
-    const accent = this.cssVar("--sl-accent") || "#f4b740";
+    const plan = minimapViewportPlan(vp.visible, tf, canvas.width, canvas.height, Math.max(2, tf.dpr * 2));
+    const ink = this.cssVar("--sl-text") || "#12151c";
+    const surface = this.cssVar("--sl-surface") || "#fff";
     ctx.save();
-    ctx.globalAlpha = 0.14;
-    ctx.fillStyle = accent;
-    ctx.fillRect(x, y, w, h);
+    ctx.globalAlpha = 0.1;
+    ctx.fillStyle = ink;
+    ctx.fillRect(plan.raw.x, plan.raw.y, plan.raw.width, plan.raw.height);
+    ctx.globalAlpha = 0.9;
+    ctx.lineJoin = "round";
+    ctx.lineWidth = Math.max(4, tf.dpr * 3.25);
+    ctx.strokeStyle = surface;
+    ctx.strokeRect(plan.raw.x, plan.raw.y, plan.raw.width, plan.raw.height);
     ctx.globalAlpha = 1;
-    ctx.lineWidth = Math.max(1.5, tf.dpr * 1.5);
-    ctx.strokeStyle = accent;
-    ctx.strokeRect(x, y, w, h);
+    ctx.lineWidth = Math.max(2, tf.dpr * 1.75);
+    ctx.strokeStyle = ink;
+    ctx.strokeRect(plan.raw.x, plan.raw.y, plan.raw.width, plan.raw.height);
+    if (plan.clipped && Object.values(plan.clippedEdges).some(Boolean)) {
+      ctx.setLineDash([Math.max(3, tf.dpr * 3), Math.max(2, tf.dpr * 2)]);
+      ctx.strokeRect(plan.clipped.x, plan.clipped.y, plan.clipped.width, plan.clipped.height);
+    }
     ctx.restore();
   }
-  /** Minimap click → focus the section under the point (or overview on a miss). */
-  minimapJump(e) {
+  minimapWorldPoint(event) {
     const canvas = this.miniCanvas;
     const tf = this.miniTf;
-    if (!canvas || !tf) return;
-    const r = canvas.getBoundingClientRect();
-    const px = (e.clientX - r.left) * (canvas.width / r.width);
-    const py = (e.clientY - r.top) * (canvas.height / r.height);
-    const wx = (px - tf.offX) / tf.scale;
-    const wy = (py - tf.offY) / tf.scale;
-    for (const o of this.activeFloorObjects()) {
-      if (o.type !== "section" || !o.outline || o.outline.length < 3) continue;
-      if (this.controller.isSectionClosed(o.id)) continue;
-      if (pointInPolygon(wx, wy, o.outline)) {
-        this.controller.focusSection(o.id);
+    if (!canvas || !tf) return null;
+    const rect = canvas.getBoundingClientRect();
+    const px = (event.clientX - rect.left) * (canvas.width / Math.max(1, rect.width));
+    const py = (event.clientY - rect.top) * (canvas.height / Math.max(1, rect.height));
+    return { ...minimapPointToWorld({ x: px, y: py }, tf), px, py };
+  }
+  minimapPointerDown(event) {
+    const point = this.minimapWorldPoint(event);
+    const visible = this.controller.getViewport()?.visible;
+    if (!point || !visible) return;
+    const inside = point.x >= visible.x && point.x <= visible.x + visible.width && point.y >= visible.y && point.y <= visible.y + visible.height;
+    if (!inside) return;
+    this.miniDrag = {
+      pointerId: event.pointerId,
+      offsetX: point.x - (visible.x + visible.width / 2),
+      offsetY: point.y - (visible.y + visible.height / 2),
+      startX: event.clientX,
+      startY: event.clientY,
+      moved: false
+    };
+    this.miniCanvas?.setPointerCapture(event.pointerId);
+    this.miniCanvas?.classList.add("sl-dragging");
+    event.preventDefault();
+  }
+  minimapPointerMove(event) {
+    const drag = this.miniDrag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const point = this.minimapWorldPoint(event);
+    if (!point) return;
+    if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) > 2) {
+      drag.moved = true;
+      this.controller.clearSectionFocus();
+    }
+    this.controller.panToWorld({ x: point.x - drag.offsetX, y: point.y - drag.offsetY });
+    event.preventDefault();
+  }
+  minimapPointerUp(event) {
+    const drag = this.miniDrag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    this.miniSuppressClick = drag.moved;
+    this.miniDrag = null;
+    this.miniCanvas?.classList.remove("sl-dragging");
+    if (this.miniCanvas?.hasPointerCapture(event.pointerId)) this.miniCanvas.releasePointerCapture(event.pointerId);
+  }
+  minimapKeydown(event) {
+    const visible = this.controller.getViewport()?.visible;
+    if (!visible) return;
+    if (event.key === "Home") {
+      this.controller.overview();
+      event.preventDefault();
+      return;
+    }
+    const dx = event.key === "ArrowLeft" ? -visible.width * 0.2 : event.key === "ArrowRight" ? visible.width * 0.2 : 0;
+    const dy = event.key === "ArrowUp" ? -visible.height * 0.2 : event.key === "ArrowDown" ? visible.height * 0.2 : 0;
+    if (!dx && !dy) return;
+    this.controller.clearSectionFocus();
+    this.controller.panToWorld({
+      x: visible.x + visible.width / 2 + dx,
+      y: visible.y + visible.height / 2 + dy
+    });
+    event.preventDefault();
+  }
+  /** Minimap click → focus an available section, otherwise pan there. */
+  minimapJump(e) {
+    const point = this.minimapWorldPoint(e);
+    if (!point) return;
+    for (const section of this.controller.getMinimapSnapshot().sections) {
+      if (section.state === "inactive" || section.outline.length < 3) continue;
+      if (pointInPolygon(point.x, point.y, section.outline)) {
+        this.controller.focusSection(section.id);
         return;
       }
     }
-    this.controller.overview();
+    this.controller.clearSectionFocus();
+    this.controller.panToWorld(point);
   }
   // ---- F4 price-band filter -------------------------------------------------
   /** Effective display price of a category: host pricing override → first tier → base. */
@@ -5002,32 +5468,39 @@ var SeatPicker = class _SeatPicker {
     if (chart === void 0 || !c.key) return chart;
     return this.paidPrice(c.key, c.tiers?.[0]?.id ?? null, chart);
   }
-  /** Derive price bands: one chip per distinct price (≤5), else quantile ranges. */
+  /** Complete buyer-visible price range, including every ticket tier and
+   * tier-specific host override. */
+  catPriceRange(c) {
+    const prices = c.tiers?.length ? c.tiers.map((tier) => this.paidPrice(c.key, tier.id ?? null, tier.price)) : c.price == null ? [] : [this.paidPrice(c.key, null, c.price)];
+    return prices.length ? { min: Math.min(...prices), max: Math.max(...prices) } : void 0;
+  }
+  /** Derive category price bands without hiding the upper end of tier ranges. */
   priceBands() {
     const doc = this.controller.doc;
     if (!doc) return [];
-    const priced = doc.categories.map((c) => ({ key: c.key, price: this.catPrice(c) })).filter((x) => x.price != null);
+    const priced = doc.categories.map((c) => ({ key: c.key, range: this.catPriceRange(c) })).filter((x) => x.range != null);
     if (!priced.length) return [];
-    const distinct = [...new Set(priced.map((p) => p.price))].sort((a, b) => a - b);
+    const distinct = [...new Map(priced.map((item) => [`${item.range.min}:${item.range.max}`, item.range])).values()].sort((a, b) => a.min - b.min || a.max - b.max);
     if (distinct.length <= 5) {
-      return distinct.map((price) => ({
-        id: `p${price}`,
-        label: this.money(price),
-        keys: priced.filter((p) => p.price === price).map((p) => p.key),
-        min: price,
-        max: price
+      return distinct.map((range) => ({
+        id: `p${range.min}-${range.max}`,
+        label: range.min === range.max ? this.money(range.min) : `${this.money(range.min)}\u2013${this.money(range.max)}`,
+        keys: priced.filter((item) => item.range.min === range.min && item.range.max === range.max).map((item) => item.key),
+        min: range.min,
+        max: range.max
       }));
     }
-    const chunk = Math.ceil(distinct.length / 4);
+    const ordered = [...priced].sort((a, b) => a.range.min - b.range.min || a.range.max - b.range.max);
+    const chunk = Math.ceil(ordered.length / 4);
     const bands = [];
-    for (let i = 0; i < distinct.length; i += chunk) {
-      const slice = distinct.slice(i, i + chunk);
-      const lo = slice[0];
-      const hi = slice[slice.length - 1];
+    for (let i = 0; i < ordered.length; i += chunk) {
+      const slice = ordered.slice(i, i + chunk);
+      const lo = Math.min(...slice.map((item) => item.range.min));
+      const hi = Math.max(...slice.map((item) => item.range.max));
       bands.push({
         id: `b${i}`,
         label: lo === hi ? this.money(lo) : `${this.money(lo)}\u2013${this.money(hi)}`,
-        keys: priced.filter((p) => p.price >= lo && p.price <= hi).map((p) => p.key),
+        keys: slice.map((item) => item.key),
         min: lo,
         max: hi
       });
@@ -5042,8 +5515,8 @@ var SeatPicker = class _SeatPicker {
     if (bands.length < 2) return;
     const select = document.createElement("select");
     select.className = "sl-price-select";
-    select.setAttribute("aria-label", "Filter and focus seats by price");
-    select.innerHTML = `<option value="all">All prices</option>` + bands.map((band) => `<option value="${band.id}">${band.label}</option>`).join("");
+    select.setAttribute("aria-label", this.tf("picker.filterAndFocusByPrice", "Filter and focus seats by price"));
+    select.innerHTML = `<option value="all">${this.tf("picker.allPrices", "All prices")}</option>` + bands.map((band) => `<option value="${band.id}">${band.label}</option>`).join("");
     this.els.pricesSec.appendChild(select);
     select.addEventListener("change", () => {
       const band = bands.find((candidate) => candidate.id === select.value);
@@ -5070,8 +5543,8 @@ var SeatPicker = class _SeatPicker {
       const projection = document.createElement("div");
       projection.className = "sl-projection";
       projection.setAttribute("role", "group");
-      projection.setAttribute("aria-label", "Venue view");
-      projection.innerHTML = '<button type="button" data-view="map" aria-pressed="true" title="Flat 2D map">Map</button><button type="button" data-view="venue3d" aria-pressed="false" title="Interactive 3D venue view">3D</button>';
+      projection.setAttribute("aria-label", this.tf("picker.venueView", "Venue view"));
+      projection.innerHTML = `<button type="button" data-view="map" aria-pressed="true" title="${this.tf("picker.flat2dMap", "Flat 2D map")}">${this.tf("picker.map", "Map")}</button><button type="button" data-view="venue3d" aria-pressed="false" title="${this.tf("picker.interactive3dVenueView", "Interactive 3D venue view")}">3D</button>`;
       projection.querySelectorAll("button").forEach((button) => {
         button.addEventListener("click", () => {
           this.setBuyerView(button.dataset.view);
@@ -5082,7 +5555,13 @@ var SeatPicker = class _SeatPicker {
       this.syncProjection();
     }
     if (hasSections) {
-      const RUNGS = ["zones", "sections", "seats"];
+      const allObjects = [
+        ...doc.objects,
+        ...(doc.floors ?? []).flatMap((floor) => floor.objects)
+      ];
+      const authoredZoneIds = new Set((doc.zones ?? []).map((zone) => zone.id));
+      const hasZones = allObjects.some((object) => object.type === "section" && typeof object.zone === "string" && authoredZoneIds.has(object.zone));
+      const RUNGS = hasZones ? ["zones", "sections", "seats"] : ["sections", "seats"];
       const pills = document.createElement("div");
       pills.className = "sl-rungs on";
       pills.setAttribute("role", "group");
@@ -5115,18 +5594,38 @@ var SeatPicker = class _SeatPicker {
       const floors = this.controller.getFloors();
       const rail = document.createElement("div");
       rail.className = "sl-floors on";
-      rail.setAttribute("role", "group");
-      rail.setAttribute("aria-label", t2("picker.floor"));
-      rail.innerHTML = floors.map((f) => `<button type="button" data-floor="${f.id}">${f.name}</button>`).join("");
-      rail.querySelectorAll("button").forEach((btn) => {
-        btn.addEventListener("click", () => {
-          this.controller.setFloor(btn.dataset.floor);
-          this.showSectionCard(null);
-          this.syncFloors();
-          this.syncRung();
-          this.refreshMinimap();
-        });
+      const select = document.createElement("select");
+      select.setAttribute("aria-label", this.tf("picker.chooseLevel", "Choose level"));
+      const overview = document.createElement("option");
+      overview.value = "";
+      overview.textContent = this.tf("picker.allFloors", "All floors");
+      select.appendChild(overview);
+      for (const floor of floors) {
+        const option = document.createElement("option");
+        option.value = floor.id;
+        option.textContent = floor.name;
+        select.appendChild(option);
+      }
+      select.addEventListener("change", () => {
+        if (select.value === "") this.controller.setFloorOverview(true);
+        else this.controller.setFloor(select.value);
+        this.showSectionCard(null);
+        this.syncFloors();
+        this.syncRung();
+        this.refreshMinimap();
       });
+      rail.appendChild(select);
+      const info = document.createElement("button");
+      info.type = "button";
+      info.className = "sl-floor-info";
+      info.textContent = "i";
+      const explanation = this.tf(
+        "picker.floorHelp",
+        "All floors shows the complete venue. Choose one level to inspect and select its seats."
+      );
+      info.setAttribute("aria-label", explanation);
+      info.title = explanation;
+      rail.appendChild(info);
       this.regions["left-rail"].appendChild(rail);
       this.floorsEl = rail;
       this.syncFloors();
@@ -5172,19 +5671,59 @@ var SeatPicker = class _SeatPicker {
   syncFloors() {
     if (!this.floorsEl) return;
     const active = this.controller.getActiveFloorId();
-    this.floorsEl.querySelectorAll("button").forEach((btn) => {
-      btn.classList.toggle("on", btn.dataset.floor === active);
-    });
+    const overview = this.controller.isFloorOverview();
+    const select = this.floorsEl.querySelector("select");
+    if (select) select.value = overview ? "" : active;
   }
   /** Show (or clear, on null) the tapped-section summary card. */
   showSectionCard(summary) {
     this.lastSection = summary;
     this.secCardEl?.remove();
     this.secCardEl = null;
-    if (!summary) return;
+    if (!summary) {
+      this.refreshMinimap();
+      return;
+    }
     this.secCardCollapsed = this.controller.getRung() === "seats";
     this.secCardShownAt = Date.now();
     this.renderSectionCard(summary);
+    this.refreshMinimap();
+  }
+  /**
+   * Open sections next to the focused one, in authored order.
+   *
+   * This is intentionally a circular ring: arena sections are usually authored
+   * clockwise, so moving past the last section should reach the first without
+   * forcing a buyer back through the overview level. Closed or empty sections
+   * are skipped because focusing one cannot produce a useful buyer card.
+   */
+  sectionNeighbours(sectionId) {
+    const sections = this.activeFloorObjects().filter((object) => object.type === "section" && !this.controller.isSectionClosed(object.id) && this.controller.getSectionSeatCount(object.id) > 0);
+    if (sections.length < 2) return null;
+    const index = sections.findIndex((section) => section.id === sectionId);
+    if (index < 0) return null;
+    return {
+      previous: sections[(index - 1 + sections.length) % sections.length],
+      next: sections[(index + 1) % sections.length]
+    };
+  }
+  /** Previous/next controls shared by expanded, mini, and phone section cards. */
+  sectionNavigationHtml(summary) {
+    const neighbours = this.sectionNeighbours(summary.id);
+    if (!neighbours) return "";
+    const previousLabel = neighbours.previous.label || neighbours.previous.id;
+    const nextLabel = neighbours.next.label || neighbours.next.id;
+    return `<span class="sl-seccard-nav" aria-label="${this.tf("picker.browseSections", "Browse sections")}"><button type="button" data-section-nav="${escapeOption(neighbours.previous.id)}" aria-label="${this.tf("picker.previousSection", "Previous section")}: ${escapeOption(previousLabel)}" title="${escapeOption(previousLabel)}">\u2190</button><button type="button" data-section-nav="${escapeOption(neighbours.next.id)}" aria-label="${this.tf("picker.nextSection", "Next section")}: ${escapeOption(nextLabel)}" title="${escapeOption(nextLabel)}">\u2192</button></span>`;
+  }
+  wireSectionNavigation(card) {
+    card.querySelectorAll("[data-section-nav]").forEach((button) => {
+      button.addEventListener("click", (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const sectionId = button.dataset.sectionNav;
+        if (sectionId) this.controller.focusSection(sectionId);
+      });
+    });
   }
   /**
    * Render the section card in the form the layout + state want: expanded card
@@ -5194,26 +5733,36 @@ var SeatPicker = class _SeatPicker {
   renderSectionCard(summary) {
     if (!this.els.map) return;
     this.secCardEl?.remove();
-    const paid = summary.categories.length ? summary.categories.map((c) => this.paidPrice(c.key, null, c.price)) : [summary.priceMin, summary.priceMax];
-    const paidMin = Math.min(...paid);
-    const paidMax = Math.max(...paid);
+    if (this.root?.dataset.layout === "narrow" && (this.hold || this.committedSelection().length || this.pendingGACount())) {
+      this.lastSection = null;
+      return;
+    }
+    const paidRanges = summary.categories.length ? summary.categories.map((item) => {
+      const category = this.controller.doc?.categories.find((candidate) => candidate.key === item.key);
+      return category ? this.catPriceRange(category) : { min: item.priceMin, max: item.priceMax };
+    }).filter((range) => range != null) : [{ min: summary.priceMin, max: summary.priceMax }];
+    const paidMin = Math.min(...paidRanges.map((range) => range.min));
+    const paidMax = Math.max(...paidRanges.map((range) => range.max));
     const priceLabel = paidMin === paidMax ? this.money(paidMin) : `${this.money(paidMin)}\u2013${this.money(paidMax)}`;
     const leftLabel = tCount("picker.seatsLeftInSection", summary.seatsLeft);
     const xBtn = `<button type="button" class="sl-seccard-x" aria-label="${t2("picker.closeSectionSummary")}">\u2715</button>`;
+    const sectionNav = this.sectionNavigationHtml(summary);
     const card = document.createElement("div");
     const narrow = this.root?.dataset.layout === "narrow";
     if (narrow) {
       card.className = "sl-seccard strip on";
       card.setAttribute("role", "status");
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
-      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn;
+      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + sectionNav + xBtn;
+      this.wireSectionNavigation(card);
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       (this.els.sheetHead ?? this.els.side ?? this.els.map).appendChild(card);
     } else if (this.secCardCollapsed) {
       card.className = "sl-seccard mini on";
       card.setAttribute("role", "button");
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
-      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + xBtn;
+      card.innerHTML = `<span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span><span class="sl-seccard-left">${leftLabel}</span>` + sectionNav + xBtn;
+      this.wireSectionNavigation(card);
       card.addEventListener("click", (e) => {
         if (e.target.closest(".sl-seccard-x")) return;
         this.secCardCollapsed = false;
@@ -5228,9 +5777,13 @@ var SeatPicker = class _SeatPicker {
       card.setAttribute("aria-label", t2("picker.sectionSummaryAria", { label: summary.label }));
       const mix = summary.categories.map((c) => {
         const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${this.money(this.paidPrice(c.key, null, c.price))}</span></span>`;
+        const category = this.controller.doc?.categories.find((candidate) => candidate.key === c.key);
+        const range = category ? this.catPriceRange(category) : { min: c.priceMin, max: c.priceMax };
+        const rangeLabel = range && range.min !== range.max ? `${this.money(range.min)}\u2013${this.money(range.max)}` : this.money(range?.min ?? c.price);
+        return `<span class="sl-seccard-mix-item${dim ? " sl-dim" : ""}"><span class="sl-seccard-mix-dot" style="background:${c.color}"></span>${c.label} <span class="sl-seccard-mix-price">${rangeLabel}</span></span>`;
       }).join("");
-      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (summary.entrance ? `<div class="sl-seccard-entrance">${t2("picker.entrance")} ${String(summary.entrance).replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch])}</div>` : "") + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button><span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
+      card.innerHTML = `<div class="sl-seccard-head"><span class="sl-seccard-dot" style="background:${summary.color}"></span><span class="sl-seccard-name">${summary.label}</span>` + (summary.categories.length ? `<span class="sl-seccard-price">${priceLabel}</span>` : "") + xBtn + `</div><div class="sl-seccard-zone">${summary.zoneLabel ? `${summary.zoneLabel} \xB7 ` : ""}<span class="sl-seccard-left">${leftLabel}</span></div>` + (summary.entrance ? `<div class="sl-seccard-entrance">${t2("picker.entrance")} ${String(summary.entrance).replace(/[&<>"]/g, (ch) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[ch])}</div>` : "") + (mix ? `<div class="sl-seccard-mix">${mix}</div>` : "") + `<div class="sl-seccard-foot"><button type="button" class="sl-seccard-overview">\u2190 ${t2("picker.overview")}</button>` + sectionNav + `<span class="sl-seccard-hint">${t2("picker.tapSeatHint")}</span></div>`;
+      this.wireSectionNavigation(card);
       card.querySelector(".sl-seccard-x").addEventListener("click", () => this.controller.overview());
       card.querySelector(".sl-seccard-overview").addEventListener("click", () => this.controller.overview());
       (this.regions["top-center"] ?? this.els.map).appendChild(card);
@@ -5294,14 +5847,15 @@ var SeatPicker = class _SeatPicker {
     }
     const cat = this.controller.doc?.categories.find((c) => c.key === seat.categoryKey);
     const status = this.controller.getStatus(seat.id) ?? "free";
-    const statusText = status === "free" ? "available" : status === "held" ? "on hold" : "taken";
-    const price = cat ? this.catPrice(cat) : void 0;
+    const statusText = status === "free" ? this.tf("picker.statusAvailable", "available") : status === "held" ? this.tf("picker.statusOnHold", "on hold") : this.tf("picker.statusTaken2", "taken");
+    const priceRange = cat ? this.catPriceRange(cat) : void 0;
+    const priceText = priceRange ? priceRange.min === priceRange.max ? this.money(priceRange.min) : `${this.money(priceRange.min)}\u2013${this.money(priceRange.max)}` : void 0;
     const table = this.controller.tableSelection(seat.id);
     const details = table ?? this.controller.seatDetails(seat.id);
     const typeWord = this.rowTypeWord(details);
     const buyerName = details?.rowLabel ?? details?.displayLabel ?? seat.displayLabel ?? seat.label;
-    const identity = table ? `${typeWord} ${buyerName}, ${table.bookingMode === "variable" ? `${table.minOccupancy} to ${table.maxOccupancy} guests` : `${table.capacity} guests`}` : details?.objectType === "booth" ? `${typeWord} ${buyerName}` : details?.objectType === "table" ? `${typeWord} ${buyerName}, seat ${details.seatNumber ?? seat.label}` : `Seat ${details?.displayLabel ?? seat.displayLabel ?? seat.label}`;
-    this.srEl.textContent = `${identity}, ${cat?.label ?? seat.categoryKey}${price != null ? `, ${this.money(price)}` : ""}, ${statusText}`;
+    const identity = table ? `${typeWord} ${buyerName}, ${table.bookingMode === "variable" ? t2("picker.minToMaxGuests", { min: table.minOccupancy, max: table.maxOccupancy }) : t2("picker.capacityGuests", { count: table.capacity })}` : details?.objectType === "booth" ? `${typeWord} ${buyerName}` : details?.objectType === "table" ? `${typeWord} ${buyerName}, ${t2("picker.seatNumberLower", { label: details.seatNumber ?? seat.label })}` : t2("picker.seatLabel", { label: details?.displayLabel ?? seat.displayLabel ?? seat.label });
+    this.srEl.textContent = `${identity}, ${cat?.label ?? seat.categoryKey}${priceText ? `, ${priceText}` : ""}, ${statusText}`;
   }
   // ---- atomic table confirmation / guest quantity ---------------------------
   showTableDialog(table, held, returnFocus) {
@@ -5321,7 +5875,7 @@ var SeatPicker = class _SeatPicker {
     const typeWord = this.rowTypeWord(table);
     const el = document.createElement("div");
     el.className = "sl-table-scrim";
-    el.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc(variable ? `Flexible party \xB7 ${typeWord}` : `Whole ${typeWord}`)}</div><h2 class="sl-table-title" id="sl-table-title">${esc(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? `Choose how many guests will sit together. This table is held exclusively for your party.` : `All ${table.capacity} places are booked together as one exclusive table.`}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price))} per guest</b><span class="muted">Table capacity</span><span>${table.capacity} guests</span><span class="muted">Total</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">Number of guests</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="Fewer guests">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="More guests">+</button></div><div class="sl-table-range">Choose ${table.minOccupancy}\u2013${table.maxOccupancy} guests</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">Cancel</button><button type="button" class="sl-table-confirm">${held ? "Update table" : variable ? "Select table" : "Select whole table"}</button></div></div></section>`;
+    el.innerHTML = `<section class="sl-table-dialog" role="dialog" aria-modal="true" aria-labelledby="sl-table-title" aria-describedby="sl-table-copy"><div class="sl-table-head"><div class="sl-table-eyebrow">${esc(variable ? t2("picker.flexiblePartyTypeWord", { typeWord }) : t2("picker.wholeTypeWord", { typeWord }))}</div><h2 class="sl-table-title" id="sl-table-title">${esc(table.displayLabel ?? table.label)}</h2><p class="sl-table-copy" id="sl-table-copy">${variable ? this.tf("picker.chooseGuestsCopy", "Choose how many guests will sit together. This table is held exclusively for your party.") : t2("picker.allPlacesBookedTogether", { count: table.capacity })}</p></div><div class="sl-table-body"><div class="sl-table-summary"><span>${esc(cat?.label ?? table.categoryKey)}</span><b data-table-unit>${t2("picker.perGuestPrice", { price: this.money(this.paidPrice(table.categoryKey, table.tierId ?? null, table.price)) })}</b><span class="muted">${this.tf("picker.tableCapacity", "Table capacity")}</span><span>${t2("picker.guestsCount", { count: table.capacity })}</span><span class="muted">${this.tf("picker.total", "Total")}</span><b data-table-total></b></div>` + (variable ? `<label class="sl-table-qtylabel" id="sl-table-qty-label">${this.tf("picker.numberOfGuests", "Number of guests")}</label><div class="sl-table-stepper" role="group" aria-labelledby="sl-table-qty-label"><button type="button" data-table-step="-1" aria-label="${this.tf("picker.fewerGuests", "Fewer guests")}">\u2212</button><output aria-live="polite" data-table-qty>${table.quantity}</output><button type="button" data-table-step="1" aria-label="${this.tf("picker.moreGuests", "More guests")}">+</button></div><div class="sl-table-range">${t2("picker.chooseMinMaxGuests", { min: table.minOccupancy, max: table.maxOccupancy })}</div>` : `<input type="hidden" data-table-qty value="${table.capacity}">`) + `<div class="sl-table-actions"><button type="button" class="sl-table-cancel">${t2("common.cancel")}</button><button type="button" class="sl-table-confirm">${held ? this.tf("picker.updateTable", "Update table") : variable ? this.tf("picker.selectTable", "Select table") : this.tf("picker.selectWholeTable", "Select whole table")}</button></div></div></section>`;
     this.root.appendChild(el);
     this.tableDialogEl = el;
     this.renderTableDialogState();
@@ -5380,17 +5934,17 @@ var SeatPicker = class _SeatPicker {
     const button = this.tableDialogEl?.querySelector(".sl-table-confirm");
     if (button) {
       button.disabled = true;
-      button.textContent = held ? "Updating\u2026" : "Selecting\u2026";
+      button.textContent = held ? this.tf("picker.updatingEllipsis", "Updating\u2026") : this.tf("picker.selectingEllipsis", "Selecting\u2026");
     }
     if (held) {
       try {
         const updated = await this.controller.replaceTableQuantity(table.label, table.quantity, this.opts.holdTtlMs);
         if (!updated) {
-          this.toast("That guest count could not be secured. Your current table hold is unchanged.", "warning");
+          this.toast(this.tf("picker.guestCountCouldNotBeSecured", "That guest count could not be secured. Your current table hold is unchanged."), "warning");
           this.renderTableDialogState();
           if (button) {
             button.disabled = false;
-            button.textContent = "Update table";
+            button.textContent = this.tf("picker.updateTable", "Update table");
           }
           return;
         }
@@ -5404,13 +5958,13 @@ var SeatPicker = class _SeatPicker {
         this.dismissTableDialog();
         this.syncTray();
         this.emitHoldChange();
-        this.toast(`${table.label} updated for ${table.quantity} guests.`, "success");
+        this.toast(t2("picker.tableUpdatedForGuests", { label: table.label, count: table.quantity }), "success");
       } catch (error) {
         this.opts.onError?.(error);
-        this.toast("That guest count is no longer available. Your current hold is unchanged.", "error");
+        this.toast(this.tf("picker.guestCountNoLongerAvailable", "That guest count is no longer available. Your current hold is unchanged."), "error");
         if (button) {
           button.disabled = false;
-          button.textContent = "Update table";
+          button.textContent = this.tf("picker.updateTable", "Update table");
         }
       }
       return;
@@ -5418,7 +5972,7 @@ var SeatPicker = class _SeatPicker {
     if (!this.controller.setTableQuantity(table.label, table.quantity)) {
       if (button) {
         button.disabled = false;
-        button.textContent = table.bookingMode === "variable" ? "Select table" : "Select whole table";
+        button.textContent = table.bookingMode === "variable" ? this.tf("picker.selectTable", "Select table") : this.tf("picker.selectWholeTable", "Select whole table");
       }
       return;
     }
@@ -5464,16 +6018,26 @@ var SeatPicker = class _SeatPicker {
       '"': "&quot;"
     })[char]);
     const identityFields = [
-      details?.sectionLabel ? `<div class="sl-confirm-field"><span class="sl-confirm-key">Section</span><span class="sl-confirm-value">${safe(details.sectionLabel)}</span></div>` : "",
+      details?.sectionLabel ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${this.tf("picker.section", "Section")}</span><span class="sl-confirm-value">${safe(details.sectionLabel)}</span></div>` : "",
       details?.rowLabel || details?.objectType === "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${safe(this.rowTypeWord(details))}</span><span class="sl-confirm-value">${safe(this.rowShort(details) ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : "",
-      details?.objectType !== "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">Seat</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : ""
+      details?.objectType !== "booth" ? `<div class="sl-confirm-field"><span class="sl-confirm-key">${this.tf("picker.seat", "Seat")}</span><span class="sl-confirm-value">${safe(details?.seatNumber ?? details?.displayLabel ?? seat.displayLabel ?? seat.label)}</span></div>` : ""
     ].filter(Boolean).join("");
+    const tiers = details?.tiers ?? cat?.tiers ?? [];
+    const selectedTierId = details?.tierId ?? tiers[0]?.id;
+    const tierGuidance = (tier) => tier.buyerMessage?.trim() || (tier.restriction === "companion" ? this.tf("picker.companionRequiresWheelchair", "Requires the adjacent wheelchair place") : void 0);
+    const tierChoices = tiers.length > 1 ? `<fieldset class="sl-confirm-tiers"><legend>${this.tf("picker.ticketType", "Ticket type")}</legend>` + tiers.map((tier) => {
+      const guidance = tierGuidance(tier);
+      return `<button type="button" class="sl-confirm-tier" data-confirm-tier="${safe(tier.id)}" aria-pressed="${tier.id === selectedTierId}"><span class="sl-confirm-tier-copy"><span class="sl-confirm-tier-name">${safe(tier.name)}</span>` + (guidance ? `<small class="sl-confirm-tier-note">${safe(guidance)}</small>` : "") + `</span><span class="sl-confirm-tier-price">${this.money(this.paidPrice(seat.categoryKey, tier.id, tier.price))}</span></button>`;
+    }).join("") + `</fieldset>` : tiers[0] && tierGuidance(tiers[0]) ? `<p class="sl-confirm-tier-note">${safe(tierGuidance(tiers[0]))}</p>` : "";
     const el = document.createElement("div");
     el.className = "sl-confirm";
     el.setAttribute("role", "dialog");
-    el.setAttribute("aria-label", `Confirm seat ${seat.label}`);
-    el.style.setProperty("--sl-cat", cat?.color ?? "#6e7bff");
-    el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() && this.buyerView !== "venue3d" ? this.confirmThumbHtml(seat) : "") + (this.buyerView === "venue3d" ? `${this.seatConfidenceConfirmHtml(seat, `${details?.displayLabel ?? seat.displayLabel ?? seat.label} \xB7 ${price == null ? this.tf("picker.priceNotSupplied", "Price not supplied") : this.money(price)}`)}<div class="sl-confirm-inspect-row">${this.view3dCompareConfirmHtml(seat)}${this.see3dConfirmHtml()}</div>` : this.see3dConfirmHtml()) + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">Cancel</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>Select</button></div></div>`;
+    el.setAttribute("aria-label", t2("picker.confirmSeatLabel", { label: seat.label }));
+    const categoryColor = cat?.color ?? "#6e7bff";
+    const categoryBand = mixThemeColors(categoryColor, this.cssVar("--sl-surface") || "#1a2234", 0.76) ?? categoryColor;
+    el.style.setProperty("--sl-cat", categoryColor);
+    el.style.setProperty("--sl-cat-ink", highestContrastInk(categoryBand, "#172033", "#ffffff"));
+    el.innerHTML = `<div class="sl-confirm-grid">` + identityFields + `</div><div class="sl-confirm-cat"><span class="sl-dot" style="background:${cat?.color ?? "#6e7bff"}"></span><span class="sl-confirm-cat-name">${safe(details?.categoryLabel ?? cat?.label ?? seat.categoryKey)}</span>` + (price != null ? `<span class="sl-confirm-price">${this.money(price)}</span>` : "") + `</div><div class="sl-confirm-body">` + tierChoices + this.wheelchairConfirmHtml(details?.wheelchairSpaceType) + this.commercialConfirmHtml(seat.commercial) + (this.seatViewEnabled() && this.buyerView !== "venue3d" ? this.confirmThumbHtml(seat) : "") + (this.buyerView === "venue3d" ? `${this.seatConfidenceConfirmHtml(seat, `${details?.displayLabel ?? seat.displayLabel ?? seat.label} \xB7 ${price == null ? this.tf("picker.priceNotSupplied", "Price not supplied") : this.money(price)}`)}<div class="sl-confirm-inspect-row">${this.view3dCompareConfirmHtml(seat)}${this.see3dConfirmHtml()}</div>` : this.see3dConfirmHtml()) + `<div class="sl-confirm-row"><button type="button" class="sl-confirm-cancel">${t2("common.cancel")}</button><button type="button" class="sl-confirm-add"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5l4 4L19 7"/></svg>${this.tf("picker.select", "Select")}</button></div></div>`;
     this.els.map.appendChild(el);
     this.confirmEl = el;
     const thumb = el.querySelector(".sl-confirm-thumb");
@@ -5489,6 +6053,22 @@ var SeatPicker = class _SeatPicker {
       this.openSeatConfidencePassport(seat, event.currentTarget instanceof HTMLElement ? event.currentTarget : null);
     });
     el.querySelector(".sl-confirm-compare")?.addEventListener("click", () => this.saveView3dComparisonSeat(seat));
+    el.querySelectorAll("[data-confirm-tier]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const tierId = button.dataset.confirmTier;
+        const tier = tiers.find((candidate) => candidate.id === tierId);
+        if (!tier) return;
+        this.controller.setSeatTier(seat.id, tier.id);
+        el.querySelectorAll("[data-confirm-tier]").forEach((candidate) => {
+          candidate.setAttribute("aria-pressed", String(candidate === button));
+        });
+        const priceElement = el.querySelector(".sl-confirm-price");
+        if (priceElement) {
+          priceElement.textContent = this.money(this.paidPrice(seat.categoryKey, tier.id, tier.price));
+        }
+        this.reanchorConfirm();
+      });
+    });
     el.querySelector(".sl-confirm-3d")?.addEventListener("click", () => {
       if (this.buyerView === "venue3d") {
         this.dismissConfirm();
@@ -5626,7 +6206,7 @@ var SeatPicker = class _SeatPicker {
     el.className = "sl-view";
     el.setAttribute("role", "dialog");
     el.setAttribute("aria-label", t2("picker.viewFromSeat", { label: seat.label }));
-    el.innerHTML = `<div class="sl-view-head"><span class="sl-view-title">${t2("picker.viewFromSeat", { label: seat.label })}</span><span class="sl-view-cap">${caption}</span><button type="button" class="sl-view-x" aria-label="Close"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="sl-view-pano"><span class="sl-view-badge">${real ? t2("picker.real360") : t2("picker.preview")}</span><span class="sl-view-hint">Drag to look around \xB7 scroll to zoom</span></div>`;
+    el.innerHTML = `<div class="sl-view-head"><span class="sl-view-title">${t2("picker.viewFromSeat", { label: seat.label })}</span><span class="sl-view-cap">${caption}</span><button type="button" class="sl-view-x" aria-label="${this.tf("picker.close", "Close")}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></div><div class="sl-view-pano"><span class="sl-view-badge">${real ? t2("picker.real360") : t2("picker.preview")}</span><span class="sl-view-hint">${this.tf("picker.dragToLookAround", "Drag to look around \xB7 scroll to zoom")}</span></div>`;
     this.root.appendChild(el);
     this.viewEl = el;
     const pano = el.querySelector(".sl-view-pano");
@@ -5822,27 +6402,27 @@ var SeatPicker = class _SeatPicker {
     copy.className = "sl-offer-copy";
     const kicker = document.createElement("span");
     kicker.className = "sl-offer-kicker";
-    kicker.textContent = active ? "Current ticket offer" : "Upcoming ticket offer";
+    kicker.textContent = active ? this.tf("picker.currentTicketOffer", "Current ticket offer") : this.tf("picker.upcomingTicketOffer", "Upcoming ticket offer");
     const name = document.createElement("strong");
     name.className = "sl-offer-name";
-    name.textContent = offer.name || (active ? "Current offer" : "Scheduled offer");
+    name.textContent = offer.name || (active ? this.tf("picker.currentOffer", "Current offer") : this.tf("picker.scheduledOffer", "Scheduled offer"));
     const line = document.createElement("span");
     line.className = "sl-offer-line";
     const facts = [];
     if (active && availability.fromPrice != null) facts.push(this.money(availability.fromPrice / 100));
-    if (active && offer.remaining != null) facts.push(`${offer.remaining} available`);
-    if (active && offer.endsAt != null) facts.push(`until ${formatWhen(offer.endsAt, this.eventTimezone, this.opts.locale)}`);
-    if (upcoming?.startsAt != null) facts.push(`starts ${formatWhen(upcoming.startsAt, this.eventTimezone, this.opts.locale)}`);
+    if (active && offer.remaining != null) facts.push(t2("picker.offerRemainingAvailable", { count: offer.remaining }));
+    if (active && offer.endsAt != null) facts.push(t2("picker.offerUntil", { time: formatWhen(offer.endsAt, this.eventTimezone, this.opts.locale) }));
+    if (upcoming?.startsAt != null) facts.push(t2("picker.offerStarts", { time: formatWhen(upcoming.startsAt, this.eventTimezone, this.opts.locale) }));
     line.textContent = facts.join(" \xB7 ");
     copy.append(kicker, name, line);
     const info = document.createElement("details");
     info.className = "sl-offer-info";
     const summary = document.createElement("summary");
-    summary.setAttribute("aria-label", `How the ${name.textContent} offer works`);
+    summary.setAttribute("aria-label", t2("picker.howOfferWorks", { name: name.textContent ?? "" }));
     summary.textContent = "i";
     const detail = document.createElement("div");
     detail.className = "sl-offer-detail";
-    detail.textContent = active ? `This price applies automatically to eligible seats. Tickets in active carts temporarily reduce the available quantity; released or expired holds return it. When the offer ends, the next matching offer or normal ticket price takes over.` : `Tickets are available at their normal price now. This scheduled offer will apply automatically to eligible seats when it starts.`;
+    detail.textContent = active ? this.tf("picker.offerDetailActive", "This price applies automatically to eligible seats. Tickets in active carts temporarily reduce the available quantity; released or expired holds return it. When the offer ends, the next matching offer or normal ticket price takes over.") : this.tf("picker.offerDetailUpcoming", "Tickets are available at their normal price now. This scheduled offer will apply automatically to eligible seats when it starts.");
     info.append(summary, detail);
     main.append(copy, info);
     host.replaceChildren(main);
@@ -5865,21 +6445,23 @@ var SeatPicker = class _SeatPicker {
     const doc = this.controller.doc;
     if (!doc || !this.els.prices) return;
     const left = this.controller.categoryAvailability();
-    this.narrateAvailability(doc.categories, left);
-    this.syncSoldout(doc.categories, left);
+    const sellable = doc.categories.filter((c) => !c.notForSale);
+    this.narrateAvailability(sellable, left);
+    this.syncSoldout(sellable, left);
     const PRICE_LIMIT = 5;
-    const overflow = doc.categories.length - PRICE_LIMIT;
+    const overflow = sellable.length - PRICE_LIMIT;
     const collapsed = overflow > 1 && !this.pricesExpanded;
-    const shown = collapsed ? doc.categories.slice(0, PRICE_LIMIT) : doc.categories;
+    const shown = collapsed ? sellable.slice(0, PRICE_LIMIT) : sellable;
     this.els.prices.classList.toggle("sl-expanded", overflow > 1 && this.pricesExpanded);
     this.els.prices.innerHTML = shown.map((c) => {
       const price = this.catPrice(c);
+      const range = this.catPriceRange(c);
       const offer = this.offerPrice(c.key);
       const previous = offer?.previousPrice != null && offer.previousPrice > offer.price ? offer.previousPrice : null;
       const active = this.focusedCatKey === c.key;
       const dim = this.priceBandKeys != null && !this.priceBandKeys.has(c.key);
-      return `<div class="sl-price-row${dim ? " sl-dim" : ""}${active ? " sl-active" : ""}" data-cat="${escapeOption(c.key)}" role="button" tabindex="0" aria-pressed="${active}" title="${escapeOption(active ? "Show all seats" : `Show ${c.label} seats on the map`)}"><span class="sl-dot" style="background:${escapeOption(c.color)}"></span><span class="sl-price-label">${escapeOption(c.label)}` + (offer?.offerName ? `<small class="sl-price-offer">${escapeOption(offer.offerName)}</small>` : "") + `</span><span class="sl-price-left">${left[c.key] ?? 0} left</span>` + (previous != null ? `<span class="sl-price-was">${escapeOption(this.money(previous))}</span>` : "") + (price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
-    }).join("") + (overflow > 1 ? `<button type="button" class="sl-price-more" aria-expanded="${!collapsed}">` + (collapsed ? `Show all ${doc.categories.length} ticket types` : "Show fewer") + `</button>` : "") + `<div class="sl-status-key" aria-label="Seat status legend"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>Temporarily held</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>Sold</span></div>`;
+      return `<div class="sl-price-row${dim ? " sl-dim" : ""}${active ? " sl-active" : ""}" data-cat="${escapeOption(c.key)}" role="button" tabindex="0" aria-pressed="${active}" title="${escapeOption(active ? this.tf("picker.showAllSeats", "Show all seats") : t2("picker.showLabelSeatsOnMap", { label: c.label }))}"><span class="sl-dot" style="background:${escapeOption(c.color)}"></span><span class="sl-price-label">${escapeOption(c.label)}` + (offer?.offerName ? `<small class="sl-price-offer">${escapeOption(offer.offerName)}</small>` : "") + `</span><span class="sl-price-left">${tCount("picker.leftCount", left[c.key] ?? 0)}</span>` + (previous != null ? `<span class="sl-price-was">${escapeOption(this.money(previous))}</span>` : "") + (range != null ? `<span class="sl-price-amt">${range.min === range.max ? this.money(range.min) : `${this.money(range.min)}\u2013${this.money(range.max)}`}</span>` : price != null ? `<span class="sl-price-amt">${this.money(price)}</span>` : "") + `</div>`;
+    }).join("") + (overflow > 1 ? `<button type="button" class="sl-price-more" aria-expanded="${!collapsed}">` + (collapsed ? t2("picker.showAllTicketTypes", { count: sellable.length }) : this.tf("picker.showFewer", "Show fewer")) + `</button>` : "") + `<div class="sl-status-key" aria-label="${this.tf("picker.seatStatusLegend", "Seat status legend")}"><span class="sl-status-item"><i class="sl-status-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></i>${this.tf("picker.temporarilyHeld", "Temporarily held")}</span><span class="sl-status-item"><i class="sl-status-icon sold" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M7 17L17 7"/></svg></i>${this.tf("picker.sold", "Sold")}</span></div>`;
     this.els.prices.querySelectorAll(".sl-price-row").forEach((row) => {
       row.addEventListener("mouseenter", () => this.controller.getRenderer()?.setCategoryHighlight?.(row.dataset.cat ?? null));
       row.addEventListener("mouseleave", () => this.controller.getRenderer()?.setCategoryHighlight?.(null));
@@ -5937,7 +6519,7 @@ var SeatPicker = class _SeatPicker {
       const now = left[cat.key] ?? 0;
       if (before === void 0 || now >= before) continue;
       const taken = before - now;
-      textEl.textContent = `${taken} seat${taken === 1 ? "" : "s"} just taken in ${cat.label} \xB7 ${now} left`;
+      textEl.textContent = tCount("picker.seatsJustTakenInCategory", taken, { label: cat.label, left: now });
       this.els.live?.classList.remove("on");
       void this.els.live?.offsetWidth;
       this.els.live?.classList.add("on");
@@ -5955,12 +6537,17 @@ var SeatPicker = class _SeatPicker {
     const gone = this.controller.getSelection().filter((s) => !ownLabels.has(s.label) && (this.controller.getStatus(s.id) ?? "free") !== "free");
     if (!gone.length) return;
     this.controller.deselect(gone.map((s) => s.id));
-    this.toast(`Seat ${gone[0].label} was just taken by another buyer.`, "error");
+    this.toast(t2("picker.seatJustTakenByAnother", { label: gone[0].label }), "error");
   }
   syncTray() {
     if (!this.els.tray) return;
     this.updateSelectionCapacity();
     const seats = this.committedSelection();
+    if (this.root?.dataset.layout === "narrow" && this.secCardEl && (this.hold || seats.length || this.pendingGACount())) {
+      this.secCardEl.remove();
+      this.secCardEl = null;
+      this.lastSection = null;
+    }
     const gaAreas = this.controller.getGAAreas();
     const heldItems = this.hold?.items ?? [];
     const parts = [];
@@ -5971,18 +6558,22 @@ var SeatPicker = class _SeatPicker {
         `<div class="sl-closed-note" role="status"><b>${this.tf("picker.salesClosedPill", "Sales are closed")}</b><span>${this.tf("picker.salesClosedCopy", "Ticket sales for this event have ended.")}${closedWhen}</span></div>`
       );
     } else if (!seats.length && !heldItems.length && !gaAreas.length) {
-      parts.push(`<div class="sl-tray-hint">Tap a seat on the map, or let us pick the best available for you.</div>`);
+      parts.push(`<div class="sl-tray-hint">${this.tf("picker.trayHintTapOrBest", "Tap a seat on the map, or let us pick the best available for you.")}</div>`);
     } else if (!seats.length && !heldItems.length) {
-      parts.push(`<div class="sl-tray-hint">Tap a seat on the map \u2014 or grab standing tickets below.</div>`);
+      parts.push(`<div class="sl-tray-hint">${this.tf("picker.trayHintTapOrStanding", "Tap a seat on the map \u2014 or grab standing tickets below.")}</div>`);
     }
     const noPicks = !seats.length && !heldItems.length && !this.pendingGACount();
-    if (!this.salesClosed && !this.hold && (noPicks || this.bestAvailableBusy || this.bestAvailableConfirm)) {
-      const cats = this.controller.doc?.categories ?? [];
+    if (noPicks) this.baReopen = false;
+    if (!this.salesClosed && !this.hold && (noPicks || this.baReopen || this.bestAvailableBusy || this.bestAvailableConfirm)) {
+      const cats = (this.controller.doc?.categories ?? []).filter((c) => !c.notForSale);
       const zones = this.controller.getBestAvailableZones();
       if (this.baZone && !zones.some((zone) => zone.id === this.baZone)) this.baZone = "";
-      parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Replace your current choices?</div><div class="sl-ba-replace"><b>We\u2019ll find ${this.baQty} seats together.</b><span>Your manually selected tickets will be removed only after a new group is secured.</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>Keep mine</button><button type="button" class="replace" data-ba-replace>Find new seats</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>Find the best seats together</div><div class="sl-ba-copy"><span class="wide">We\u2019ll choose the closest available group for you.</span><span class="narrow">Closest available group, chosen instantly.</span></div>` + // Premium quick-pick — present only when the chart actually has premium
+      parts.push(this.bestAvailableConfirm ? `<div class="sl-ba" role="alert"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>${this.tf("picker.replaceCurrentChoices", "Replace your current choices?")}</div><div class="sl-ba-replace"><b>${t2("picker.willFindSeatsTogether", { count: this.baQty })}</b><span>${this.tf("picker.manualTicketsRemovedNote", "Your manually selected tickets will be removed only after a new group is secured.")}</span></div><div class="sl-ba-actions"><button type="button" data-ba-cancel>${this.tf("picker.keepMine", "Keep mine")}</button><button type="button" class="replace" data-ba-replace>${this.tf("picker.findNewSeats", "Find new seats")}</button></div></div>` : `<div class="sl-ba"><div class="sl-ba-title"><span class="spark" aria-hidden="true">\u2726</span>${this.tf("picker.findBestSeatsTogether", "Find the best seats together")}</div><div class="sl-ba-copy"><span class="wide">${this.tf("picker.willChooseClosestGroup", "We\u2019ll choose the closest available group for you.")}</span><span class="narrow">${this.tf("picker.closestGroupChosenInstantly", "Closest available group, chosen instantly.")}</span></div>` + // Premium quick-pick — present only when the chart actually has premium
       // seats (same present-only philosophy as the a11y filter chips).
-      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="Preferred ticket type" data-ba-cat><option value="">Any ticket type</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="Preferred venue zone" data-ba-zone><option value="">Any venue zone</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="Fewer seats">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="More seats">+</button></div><button type="button" class="sl-ba-go${this.bestAvailableBusy ? " sl-busy" : ""}"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>Finding the best seats\u2026` : `Find ${this.baQty} best ${this.baQty === 1 ? "seat" : "seats"}`) + `</button></div>`);
+      (this.controller.hasPremiumSeats() ? `<button type="button" class="sl-ba-premium${this.baPremium ? " on" : ""}" data-ba-premium aria-pressed="${this.baPremium ? "true" : "false"}"><span class="star" aria-hidden="true">\u2605</span>${this.tf("picker.bestSeatsPremium", "Best seats")}</button>` : "") + (cats.length > 1 ? `<select aria-label="${this.tf("picker.preferredTicketType", "Preferred ticket type")}" data-ba-cat><option value="">${this.tf("picker.anyTicketType", "Any ticket type")}</option>` + cats.map((c) => `<option value="${c.key}"${this.baCat === c.key ? " selected" : ""}>${c.label}</option>`).join("") + `</select>` : `<span aria-hidden="true"></span>`) + (zones.length ? `<select aria-label="${this.tf("picker.preferredVenueZone", "Preferred venue zone")}" data-ba-zone><option value="">${this.tf("picker.anyVenueZone", "Any venue zone")}</option>` + zones.map((zone) => `<option value="${escapeOption(zone.id)}"${this.baZone === zone.id ? " selected" : ""}>${escapeOption(zone.label)}</option>`).join("") + `</select>` : "") + `<div class="sl-ba-qty"><button type="button" data-ba="-1" aria-label="${this.tf("picker.fewerSeats", "Fewer seats")}">\u2212</button><span>${this.baQty}</span><button type="button" data-ba="1" aria-label="${this.tf("picker.moreSeats", "More seats")}">+</button></div><button type="button" class="sl-ba-go${this.bestAvailableBusy ? " sl-busy" : ""}"${this.bestAvailableBusy ? " disabled" : ""}>` + (this.bestAvailableBusy ? `<span class="sl-ba-spin" aria-hidden="true"></span>${this.tf("picker.findingBestSeats", "Finding the best seats\u2026")}` : tCount("picker.findBestSeatsCount", this.baQty)) + `</button>` + // Reopened over an existing selection: the buyer needs the way back
+      // stated as plainly as the way forward (Go routes through the
+      // "Replace your current choices?" confirm, so nothing is lost yet).
+      (this.baReopen ? `<button type="button" class="sl-ba-back" data-ba-close>${this.tf("picker.keepMyPicks", "Keep my picks")}</button>` : "") + `</div>`);
     }
     const idGrid = (seatId, label, objectType, quantity = 1, objectId, identity) => {
       const esc = (value) => String(value ?? "\u2014").replace(/[&<>"]/g, (char) => ({
@@ -5994,21 +6585,21 @@ var SeatPicker = class _SeatPicker {
       const d = seatId ? this.controller.seatDetails(seatId) : null;
       const area = objectType === "ga" ? gaAreas.find((candidate) => candidate.id === objectId) : void 0;
       const effectiveType = objectType === "ga" ? "ga" : d?.objectType ?? objectType;
-      const typeWord = identity?.displayType?.trim() || d?.displayType?.trim() || area?.displayType?.trim() || (effectiveType === "table" ? "Table" : effectiveType === "booth" ? "Booth" : effectiveType === "ga" ? "General admission" : "Row");
+      const typeWord = identity?.displayType?.trim() || d?.displayType?.trim() || area?.displayType?.trim() || (effectiveType === "table" ? this.tf("picker.table", "Table") : effectiveType === "booth" ? this.tf("picker.booth", "Booth") : effectiveType === "ga" ? this.tf("picker.generalAdmission", "General admission") : this.tf("picker.row", "Row"));
       const buyerName = identity?.rowLabel ?? identity?.displayLabel ?? d?.rowLabel ?? d?.displayLabel ?? area?.displayLabel ?? area?.label ?? label;
       if (effectiveType === "table" && identity?.bookingMode) {
-        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(buyerName)}</span></span><span class="fld mid"><span class="sl-chip-eb">Guests</span><span class="val">${quantity}</span></span></div>`;
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(buyerName)}</span></span><span class="fld mid"><span class="sl-chip-eb">${this.tf("picker.guests", "Guests")}</span><span class="val">${quantity}</span></span></div>`;
       }
       if (effectiveType === "ga") {
-        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(buyerName)}</span></span>` + (quantity > 1 ? `<span class="fld mid"><span class="sl-chip-eb">Tickets</span><span class="val">${quantity}</span></span>` : "") + `</div>`;
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(buyerName)}</span></span>` + (quantity > 1 ? `<span class="fld mid"><span class="sl-chip-eb">${this.tf("picker.tickets", "Tickets")}</span><span class="val">${quantity}</span></span>` : "") + `</div>`;
       }
       if (effectiveType === "booth") {
-        return `<div class="sl-chip-id">` + (d?.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc(d.sectionLabel)}</span></span>` : "") + `<span class="fld mid"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(buyerName)}</span></span></div>`;
+        return `<div class="sl-chip-id">` + (d?.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">${this.tf("picker.section", "Section")}</span><span class="val">${esc(d.sectionLabel)}</span></span>` : "") + `<span class="fld mid"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(buyerName)}</span></span></div>`;
       }
       if (!d?.sectionLabel && !d?.rowLabel && !d?.seatNumber) {
-        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">Seat</span><span class="val">${esc(buyerName)}</span></span></div>`;
+        return `<div class="sl-chip-id"><span class="fld sec"><span class="sl-chip-eb">${this.tf("picker.seat", "Seat")}</span><span class="val">${esc(buyerName)}</span></span></div>`;
       }
-      return `<div class="sl-chip-id">` + (d.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">Section</span><span class="val">${esc(d.sectionLabel)}</span></span>` : "") + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(this.rowShort(d))}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">Seat</span><span class="val">${esc(d.seatNumber)}</span></span>` : "") + `</div>`;
+      return `<div class="sl-chip-id">` + (d.sectionLabel ? `<span class="fld sec"><span class="sl-chip-eb">${this.tf("picker.section", "Section")}</span><span class="val">${esc(d.sectionLabel)}</span></span>` : "") + (d.rowLabel ? `<span class="fld mid"><span class="sl-chip-eb">${esc(typeWord)}</span><span class="val">${esc(this.rowShort(d))}</span></span>` : "") + (d.seatNumber ? `<span class="fld mid"><span class="sl-chip-eb">${this.tf("picker.seat", "Seat")}</span><span class="val">${esc(d.seatNumber)}</span></span>` : "") + `</div>`;
     };
     const iconRail = (rmAria, viewLabel) => `<div class="sl-chip-rail"><button type="button" class="rm" aria-label="${rmAria}"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>` + (viewLabel ? `<button type="button" class="view" data-view-label="${viewLabel}" aria-label="${t2("picker.viewFromSeat", { label: viewLabel })}"><svg viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg></button>` : "") + `</div>`;
     for (const item of heldItems) {
@@ -6020,7 +6611,7 @@ var SeatPicker = class _SeatPicker {
       const table = item.objectType === "table" ? this.controller.tableSelection(item.label) : null;
       const canView2 = this.seatViewEnabled() && !!heldSeat && item.objectType !== "table";
       parts.push(
-        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"${heldSeat ? ` data-locate="${heldSeat.id}"` : ""}><div class="sl-chip-main">` + idGrid(heldSeat?.id ?? null, item.label, item.objectType, item.quantity ?? 1, item.objectId, table ?? void 0) + `<div class="sl-chip-sub"><span class="sl-ticket-state held" aria-label="Held for you" title="Held for you"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span>` + (table?.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(item.label)}">${item.quantity ?? 1} guests \xB7 Edit</button>` : "") + this.wheelchairChipMarker(heldSeat?.wheelchairSpaceType) + this.commercialChipMarker(heldSeat?.commercial) + `<span class="amt">${this.money(this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1))}</span></div></div>` + iconRail(`Remove held ticket ${item.label}`, canView2 ? item.label : null) + `</div>`
+        `<div class="sl-chip sl-held${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-held="${encodeURIComponent(item.label)}"${heldSeat ? ` data-locate="${heldSeat.id}"` : ""}><div class="sl-chip-main">` + idGrid(heldSeat?.id ?? null, item.label, item.objectType, item.quantity ?? 1, item.objectId, table ?? void 0) + `<div class="sl-chip-sub"><span class="sl-ticket-state held" aria-label="${this.tf("picker.heldForYou", "Held for you")}" title="${this.tf("picker.heldForYou", "Held for you")}"><svg viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="10" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></svg></span><span class="cat">${cat?.label ?? item.categoryKey}${tierName ? ` \xB7 ${tierName}` : ""}</span>` + (table?.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(item.label)}">${t2("picker.guestsCountEdit", { count: item.quantity ?? 1 })}</button>` : "") + this.wheelchairChipMarker(heldSeat?.wheelchairSpaceType) + this.commercialChipMarker(heldSeat?.commercial) + `<span class="amt">${this.money(this.paidPrice(item.categoryKey, item.tierId, item.unitPrice) * (item.quantity ?? 1))}</span></div></div>` + iconRail(t2("picker.removeHeldTicketLabel", { label: item.label }), canView2 ? item.label : null) + `</div>`
       );
     }
     const heldLabels = new Set(heldItems.map((item) => item.label));
@@ -6030,14 +6621,21 @@ var SeatPicker = class _SeatPicker {
       nextTrayKeys.add(itemKey);
       const cat = this.controller.doc?.categories.find((c) => c.key === s.categoryKey);
       const tierSelect = s.tiers && s.tiers.length ? `<select class="tier" data-tier="${s.id}" aria-label="${t2("picker.ticketTierFor", { label: s.label })}">` + s.tiers.map((ti) => `<option value="${ti.id}"${ti.id === s.tierId ? " selected" : ""}>${ti.name} \xB7 ${this.money(this.paidPrice(s.categoryKey, ti.id, ti.price))}</option>`).join("") + `</select>` : "";
+      const chosenTier = s.tiers?.find((tier) => tier.id === s.tierId) ?? s.tiers?.[0];
+      const tierNote = chosenTier?.buyerMessage?.trim() || (chosenTier?.restriction === "companion" ? this.tf("picker.companionRequiresWheelchair", "Requires the adjacent wheelchair place") : "");
       parts.push(
-        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label, s.objectType, s.quantity ?? 1, s.objectId, s) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="Selected" title="Selected"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>` + (s.objectType === "table" && s.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(s.label)}">${s.quantity ?? 1} guests \xB7 Edit</button>` : "") + `${this.wheelchairChipMarker(s.wheelchairSpaceType)}${this.commercialChipMarker(s.commercial)}${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price) * (s.quantity ?? 1))}</span></div></div>` + iconRail(`Remove ${s.label}`, canView && s.objectType !== "table" ? s.label : null) + `</div>`
+        `<div class="sl-chip${this.lastTrayKeys.has(itemKey) ? "" : " sl-enter"}" data-key="${itemKey}" data-seat="${s.id}" data-locate="${s.id}"><div class="sl-chip-main">` + idGrid(s.id, s.label, s.objectType, s.quantity ?? 1, s.objectId, s) + `<div class="sl-chip-sub"><span class="sl-ticket-state" aria-label="${this.tf("picker.selected", "Selected")}" title="${this.tf("picker.selected", "Selected")}"><svg viewBox="0 0 24 24"><path d="M5 12l4 4L19 6"/></svg></span><span class="cat">${cat?.label ?? s.categoryKey}</span>` + (s.objectType === "table" && s.bookingMode === "variable" ? `<button type="button" class="sl-table-edit" data-table-edit="${encodeURIComponent(s.label)}">${t2("picker.guestsCountEdit", { count: s.quantity ?? 1 })}</button>` : "") + `${this.wheelchairChipMarker(s.wheelchairSpaceType)}${this.commercialChipMarker(s.commercial)}${tierSelect}<span class="amt">${this.money(this.paidPrice(s.categoryKey, s.tierId ?? null, s.price) * (s.quantity ?? 1))}</span></div>` + (tierNote ? `<small class="sl-tier-note">${escapeOption(tierNote)}</small>` : "") + `</div>` + iconRail(t2("picker.removeSeatLabel", { label: s.label }), canView && s.objectType !== "table" ? s.label : null) + `</div>`
       );
     }
     for (const area of gaAreas) {
       const qty = this.gaQty.get(area.id) ?? 0;
       parts.push(
-        `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.displayLabel ?? area.label}</div><div class="sl-ga-sub">${area.displayType ?? "General admission"} \xB7 ${this.money(this.paidPrice(area.categoryKey, null, area.price))} \xB7 ${area.available} left</div></div><div class="sl-ga-qty"><button type="button" data-d="-1" aria-label="Fewer">\u2212</button><span>${qty}</span><button type="button" data-d="1" aria-label="More">+</button></div></div>`
+        `<div class="sl-ga" data-ga="${area.id}"><div class="sl-ga-info"><div class="sl-ga-name">${area.displayLabel ?? area.label}</div><div class="sl-ga-sub">${area.displayType ?? this.tf("picker.generalAdmission", "General admission")} \xB7 ${this.money(this.paidPrice(area.categoryKey, null, area.price))} \xB7 ${tCount("picker.leftCount", area.available)}</div></div><div class="sl-ga-qty"><button type="button" data-d="-1" aria-label="${this.tf("picker.fewer", "Fewer")}">\u2212</button><span>${qty}</span><button type="button" data-d="1" aria-label="${this.tf("picker.more", "More")}">+</button></div></div>`
+      );
+    }
+    if (!this.salesClosed && !this.hold && !noPicks && !this.baReopen && !this.bestAvailableBusy && !this.bestAvailableConfirm) {
+      parts.push(
+        `<button type="button" class="sl-ba-reopen" data-ba-reopen><span aria-hidden="true">\u2726</span>${this.tf("picker.findTogetherInstead", "Find seats together instead")}</button>`
       );
     }
     this.els.tray.innerHTML = parts.join("");
@@ -6072,6 +6670,16 @@ var SeatPicker = class _SeatPicker {
       this.syncTray();
       this.els.tray.querySelector(".sl-ba-go")?.focus();
     });
+    this.els.tray.querySelector("[data-ba-reopen]")?.addEventListener("click", () => {
+      this.baReopen = true;
+      this.syncTray();
+      this.els.tray.querySelector(".sl-ba-go")?.focus();
+    });
+    this.els.tray.querySelector("[data-ba-close]")?.addEventListener("click", () => {
+      this.baReopen = false;
+      this.syncTray();
+      this.els.tray.querySelector("[data-ba-reopen]")?.focus();
+    });
     this.els.tray.querySelector("[data-ba-replace]")?.addEventListener("click", () => {
       this.bestAvailableConfirm = false;
       void this.bestAvailable(this.baQty, this.baCat || void 0, { preferPremium: this.baPremium, zoneId: this.baZone || void 0 });
@@ -6084,15 +6692,15 @@ var SeatPicker = class _SeatPicker {
           return;
         }
         const id = chip.dataset.seat;
-        const label = this.controller.getSelection().find((sel) => sel.id === id)?.label ?? "Seat";
+        const label = this.controller.getSelection().find((sel) => sel.id === id)?.label ?? this.tf("picker.seat", "Seat");
         const remove = () => {
           this.controller.deselect([id]);
-          this.toast(`${label} removed.`, "neutral", {
-            label: "Undo",
+          this.toast(t2("picker.labelRemoved", { label }), "neutral", {
+            label: this.tf("picker.undo", "Undo"),
             onClick: () => {
               const restored = this.controller.select([id]);
               this.toast(
-                restored.length ? `${label} restored.` : `${label} is no longer available.`,
+                restored.length ? t2("picker.labelRestored", { label }) : t2("picker.labelNoLongerAvailable", { label }),
                 restored.length ? "success" : "warning"
               );
             }
@@ -6164,31 +6772,31 @@ var SeatPicker = class _SeatPicker {
     const pendingCount = this.pendingSelectionCount();
     const previousCount = this.lastTrayCount;
     const previousTotal = this.lastTrayTotal;
-    this.els.count.textContent = count ? `${count} ${count === 1 ? "ticket" : "tickets"}` : "No seats selected";
+    this.els.count.textContent = count ? tCount("picker.ticketsCount", count) : this.tf("picker.noSeatsSelected", "No seats selected");
     this.els.total.textContent = count ? this.money(total) : "";
     this.root?.setAttribute("data-has-selection", String(count > 0));
     this.root?.setAttribute(
       "data-ba-active",
-      String(this.bestAvailableConfirm || this.bestAvailableBusy)
+      String(this.bestAvailableConfirm || this.bestAvailableBusy || this.baReopen)
     );
     this.els.foot?.classList.toggle("empty", count === 0);
     if (this.els.seatSummary) {
-      this.els.seatSummary.textContent = count ? `${count} selected` : "";
+      this.els.seatSummary.textContent = count ? tCount("picker.seatsSelectedCount", count) : "";
     }
     this.syncCta(count, pendingCount);
     if (this.hold) {
       const securedCount = heldCount || this.hold.seats?.length || 0;
       if (this.els.holdTitle) {
-        this.els.holdTitle.textContent = `${securedCount} secured`;
+        this.els.holdTitle.textContent = t2("picker.securedCount", { count: securedCount });
       }
       if (this.els.holdCopy) {
         this.holdCopyPending = pendingCount > 0;
-        this.els.holdCopy.textContent = pendingCount ? `${pendingCount} more selected` : this.holdReassuranceText();
+        this.els.holdCopy.textContent = pendingCount ? t2("picker.moreSelectedCount", { count: pendingCount }) : this.holdReassuranceText();
       }
       const change = this.els.holdChange;
       if (change) {
         change.disabled = this.releasingHold;
-        change.textContent = this.releasingHold ? "Releasing\u2026" : "Change";
+        change.textContent = this.releasingHold ? this.tf("picker.releasingEllipsis", "Releasing\u2026") : this.tf("picker.change", "Change");
       }
     }
     if (count !== previousCount) this.animateOnce(this.els.count, "sl-value-pop", 380);
@@ -6213,21 +6821,21 @@ var SeatPicker = class _SeatPicker {
   renderPeek(count, total, pendingCount) {
     if (!this.els.peek) return;
     if (count && this.ctaPhase === "holding") {
-      this.els.peek.innerHTML = `<span>Securing your seats\u2026</span>`;
+      this.els.peek.innerHTML = `<span>${this.tf("picker.securingSeats", "Securing your seats\u2026")}</span>`;
       return;
     }
     if (count && this.ctaPhase === "checkout") {
-      this.els.peek.innerHTML = `<span>\u2713 ${count} ${count === 1 ? "ticket" : "tickets"} secured \xB7 ${this.money(total)} \u2014 you won\u2019t be charged yet</span>`;
+      this.els.peek.innerHTML = `<span>${t2("picker.peekSecured", { count, total: this.money(total) })}</span>`;
       return;
     }
     if (count) {
-      const holding = !!this.hold && !pendingCount;
-      this.els.peek.innerHTML = `<span>${count} ${count === 1 ? "ticket" : "tickets"} \xB7 ${this.money(total)}</span><button type="button" class="go sl-sheet-go" data-act="${holding ? "checkout" : "open"}">${this.hold ? pendingCount ? "Secure more" : "Continue" : "Review"}</button>`;
+      const toCheckout = !!this.hold;
+      this.els.peek.innerHTML = `<span>${tCount("picker.peekTicketsTotal", count, { total: this.money(total) })}</span><button type="button" class="go sl-sheet-go" data-act="${toCheckout ? "checkout" : "open"}">${this.hold ? pendingCount ? this.tf("picker.secureMore", "Secure more") : this.tf("picker.continue", "Continue") : this.tf("picker.review", "Review")}</button>`;
     } else if (this.salesClosed) {
       this.els.peek.innerHTML = `<span>${this.tf("picker.salesClosedPill", "Sales are closed")}</span>`;
     } else {
       const prices = (this.controller.doc?.categories ?? []).map((c) => this.catPrice(c)).filter((p) => p != null);
-      this.els.peek.innerHTML = (prices.length ? `<span>From ${this.money(Math.min(...prices))}</span>` : "<span>Pick your seats</span>") + `<button type="button" class="go sl-sheet-go" data-act="open">\u2726 Best seats</button>`;
+      this.els.peek.innerHTML = (prices.length ? `<span>${t2("picker.peekFromPrice", { price: this.money(Math.min(...prices)) })}</span>` : `<span>${this.tf("picker.pickYourSeats", "Pick your seats")}</span>`) + `<button type="button" class="go sl-sheet-go" data-act="open">${this.tf("picker.bestSeatsStar", "\u2726 Best seats")}</button>`;
     }
   }
   async removeHeldLabel(label, chip) {
@@ -6240,7 +6848,7 @@ var SeatPicker = class _SeatPicker {
       const preserveAcrossNavigation = this.handedOff;
       const released = await this.controller.releaseLabels([label]);
       if (!released) {
-        this.toast(`Couldn't remove ${label}. Your hold is unchanged.`, "error");
+        this.toast(t2("picker.couldNotRemoveLabel", { label }), "error");
         return false;
       }
       const remaining = this.controller.currentHold();
@@ -6256,7 +6864,7 @@ var SeatPicker = class _SeatPicker {
       }
       this.syncTray();
       this.emitHoldChange();
-      this.toast(`${label} removed from your hold.`, "success");
+      this.toast(t2("picker.labelRemovedFromHold", { label }), "success");
       return true;
     } finally {
       this.releasingLabels.delete(label);
@@ -6270,23 +6878,23 @@ var SeatPicker = class _SeatPicker {
     const button = this.els.holdChange;
     if (button) {
       button.disabled = true;
-      button.textContent = "Releasing\u2026";
+      button.textContent = this.tf("picker.releasingEllipsis", "Releasing\u2026");
     }
     try {
       await this.release();
-      if (!this.hold) this.toast("Held tickets released. Choose your new seats.", "success");
+      if (!this.hold) this.toast(this.tf("picker.heldTicketsReleased", "Held tickets released. Choose your new seats."), "success");
     } finally {
       this.releasingHold = false;
       if (button?.isConnected) {
         button.disabled = false;
-        button.textContent = "Change";
+        button.textContent = this.tf("picker.change", "Change");
       }
     }
   }
   async handleCta() {
     if (this.salesClosed) return;
     if (this.totalTicketCount() > this.maxTickets) {
-      this.toast(`Remove tickets until your order has ${this.maxTickets} or fewer.`, "warning");
+      this.toast(t2("picker.removeTicketsUntilOrFewer", { count: this.maxTickets }), "warning");
       return;
     }
     const committed = this.committedSelection();
@@ -6312,7 +6920,7 @@ var SeatPicker = class _SeatPicker {
         hold = h ? { holdId: h.holdId, expiresAt: h.expiresAt, seats: h.seats, items: h.items } : hold;
       }
       if (!hold) {
-        this.toast("One or more seats were just taken. Please pick again.", "error");
+        this.toast(this.tf("picker.seatsJustTaken", "One or more seats were just taken. Please pick again."), "error");
         this.setCtaPhase("idle");
         this.syncTray();
         return;
@@ -6329,7 +6937,7 @@ var SeatPicker = class _SeatPicker {
       const problem = err;
       const labels = (problem.conflicts ?? []).map((conflict) => conflict.label).filter(Boolean).slice(0, 3);
       if (problem.reason === "event_closed") this.setSalesClosed(true);
-      const message = problem.reason === "event_closed" ? "Seat sales have closed for this event." : labels.length ? `${labels.join(", ")} ${labels.length === 1 ? "is" : "are"} no longer available. Choose another ${labels.length === 1 ? "seat" : "group"}.` : "One or more seats were just taken. Please pick again.";
+      const message = problem.reason === "event_closed" ? this.tf("picker.seatSalesClosedForEvent", "Seat sales have closed for this event.") : problem.reason === "companion_pair_required" ? this.tf("picker.companionPairRequired", "Select the adjacent wheelchair place with each companion ticket.") : problem.reason === "ticket_option_not_applicable" ? this.tf("picker.ticketOptionNotApplicable", "That ticket choice is not available for the selected seat.") : labels.length ? labels.length === 1 ? t2("picker.labelsNoLongerAvailable.one", { labels: labels.join(", ") }) : t2("picker.labelsNoLongerAvailable.other", { labels: labels.join(", ") }) : this.tf("picker.seatsJustTaken", "One or more seats were just taken. Please pick again.");
       this.toast(message, "error");
       this.setCtaPhase("idle");
     } finally {
@@ -6343,14 +6951,14 @@ var SeatPicker = class _SeatPicker {
     const ms = Math.max(0, this.holdExpiresAt - Date.now());
     const m = Math.floor(ms / 6e4);
     const s = String(Math.floor(ms % 6e4 / 1e3)).padStart(2, "0");
-    return `Yours for ${m}:${s} \u2014 you won\u2019t be charged yet.`;
+    return t2("picker.holdReassurance", { time: `${m}:${s}` });
   }
   startHoldTimer(expiresAt) {
     this.stopHoldTimer();
     this.holdExpiresAt = expiresAt;
     if (this.hold) this.rememberHold(this.hold);
     const pill = this.els.hold;
-    pill.innerHTML = '<span class="sl-hold-dot" aria-hidden="true"></span><span>Held</span><span class="sl-hold-time" data-ref="holdTime"></span>';
+    pill.innerHTML = `<span class="sl-hold-dot" aria-hidden="true"></span><span>${this.tf("picker.held", "Held")}</span><span class="sl-hold-time" data-ref="holdTime"></span>`;
     const time = pill.querySelector('[data-ref="holdTime"]');
     this.els.holdNote?.classList.add("on");
     const tick = () => {
@@ -6383,7 +6991,7 @@ var SeatPicker = class _SeatPicker {
       const totalSecs = Math.ceil(ms / 1e3);
       const m = Math.floor(totalSecs / 60);
       const s = String(totalSecs % 60).padStart(2, "0");
-      this.els.extendTxt.innerHTML = `Your seats are held for <b>${m}:${s}</b>. Need more time?`;
+      this.els.extendTxt.innerHTML = t2("picker.seatsHeldForNeedMoreTime", { time: `${m}:${s}` });
       this.extendEl.classList.add("on");
     } else {
       this.extendEl.classList.remove("on");
@@ -6393,7 +7001,7 @@ var SeatPicker = class _SeatPicker {
     const btn = this.els.extendBtn;
     btn.disabled = true;
     const prev = btn.textContent;
-    btn.textContent = "Adding\u2026";
+    btn.textContent = this.tf("picker.addingEllipsis", "Adding\u2026");
     try {
       const h = await this.controller.extendHold(this.opts.holdTtlMs);
       if (h) {
@@ -6402,13 +7010,13 @@ var SeatPicker = class _SeatPicker {
         this.extendEl?.classList.remove("on");
         this.rememberHold(this.hold);
         this.emitHoldChange();
-        this.toast("More time added \u2014 your seats are still held.", "success");
+        this.toast(this.tf("picker.moreTimeAdded", "More time added \u2014 your seats are still held."), "success");
       } else {
-        this.toast("Couldn't add more time \u2014 please head to checkout now.", "warning");
+        this.toast(this.tf("picker.couldNotAddMoreTime", "Couldn't add more time \u2014 please head to checkout now."), "warning");
       }
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("Couldn't add more time \u2014 please head to checkout now.", "warning");
+      this.toast(this.tf("picker.couldNotAddMoreTime", "Couldn't add more time \u2014 please head to checkout now."), "warning");
     } finally {
       btn.disabled = false;
       btn.textContent = prev;
@@ -6435,7 +7043,7 @@ var SeatPicker = class _SeatPicker {
     this.forgetHold();
     const n = handoff.lineItems.reduce((sum, i) => sum + i.quantity, 0);
     if (this.els.bookedSub) {
-      this.els.bookedSub.innerHTML = `<span class="sl-booked-seats">${n} ${n === 1 ? "ticket" : "tickets"}</span> confirmed. A confirmation is on its way.`;
+      this.els.bookedSub.innerHTML = `<span class="sl-booked-seats">${tCount("picker.ticketsCount", n)}</span> ${this.tf("picker.confirmedAndOnWay", "confirmed. A confirmation is on its way.")}`;
     }
     this.bookedEl?.classList.add("on");
     this.opts.onBooked?.(handoff);
@@ -6517,7 +7125,7 @@ var SeatPicker = class _SeatPicker {
       ({ mountCheckout } = await loadHostedCheckout());
     } catch (err) {
       this.opts.onError?.(err);
-      this.toast("Checkout could not be opened. Your seats are still held \u2014 please try again.", "error");
+      this.toast(this.tf("picker.checkoutCouldNotBeOpened", "Checkout could not be opened. Your seats are still held \u2014 please try again."), "error");
       this.setCtaPhase("idle");
       return;
     }
@@ -6632,9 +7240,9 @@ var SeatPicker = class _SeatPicker {
   rowTypeWord(details) {
     const authored = details?.displayType?.trim() || details?.rowType?.trim();
     if (authored) return authored;
-    if (details?.objectType === "table") return "Table";
-    if (details?.objectType === "booth") return "Booth";
-    return "Row";
+    if (details?.objectType === "table") return this.tf("picker.table", "Table");
+    if (details?.objectType === "booth") return this.tf("picker.booth", "Booth");
+    return this.tf("picker.row", "Row");
   }
   rowShort(details) {
     const row = details?.rowLabel;
@@ -6657,14 +7265,15 @@ var SeatPicker = class _SeatPicker {
     const isGroupedTable = details.objectType === "table" && !!details.bookingMode;
     const isBooth = details.objectType === "booth";
     const hasLoc = details.sectionLabel || details.rowLabel || details.seatNumber;
-    const grid = isGroupedTable ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">Guests</span><span class="sl-tip-val">${details.bookingMode === "variable" ? `${details.minOccupancy}\u2013${details.maxOccupancy}` : details.capacity}</span></div></div>` : isBooth ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc(details.sectionLabel)}</span></div>` : "") + `<div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div></div>` : hasLoc ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">Section</span><span class="sl-tip-val">${esc(details.sectionLabel)}</span></div>` : "") + (details.rowLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(this.rowShort(details))}</span></div>` : "") + (details.seatNumber ? `<div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc(details.seatNumber)}</span></div>` : "") + `</div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">Seat</span><span class="sl-tip-val">${esc(details.displayLabel ?? details.label)}</span></div></div>`;
-    const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
+    const grid = isGroupedTable ? `<div class="sl-tip-grid"><div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div><div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.guests", "Guests")}</span><span class="sl-tip-val">${details.bookingMode === "variable" ? `${details.minOccupancy}\u2013${details.maxOccupancy}` : details.capacity}</span></div></div>` : isBooth ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.section", "Section")}</span><span class="sl-tip-val">${esc(details.sectionLabel)}</span></div>` : "") + `<div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(details.rowLabel ?? details.displayLabel ?? details.label)}</span></div></div>` : hasLoc ? `<div class="sl-tip-grid">` + (details.sectionLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.section", "Section")}</span><span class="sl-tip-val">${esc(details.sectionLabel)}</span></div>` : "") + (details.rowLabel ? `<div class="sl-tip-field"><span class="sl-tip-key">${esc(this.rowTypeWord(details))}</span><span class="sl-tip-val">${esc(this.rowShort(details))}</span></div>` : "") + (details.seatNumber ? `<div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.seat", "Seat")}</span><span class="sl-tip-val">${esc(details.seatNumber)}</span></div>` : "") + `</div>` : `<div class="sl-tip-grid one"><div class="sl-tip-field"><span class="sl-tip-key">${this.tf("picker.seat", "Seat")}</span><span class="sl-tip-val">${esc(details.displayLabel ?? details.label)}</span></div></div>`;
+    const notForSale = details.status === "not_for_sale";
+    const statusLine = details.status === "free" ? "" : `<div class="sl-tip-status">${notForSale ? this.tf("picker.notAvailable", "Not available") : details.status === "held" ? t2("map.statusHeld") : t2("map.statusTaken")}</div>`;
     const limited = this.limitedViewLabel(details.commercial);
     const cxLine = limited ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u25D0</span>${esc(limited)}</div>` : "";
     const wheelchair = this.wheelchairProvisionLabel(details.wheelchairSpaceType);
     const wheelchairLine = wheelchair ? `<div class="sl-tip-cx"><span class="g" aria-hidden="true">\u267F</span>${esc(wheelchair)}</div>` : "";
     this.tipEl.style.setProperty("--sl-cat", details.categoryColor);
-    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc(details.categoryLabel)}</span><span class="sl-tip-amt">${price}</span></div>` + wheelchairLine + cxLine + statusLine;
+    this.tipEl.innerHTML = grid + `<div class="sl-tip-cat"><span class="sl-tip-dot" style="background:${details.categoryColor}"></span><span class="sl-tip-name">${esc(details.categoryLabel)}</span>` + (notForSale ? "" : `<span class="sl-tip-amt">${price}</span>`) + `</div>` + wheelchairLine + cxLine + statusLine;
     this.tipEl.style.display = "block";
     this.placeTooltip();
   }
@@ -6887,13 +7496,16 @@ var SeatPicker = class _SeatPicker {
       sourceLabel: this.tf("picker.chartDerivedModel", "Chart-derived model")
     };
   }
-  /** Route the module's decoupled analytics into the host callback, tagged buyer. */
-  emit3dAnalytics(event, props) {
+  /** Route decoupled analytics into the host callback, tagged buyer. */
+  emitAnalytics(event, props) {
     try {
       this.opts.onAnalytics?.(event, { ...props, surface: "buyer" });
     } catch {
     }
   }
+  emit3dAnalytics(event, props) {
+    this.emitAnalytics(event, props);
+  }
   /** A 3D seat tap runs the SAME selection path as a 2D tap: toggle through the
    *  controller, then raise the shared confirm card (bottom-sheeted in 3D). */
   onView3dSeatPick(seatId) {
@@ -6912,9 +7524,9 @@ var SeatPicker = class _SeatPicker {
       this.syncSelectionTo3d();
       return;
     }
-    const visualState = this.seatState3dFor(seat);
-    if (visualState !== "available") {
-      this.showUnavailable3dSeat(seat, visualState);
+    const status = this.controller.getStatus(seat.id);
+    if (status === "held" || status === "booked" || status === "not_for_sale") {
+      this.showUnavailable3dSeat(seat, this.seatState3dFor(seat), status);
       this.syncSelectionTo3d();
       return;
     }
@@ -6936,31 +7548,28 @@ var SeatPicker = class _SeatPicker {
     else this.syncTray();
     this.syncSelectionTo3d();
   }
-  /** Explain a visible-but-unselectable 3D seat without entering the booking
-   * flow. Category colour remains visible in the venue; this card names the
-   * availability state explicitly so yellow never has to carry both meanings. */
-  showUnavailable3dSeat(seat, visualState) {
+  /** Explain a 3D seat that INVENTORY refuses — never one the buyer's own
+   * filters merely dimmed, which stays buyable exactly as it is in 2D. Category
+   * colour remains visible in the venue; this card names the availability state
+   * explicitly so yellow never has to carry both meanings. */
+  showUnavailable3dSeat(seat, visualState, status) {
     const overlay = this.view3dEl;
     if (!overlay) return;
     this.dismissUnavailable3dSeat();
-    const status = this.controller.getStatus(seat.id);
     const details = this.controller.seatDetails(seat.id);
     const identity = details?.displayLabel ?? seat.displayLabel ?? seat.label;
     const section = details?.sectionLabel;
     const row = this.rowShort(details);
-    const location2 = [section, row ? `Row ${row}` : null, identity].filter(Boolean).join(" \xB7 ");
+    const location2 = [section, row ? t2("picker.rowLabel", { label: row }) : null, identity].filter(Boolean).join(" \xB7 ");
     const copy = status === "held" ? {
       title: this.tf("picker.temporarilyHeld", "Temporarily held"),
       message: this.tf("picker.heldSeatExplanation", "Another buyer is holding this seat. It may become available again.")
     } : status === "booked" ? {
       title: this.tf("picker.sold", "Sold"),
       message: this.tf("picker.soldSeatExplanation", "This seat has already been booked.")
-    } : status === "not_for_sale" ? {
+    } : {
       title: this.tf("picker.notForSale", "Not for sale"),
       message: this.tf("picker.notForSaleExplanation", "This seat is not included in the current sale.")
-    } : {
-      title: this.tf("picker.filteredSeat", "Unavailable with current filters"),
-      message: this.tf("picker.filteredSeatExplanation", "Change the active price or view filters to make this seat selectable.")
     };
     const card = document.createElement("div");
     card.className = "sl-view3d-unavailable";
@@ -7044,7 +7653,7 @@ var SeatPicker = class _SeatPicker {
       chip = document.createElement("div");
       chip.className = "sl-view3d-compare-saved";
       chip.setAttribute("role", "group");
-      chip.setAttribute("aria-label", "Saved seat comparison");
+      chip.setAttribute("aria-label", this.tf("picker.savedSeatComparison", "Saved seat comparison"));
       const main2 = document.createElement("button");
       main2.type = "button";
       main2.className = "main";
@@ -7056,7 +7665,7 @@ var SeatPicker = class _SeatPicker {
       clear.type = "button";
       clear.className = "clear";
       clear.textContent = "\xD7";
-      clear.setAttribute("aria-label", "Clear saved seat comparison");
+      clear.setAttribute("aria-label", this.tf("picker.clearSavedSeatComparison", "Clear saved seat comparison"));
       clear.addEventListener("click", () => this.clearView3dComparison());
       chip.append(main2, clear);
       overlay.appendChild(chip);
@@ -7065,8 +7674,8 @@ var SeatPicker = class _SeatPicker {
     const count = this.view3dCompareSeatIds.length;
     const main = chip.querySelector(".main");
     if (main) {
-      main.textContent = count > 1 ? `Compare ${count}` : "1 seat saved";
-      main.setAttribute("aria-label", count > 1 ? `Open comparison of ${count} seats` : "One seat saved; choose another to compare");
+      main.textContent = count > 1 ? t2("picker.compareCount", { count }) : this.tf("picker.oneSeatSaved", "1 seat saved");
+      main.setAttribute("aria-label", count > 1 ? t2("picker.openComparisonOfSeats", { count }) : this.tf("picker.oneSeatSavedChooseAnother", "One seat saved; choose another to compare"));
     }
   }
   view3dComparisonSnapshot(seatId) {
@@ -7338,13 +7947,12 @@ var SeatPicker = class _SeatPicker {
     const floors = handle.floors();
     const floorLabels = new Set(floors.map((floor) => floor.label.trim().toLocaleLowerCase()));
     const zones = handle.zones().filter((zone) => zone.seatCount > 0 && !floorLabels.has(zone.label.trim().toLocaleLowerCase()));
-    const allSections = handle.sections().filter((s) => s.seatCount > 0);
+    const allSections = handle.sections().filter((section) => section.seatCount > 0 && !floorLabels.has(section.label.trim().toLocaleLowerCase()));
     const sections = zones.length > 1 ? [] : allSections;
     const wantFloors = floors.length > 1;
     const wantZones = zones.length > 1;
     const wantSections = sections.length > 1;
-    const wantLocator = allSections.length > 0 && handle.rows().length > 0;
-    if (!wantFloors && !wantZones && !wantSections && !wantLocator) return;
+    if (!wantFloors && !wantZones && !wantSections) return;
     const nav = document.createElement("div");
     nav.className = "sl-view3d-nav";
     const finderToggle = document.createElement("button");
@@ -7354,7 +7962,7 @@ var SeatPicker = class _SeatPicker {
     const setFinderOpen = (open) => {
       nav.classList.toggle("is-open", open);
       finderToggle.setAttribute("aria-expanded", String(open));
-      finderToggle.textContent = open ? "Close seat finder" : "Find a seat";
+      finderToggle.textContent = open ? this.tf("picker.closeVenueNav", "Close") : wantFloors && (wantZones || wantSections) ? this.tf("picker.levelsAndAreas", "Levels & areas") : wantFloors ? this.tf("picker.levels", "Levels") : this.tf("picker.areas", "Areas");
     };
     finderToggle.addEventListener("click", () => setFinderOpen(!nav.classList.contains("is-open")));
     nav.addEventListener("keydown", (event) => {
@@ -7366,16 +7974,24 @@ var SeatPicker = class _SeatPicker {
     });
     setFinderOpen(false);
     nav.appendChild(finderToggle);
+    let syncAreasForFloor = (_index) => void 0;
+    let syncPressedFloor = (_index) => void 0;
     if (wantFloors) {
       const row = document.createElement("div");
       row.setAttribute("role", "group");
       row.setAttribute("aria-label", this.tf("picker.levels", "Levels"));
       const pills = [];
+      syncPressedFloor = (index) => {
+        pills.forEach((pill) => {
+          pill.setAttribute("aria-pressed", String(
+            (pill.dataset.floor === "" ? null : Number(pill.dataset.floor)) === index
+          ));
+        });
+      };
       const select = (index) => {
         if (!handle.focusFloor(index)) return;
-        pills.forEach((p) => {
-          p.setAttribute("aria-pressed", String((p.dataset.floor === "" ? null : Number(p.dataset.floor)) === index));
-        });
+        syncPressedFloor(index);
+        syncAreasForFloor(index);
       };
       const add = (label, index) => {
         const b = document.createElement("button");
@@ -7391,7 +8007,7 @@ var SeatPicker = class _SeatPicker {
         row.appendChild(b);
       };
       add(this.tf("picker.allLevels", "All levels"), null);
-      for (const f of floors) add(f.label || `Level ${f.index + 1}`, f.index);
+      for (const f of floors) add(f.label || t2("picker.levelNumber", { number: f.index + 1 }), f.index);
       nav.appendChild(row);
     }
     if (wantZones || wantSections) {
@@ -7400,119 +8016,55 @@ var SeatPicker = class _SeatPicker {
       row.setAttribute("aria-label", this.tf("picker.areas", "Areas"));
       const entries = wantZones ? zones.map((z) => ({ id: z.id, label: z.label || z.id, go: () => {
         handle.focusZone(z.id);
-      } })) : sections.map((s) => ({ id: s.id, label: s.label || s.id, go: () => {
-        handle.focusSection(s.id);
-      } }));
-      if (!wantZones && entries.length > MAX_3D_SECTION_PILLS) {
-        const select = document.createElement("select");
-        select.setAttribute("aria-label", this.tf("picker.jumpToSection", "Jump to section"));
-        const placeholder = document.createElement("option");
-        placeholder.value = "";
-        placeholder.textContent = this.tf("picker.jumpToSection", "Jump to section");
-        select.appendChild(placeholder);
-        for (const entry of entries) {
-          const option = document.createElement("option");
-          option.value = entry.id;
-          option.textContent = entry.label;
-          select.appendChild(option);
-        }
-        select.addEventListener("change", () => {
-          entries.find((entry) => entry.id === select.value)?.go();
-        });
-        row.appendChild(select);
-      } else {
-        for (const e of entries) {
-          const b = document.createElement("button");
-          b.type = "button";
-          b.textContent = e.label;
-          b.addEventListener("click", () => {
-            e.go();
-            setFinderOpen(false);
-          });
-          row.appendChild(b);
-        }
-      }
-      nav.appendChild(row);
-    }
-    if (wantLocator) {
-      const locator = document.createElement("div");
-      locator.className = "sl-view3d-locator";
-      locator.setAttribute("role", "group");
-      locator.setAttribute("aria-label", "Find an exact seat in 3D");
-      const sectionSelect = document.createElement("select");
-      sectionSelect.setAttribute("aria-label", "Choose section in 3D");
-      const rowSelect = document.createElement("select");
-      rowSelect.setAttribute("aria-label", "Choose row in 3D");
-      const seatSelect = document.createElement("select");
-      seatSelect.setAttribute("aria-label", "Choose seat in 3D");
-      const view = document.createElement("button");
-      view.type = "button";
-      view.textContent = "Inspect seat";
-      view.disabled = true;
-      const fill = (select, placeholder, entries) => {
-        select.replaceChildren();
-        const first = document.createElement("option");
-        first.value = "";
-        first.textContent = placeholder;
-        select.appendChild(first);
-        for (const entry of entries) {
-          const option = document.createElement("option");
-          option.value = entry.id;
-          option.textContent = entry.label;
-          select.appendChild(option);
+      } })) : sections.map((s) => ({
+        id: s.id,
+        label: s.label || s.id,
+        floorIndex: s.floorIndex,
+        go: () => {
+          handle.focusSection(s.id);
+          if (Number.isFinite(s.floorIndex)) syncPressedFloor(s.floorIndex);
         }
-        select.value = "";
-      };
-      fill(sectionSelect, "1. Section", allSections.map((section) => ({
-        id: section.id,
-        label: `${section.label} \xB7 ${section.seatCount.toLocaleString()} seats`
-      })));
-      fill(rowSelect, "2. Row", []);
-      fill(seatSelect, "3. Seat", []);
-      rowSelect.disabled = true;
-      seatSelect.disabled = true;
-      sectionSelect.addEventListener("change", () => {
-        const sectionId = sectionSelect.value;
-        view.disabled = true;
-        fill(seatSelect, "3. Seat", []);
-        seatSelect.disabled = true;
-        if (!sectionId || !handle.focusSection(sectionId)) {
-          fill(rowSelect, "2. Row", []);
-          rowSelect.disabled = true;
+      }));
+      const renderEntries = (floorIndex) => {
+        const visible = wantZones || floorIndex === null ? entries : entries.filter((entry) => entry.floorIndex === void 0 || entry.floorIndex === floorIndex);
+        row.replaceChildren();
+        if (!visible.length) {
+          row.remove();
           return;
         }
-        const rows = handle.rows(sectionId);
-        fill(rowSelect, "2. Row", rows.map((row) => ({
-          id: row.id,
-          label: `${row.label} \xB7 ${row.seatCount} seats`
-        })));
-        rowSelect.disabled = rows.length === 0;
-      });
-      rowSelect.addEventListener("change", () => {
-        const rowId = rowSelect.value;
-        view.disabled = true;
-        if (!rowId || !handle.focusRow(rowId)) {
-          fill(seatSelect, "3. Seat", []);
-          seatSelect.disabled = true;
+        if (!row.isConnected) nav.appendChild(row);
+        if (!wantZones && visible.length > MAX_3D_SECTION_PILLS) {
+          const select = document.createElement("select");
+          select.setAttribute("aria-label", this.tf("picker.jumpToSection", "Jump to section"));
+          const placeholder = document.createElement("option");
+          placeholder.value = "";
+          placeholder.textContent = this.tf("picker.jumpToSection", "Jump to section");
+          select.appendChild(placeholder);
+          for (const entry of visible) {
+            const option = document.createElement("option");
+            option.value = entry.id;
+            option.textContent = entry.label;
+            select.appendChild(option);
+          }
+          select.addEventListener("change", () => {
+            visible.find((entry) => entry.id === select.value)?.go();
+          });
+          row.appendChild(select);
           return;
         }
-        const seats = handle.seatsInRow(rowId);
-        fill(seatSelect, "3. Seat", seats);
-        seatSelect.disabled = seats.length === 0;
-      });
-      seatSelect.addEventListener("change", () => {
-        const seatId = seatSelect.value;
-        view.disabled = !seatId;
-      });
-      view.addEventListener("click", () => {
-        const seatId = seatSelect.value;
-        if (seatId) {
-          setFinderOpen(false);
-          this.onView3dSeatPick(seatId);
+        for (const entry of visible) {
+          const button = document.createElement("button");
+          button.type = "button";
+          button.textContent = entry.label;
+          button.addEventListener("click", () => {
+            entry.go();
+            setFinderOpen(false);
+          });
+          row.appendChild(button);
         }
-      });
-      locator.append(sectionSelect, rowSelect, seatSelect, view);
-      nav.appendChild(locator);
+      };
+      syncAreasForFloor = renderEntries;
+      renderEntries(null);
     }
     overlay.appendChild(nav);
   }
@@ -7529,7 +8081,7 @@ var SeatPicker = class _SeatPicker {
     const overlay = document.createElement("div");
     overlay.className = "sl-view3d";
     overlay.setAttribute("role", "group");
-    overlay.setAttribute("aria-label", "Interactive 3D venue view");
+    overlay.setAttribute("aria-label", this.tf("picker.interactive3dVenueView", "Interactive 3D venue view"));
     const back = document.createElement("button");
     back.type = "button";
     back.className = "sl-view3d-back";
@@ -7555,7 +8107,7 @@ var SeatPicker = class _SeatPicker {
     fullscreen.type = "button";
     fullscreen.className = "sl-view3d-fs";
     fullscreen.textContent = "\u26F6";
-    fullscreen.setAttribute("aria-label", "Full screen");
+    fullscreen.setAttribute("aria-label", this.tf("picker.fullScreen", "Full screen"));
     fullscreen.setAttribute("aria-pressed", String(!!document.fullscreenElement || this.fsFallback || this.framedFs));
     fullscreen.addEventListener("click", () => this.toggleFullscreen());
     overlay.appendChild(fullscreen);
@@ -7592,7 +8144,7 @@ var SeatPicker = class _SeatPicker {
         onSeatInspect: (id) => this.onView3dSeatPick(id),
         onSectionFocusChange: (sectionId) => {
           const select = overlay.querySelector(
-            'select[aria-label="Choose section in 3D"]'
+            'select[data-locator="section"]'
           );
           const next = sectionId ?? "";
           if (!select || select.value === next) return;
@@ -7689,7 +8241,7 @@ var SeatPicker = class _SeatPicker {
     if (button) {
       button.disabled = true;
       button.classList.add("sl-busy");
-      button.innerHTML = '<span class="sl-ba-spin" aria-hidden="true"></span>Finding\u2026';
+      button.innerHTML = `<span class="sl-ba-spin" aria-hidden="true"></span>${this.tf("picker.findingEllipsis", "Finding\u2026")}`;
     }
     try {
       const h = await this.controller.bestAvailable(qty, categoryKey, { ...opts, ttlMs: this.opts.holdTtlMs });
@@ -7711,7 +8263,7 @@ var SeatPicker = class _SeatPicker {
     } catch (err) {
       this.opts.onError?.(err);
       const reason = err?.reason;
-      const message = reason === "not_enough_together" ? `We couldn't find ${qty} seats together. Try fewer seats or another ticket type.` : reason === "sold_out" ? "That ticket type is sold out. Try another ticket type." : reason === "event_closed" ? "Seat sales have closed for this event." : "Those seats are no longer available. Try another quantity or ticket type.";
+      const message = reason === "not_enough_together" ? t2("picker.couldNotFindSeatsTogether", { count: qty }) : reason === "companion_pair_required" ? this.tf("picker.companionPairRequired", "Select the adjacent wheelchair place with each companion ticket.") : reason === "ticket_option_not_applicable" ? this.tf("picker.ticketOptionNotApplicable", "That ticket choice is not available for the selected seat.") : reason === "sold_out" ? this.tf("picker.ticketTypeSoldOut", "That ticket type is sold out. Try another ticket type.") : reason === "event_closed" ? this.tf("picker.seatSalesClosedForEvent", "Seat sales have closed for this event.") : this.tf("picker.seatsNoLongerAvailableTryAnother", "Those seats are no longer available. Try another quantity or ticket type.");
       this.toast(message, "error");
       return null;
     } finally {
@@ -7740,7 +8292,7 @@ var SeatPicker = class _SeatPicker {
       }
     }
     if (!released) {
-      this.toast("Couldn't release your tickets. Your hold is unchanged.", "error");
+      this.toast(this.tf("picker.couldNotReleaseTickets", "Couldn't release your tickets. Your hold is unchanged."), "error");
       return;
     }
     this.hold = null;