:root {
  --ar-lime: #C6F24E;
  --ar-lime-d: #6E9B0E;
  --ar-ink: #14181C;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0f12; font-family: 'Rubik', sans-serif; }

.ar { position: fixed; inset: 0; overflow: hidden; }
.ar-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.ar-canvas:active { cursor: grabbing; }

/* forward-motion veil during a walk */
.ar-veil {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 55%, transparent 25%, rgba(12,15,18,.55) 100%);
  transition: opacity .35s ease;
}
.ar-veil.on { opacity: 1; }

/* top bar */
.ar-top {
  position: absolute; top: 0; right: 0; left: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) 20px 14px;
  background: linear-gradient(rgba(12,15,18,.6), transparent);
}
.ar-brand { color: #fff; font-weight: 700; letter-spacing: .04em; font-family: 'IBM Plex Mono', monospace; }
.ar-room { color: #fff; font-weight: 700; font-size: 1.05rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.ar-tools button {
  border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #fff; font-size: 1rem; border-radius: 100px; width: 40px; height: 40px; cursor: pointer; margin-right: 6px;
}
.ar-tools .on { background: var(--ar-lime-d); border-color: var(--ar-lime-d); }

/* sound toggle — an equalizer that flatlines when muted */
.ar-tools button.ar-snd { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0; }
.ar-snd i {
  display: block; width: 2px; height: 13px; border-radius: 2px; background: currentColor;
  transform-origin: 50% 50%; animation: arEq 1s ease-in-out infinite;
  transition: height .28s ease;
}
.ar-snd i:nth-child(2) { animation-duration: 1.45s; }
.ar-snd i:nth-child(3) { animation-duration: .78s; }
.ar-snd.is-off i { animation: none; height: 2px; transform: none; opacity: .6; }
@keyframes arEq { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .ar-snd i { animation: none; } }

.ar-hint {
  position: absolute; bottom: 13vh; left: 50%; transform: translateX(-50%);
  z-index: 7; color: rgba(255,255,255,.9); font-size: .85rem; pointer-events: none;
  background: rgba(12,15,18,.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 18px; border-radius: 100px; opacity: 0; transition: opacity .5s;
}
.ar-hint.show { opacity: 1; }

/* floating whatsapp — always there */
.ar-wa {
  position: fixed; z-index: 40; left: 18px; bottom: max(18px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  background: #1EBE5D; color: #06331a; font-weight: 700; font-size: .92rem;
  padding: 12px 20px; border-radius: 100px;
  box-shadow: 0 12px 32px rgba(30,190,93,.4);
  animation: arWa 3s ease-in-out infinite;
}
.ar-wa svg { width: 22px; height: 22px; }
.ar-wa:hover { background: #25D366; }
@keyframes arWa { 0%,100% { box-shadow: 0 12px 32px rgba(30,190,93,.4) } 50% { box-shadow: 0 12px 42px rgba(30,190,93,.72) } }
@media (max-width: 860px) { .ar-wa span { display: none; } .ar-wa { padding: 14px; } }

/* markers — three tiers */


/* map */
.ar-mapui { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(12,15,18,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ar-mapui__in { background: #fff; border-radius: 20px; padding: 26px; width: min(420px, 90vw); direction: rtl; }
.ar-mapui__in h3 { margin: 0 0 16px; color: var(--ar-ink); }
.ar-mapui__grid { display: grid; gap: 8px; }
.ar-mapui__grid button { border: 1px solid rgba(20,24,28,.12); background: #fff; border-radius: 12px; padding: 13px; font: inherit; font-weight: 700; color: var(--ar-ink); cursor: pointer; text-align: right; }
.ar-mapui__grid button.on { background: var(--ar-lime); border-color: var(--ar-lime); }
.ar-mapui__grid button:hover { border-color: var(--ar-lime-d); }
.ar-mapui__x { margin-top: 16px; width: 100%; border: 0; background: var(--ar-ink); color: #fff; border-radius: 100px; padding: 12px; font: inherit; font-weight: 700; cursor: pointer; }


.ar-load { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; pointer-events: none; }
.ar-load span { width: 42px; height: 42px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--ar-lime); animation: arSpin .8s linear infinite; }
@keyframes arSpin { to { transform: rotate(360deg) } }

/* on-screen movement pad */
.ar-pad {
  position: fixed; z-index: 35; right: 20px; bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 8px;
}
.ar-pad button {
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer; font-size: 1.25rem;
  border: 1px solid rgba(255,255,255,.32); background: rgba(20,24,28,.42);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #fff; transition: background .15s, transform .15s;
  touch-action: none; user-select: none;
}
.ar-pad button:active { background: var(--ar-lime); color: #0c0f12; transform: scale(.93); }
.ar-pad__up { width: 62px; height: 62px; font-size: 1.5rem; border-color: rgba(198,242,78,.6); }

/* lobby compass — six wings around you */
.ar-compass {
  position: fixed; z-index: 34; left: 50%; transform: translateX(-50%);
  bottom: max(18px, env(safe-area-inset-bottom)); width: 74px; height: 74px;
  border-radius: 50%; background: rgba(12,15,18,.4);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.18); pointer-events: none;
}
.ar-compass::after {
  content: ""; position: absolute; left: 50%; top: 9px; transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 8px solid rgba(255,255,255,.75);
}
.ar-compass__ring { position: absolute; inset: 0; }
.ar-compass__d {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.42); transition: background .25s, box-shadow .25s;
}
.ar-compass__d.near { background: var(--ar-lime); box-shadow: 0 0 10px var(--ar-lime); }
@media (max-width: 860px) { .ar-compass { width: 60px; height: 60px; bottom: 92px; } }

/* home door reads differently from wing doors */
.ar-door.is-home .ar-door__l { background: rgba(20,24,28,.82); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.25); }

/* first paint: soft brand splash while the lobby texture streams in */
.ar-load { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #1a2026, #0c0f12 72%); transition: opacity .6s ease; }
.ar-load[hidden] { display: none; }
.ar-load span { width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--ar-lime); animation: arSpin .8s linear infinite; }
/* ============ markers: three tiers ============ */
.ar-spots { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.ar-spot, .ar-door {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  will-change: transform; backface-visibility: hidden;
  display: flex; align-items: center; gap: 8px; pointer-events: auto; cursor: pointer;
  border: 0; background: transparent; font-family: inherit; padding: 0;
}
/* story: a quiet glowing point (never the product window's anchor thread) */
.ar-spot.is-story i, .ar-spot.is-action i {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.92); border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 0 0 5px rgba(255,255,255,.14), 0 0 16px rgba(255,255,255,.5);
  animation: arPulse 2.6s ease-in-out infinite; animation-delay: var(--ph, 0s);
}
@keyframes arPulse { 50% { box-shadow: 0 0 0 11px rgba(255,255,255,.06), 0 0 24px rgba(255,255,255,.62) } }
/* the pill label belongs to point markers only — product windows build their own
   spans (frame/glass/chip/tag) and must not inherit a 100px radius and a blur */
.ar-spot.is-story span, .ar-spot.is-action span {
  color: #fff; font-size: .84rem; font-weight: 700; white-space: nowrap;
  background: rgba(12,15,18,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 6px 13px; border-radius: 100px; border: 1px solid rgba(255,255,255,.16);
  transition: background .2s, border-color .2s;
}
.ar-spot.is-story:hover span, .ar-spot.is-action:hover span { background: rgba(12,15,18,.78); border-color: rgba(255,255,255,.4); }
/* action: whatsapp green */
.ar-spot.is-action i {
  background: #25D366; border-color: #eafff2;
  box-shadow: 0 0 0 5px rgba(37,211,102,.22), 0 0 18px rgba(37,211,102,.8);
}
.ar-spot.is-action span { background: rgba(6,51,26,.72); border-color: rgba(37,211,102,.5); }
/* product: a holo window pinned into the room */
.ar-spot.is-product { display: block; --acc: var(--ar-acc, #6E9B0E); }
.ar-spot__frame {
  display: block; position: relative; width: clamp(160px, 17vw, 260px);
  transform: perspective(1000px) rotateY(var(--tilt, 9deg)) rotateX(1.5deg);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  animation: arFloat 7s ease-in-out infinite; animation-delay: var(--ph, 0s);
}
@keyframes arFloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -11px } }
.ar-spot.is-product:hover .ar-spot__frame {
  transform: perspective(1000px) rotateY(calc(var(--tilt, 9deg) * .3)) rotateX(0deg) scale(1.05);
}
/* the pane itself: white edge, deep drop, a breath of accent light */
.ar-spot__glass {
  display: block; position: relative; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--acc) 34%, transparent),
    0 40px 90px rgba(12,15,18,.5),
    0 0 44px color-mix(in srgb, var(--acc) 20%, transparent);
  transition: box-shadow .3s;
}
.ar-spot__glass img { display: block; width: 100%; height: auto; }
/* the diagonal sheen that makes it read as glass, not as a sticker */
.ar-spot__glass::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.32) 0%, transparent 28%, transparent 70%, rgba(255,255,255,.14) 100%);
}
.ar-spot__chip {
  position: absolute; top: -14px; right: 14px; z-index: 2; direction: ltr;
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: .07em; white-space: nowrap;
  color: #fff; background: color-mix(in srgb, var(--acc) 88%, #000);
  padding: 5px 12px; border-radius: 100px;
  box-shadow: 0 6px 18px rgba(12,15,18,.4);
}
.ar-spot__tag {
  position: absolute; right: 0; left: 0; bottom: 0; z-index: 1; padding: 26px 13px 10px;
  color: #fff; font-size: .8rem; font-weight: 500; line-height: 1.45; text-align: right;
  background: linear-gradient(0deg, rgba(12,15,18,.86), rgba(12,15,18,.5) 65%, transparent);
}
/* the AR pin — a thread down to the floor with a lit tip */
.ar-spot__anchor {
  position: absolute; top: 100%; right: 24%; width: 1px; height: 62px;
  background: linear-gradient(color-mix(in srgb, var(--acc) 70%, transparent), transparent 85%);
}
.ar-spot__anchor::after {
  content: ""; position: absolute; bottom: -3px; right: -3.5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--acc); box-shadow: 0 0 12px var(--acc);
}
.ar-spot.is-portrait .ar-spot__frame { width: clamp(110px, 11vw, 170px); }
/* discovered */
.ar-spot.is-story.is-seen i, .ar-spot.is-action.is-seen i { background: var(--ar-lime); border-color: rgba(255,255,255,.8); box-shadow: 0 0 0 4px rgba(198,242,78,.18); animation: none; }
.ar-spot.is-seen span::after, .ar-spot.is-seen .ar-spot__chip::after { content: " ✓"; color: var(--ar-lime); }
.ar-spot.is-seen .ar-spot__glass { box-shadow: 0 0 0 1px rgba(198,242,78,.7), 0 30px 66px rgba(12,15,18,.45); }

/* doors */
.ar-door { flex-direction: column; gap: 6px; }
.ar-door__l {
  color: var(--ar-ink); background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-weight: 700; font-size: .95rem; white-space: nowrap;
  padding: 11px 22px; border-radius: 100px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px rgba(198,242,78,.45);
  transition: transform .2s, box-shadow .2s;
}
.ar-door:hover .ar-door__l { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 0 3px var(--ar-lime); }
.ar-door.is-next .ar-door__l { background: var(--ar-lime); }
.ar-door.is-home .ar-door__l { background: rgba(20,24,28,.85); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.22); }
.ar-door__a { font-style: normal; color: #fff; font-size: 1.25rem; line-height: 1; text-shadow: 0 2px 10px rgba(0,0,0,.6); animation: arStep 1.8s ease-in-out infinite; }
@keyframes arStep { 0%, 100% { transform: translateY(0); opacity: .55 } 50% { transform: translateY(7px); opacity: 1 } }
/* finished the room, the onward door beckons */
.room-done .ar-door.is-next .ar-door__l { animation: arBeckon 1.9s ease-in-out infinite; }
@keyframes arBeckon {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 2px var(--ar-lime) }
  50% { box-shadow: 0 14px 40px rgba(0,0,0,.4), 0 0 0 7px rgba(198,242,78,.35) }
}

