/* Chrome for the 3D aisle. The panels (card, cart, scrim) come from store.css
   so both builds look like the same shop. */
.a3 { position: fixed; inset: 0; overflow: hidden; }
/* iOS hijacks a long press into a text selection — the "Copy | Search with
 * Google" callout, complete with drag handles — and EVERY control in here is
 * meant to be held down: holding an arrow is how you slide along a shelf, and
 * holding 🧭 recalibrates. Held for a second, the button stopped being a
 * button and became selected text, which is exactly what it looked like on
 * the device: the callout sitting on top of the left arrow, and no movement.
 *
 * The unprefixed `user-select` does not suppress it on Safari; the -webkit-
 * pair is what actually does, and `-webkit-touch-callout` is what kills the
 * menu. Applied to the whole chrome rather than to the pad, because the pad
 * was only the control that happened to get held longest. The search field is
 * the one place where text is genuinely text, so it opts back in. */
.a3 { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.a3-find input { -webkit-user-select: text; user-select: text; }
.a3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.a3-canvas:active { cursor: grabbing; }

.a3-top {
  position: absolute; top: 0; right: 0; left: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: max(12px, env(safe-area-inset-top)) 18px 12px;
  background: linear-gradient(rgba(20,24,28,.5), transparent);
}
.a3-brand {
  color: #fff; font-family: 'IBM Plex Mono', monospace; font-size: .84rem;
  letter-spacing: .09em; opacity: .85; white-space: nowrap;
}
.a3-room {
  color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: -.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,.5); white-space: nowrap;
}
.a3-find { position: relative; margin-inline-start: auto; width: min(320px, 42vw); }
.a3-find input {
  width: 100%; height: 38px; border-radius: 100px; padding: 0 16px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: #fff; font: inherit; font-size: .88rem; outline: none;
}
.a3-find input::placeholder { color: rgba(255,255,255,.7); }
.a3-find input:focus { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); }
.a3-hits {
  position: absolute; top: 46px; right: 0; left: 0; z-index: 30; margin: 0; padding: 6px;
  list-style: none; max-height: 46vh; overflow: auto;
  background: rgba(252,252,251,.92); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 14px;
  box-shadow: 0 24px 50px -14px rgba(8,11,14,.45);
}
.a3-hits li {
  padding: 8px 11px; border-radius: 9px; cursor: pointer; display: flex;
  flex-direction: column; gap: 1px;
}
.a3-hits li:hover { background: rgba(20,24,28,.07); }
.a3-hits b { font-size: .84rem; font-weight: 500; color: var(--ar-ink); }
.a3-hits span { font-size: .72rem; color: rgba(20,24,28,.5); }
.a3-hits .a3-none { color: rgba(20,24,28,.5); font-size: .84rem; cursor: default; }

.a3-tip {
  position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%);
  z-index: 7; color: rgba(255,255,255,.95); font-size: .84rem; pointer-events: none;
  background: rgba(20,24,28,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 9px 18px; border-radius: 100px; white-space: nowrap;
  opacity: 0; transition: opacity .5s;
}
.a3-tip.show { opacity: 1; }