/* progress chip */
.ar-prog {
  font-size: .78rem; font-weight: 700; color: rgba(255,255,255,.82);
  background: rgba(12,15,18,.42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 100px; padding: 5px 13px; white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s;
}
.ar-prog.done { background: var(--ar-lime); color: #0c0f12; border-color: var(--ar-lime); }

/* ============ rich card ============ */
.ar-card {
  position: fixed; z-index: 30; right: 50%; transform: translateX(50%); bottom: 13vh;
  width: min(430px, calc(100vw - 32px)); max-height: 74vh; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 20px; direction: rtl; box-shadow: 0 34px 90px rgba(0,0,0,.5);
  animation: arIn .38s cubic-bezier(.2,.8,.2,1); scrollbar-width: none;
}
.ar-card::-webkit-scrollbar { display: none; }
@keyframes arIn { from { opacity: 0; transform: translateX(50%) translateY(24px) scale(.97) } }
.ar-card img { display: block; width: 100%; max-height: 200px; object-fit: cover; object-position: top; border-radius: 20px 20px 0 0; }
.ar-card__body { padding: 20px 22px 22px; }
.ar-card__kind {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: #fff; background: var(--ar-lime-d); padding: 4px 11px; border-radius: 100px; margin-bottom: 9px;
}
.ar-card h3 { margin: 0 0 8px; font-size: 1.22rem; color: var(--ar-ink); line-height: 1.3; }
.ar-card p { margin: 0; font-size: .95rem; line-height: 1.68; color: rgba(20,24,28,.78); }
.ar-card__x {
  position: absolute; top: 12px; left: 12px; z-index: 2; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; font-size: .9rem;
  background: rgba(255,255,255,.85); color: var(--ar-ink); box-shadow: 0 4px 14px rgba(0,0,0,.2);
}
.ar-card__grab { display: none; }
/* metrics */
.ar-metrics { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.ar-metrics b { display: block; font-size: 1.35rem; line-height: 1.1; color: var(--ar-ink); }
.ar-metrics span { font-size: .74rem; color: rgba(20,24,28,.55); }
/* tech chips */
.ar-tech { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.ar-tech span {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; direction: ltr;
  background: rgba(20,24,28,.06); color: rgba(20,24,28,.7);
  padding: 4px 10px; border-radius: 7px;
}
/* result quote */
.ar-quote {
  margin: 16px 0 0; padding: 12px 14px; border-radius: 12px;
  background: rgba(198,242,78,.16); border-right: 3px solid var(--ar-lime);
  font-size: .9rem; line-height: 1.6; color: rgba(20,24,28,.82); font-style: italic;
}
/* card CTA */
.ar-card__cta {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin-top: 18px;
  background: #1EBE5D; color: #fff; font-weight: 700; font-size: .93rem;
  padding: 13px 18px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 10px 26px rgba(30,190,93,.32); transition: background .2s, transform .2s;
}
.ar-card__cta svg { width: 19px; height: 19px; }
.ar-card__cta:hover { background: #25D366; transform: translateY(-2px); }

/* ============ mobile: a sheet, not a shrunken box ============ */
@media (max-width: 860px) {
  .ar-card {
    right: 0; left: 0; bottom: 0; transform: none; width: 100%; max-height: 78svh;
    border-radius: 22px 22px 0 0; padding-bottom: env(safe-area-inset-bottom);
    animation: arSheet .34s cubic-bezier(.2,.85,.25,1);
  }
  @keyframes arSheet { from { transform: translateY(100%) } }
  .ar-card img { max-height: 150px; border-radius: 22px 22px 0 0; }
  .ar-card__grab {
    display: block; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 100px; background: rgba(20,24,28,.22); z-index: 2;
  }
  .ar-card__x { top: 14px; left: 14px; }
  .ar-card__body { padding: 22px 20px 24px; }
  .ar-spot__frame { width: clamp(130px, 38vw, 210px); }
  .ar-spot.is-portrait .ar-spot__frame { width: clamp(96px, 25vw, 150px); }
  .ar-spot.is-story span, .ar-spot.is-action span { font-size: .78rem; }
  .ar-spot__tag { font-size: .72rem; padding: 20px 10px 8px; }
  .ar-spot__chip { font-size: .62rem; padding: 4px 9px; top: -11px; right: 10px; }
  .ar-spot__anchor { height: 34px; }
  .ar-prog { font-size: .7rem; padding: 4px 10px; }
  .ar-room { font-size: .92rem; }
}

/* ============ finale ============ */
.ar-finale {
  position: fixed; z-index: 42; right: 50%; transform: translateX(50%); bottom: 12vh;
  width: min(430px, calc(100vw - 32px)); direction: rtl;
  background: rgba(255,255,255,.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 22px; padding: 24px; box-shadow: 0 36px 96px rgba(0,0,0,.55);
  animation: arIn .45s cubic-bezier(.2,.8,.2,1);
}
.ar-fin__eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .68rem; letter-spacing: .16em; color: var(--ar-lime-d); }
.ar-finale h3 { margin: 8px 0 8px; font-size: 1.4rem; color: var(--ar-ink); }
.ar-finale p { margin: 0 0 18px; font-size: .93rem; line-height: 1.65; color: rgba(20,24,28,.75); }
.ar-fin__x {
  position: absolute; top: 14px; left: 14px; border: 0; cursor: pointer;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(20,24,28,.07); color: var(--ar-ink);
}
.ar-fin__paths { display: grid; gap: 9px; }
.ar-fin__paths a {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  border: 1px solid rgba(20,24,28,.1); border-radius: 14px; padding: 13px 15px;
  transition: border-color .2s, transform .2s, background .2s;
}
.ar-fin__paths a:hover { border-color: var(--ar-lime-d); background: rgba(198,242,78,.12); transform: translateX(-3px); }
.ar-fin__paths b { font-size: 1.25rem; }
.ar-fin__paths span { font-weight: 700; color: var(--ar-ink); font-size: .95rem; }
@media (max-width: 860px) {
  .ar-finale { right: 0; left: 0; bottom: 0; transform: none; width: 100%; border-radius: 22px 22px 0 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); animation: arSheet .36s cubic-bezier(.2,.85,.25,1); }
}

/* ============ atmosphere ============ */
.ar-motes { position: absolute; inset: -10%; z-index: 4; pointer-events: none; transition: transform .5s ease-out; }
.ar-motes i {
  position: absolute; width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%;
  background: rgba(255,255,255,.75); box-shadow: 0 0 6px rgba(255,255,255,.5);
  animation: arDrift var(--d, 12s) linear infinite;
}
@keyframes arDrift {
  0%   { transform: translate(0, 0); opacity: 0 }
  15%  { opacity: .65 }
  85%  { opacity: .45 }
  100% { transform: translate(28px, -70px); opacity: 0 }
}

/* room name written in the air on arrival */
.ar-title {
  position: absolute; inset: 0; z-index: 12; display: grid; place-items: center;
  pointer-events: none; opacity: 0;
}
.ar-title.on { animation: arTitle 2.4s ease forwards; }
@keyframes arTitle {
  0%   { opacity: 0 }
  18%  { opacity: 1 }
  72%  { opacity: 1 }
  100% { opacity: 0 }
}
.ar-title span {
  color: #fff; font-size: clamp(1.6rem, 4.4vw, 2.9rem); font-weight: 700; letter-spacing: -.01em;
  text-shadow: 0 4px 40px rgba(0,0,0,.75), 0 2px 12px rgba(0,0,0,.5);
  padding: 0 24px; text-align: center;
}
.ar-title.on span { animation: arTitleIn 1.1s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes arTitleIn { from { transform: translateY(16px) scale(.96); letter-spacing: .12em } to { transform: none; letter-spacing: -.01em } }

/* polish: keep product tags inside the frame, and the room title out of the way */
.ar-spot__tag {
  white-space: normal; line-height: 1.35; max-height: 2.7em; overflow: hidden;
  padding: 20px 11px 9px; font-size: .8rem;
}
.ar-title { align-items: start; padding-top: 16vh; }
.ar-title span { opacity: .92; }

/* Rubik tuning — Hebrew reads best slightly tighter with a touch more weight */
.ar-room, .ar-card h3, .ar-finale h3, .ar-door__l, .ar-spot.is-story span, .ar-spot__tag,
.ar-fin__paths span, .ar-metrics b, .ar-prog { letter-spacing: -.01em; }
.ar-card h3, .ar-finale h3 { font-weight: 700; }
.ar-card p, .ar-finale p { font-weight: 400; }
.ar-card__kind, .ar-prog { font-weight: 600; }

/* product screens sit fully on-screen even near the frame edge */
.ar-spot.is-product { max-width: none; }
.ar-spot__tag { text-shadow: 0 1px 8px rgba(0,0,0,.7); }
/* progress chip should not crowd the room title on narrow screens */
.ar-prog__s { display: none; }
@media (max-width: 600px) {
  /* three tools now — keep the bar on one line instead of letting it wrap */
  .ar-top { gap: 8px; flex-wrap: nowrap; }
  .ar-tools { display: flex; align-items: center; flex: none; }
  .ar-tools button { width: 34px; height: 34px; font-size: .88rem; margin-right: 5px; }
  .ar-snd i { height: 11px; }
  .ar-brand { font-size: .82rem; }
  .ar-prog__l { display: none; }
  .ar-prog__s { display: inline; }
  .ar-room { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* click-outside scrim for panels */
.ar-scrim { position: fixed; inset: 0; z-index: 28; background: rgba(8,11,14,.42); animation: arFade .3s ease; }
.ar-scrim[hidden] { display: none; }
@keyframes arFade { from { opacity: 0 } }

/* ============ the ceiling: a reward for looking up ============ */
.ar-sky {
  position: absolute; inset: 0; z-index: 11; display: grid; place-items: center;
  pointer-events: none; opacity: 0; padding-bottom: 22vh;
  transition: opacity .18s linear;
}
.ar-sky__in {
  position: relative; text-align: center; direction: rtl; padding: 30px 34px;
  max-width: min(460px, 86vw);
  background: radial-gradient(ellipse at 50% 35%, rgba(198,242,78,.14), transparent 72%);
}
.ar-sky__in::before {
  content: ""; position: absolute; left: 50%; top: -8%; transform: translateX(-50%);
  width: 120%; height: 120%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.1), transparent 62%);
  filter: blur(18px);
}
.ar-sky__icon {
  display: block; font-size: 2.6rem; line-height: 1; color: var(--ar-lime);
  text-shadow: 0 0 26px rgba(198,242,78,.8), 0 0 60px rgba(198,242,78,.35);
  animation: arSkySpin 22s linear infinite;
}
@keyframes arSkySpin { to { transform: rotate(360deg) } }
.ar-sky h4 {
  margin: 14px 0 10px; color: #fff; font-size: clamp(1.15rem, 2.6vw, 1.6rem); font-weight: 700;
  letter-spacing: -.01em; text-shadow: 0 3px 26px rgba(0,0,0,.8);
}
.ar-sky p {
  margin: 0 0 5px; color: rgba(255,255,255,.82); font-size: .93rem; line-height: 1.6;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.ar-sky__stat {
  display: inline-flex; align-items: baseline; gap: 8px; margin-top: 14px;
  padding: 8px 18px; border-radius: 100px;
  background: rgba(12,15,18,.5); border: 1px solid rgba(198,242,78,.4);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ar-sky__stat b { color: var(--ar-lime); font-size: 1.2rem; }
.ar-sky__stat span { color: rgba(255,255,255,.75); font-size: .78rem; }
/* once discovered, the halo settles */
.ar-sky.seen .ar-sky__icon { animation-duration: 40s; }

/* the nudge that teaches the gesture */
.ar-lookup {
  position: absolute; top: 12vh; left: 50%; transform: translateX(-50%);
  z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: rgba(255,255,255,.75); font-size: .76rem; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
.ar-lookup.show { opacity: 1; animation: arLookup 2.4s ease-in-out infinite; }
.ar-lookup i { font-style: normal; font-size: 1.4rem; line-height: .7; color: var(--ar-lime); }
@keyframes arLookup { 0%,100% { transform: translateX(-50%) translateY(0) } 50% { transform: translateX(-50%) translateY(-8px) } }
@media (max-width: 860px) {
  .ar-sky { padding-bottom: 26vh; }
  .ar-sky__in { padding: 24px 22px; }
  .ar-lookup { top: 15vh; }
}

/* sky polish: give the stat pill room, and let the halo breathe instead of spin */
.ar-sky__stat { padding: 9px 20px; gap: 10px; }
.ar-sky__stat b { font-size: 1.3rem; line-height: 1.2; }
.ar-sky__icon { animation: arSkyGlow 4.5s ease-in-out infinite; }
@keyframes arSkyGlow {
  0%, 100% { text-shadow: 0 0 22px rgba(198,242,78,.7), 0 0 52px rgba(198,242,78,.28); transform: scale(1) }
  50%      { text-shadow: 0 0 34px rgba(198,242,78,.95), 0 0 78px rgba(198,242,78,.45); transform: scale(1.06) }
}
.ar-sky.seen .ar-sky__icon { animation-duration: 7s; }

/* ============ store: shelf signs ============ */
.ar-spot.is-shelf { display: block; --acc: var(--ar-acc, #E11D2E); }
.ar-shelf {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px;
  background: rgba(255,255,255,.94); border-radius: 14px;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 32%, transparent),
              0 26px 60px rgba(12,15,18,.4);
  animation: arFloat 7s ease-in-out infinite; animation-delay: var(--ph, 0s);
  transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s;
}
.ar-spot.is-shelf:hover .ar-shelf {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--acc), 0 30px 70px rgba(12,15,18,.5);
}
.ar-shelf__thumbs { display: flex; flex: none; }
.ar-shelf__thumbs img {
  width: 34px; height: 34px; object-fit: contain; border-radius: 9px;
  background: #fff; border: 1px solid rgba(20,24,28,.1); margin-left: -9px;
}
.ar-shelf__thumbs img:first-child { margin-left: 0; }
.ar-shelf__txt { display: flex; flex-direction: column; text-align: right; line-height: 1.25; }
.ar-shelf__txt b { color: var(--ar-ink); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.ar-shelf__txt em {
  font-style: normal; font-size: .74rem; font-weight: 500;
  color: color-mix(in srgb, var(--acc) 80%, #000); white-space: nowrap;
}
.ar-spot.is-shelf.is-seen .ar-shelf { box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 65%, transparent), 0 18px 44px rgba(12,15,18,.32); }

/* ============ store: the shelf panel ============ */
.ar-card.is-rack, .ar-card.is-cart { max-width: min(560px, calc(100vw - 32px)); }
.ar-rack__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 20px 22px 12px; border-bottom: 1px solid rgba(20,24,28,.08);
}
.ar-rack__head h3 { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ar-ink); }
.ar-rack__head span { font-size: .8rem; font-weight: 500; color: color-mix(in srgb, var(--ar-acc, #E11D2E) 80%, #000); }
.ar-rack {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px; padding: 14px 18px 20px;
}
.ar-tile {
  position: relative; display: flex; flex-direction: column; gap: 5px;
  border: 1px solid rgba(20,24,28,.1); background: #fff; border-radius: 13px;
  padding: 10px 10px 8px; cursor: pointer; font: inherit; text-align: right;
  transition: border-color .18s, transform .18s;
}
.ar-tile:hover { border-color: var(--ar-acc, #E11D2E); transform: translateY(-2px); }
.ar-tile.is-added { animation: arAdd .45s ease; }
@keyframes arAdd { 40% { transform: scale(.95); background: #eafce9 } }
.ar-tile__im { display: grid; place-items: center; height: 84px; }
.ar-tile__im img { max-width: 100%; max-height: 84px; object-fit: contain; }
.ar-tile__n {
  font-size: .78rem; font-weight: 500; color: var(--ar-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-tile__p { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ar-tile__p b { font-size: 1rem; font-weight: 700; color: var(--ar-ink); }
.ar-tile__p del { font-size: .74rem; color: rgba(20,24,28,.45); }
.ar-tile__p em { font-style: normal; font-size: .7rem; color: rgba(20,24,28,.5); }
.ar-tile__sale {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--ar-acc, #E11D2E); color: #fff; font-size: .64rem; font-weight: 700;
  padding: 3px 8px; border-radius: 100px;
}
.ar-tile__add {
  position: absolute; bottom: 8px; left: 8px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  background: var(--ar-ink); color: #fff; transition: background .15s, transform .15s;
}
.ar-tile:hover .ar-tile__add { background: var(--ar-acc, #E11D2E); transform: scale(1.1); }

/* ============ store: product detail ============ */
.ar-pd__im { display: grid; place-items: center; padding: 22px 22px 0; }
.ar-pd__im img { max-height: 190px; max-width: 100%; object-fit: contain; }
.ar-pd__price { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 12px; }
.ar-pd__price b { font-size: 1.7rem; font-weight: 700; color: var(--ar-ink); }
.ar-pd__price b.on { color: var(--ar-acc, #E11D2E); }
.ar-pd__price del { font-size: .95rem; color: rgba(20,24,28,.45); }
.ar-pd__lbl { flex: 1 0 100%; font-size: .78rem; font-weight: 500; color: var(--ar-acc, #E11D2E); }
.ar-pd__unit { font-size: .8rem; color: rgba(20,24,28,.5); }
.ar-warn { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.ar-warn span {
  background: #FCEBEB; color: #A32D2D; font-size: .76rem; font-weight: 600;
  padding: 5px 11px; border-radius: 100px;
}
.ar-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.ar-facts div {
  flex: 1 1 84px; background: rgba(20,24,28,.045); border-radius: 10px; padding: 9px 11px;
}
.ar-facts b { display: block; font-size: .92rem; font-weight: 600; color: var(--ar-ink); }
.ar-facts span { font-size: .7rem; color: rgba(20,24,28,.55); }
.ar-nut, .ar-ing { margin: 0 0 16px; }
.ar-nut h4, .ar-ing h4 {
  margin: 0 0 7px; font-size: .78rem; font-weight: 700; color: rgba(20,24,28,.55);
  letter-spacing: .02em;
}
.ar-nut table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ar-nut td { padding: 6px 0; border-bottom: 1px solid rgba(20,24,28,.07); color: var(--ar-ink); }
.ar-nut td:last-child { text-align: left; font-weight: 600; white-space: nowrap; }
.ar-nut em { display: block; margin-top: 6px; font-style: normal; font-size: .72rem; color: rgba(20,24,28,.5); }
.ar-ing p { margin: 0; font-size: .84rem; line-height: 1.6; color: rgba(20,24,28,.75); }
.ar-buy {
  width: 100%; border: 0; border-radius: 100px; padding: 14px; cursor: pointer;
  background: var(--ar-ink); color: #fff; font: inherit; font-weight: 700; font-size: .95rem;
  transition: background .18s;
}
.ar-buy:hover { background: var(--ar-acc, #E11D2E); }
.ar-buy[disabled] { background: #1d7a3f; cursor: default; }
/* How many, chosen before committing. Sits directly above the button whose
   price it changes, because those two numbers are one decision. */
.ar-qty {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 12px;
}
.ar-qty__b {
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(20,24,28,.16); background: #fff;
  color: var(--ar-ink); font: inherit; font-size: 1.15rem; line-height: 1;
  transition: background .15s, border-color .15s;
}
.ar-qty__b:hover { background: rgba(20,24,28,.06); border-color: rgba(20,24,28,.3); }
.ar-qty__b:active { background: rgba(20,24,28,.12); }
.ar-qty__n {
  min-width: 2ch; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.03em; color: var(--ar-ink);
}
.ar-card__back {
  position: absolute; top: 14px; right: 16px; z-index: 3; border: 0; cursor: pointer;
  background: rgba(20,24,28,.06); color: var(--ar-ink); font: inherit; font-size: .78rem; font-weight: 600;
  padding: 6px 13px; border-radius: 100px;
}

/* ============ store: cart ============ */
.ar-cart { padding: 6px 18px 0; }
.ar-ci {
  display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid rgba(20,24,28,.07);
}
.ar-ci img { width: 46px; height: 46px; object-fit: contain; }
.ar-ci__ph { width: 46px; height: 46px; border-radius: 9px; background: rgba(20,24,28,.06); }
.ar-ci__m { min-width: 0; }
.ar-ci__m b {
  font-size: .82rem; font-weight: 500; color: var(--ar-ink); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-ci__m span { display: block; font-size: .74rem; color: rgba(20,24,28,.55); }
.ar-ci__q { display: flex; align-items: center; gap: 3px; }
.ar-ci__q button {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font: inherit; font-size: 1rem;
  border: 1px solid rgba(20,24,28,.14); background: #fff; color: var(--ar-ink); line-height: 1;
}
.ar-ci__q button:hover { border-color: var(--ar-acc, #E11D2E); color: var(--ar-acc, #E11D2E); }
.ar-ci__q b { min-width: 20px; text-align: center; font-size: .88rem; }
.ar-ci__s { font-size: .88rem; font-weight: 700; color: var(--ar-ink); white-space: nowrap; }
.ar-total {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 15px 18px 12px; font-size: .9rem; color: rgba(20,24,28,.6);
}
.ar-total b { font-size: 1.5rem; font-weight: 700; color: var(--ar-ink); }
.ar-card.is-cart .ar-buy { width: calc(100% - 36px); margin: 0 18px 20px; }
.ar-empty { padding: 26px 22px 30px; margin: 0; font-size: .9rem; color: rgba(20,24,28,.55); text-align: center; }

/* ============ store: the cart button replaces the whatsapp float ============ */
.ar-wa {
  border: 0; cursor: pointer; font-family: inherit;
  background: var(--ar-ink); color: #fff; animation: none;
  box-shadow: 0 12px 32px rgba(12,15,18,.42);
}
.ar-wa:hover { background: var(--ar-acc, #E11D2E); }
.ar-wa.has { background: var(--ar-acc, #E11D2E); }
.ar-wa__n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 100px; display: none;
  place-items: center; background: #fff; color: var(--ar-ink); font-size: .78rem; font-weight: 700;
}
.ar-wa.has .ar-wa__n { display: grid; }
.ar-wa__t { font-style: normal; font-weight: 700; font-size: .92rem; }
.ar-wa.pop { animation: arPop .4s ease; }
@keyframes arPop { 35% { transform: scale(1.12) } }

@media (max-width: 860px) {
  .ar-wa span { display: none; }
  .ar-wa { padding: 13px 16px; }
  .ar-wa__t { font-size: .85rem; }
  .ar-rack { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; padding: 12px 14px 18px; }
  .ar-rack__head { padding: 18px 18px 10px; }
  .ar-shelf { padding: 6px 11px 6px 6px; gap: 8px; }
  .ar-shelf__thumbs img { width: 28px; height: 28px; }
  .ar-shelf__txt b { font-size: .82rem; }
  .ar-shelf__txt em { font-size: .68rem; }
  .ar-pd__im img { max-height: 140px; }
}
.ar-tile__deal { flex: 1 0 100%; font-size: .68rem; font-weight: 600; color: var(--ar-acc, #E11D2E); }
.ar-pd__qty { background: var(--ar-acc, #E11D2E); color: #fff; font-size: .74rem; font-weight: 700; padding: 4px 11px; border-radius: 100px; }

/* ══════════════════════════════════════════════════════════════════
   VISUAL PASS — everything below overrides the base engine styling.
   Goal: stop looking like a modal on a photo, start looking like glass
   hanging inside the room.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --ink: #14181C;
  --ink-2: rgba(20,24,28,.62);
  --ink-3: rgba(20,24,28,.42);
  --line: rgba(20,24,28,.09);
  --pane: rgba(252,252,251,.82);
  --deal: #E11D2E;
}

/* ---- 1. the world falls away behind an open panel -------------------- */
.ar-scrim {
  background: radial-gradient(120% 90% at 50% 45%, rgba(8,11,14,.28), rgba(8,11,14,.66));
  -webkit-backdrop-filter: blur(14px) saturate(.85);
  backdrop-filter: blur(14px) saturate(.85);
  animation: arFade .42s cubic-bezier(.2,.8,.2,1);
}

/* ---- 2. panels become frosted glass, not white boxes ----------------- */
.ar-card, .ar-finale, .ar-mapui__in {
  background: var(--pane) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 22px !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 40px 90px -20px rgba(8,11,14,.5),
    0 0 0 1px rgba(20,24,28,.06);
}
.ar-card { overflow: hidden auto; }
/* a light sweep along the top edge sells the glass */
.ar-card::before {
  content: ""; position: sticky; top: 0; display: block; height: 1px; z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 32%, rgba(255,255,255,.95) 68%, transparent);
}
.ar-card__x {
  background: rgba(20,24,28,.06) !important; color: var(--ink) !important;
  border: 0 !important; width: 32px; height: 32px; border-radius: 50%;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .18s, transform .18s;
}
.ar-card__x:hover { background: rgba(20,24,28,.14) !important; transform: rotate(90deg); }

/* ---- 3. the shelf sign becomes a real shelf-edge price rail ---------- */
.ar-shelf {
  position: relative; padding: 0; gap: 0; overflow: hidden;
  background: linear-gradient(180deg, #fff, #F4F3F0);
  border: 0; border-radius: 11px;
  transform: perspective(900px) rotateY(var(--tilt, 0deg));
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(20,24,28,.1),
    0 22px 44px -12px rgba(8,11,14,.55);
  opacity: var(--f, 1);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, opacity .25s;
}
.ar-spot.is-shelf { scale: var(--z, 1); transition: scale .25s ease; }
.ar-spot.is-shelf:hover .ar-shelf {
  transform: perspective(900px) rotateY(0deg) scale(1.06);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 2px var(--deal),
              0 28px 56px -12px rgba(8,11,14,.6);
}
/* the red rail down the leading edge — the thing that reads "supermarket" */
.ar-shelf::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: linear-gradient(180deg, var(--deal), #A3121F);
}
.ar-shelf__txt { padding: 8px 13px 8px 11px; gap: 1px; }
.ar-shelf__txt b {
  font-size: .9rem; font-weight: 600; color: var(--ink); letter-spacing: -.015em;
}
.ar-shelf__txt em {
  font-size: .7rem; font-weight: 600; color: var(--ink-3);
  font-family: 'IBM Plex Mono', monospace; letter-spacing: -.02em;
}
.ar-shelf__thumbs { padding: 7px 7px 7px 0; }
.ar-shelf__thumbs img {
  width: 32px; height: 32px; border-radius: 8px; padding: 3px;
  background: #fff; border: 1px solid var(--line); margin-left: -8px;
  box-shadow: 0 2px 6px rgba(8,11,14,.12);
}
/* the thread down to the shelf it belongs to */
.ar-spot.is-shelf .ar-spot__anchor {
  right: 50%; height: 46px; opacity: var(--f, 1);
  background: linear-gradient(rgba(255,255,255,.85), transparent 88%);
}
.ar-spot.is-shelf .ar-spot__anchor::after {
  width: 7px; height: 7px; background: #fff;
  box-shadow: 0 0 0 2px rgba(225,29,46,.5), 0 0 14px rgba(255,255,255,.9);
}
.ar-spot.is-shelf.is-seen .ar-shelf { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 0 0 1px rgba(20,24,28,.1), 0 14px 30px -10px rgba(8,11,14,.42); }

/* ---- 4. rack header ------------------------------------------------- */
.ar-rack__head {
  padding: 22px 24px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
}
.ar-rack__head h3 { font-size: 1.22rem; letter-spacing: -.02em; }
.ar-rack__head span {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 500;
  color: var(--ink-3); letter-spacing: -.02em;
}

/* ---- 5. product tiles: cutout floating on a contact shadow ---------- */
.ar-rack { gap: 12px; padding: 16px 20px 22px; }
.ar-tile {
  gap: 7px; padding: 12px 12px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #fff, #FBFAF8);
  border: 1px solid rgba(20,24,28,.07);
  box-shadow: 0 1px 2px rgba(8,11,14,.04);
  transition: transform .24s cubic-bezier(.2,.8,.2,1), box-shadow .24s, border-color .24s;
}
.ar-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(20,24,28,.12);
  box-shadow: 0 16px 30px -10px rgba(8,11,14,.28);
}
.ar-tile__im { position: relative; height: 92px; }
/* the soft ellipse under the product — what makes a cutout sit on a surface */
.ar-tile__im::after {
  content: ""; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%);
  width: 62%; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8,11,14,.24), transparent);
}
.ar-tile__im img {
  max-height: 92px; position: relative; z-index: 1;
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.ar-tile:hover .ar-tile__im img { transform: scale(1.07) translateY(-2px); }
.ar-tile__n { font-size: .77rem; color: var(--ink-2); font-weight: 500; }
.ar-tile__p b { font-size: 1.05rem; letter-spacing: -.03em; }
.ar-tile__p del { color: var(--ink-3); }
.ar-tile__sale {
  top: 10px; right: 10px; font-size: .6rem; letter-spacing: .04em;
  padding: 4px 9px; box-shadow: 0 4px 10px rgba(225,29,46,.35);
}
.ar-tile__deal {
  font-family: 'IBM Plex Mono', monospace; font-size: .66rem; letter-spacing: -.02em;
}
.ar-tile__add {
  bottom: 10px; left: 10px; width: 30px; height: 30px;
  box-shadow: 0 4px 12px rgba(8,11,14,.28);
  opacity: 0; transform: scale(.7);
  transition: opacity .2s, transform .24s cubic-bezier(.2,1.5,.4,1), background .18s;
}
.ar-tile:hover .ar-tile__add, .ar-tile:focus-within .ar-tile__add { opacity: 1; transform: scale(1); }
@media (hover: none) { .ar-tile__add { opacity: 1; transform: none; } }

/* the product flying into the cart */
.ar-fly {
  position: fixed; z-index: 60; pointer-events: none; object-fit: contain;
  transition: transform .68s cubic-bezier(.5,-0.1,.4,1), opacity .68s ease-in;
  filter: drop-shadow(0 10px 20px rgba(8,11,14,.4));
}

/* ---- 6. product detail --------------------------------------------- */
.ar-pd__im {
  position: relative; padding: 30px 24px 6px;
  background: radial-gradient(70% 90% at 50% 30%, rgba(255,255,255,.9), transparent 70%);
}
.ar-pd__im::after {
  content: ""; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 45%; height: 16px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8,11,14,.22), transparent);
}
.ar-pd__im img { position: relative; z-index: 1; filter: drop-shadow(0 12px 22px rgba(8,11,14,.18)); }
.ar-card__body h3 { letter-spacing: -.025em; line-height: 1.25; }
.ar-pd__price b { font-size: 2rem; letter-spacing: -.04em; }
.ar-pd__qty { box-shadow: 0 4px 12px rgba(225,29,46,.3); }
.ar-pd__lbl { color: var(--ink-3); font-weight: 500; }
.ar-warn span { background: rgba(225,29,46,.09); color: #A3121F; }
.ar-facts div {
  background: rgba(255,255,255,.66); border: 1px solid var(--line);
  border-radius: 12px; text-align: center;
}
.ar-facts b { font-family: 'IBM Plex Mono', monospace; letter-spacing: -.03em; }
.ar-facts span { color: var(--ink-3); }
.ar-nut h4, .ar-ing h4 { color: var(--ink-3); text-transform: none; }
.ar-nut td { border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ar-nut td:last-child { color: var(--ink); font-family: 'IBM Plex Mono', monospace; letter-spacing: -.02em; }
.ar-ing p { color: var(--ink-2); }
.ar-buy {
  background: linear-gradient(180deg, #22272C, var(--ink));
  box-shadow: 0 8px 20px -6px rgba(8,11,14,.5);
  letter-spacing: -.01em;
}
.ar-buy:hover { background: linear-gradient(180deg, #EF2438, var(--deal)); box-shadow: 0 10px 24px -6px rgba(225,29,46,.55); }
.ar-card__back { background: rgba(20,24,28,.06); }
.ar-card__back:hover { background: rgba(20,24,28,.12); }

/* ---- 7. cart -------------------------------------------------------- */
.ar-ci { border-bottom: 1px solid var(--line); }
.ar-ci img { filter: drop-shadow(0 4px 8px rgba(8,11,14,.14)); }
.ar-ci__m b { color: var(--ink); }
.ar-ci__m span { color: var(--ink-3); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; }
.ar-ci__s { font-family: 'IBM Plex Mono', monospace; letter-spacing: -.03em; }
.ar-total { border-top: 1px solid var(--line); color: var(--ink-3); }
.ar-total b { font-size: 1.65rem; letter-spacing: -.04em; font-family: 'IBM Plex Mono', monospace; }

/* ---- 8. the cart button --------------------------------------------- */
.ar-wa {
  background: rgba(20,24,28,.62); color: #fff;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px -10px rgba(8,11,14,.6);
  transition: background .22s, box-shadow .22s, transform .22s;
}
.ar-wa:hover { background: rgba(20,24,28,.8); transform: translateY(-2px); }
.ar-wa.has { background: var(--deal); border-color: rgba(255,255,255,.28); box-shadow: 0 14px 34px -10px rgba(225,29,46,.7); }
.ar-wa.has:hover { background: #EF2438; }
.ar-wa__t { font-family: 'IBM Plex Mono', monospace; letter-spacing: -.03em; }
.ar-wa__n { box-shadow: 0 2px 6px rgba(8,11,14,.25); }

/* ---- 9. chrome: top bar, doors, room title -------------------------- */
.ar-top { background: linear-gradient(rgba(8,11,14,.55), rgba(8,11,14,.16) 60%, transparent); padding-bottom: 22px; }
.ar-brand { font-size: .88rem; letter-spacing: .1em; opacity: .82; }
.ar-room { letter-spacing: -.02em; }
.ar-prog {
  font-family: 'IBM Plex Mono', monospace; font-size: .7rem; letter-spacing: -.02em;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 5px 12px; border-radius: 100px; color: rgba(255,255,255,.92);
}
.ar-tools button { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); transition: background .18s, transform .18s; }
.ar-tools button:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }

.ar-door { scale: var(--z, 1); opacity: var(--f, 1); transition: scale .25s ease, opacity .25s ease; }
.ar-door__l {
  background: rgba(252,252,251,.9) !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 14px 30px -10px rgba(8,11,14,.55) !important;
  font-weight: 600; letter-spacing: -.015em; padding: 9px 17px !important;
}
.ar-door:hover .ar-door__l { background: #fff !important; }
.ar-door.is-home .ar-door__l {
  background: rgba(20,24,28,.72) !important; color: #fff !important;
  border-color: rgba(255,255,255,.2);
}
.ar-title span {
  font-weight: 800; letter-spacing: -.045em;
  text-shadow: 0 4px 40px rgba(8,11,14,.6), 0 1px 3px rgba(8,11,14,.4);
}

/* ---- 10. the room dims very slightly while you read ----------------- */
.ar-canvas { transition: filter .45s ease; }
body:has(.ar-card:not([hidden])) .ar-canvas,
body:has(.ar-finale:not([hidden])) .ar-canvas { filter: saturate(.9) brightness(.94); }

@media (max-width: 860px) {
  .ar-card, .ar-finale { border-radius: 26px 26px 0 0 !important; }
  .ar-rack { gap: 9px; padding: 13px 15px 20px; }
  .ar-tile { padding: 10px 10px 9px; border-radius: 14px; }
  .ar-tile__im, .ar-tile__im img { height: 76px; max-height: 76px; }
  .ar-shelf__txt { padding: 6px 11px 6px 9px; }
  .ar-shelf__thumbs img { width: 26px; height: 26px; }
  .ar-pd__price b { font-size: 1.7rem; }
}

/* ---- corrections ---------------------------------------------------- */
/* a deal is always red. Tying it to the room accent made snack deals blue. */
.ar-tile__sale, .ar-pd__qty { background: var(--deal) !important; }
.ar-tile__deal { color: var(--deal); font-weight: 700; font-size: .7rem; }
.ar-tile__p del { font-size: .72rem; }
.ar-rack__head span { color: var(--ink-2); font-size: .76rem; font-weight: 600; }
.ar-rack__head span::first-letter { color: var(--deal); }
/* the sub-line on a shelf rail has to survive being read across a room */
.ar-shelf__txt em { color: var(--ink-2); font-size: .72rem; font-weight: 700; }
/* the red rail belongs on the leading edge, which in RTL is the right */
.ar-shelf::before { inset: 0 0 0 auto; width: 5px; }
.ar-shelf__thumbs { padding: 7px 0 7px 7px; }
.ar-shelf__thumbs img { margin-left: 0; margin-right: -8px; }
.ar-shelf__thumbs img:first-child { margin-right: 0; }
.ar-shelf__txt { padding: 8px 15px 8px 11px; }
/* the sticky hairline read as a stray white bar — the border already sells it */
.ar-card::before { display: none; }
/* three across on a desktop reads like a shelf, two reads like a list */
.ar-card.is-rack { max-width: min(680px, calc(100vw - 32px)); }
@media (min-width: 861px) { .ar-rack { grid-template-columns: repeat(3, 1fr); } }
/* the close button sits over the header — keep the count clear of it */
.ar-rack__head { padding-left: 58px; }
.ar-card.is-cart .ar-rack__head { padding-left: 58px; }
/* two lines of name always, so every tile in a row is the same height */
.ar-tile__n { min-height: 2.1em; }
.ar-tile { align-content: start; }
/* pale packaging vanished against a pure-white thumb chip */
.ar-shelf__thumbs img { background: #F1F0EC; border-color: rgba(20,24,28,.14); }

/* ══════════════════════════════════════════════════════════════════
   PRODUCTS ON THE SHELF
   The product is the control. No sign, no list — you reach for the thing.
   ══════════════════════════════════════════════════════════════════ */
.ar-spot.is-item {
  display: block;
  scale: calc(var(--z, 1) * var(--s, 1));
  opacity: var(--f, 1);
  transition: scale .25s ease, opacity .25s ease;
  z-index: 1;
}
.ar-spot.is-item:hover { z-index: 3; }

.ar-item {
  position: relative; display: block; width: 86px;
  transform: perspective(700px) rotateY(var(--lean, 0deg));
  transform-origin: 50% 100%;
  transition: transform .26s cubic-bezier(.2,.9,.25,1);
}
.ar-spot.is-item:hover .ar-item {
  transform: perspective(700px) rotateY(0deg) translateY(-9px) scale(1.14);
}

/* the goods */
.ar-item__im { position: relative; display: grid; place-items: end center; height: 74px; }
.ar-item__im img {
  max-width: 100%; max-height: 74px; object-fit: contain;
  filter: drop-shadow(0 5px 7px rgba(8,11,14,.42));
  transition: filter .26s;
}
.ar-spot.is-item:hover .ar-item__im img { filter: drop-shadow(0 14px 18px rgba(8,11,14,.5)); }
/* the contact shadow is what puts it ON the shelf rather than in front of it */
.ar-item__im::after {
  content: ""; position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 74%; height: 8px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(8,11,14,.5), transparent);
  transition: width .26s, opacity .26s;
}
.ar-spot.is-item:hover .ar-item__im::after { width: 56%; opacity: .75; }

/* the shelf-edge price label, the real supermarket object */
.ar-item__tag {
  position: relative; z-index: 2; display: flex; align-items: baseline;
  justify-content: center; gap: 4px; margin-top: 3px; padding: 2px 7px;
  background: #fff; border-radius: 4px;
  border-bottom: 3px solid var(--deal);
  box-shadow: 0 3px 7px rgba(8,11,14,.35);
  cursor: help;
  transition: transform .2s, box-shadow .2s;
}
.ar-item__tag b {
  font-family: 'IBM Plex Mono', monospace; font-size: .72rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.04em; line-height: 1.3;
}
.ar-item__tag del {
  font-family: 'IBM Plex Mono', monospace; font-size: .56rem;
  color: rgba(20,24,28,.42); letter-spacing: -.04em;
}
.ar-spot.is-item:hover .ar-item__tag { transform: scale(1.08); box-shadow: 0 6px 14px rgba(8,11,14,.4); }

.ar-item__sale {
  position: absolute; top: -6px; right: -5px; z-index: 3;
  background: var(--deal); color: #fff; font-size: .52rem; font-weight: 700;
  padding: 2px 6px; border-radius: 100px; letter-spacing: .03em;
  box-shadow: 0 3px 8px rgba(225,29,46,.45);
}

/* the name only surfaces when you are actually looking at this one */
.ar-item__name {
  position: absolute; top: calc(100% + 8px); right: 50%; transform: translateX(50%) translateY(-4px);
  width: 128px; padding: 5px 9px; border-radius: 8px; text-align: center;
  background: rgba(20,24,28,.86); color: #fff; font-size: .68rem; font-weight: 500; line-height: 1.35;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ar-spot.is-item:hover .ar-item__name { opacity: 1; transform: translateX(50%) translateY(0); }

/* the take affordance */
.ar-item__take {
  position: absolute; top: -8px; left: -8px; z-index: 4;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 1.05rem; line-height: 1;
  box-shadow: 0 4px 10px rgba(8,11,14,.4);
  opacity: 0; transform: scale(.5);
  transition: opacity .18s, transform .26s cubic-bezier(.2,1.6,.4,1);
}
.ar-spot.is-item:hover .ar-item__take { opacity: 1; transform: scale(1); }

/* taken */
.ar-spot.is-item.is-added .ar-item { animation: arTake .5s cubic-bezier(.3,1.4,.4,1); }
@keyframes arTake { 35% { transform: perspective(700px) rotateY(0deg) translateY(-22px) scale(.86); } }
.ar-spot.is-item.is-seen .ar-item__tag { border-bottom-color: #1F9E4E; }

@media (hover: none) {
  .ar-item__take { opacity: 1; transform: scale(.86); }
  .ar-item { width: 74px; }
  .ar-item__im, .ar-item__im img { height: 62px; max-height: 62px; }
}
@media (max-width: 860px) {
  .ar-item { width: 70px; }
  .ar-item__im, .ar-item__im img { height: 58px; max-height: 58px; }
  .ar-item__tag b { font-size: .66rem; }
  .ar-item__name { width: 104px; font-size: .62rem; }
}

/* the tag was clipping "₪2.90" — let it size to its contents */
.ar-item__tag { white-space: nowrap; padding: 2px 8px; min-width: 42px; }
.ar-item__tag b { font-size: .68rem; }
.ar-item__tag del { font-size: .54rem; }
/* the sale flash was landing on the row above; tuck it against the product */
.ar-item__sale { top: -4px; right: -3px; font-size: .5rem; padding: 2px 5px; }


/* ══════════════════════════════════════════════════════════════════
   STEADY + SPACED
   The shimmer was a CSS transition fighting a value that changes every
   frame, plus an idle drift that never let anything settle. Both gone;
   depth now rides inside the single transform project() writes.
   ══════════════════════════════════════════════════════════════════ */
.ar-spot.is-item, .ar-door {
  scale: none;
  transition: opacity .18s linear;
}

/* facings sized so four fit across a shelf face without touching.
   The face measures ~23 deg from where you stand; at this width each
   product is ~4.5 deg, leaving a real gap between neighbours. */
.ar-item { width: 62px; }
.ar-item__im, .ar-item__im img { height: 56px; max-height: 56px; }
.ar-item__tag { min-width: 38px; padding: 2px 6px; }
.ar-item__tag b { font-size: .62rem; }
.ar-item__tag del { font-size: .5rem; }
.ar-item__sale { font-size: .46rem; padding: 1px 5px; top: -3px; right: -2px; }
.ar-item__take { width: 22px; height: 22px; font-size: .9rem; top: -6px; left: -6px; }
.ar-item__name { top: calc(100% + 6px); width: 116px; font-size: .64rem; }
/* lifting on hover must clear the neighbours, so it rises rather than fattens */
.ar-spot.is-item:hover .ar-item {
  transform: perspective(700px) rotateY(0deg) translateY(-14px) scale(1.22);
}

@media (max-width: 860px) {
  .ar-item { width: 54px; }
  .ar-item__im, .ar-item__im img { height: 48px; max-height: 48px; }
  .ar-item__tag b { font-size: .58rem; }
  .ar-item__name { width: 96px; font-size: .6rem; }
}

/* with the row spread across the wall there is room for a proper facing —
   a product the size of a thumbnail reads as a sticker, not as stock */
.ar-item { width: 80px; }
.ar-item__im, .ar-item__im img { height: 72px; max-height: 72px; }
.ar-item__tag { min-width: 46px; padding: 2px 8px; }
.ar-item__tag b { font-size: .68rem; }
.ar-item__tag del { font-size: .54rem; }
.ar-item__take { width: 24px; height: 24px; font-size: 1rem; }
@media (max-width: 860px) {
  .ar-item { width: 62px; }
  .ar-item__im, .ar-item__im img { height: 56px; max-height: 56px; }
  .ar-item__tag b { font-size: .6rem; }
}

/* On a stocked shelf the labels sit shoulder to shoulder, so each one carries
   just the price it is charging. The old price still shows on the product card
   where there is room for it. */
.ar-item__tag del { display: none; }
.ar-item__tag { min-width: 0; padding: 2px 6px; border-bottom-width: 2px; }
.ar-item__tag b { font-size: .6rem; }
.ar-item { width: 84px; }
.ar-item__im, .ar-item__im img { height: 76px; max-height: 76px; }
@media (max-width: 860px) {
  .ar-item { width: 60px; }
  .ar-item__im, .ar-item__im img { height: 56px; max-height: 56px; }
  .ar-item__tag b { font-size: .52rem; }
  .ar-item__tag { padding: 1px 4px; }
}

/* ---- standing on the shelf, not hovering over it -----------------------
   The marker point is the shelf board. The product's base sits on it, and
   its price label hangs just below on the rail — which is where a real
   supermarket puts it. Taking the label out of the flow is what lets the
   base, rather than the middle of the whole thing, land on the line. */
.ar-item__tag {
  position: absolute; top: calc(100% + 3px); right: 50%;
  transform: translateX(50%); z-index: 3;
}
.ar-spot.is-item:hover .ar-item__tag { transform: translateX(50%) scale(1.08); }
.ar-item__name { top: calc(100% + 30px); }
.ar-item__im::after { bottom: -2px; opacity: .8; }

/* ---- 9. checkout, receipt ------------------------------------------- */
/* The cart used to end at a total: a number, at the moment of peak intent,
   with nothing under it. These are the three doors out. */
.ar-checkout { padding: 4px 18px 18px; }
.ar-pay {
  display: block; width: 100%; padding: 15px 18px; border: 0; cursor: pointer;
  border-radius: 14px; background: #1F9E4E; color: #fff;
  font: inherit; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em;
  box-shadow: 0 10px 24px -10px rgba(31,158,78,.75);
  transition: transform .12s, box-shadow .2s;
}
.ar-pay:hover { box-shadow: 0 14px 30px -10px rgba(31,158,78,.85); }
.ar-pay:active { transform: scale(.985); }
.ar-pay2 { display: flex; gap: 8px; margin-top: 8px; }
.ar-pay2 button {
  flex: 1; padding: 11px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--ink-2);
  font: inherit; font-size: .84rem; font-weight: 600;
}
.ar-pay2 button:hover { border-color: var(--ink-3); color: var(--ink); }

.ar-rc { padding: 20px 22px 22px; }
.ar-rc__top b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.ar-rc__top span { color: var(--ink-3); font-size: .78rem; }
.ar-rc__save {
  margin: 14px 0 0; padding: 12px 15px; border-radius: 12px;
  background: rgba(31,158,78,.1); color: #1F7A42; font-weight: 700; font-size: .95rem;
}
.ar-rc__save b { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; letter-spacing: -.03em; }
.ar-rc__lines { margin: 14px 0 0; max-height: 42vh; overflow: auto; }
.ar-rc__lines div {
  display: flex; justify-content: space-between; gap: 12px; padding: 7px 0;
  border-bottom: 1px dashed var(--line); font-size: .84rem;
}
.ar-rc__lines span { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-rc__lines b { font-family: 'IBM Plex Mono', monospace; color: var(--ink); flex: none; }
.ar-rc__tot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-top: 12px; border-top: 2px solid var(--ink);
  color: var(--ink-3);
}
.ar-rc__tot b { font-size: 1.5rem; font-weight: 700; color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; letter-spacing: -.04em; }
.ar-rc__note { margin: 12px 0 0; color: var(--ink-3); font-size: .78rem; line-height: 1.65; }
.ar-rc__act { display: flex; gap: 8px; margin-top: 16px; }
.ar-rc__act button {
  flex: 1; padding: 12px; border-radius: 12px; cursor: pointer; font: inherit;
  font-size: .86rem; font-weight: 600; border: 1px solid var(--line);
  background: transparent; color: var(--ink-2);
}
.ar-rc__act button:hover { border-color: var(--ink-3); color: var(--ink); }