.a3-label {
  position: fixed; top: 0; left: 0; z-index: 25; pointer-events: none;
  max-width: 240px; padding: 8px 12px; border-radius: 11px;
  background: rgba(20,24,28,.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; display: flex; flex-direction: column; gap: 2px;
}
.a3-label b { font-size: .8rem; font-weight: 500; line-height: 1.35; }
.a3-label span { font-family: 'IBM Plex Mono', monospace; font-size: .88rem; font-weight: 700; letter-spacing: -.03em; }
.a3-label del { color: rgba(255,255,255,.5); font-size: .72rem; }

.a3-cart {
  position: fixed; z-index: 40; left: 18px; bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 12px 20px;
  background: rgba(20,24,28,.66); color: #fff; font: inherit; font-weight: 600; font-size: .92rem;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px -10px rgba(8,11,14,.6);
  transition: background .2s, transform .2s;
}
.a3-cart svg { width: 21px; height: 21px; }
/* the event-cart button — same family as the cart FAB, one shelf up */
.a3-event {
  position: fixed; z-index: 40; left: 18px; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 10px 18px;
  background: rgba(20,24,28,.66); color: #fff; font: inherit; font-weight: 600; font-size: .88rem;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); cursor: pointer;
  box-shadow: 0 14px 34px -10px rgba(8,11,14,.6);
  transition: background .2s, transform .2s;
}
.a3-event:hover { transform: translateY(-2px); background: rgba(30,90,40,.75); }
/* the event sheet — the request window with the microphone INSIDE it */
.a3-evd {
  position: fixed; z-index: 45; left: 14px; right: 14px;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + 112px);
  max-width: 430px; margin-inline: auto; direction: rtl;
  background: rgba(255,255,255,.97); border-radius: 18px; padding: 14px 16px;
  box-shadow: 0 24px 60px -18px rgba(8,11,14,.55);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
}
.a3-evd p { margin: 0 0 10px; font-weight: 700; font-size: .95rem; color: #14181c; }
.a3-evd__row { display: flex; gap: 8px; }
.a3-evd__row input {
  flex: 1; font: inherit; font-size: .92rem; padding: 11px 13px; direction: rtl;
  border: 1.5px solid rgba(20,24,28,.16); border-radius: 12px; outline: none;
}
.a3-evd__row input:focus { border-color: #1f8a3b; }
.a3-evd__mic {
  border: 1.5px solid rgba(20,24,28,.16); border-radius: 12px; background: #fff;
  font-size: 1.05rem; padding: 0 14px; cursor: pointer;
}
.a3-evd__mic.rec { background: #E11D2E; border-color: #E11D2E; animation: a3micpulse 1.1s ease-in-out infinite; }
@keyframes a3micpulse { 50% { transform: scale(1.1); } }
.a3-evd__act { display: flex; gap: 8px; margin-top: 10px; }
.a3-evd__go {
  flex: 1; border: 0; border-radius: 12px; padding: 12px; cursor: pointer;
  background: #1f8a3b; color: #fff; font: inherit; font-weight: 700; font-size: .95rem;
}
.a3-evd__x {
  border: 1.5px solid rgba(20,24,28,.14); border-radius: 12px; background: #fff;
  padding: 12px 16px; cursor: pointer; font: inherit; font-size: .9rem;
}
.a3-cart:hover { transform: translateY(-2px); }
.a3-cart.has { background: #E11D2E; }
.a3-cart__n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; display: none;
  place-items: center; background: #fff; color: #14181C; font-size: .78rem; font-weight: 700;
}
.a3-cart.has .a3-cart__n { display: grid; }
.a3-cart__t { font-style: normal; font-family: 'IBM Plex Mono', monospace; font-weight: 700; letter-spacing: -.03em; }
.a3-cart.pop { animation: a3Pop .4s ease; }
@keyframes a3Pop { 35% { transform: scale(1.12) } }

/* A d-pad is a PHYSICAL control, not a sentence.
 *
 * The page is dir="rtl" for Hebrew, and an RTL flex row lays its items out
 * right to left — so the DOM order [← ↑↓ →] rendered on screen as [→ ↑↓ ←].
 * The button on the left of the pad walked you right. The key mapping was
 * correct the whole time and the glyph on each button matched what it did,
 * which is exactly why it survived: nothing was wrong except WHERE the two
 * buttons sat, and a thumb reaches by position, not by reading order.
 *
 * `direction: ltr` on the pad pins its axes to the screen. Left is left in
 * every language, and it stays right if the document direction ever changes.
 * Only the container is switched, so nothing textual is affected. */
.a3-pad {
  position: fixed; z-index: 35; right: 18px; bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
  direction: ltr;
  /* The container is a 174x114 rectangle holding three round buttons — most
     of its area is the gaps BETWEEN them, and it was eating every tap that
     landed there. Not a cosmetic loss: it sits over the lower right of the
     shelf, and taps that hit the dead space did nothing whatsoever, which
     reads as "the store ignored me". Only the buttons should be solid. */
  pointer-events: none;
}
.a3-pad button { pointer-events: auto; }
.a3-pad button {
  width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.2rem;
  border: 1px solid rgba(255,255,255,.3); background: rgba(20,24,28,.45);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; touch-action: none; user-select: none;
}
.a3-pad button:active { background: #E11D2E; }
.a3-pad__up { width: 60px; height: 60px; }

.a3-load {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; gap: 14px;
  align-content: center; background: #eceae5; color: rgba(20,24,28,.6); font-size: .9rem;
}
.a3-load[hidden] { display: none; }
.a3-load span {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid rgba(20,24,28,.15); border-top-color: #E11D2E;
  animation: arSpin .8s linear infinite;
}
.a3-load em { font-style: normal; }

@media (max-width: 860px) {
  .a3-room { display: none; }
  .a3-find { width: 56vw; }
  .a3-cart span { display: none; }
  .a3-cart { padding: 12px 16px; }
  /* Clear of the pad, by the pad's own geometry rather than by a percentage.
     15vh is a fraction of the SCREEN, and the pad is a fixed 114px stack
     pinned to the bottom — so on a short phone the tip landed inside the
     arrows. It is centred and nearly full width here, which is why this only
     shows on a phone: on a desktop the two are horizontally disjoint and the
     percentage never had to be right. */
  .a3-tip {
    font-size: .74rem; padding: 7px 13px;
    bottom: max(15vh, calc(max(18px, env(safe-area-inset-bottom)) + 132px));
  }
}

/* the store directory */
/* The directory: the rail unrolled into a ruler.
 *
 * It sits under the top bar rather than at a corner, because it is a store
 * directory and that is where a directory hangs — and because both bottom
 * corners are already spent on the trolley and the pad. Horizontally
 * scrollable: thirteen Hebrew department names will not fit across a phone at
 * any honest font size, and shrinking them until they do would produce a
 * ruler nobody can read, which is the thing it exists to fix. */
.a3-dirs {
  /* Under the bar, by MEASUREMENT rather than by arithmetic.
   *
   * This used to add a guessed 46px to the safe-area inset, which is only
   * ever right for one combination of font size, button size and notch. On a
   * desktop the bar is taller than the guess and the strip climbed into the
   * buttons; the department blocks and the price-compare control ended up
   * sharing pixels. --a3-topH is the bar's real height, written by the store
   * on boot and on every resize, so the strip sits under whatever the bar
   * actually turned out to be.
   *
   * And BELOW the bar in stacking order, not above it. At z-index 36 the
   * strip covered the search dropdown — .a3-top is its own stacking context,
   * so no z-index on the list inside could climb over a higher sibling. A
   * menu the shopper just opened has to win against a permanent strip. */
  position: fixed; z-index: 14; inset-inline: 0;
  top: var(--a3-topH, 74px);
  display: flex; gap: 4px; padding: 6px 12px 10px;
  overflow-x: auto; overflow-y: visible;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  direction: ltr;                 /* rail order, left to right, is not text */
}
.a3-dirs::-webkit-scrollbar { display: none; }
.a3-dirs__d {
  flex: 0 0 auto; min-width: 76px; height: 34px; padding: 0 10px;
  border: 0; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 500; white-space: nowrap;
  color: #fff; background: color-mix(in srgb, var(--hue) 62%, rgba(20,24,28,.75));
  box-shadow: inset 0 -2px 0 var(--hue);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: .82; transition: opacity .18s, transform .18s;
}
.a3-dirs__d:hover { opacity: 1; }
/* where you are, stated twice: the block lifts and the marker sits on it */
.a3-dirs__d.is-here { opacity: 1; transform: translateY(-2px); box-shadow: inset 0 -3px 0 #fff; }
.a3-dirs__you {
  position: absolute; top: 2px; left: 12px; width: 2px; height: 44px;
  background: #E11D2E; border-radius: 2px; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
  transition: transform .2s linear, opacity .2s;
}
@media (max-width: 860px) {
  .a3-dirs { padding: 5px 10px 9px; }
  .a3-dirs__d { height: 30px; min-width: 68px; font-size: .68rem; }
  .a3-dirs__you { height: 40px; }
}

/* filmic vignette — the cheapest post effect that exists. Two layers now:
   the dark corner falloff, and a whisper of a warm/cool split-tone (amber
   centre, teal shadow) — the colour-grade cue ACES alone never supplies,
   and the difference between "clean render" and "photographed". Both are
   DOM compositing: zero WebGL cost on any tier. */
.a3-vignette {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background:
    radial-gradient(115% 90% at 50% 42%, rgba(255,196,120,.05) 0%, transparent 52%),
    radial-gradient(115% 90% at 50% 42%, transparent 58%, rgba(8,14,20,.30) 100%);
}

/* ---- mobile: a thumb instrument, not a shrunken desktop ---- */
.a3-pad__col { display: flex; flex-direction: column; gap: 6px; }
.a3-pad__dn { width: 50px; height: 42px; border-radius: 21px; font-size: 1rem; }
@media (max-width: 860px) {
  /* The top bar was over-subscribed before the phone got a control of its
     own: at 412px the search field had already been squeezed from its 56vw
     down to 101px by flex, and one more button took it to 53 — a search box
     too narrow to show a word of what you typed. So on a phone the wordmark
     goes (it is the only thing up there that is pure decoration), the gaps
     tighten, and the field stops being shrinkable. */
  .a3-brand { display: none; }
  /* The bar is over-subscribed again, by one button.
     Adding the loupe pushed the search placeholder from "search the whole
     shop" down to a truncated stub — the exact failure this block was
     written to fix the first time. Buying the room back from the GAPS
     rather than from the field: whitespace between five round buttons is
     the cheapest thing on this bar, and the field is the only control whose
     width carries meaning. */
  .a3-top { gap: 6px; padding-inline: 10px; }
  .a3-imu, .a3-zoom, .a3-cmp, .a3-list, .a3-music { width: 2rem; height: 2rem; font-size: .9rem; }
  /* shrinkable again only once it has hit a width a Hebrew word still fits
     in — the old layout let flex take it all the way down to 53px */
  .a3-find { width: 42vw; min-width: 104px; }
  .a3-imu-hud { left: 12px; bottom: 150px; }
  /* iOS zooms any input under 16px — pin it */
  .a3-find input { font-size: 16px; height: 40px; }
  .a3-pad { right: 12px; bottom: max(14px, env(safe-area-inset-bottom)); gap: 6px; }
  .a3-pad button { width: 54px; height: 54px; }
  .a3-pad__up { width: 60px; height: 60px; }
  .a3-pad__dn { width: 60px; height: 44px; }
  .a3-cart { left: 12px; padding: 13px 15px; }
  .a3-label { display: none; }              /* hover has no meaning on touch */
  .a3-tip { width: calc(100vw - 40px); white-space: normal; text-align: center; line-height: 1.5; }
  /* product/cart cards become bottom sheets */
  .ar-card { top: auto !important; bottom: 0 !important; right: 0 !important; left: 0 !important;
    transform: none !important; width: 100% !important; max-width: 100% !important;
    max-height: 76vh; border-radius: 22px 22px 0 0 !important; }
  .ar-pd__im img { max-height: 128px; }
}

/* an open card owns the screen — the walk controls have no business over it */
body:has(.ar-card:not([hidden])) .a3-pad,
body:has(.ar-card:not([hidden])) .a3-dirs,
body:has(.ar-card:not([hidden])) .a3-imu-hud,
body:has(.ar-card:not([hidden])) .a3-tip { display: none; }

.ar-unitline { font-family: "IBM Plex Mono", monospace; font-size: .78rem; color: rgba(20,24,28,.55); margin: -6px 0 12px; letter-spacing: -.02em; }
.ar-saved { margin: 10px 18px 0; padding: 10px 14px; border-radius: 12px; background: rgba(31,158,78,.1); color: #1F7A42; font-size: .86rem; font-weight: 600; }
.ar-saved b { font-family: "IBM Plex Mono", monospace; letter-spacing: -.02em; }

/* the shopping-list button + panel + toast + deal tips */
.a3-list {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  font-size: 1.05rem; cursor: pointer;
}
.a3-list.has { background: #35e07a; border-color: #35e07a; }
.a3-list__n {
  position: absolute; top: -6px; left: -6px; min-width: 20px; height: 20px;
  border-radius: 100px; padding: 0 5px; display: none; place-items: center;
  background: #14181C; color: #fff; font-size: .7rem; font-weight: 700;
}
.a3-list.has .a3-list__n { display: grid; }
.ar-card.is-list { max-width: min(480px, calc(100vw - 32px)); }
.ar-list__body { padding: 14px 20px 20px; }
.ar-list__ta {
  width: 100%; min-height: 130px; resize: vertical; font: inherit; font-size: 16px;
  border: 1px solid rgba(20,24,28,.14); border-radius: 12px; padding: 12px;
  margin-bottom: 10px; direction: rtl;
}
.ar-list__sum { font-size: .84rem; color: rgba(20,24,28,.65); margin: 12px 0 8px; }
.ar-list__sum i { font-style: normal; color: #A3121F; }
.ar-list__row {
  display: flex; align-items: baseline; gap: 9px; padding: 6px 0;
  border-bottom: 1px solid rgba(20,24,28,.06); font-size: .84rem;
}
.ar-list__row b {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #35e07a; color: #06331a; font-size: .72rem;
}
.ar-list__row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-list__row em { font-style: normal; font-size: .72rem; color: rgba(20,24,28,.5); }
.a3-toast {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 55;
  background: rgba(20,24,28,.92); color: #fff; font-size: .92rem; font-weight: 600;
  padding: 12px 22px; border-radius: 100px; white-space: nowrap;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ar-tips { padding: 8px 18px 0; }
.ar-tip {
  display: flex; align-items: center; gap: 10px; justify-content: space-between;
  background: rgba(53,224,122,.1); border-radius: 12px; padding: 9px 13px; margin-bottom: 7px;
  font-size: .8rem; color: #14532d;
}
.ar-tip button {
  flex: none; border: 0; border-radius: 100px; padding: 7px 14px; cursor: pointer;
  background: #16a34a; color: #fff; font: inherit; font-weight: 700;
}
@media (max-width: 860px) { .a3-list { width: 38px; height: 38px; } }

/* ===== price-comparison station ===== */
.a3-cmp {
  display: inline-flex; align-items: center; gap: .35rem;
  background: linear-gradient(135deg, #10402a, #0b2a1c);
  border: 1px solid rgba(38,208,124,.45); color: #d6ffe9;
  font: 600 .82rem/1 Rubik, system-ui, sans-serif;
  padding: .5rem .8rem; border-radius: 999px; cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.a3-cmp:hover { border-color: #26d07c; transform: translateY(-1px); }
@media (max-width: 620px) { .a3-cmp span { display: none; } }

.ar-card.is-compare { max-width: 27rem; }
.cmp-pd { padding: .3rem .2rem; }
.cmp-pd__top { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.cmp-pd__top img {
  width: 3.6rem; height: 3.6rem; object-fit: contain;
  background: #fff; border-radius: .6rem; padding: .2rem; flex: none;
}
.cmp-pd__top h3 { margin: 0 0 .18rem; font-size: 1rem; font-weight: 700; }
.cmp-pd__cat { font-size: .7rem; color: #8a94a6; background: rgba(0,0,0,.06); padding: .1rem .42rem; border-radius: 999px; }
.cmp-pd__gap { margin-inline-start: auto; color: #d64545; font-weight: 800; font-size: 1.05rem; }

.cmp-pd__rows { display: grid; gap: .34rem; }
.cmp-row {
  display: grid; grid-template-columns: .6rem 4.4rem 1fr auto;
  align-items: center; gap: .5rem;
}
.cmp-row i { width: .6rem; height: .6rem; border-radius: 50%; }
.cmp-row span { font-size: .82rem; color: #5c6675; }
.cmp-row em {
  height: .95rem; border-radius: .5rem; opacity: .55; display: block;
  animation: cmpgrow .7s cubic-bezier(.22,1,.36,1) both;
}
.cmp-row b { font-size: .92rem; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.6rem; text-align: start; }
.cmp-row.is-win span, .cmp-row.is-win b { color: #12a45c; font-weight: 800; }
.cmp-row.is-win em { opacity: .9; }
@keyframes cmpgrow { from { transform: scaleX(0); transform-origin: right; } }

.cmp-pd__foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgba(0,0,0,.08);
  font-size: .86rem; color: #5c6675;
}
.cmp-pd__foot b { font-size: 1.15rem; font-weight: 800; color: #12a45c; }

.cmp-pd__basket { margin-top: .85rem; }
.cmp-pd__basket > span { font-size: .78rem; color: #8a94a6; }
.cmp-basket { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin-top: .35rem; }
.cmp-basket__b {
  background: rgba(0,0,0,.045); border-radius: .55rem; padding: .42rem .3rem; text-align: center;
}
.cmp-basket__b span { display: block; font-size: .66rem; color: #6b7585; }
.cmp-basket__b b { font-size: .84rem; font-variant-numeric: tabular-nums; }
.cmp-basket__b.is-win { background: rgba(38,208,124,.14); box-shadow: inset 0 0 0 1px rgba(38,208,124,.4); }
.cmp-basket__b.is-win b { color: #12a45c; }
.cmp-basket__note { margin: .5rem 0 0; font-size: .76rem; color: #8a94a6; }

/* ===== music overhead ===== */
.a3-music {
  width: 2.15rem; height: 2.15rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%; cursor: pointer; font-size: .95rem; line-height: 1;
  transition: background .2s, opacity .2s;
}
.a3-music:hover { background: rgba(255,255,255,.16); }
.a3-music.is-off { opacity: .45; }

/* ===== the peripheral vision the phone takes away =====
 *
 * A phone crops the human field from about 200 degrees to 54, so three
 * quarters of the periphery is simply gone — which is why people walk past
 * the thing they came for. The foveated model's detection channel runs over
 * the full field including the cropped part, and what it catches is handed
 * back here: a soft glow on the side the item is on, and nothing else. No
 * arrow, no badge, no label — a periphery reports WHERE, never WHAT, and a
 * cue that says more than the sense it stands in for is a different feature
 * wearing its clothes. */
.a3-periph { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.a3-periph i {
  position: absolute; top: 0; bottom: 0; width: 22vw; max-width: 130px;
  opacity: 0; transition: opacity .45s ease;
}
.a3-periph__l { left: 0; background: linear-gradient(to right, rgba(53,224,122,.55), transparent 78%); }
.a3-periph__r { right: 0; background: linear-gradient(to left, rgba(53,224,122,.55), transparent 78%); }
/* Four edges, not two. A phone crops the field vertically as hard as it does
   horizontally, and the thing you are looking for is very often on the
   bottom shelf — which is the commonest "I walked straight past it" there
   is. */
.a3-periph__t, .a3-periph__b {
  top: auto; bottom: auto; left: 0; right: 0; width: auto;
  height: 16vh; max-height: 130px;
}
.a3-periph__t { top: 0; background: linear-gradient(to bottom, rgba(53,224,122,.55), transparent 78%); }
.a3-periph__b { bottom: 0; background: linear-gradient(to top, rgba(53,224,122,.55), transparent 78%); }
/* and when the turn has happened and the item resolves, it earns a name */
.a3-periph__chip {
  position: fixed; z-index: 8; left: 50%; transform: translateX(-50%);
  bottom: 21vh; max-width: min(78vw, 340px);
  padding: 8px 16px; border-radius: 100px; pointer-events: none;
  background: rgba(31,122,66,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: .84rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.a3-periph__chip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .a3-periph i { transition: none; } }

/* ===== the phone as the controller ===== */
.a3-imu {
  width: 2.15rem; height: 2.15rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%; cursor: pointer; font-size: .95rem; line-height: 1;
  color: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.a3-imu[hidden] { display: none; }
/* the loupe. Same shape as the compass so the top bar stays one family; the
   badge carries the factor because a magnifier with no readout leaves the
   shopper guessing whether the press did anything. */
.a3-zoom {
  position: relative;
  width: 2.15rem; height: 2.15rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%; cursor: pointer; font-size: .95rem; line-height: 1;
  color: #fff; touch-action: none; user-select: none; -webkit-user-select: none;
  transition: background .2s, box-shadow .2s, border-color .2s;
}
.a3-zoom.is-on {
  background: rgba(255,225,77,.26); border-color: #ffe14d;
  box-shadow: 0 0 0 3px rgba(255,225,77,.18);
}
.a3-zoom b {
  position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
  font-family: 'IBM Plex Mono', monospace; font-size: .58rem; font-weight: 700;
  letter-spacing: -.04em; color: #14181C; background: #ffe14d;
  padding: 0 3px; border-radius: 5px; line-height: 1.25; white-space: nowrap;
}
.a3-zoom b:empty { display: none; }
.a3-imu.is-on {
  background: rgba(53,224,122,.24); border-color: #35e07a;
  box-shadow: 0 0 0 3px rgba(53,224,122,.16);
}

/* A control with no readout is a control nobody learns. The needle grows out
   of the middle of the track — up is forward, down is reverse — and the dot
   shows how hard the tilt is steering. */
/* Left, clear of the map — the right-hand corner belongs to the walk pad,
   and a readout that sits on top of the buttons it is meant to explain is
   worse than no readout. */
.a3-imu-hud {
  position: fixed; z-index: 34; left: 22px; bottom: 196px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  pointer-events: none;
}
.a3-imu-hud[hidden] { display: none; }
.a3-imu-hud__gas, .a3-imu-hud__steer {
  position: relative; border-radius: 100px; background: rgba(20,24,28,.45);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
  overflow: hidden;
}
.a3-imu-hud__gas { width: 6px; height: 96px; }
/* the zero line, so a still needle still reads as "neutral" and not as "dead" */
.a3-imu-hud__gas::after {
  content: ''; position: absolute; top: 50%; right: 0; left: 0; height: 1px;
  background: rgba(255,255,255,.5);
}
.a3-imu-hud__gas i {
  position: absolute; right: 0; left: 0; bottom: 50%; height: 0;
  background: #35e07a; transition: height .1s linear;
}
.a3-imu-hud__steer { width: 54px; height: 6px; overflow: visible; }
.a3-imu-hud__steer i {
  position: absolute; top: 50%; left: 50%; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.45); transition: transform .1s linear;
}

/* While a sheet is open the floating chrome would sit on top of its own
   buttons — on a phone the cart pill landed exactly over the checkout row. */
body.has-panel .a3-cart,
body.has-panel .a3-pad,
body.has-panel .a3-dirs,
body.has-panel .a3-imu-hud,
body.has-panel .a3-list { opacity: 0; pointer-events: none; transition: opacity .15s; }