/* 2T showroom. Panorama is the hero; UI is quiet dusk-stone glass. Logical properties throughout (RTL first). */
@font-face { font-family: "Plex Arabic"; src: url(/fonts/plex-arabic-arabic-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plex Arabic"; src: url(/fonts/plex-arabic-arabic-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plex Arabic"; src: url(/fonts/plex-arabic-arabic-600.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plex Arabic"; src: url(/fonts/plex-arabic-latin-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Arabic"; src: url(/fonts/plex-arabic-latin-500.woff2) format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Plex Arabic"; src: url(/fonts/plex-arabic-latin-600.woff2) format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0000-024F, U+2000-206F, U+20AC, U+2122; }

:root {
  --stone-900: #1F1C19; --stone-800: #2A2622; --stone-600: #4A433C; --stone-400: #A89C8B;
  --sand: #EDE4D6; --sand-dim: #CFC4B3; --teal: #5CACB3; --teal-ink: #0B1F21; --teal-deep: #2F7F86;
  --brass: #C9A25E; --ember: #E5534B;
  --glass: rgb(31 28 25 / 0.72); --glass-line: rgb(237 228 214 / 0.12);
  --r-s: 10px; --r-m: 16px; --r-l: 24px;
  --f-13: 0.8125rem; --f-15: 0.9375rem; --f-18: 1.125rem; --f-24: 1.5rem; --f-32: 2rem;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  --ease: cubic-bezier(.2,.7,.2,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--stone-900); color: var(--sand); }
body { font: 400 var(--f-15)/1.55 "Plex Arabic", system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
[hidden] { display: none !important; }
.glass { background: var(--glass); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); border: 1px solid var(--glass-line); }

/* stage */
.stage { position: fixed; inset: 0; touch-action: none; }
.stage__canvas, .stage__preview { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage__preview { object-fit: cover; filter: blur(12px) brightness(.9); transform: scale(1.08); transition: opacity .6s var(--ease); }
.stage__preview.is-gone { opacity: 0; }
.stage__canvas { cursor: grab; }
.stage__canvas:active { cursor: grabbing; }
.stage__hotspots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.stage__empty { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; gap: 1rem;
  background: radial-gradient(120% 80% at 50% 30%, #3a2f25 0%, var(--stone-900) 70%); }
.stage__empty p { max-width: 28ch; margin: 0 auto; color: var(--sand-dim); }

/* hotspots: physical left/top because positions come from projection */
/* product markers: a small pin standing ABOVE the device on a thin stem, so the device itself stays visible.
   The element's bottom-centre is the device; the 40px touch area sits around the pin, not over the product. */
.hotspot { position: absolute; left: 0; top: 0; width: 40px; height: 64px; margin: -64px 0 0 -20px; pointer-events: auto; display: block; background: none; border: 0; padding: 0; }
.hotspot::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 1.5px; height: 34px; transform: translateX(-50%); background: linear-gradient(to top, rgb(242 235 222 / 0), rgb(242 235 222 / .85)); }
.hotspot__dot { position: absolute; left: 50%; top: 10px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: var(--sand); box-shadow: 0 0 0 3px rgb(92 172 179 / .55), 0 1px 6px rgb(0 0 0 / .35); transition: transform .2s var(--ease); }
.hotspot[data-count]::before { content: attr(data-count); position: absolute; left: 50%; top: 1px; transform: translateX(-50%); min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--teal, #5CACB3); color: #10201f; font: 600 12px/20px system-ui, sans-serif; text-align: center; z-index: 1; }
.hotspot[data-count] .hotspot__dot { opacity: 0; }
.hotspot:hover .hotspot__dot, .hotspot:focus-visible .hotspot__dot { transform: scale(1.3); }
.hotspot--ask .hotspot__dot { background: transparent; box-shadow: 0 0 0 2px var(--sand-dim); }
.hotspot.is-pulsing .hotspot__dot { animation: ping 1s infinite; background: var(--ember); box-shadow: 0 0 0 4px rgb(229 83 75 / .5), 0 0 24px rgb(229 83 75 / .9); }
@keyframes ping { 50% { transform: scale(1.5); } }

/* top bar */
.top { position: fixed; inset-inline: 0; top: 0; padding: calc(var(--safe-t) + 12px) 16px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; pointer-events: none;
  background: linear-gradient(to bottom, rgb(20 18 16 / .55), transparent); z-index: 5; }
.top > * { pointer-events: auto; }
.brand img { display: block; height: 28px; width: auto; }
.top__actions { display: flex; gap: 8px; }
.chip { min-height: 44px; padding: 0 14px; border-radius: 22px; background: rgb(31 28 25 / .55); border: 1px solid var(--glass-line); font-size: var(--f-13); font-weight: 500; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* dock */
.dock { position: fixed; z-index: 6; inset-inline: 12px; bottom: calc(var(--safe-b) + 12px); margin-inline: auto; max-width: 420px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: 26px; }
.dock__btn { min-height: 48px; border-radius: 22px; font-weight: 500; color: var(--sand-dim); }
.dock__btn[aria-current="true"] { background: var(--teal); color: var(--teal-ink); }

/* story */
.story { position: fixed; inset: 0; z-index: 4; pointer-events: none; }
.story__bars { position: absolute; inset-inline: 16px; top: calc(var(--safe-t) + 66px); display: flex; gap: 4px; direction: ltr; }
[dir="rtl"] .story__bars { direction: rtl; }
.story__bars span { flex: 1; height: 3px; border-radius: 2px; background: rgb(237 228 214 / .28); overflow: hidden; }
.story__bars i { display: block; height: 100%; width: 0; background: var(--sand); }
.story__tap { position: absolute; top: 100px; bottom: 170px; width: 32%; pointer-events: auto; }
.story__tap--prev { inset-inline-start: 0; } .story__tap--next { inset-inline-end: 0; }
.story__caption { position: absolute; inset-inline: 12px; bottom: calc(var(--safe-b) + 76px); margin-inline: auto; max-width: 520px; padding: 16px 18px; border-radius: var(--r-l); pointer-events: auto; }
.story__title { margin: 0 0 4px; font-size: var(--f-13); color: var(--teal); font-weight: 500; }
.story__text { margin: 0; font-size: var(--f-18); line-height: 1.5; font-weight: 500; text-wrap: pretty; }
.story__row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* buttons */
.btn { min-height: 44px; padding: 0 18px; border-radius: 22px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn--teal { background: var(--teal); color: var(--teal-ink); }
.btn--ghost { border: 1px solid var(--glass-line); color: var(--sand); }
.btn--wa { background: var(--teal); color: var(--teal-ink); width: 100%; justify-content: center; min-height: 52px; font-size: var(--f-18); }

/* phone notification */
.phone-note { position: fixed; z-index: 8; top: calc(var(--safe-t) + 10px); inset-inline: 12px; margin-inline: auto; max-width: 380px; padding: 12px 16px 14px; border-radius: 22px;
  background: rgb(246 241 233 / .94); color: #1F1C19; box-shadow: 0 10px 40px rgb(0 0 0 / .35); animation: drop .5s var(--ease); }
.phone-note__app { display: flex; align-items: center; gap: 6px; font-size: var(--f-13); color: #5c544b; }
.phone-note__app time { margin-inline-start: auto; }
.phone-note__title { display: block; margin-top: 4px; font-size: var(--f-15); }
.phone-note__body { margin: 2px 0 0; font-size: var(--f-15); }
.phone-note.is-alarm .phone-note__title { color: #B42318; }
@keyframes drop { from { transform: translateY(-120%); } }

/* sheet */
.sheet { position: fixed; inset: 0; z-index: 10; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(10 9 8 / .45); animation: fade .25s; }
.sheet__panel { position: absolute; inset-inline: 0; bottom: 0; margin-inline: auto; max-width: 560px; max-height: 86dvh; display: flex; flex-direction: column;
  border-radius: var(--r-l) var(--r-l) 0 0; padding-bottom: var(--safe-b); animation: rise .32s var(--ease); background: rgb(31 28 25 / .94); }
.sheet__grip { width: 40px; height: 5px; border-radius: 3px; background: var(--stone-600); margin: 10px auto 4px; }
.sheet__close { position: absolute; inset-inline-end: 8px; top: 6px; width: 44px; height: 44px; border-radius: 22px; font-size: 22px; color: var(--sand-dim); }
.sheet__body { overflow: auto; padding: 8px 20px 24px; overscroll-behavior: contain; }
@keyframes rise { from { transform: translateY(100%); } } @keyframes fade { from { opacity: 0; } }

/* product card */
.pc__media { aspect-ratio: 4 / 3; border-radius: var(--r-m); background: #fff; display: grid; place-items: center; overflow: hidden; margin-top: 6px; }
.pc__media img { width: 100%; height: 100%; object-fit: contain; }
.pc__media--ph { background: linear-gradient(160deg, #3a332c, #26221e); color: var(--stone-400); }
.pc__media--ph svg { width: 38%; height: auto; opacity: .7; }
.pc__code { margin: 16px 0 0; font-size: var(--f-13); color: var(--teal); font-weight: 600; direction: ltr; text-align: start; unicode-bidi: plaintext; }
.pc__name { margin: 2px 0 0; font-size: var(--f-24); line-height: 1.3; font-weight: 600; }
.pc__alt { margin: 2px 0 0; color: var(--stone-400); font-size: var(--f-15); }
.pc h3 { margin: 20px 0 8px; font-size: var(--f-13); font-weight: 600; color: var(--stone-400); }
.pc__specs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pc__specs li { padding: 6px 10px; border-radius: 8px; background: var(--stone-800); font-size: var(--f-13); unicode-bidi: plaintext; }
.pc__needs { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pc__needs li { padding-inline-start: 18px; position: relative; }
.pc__needs li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--brass); }
.pc__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pc__opts button { min-height: 40px; padding: 0 12px; border-radius: 20px; border: 1px solid var(--glass-line); font-size: var(--f-13); }
.pc__opts button[aria-pressed="true"] { border-color: var(--teal); color: var(--teal); }
.pc__note { margin: 16px 0 0; padding: 12px 14px; border-radius: var(--r-s); background: rgb(201 162 94 / .12); color: var(--sand); font-size: var(--f-13); }
.pc__actions { display: grid; gap: 8px; margin-top: 22px; }

/* catalog */
.cat__search { position: sticky; top: 0; z-index: 1; padding: 6px 0 10px; background: rgb(31 28 25 / .96); }
.cat__search input { width: 100%; min-height: 48px; padding: 0 16px; border-radius: 24px; border: 1px solid var(--glass-line); background: var(--stone-800); color: var(--sand); font: inherit; }
.cat__filters { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 2px; scrollbar-width: none; }
.cat__filters button { flex: none; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--glass-line); font-size: var(--f-13); color: var(--sand-dim); }
.cat__filters button[aria-pressed="true"] { background: var(--sand); color: var(--stone-900); border-color: var(--sand); }
.cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.cat__item { display: grid; gap: 6px; padding: 8px; border-radius: var(--r-m); background: var(--stone-800); text-align: start; }
.cat__item .pc__media { margin: 0; aspect-ratio: 1; border-radius: var(--r-s); }
.cat__item b { font-weight: 500; font-size: var(--f-13); line-height: 1.4; }
.cat__item small { color: var(--teal); font-weight: 600; direction: ltr; unicode-bidi: plaintext; text-align: start; }
.cat__empty { color: var(--sand-dim); padding: 24px 0; }

/* light sheet + dial (the one bold element: echoes the rotary dimmer) */
.ls__list { display: grid; gap: 10px; }
.ls__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--stone-800); }
.ls__row[aria-expanded="true"] { grid-template-columns: 1fr; }
.ls__name { font-weight: 500; text-align: start; min-height: 44px; display: flex; align-items: center; gap: 10px; }
.ls__swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.switch { width: 52px; height: 32px; border-radius: 16px; background: var(--stone-600); position: relative; transition: background .2s; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--sand); transition: inset-inline-start .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--teal); }
.switch[aria-checked="true"]::after { inset-inline-start: 23px; }
.dial { position: relative; width: 210px; aspect-ratio: 1; margin: 6px auto; touch-action: none; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial__val { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.dial__val b { font-size: var(--f-32); font-weight: 600; direction: ltr; }
.dial__val span { font-size: var(--f-13); color: var(--stone-400); }
.temp { width: 100%; margin-top: 4px; accent-color: var(--brass); }
.temp-labels, .rgb { display: flex; justify-content: space-between; font-size: var(--f-13); color: var(--stone-400); }
.rgb { justify-content: flex-start; gap: 8px; margin-top: 8px; }
.rgb button { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; }
.rgb button[aria-pressed="true"] { border-color: var(--sand); }

/* room picker */
.rooms { display: grid; gap: 10px; }
.rooms button { display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 0 16px; border-radius: var(--r-m); background: var(--stone-800); font-weight: 500; }
.rooms button[aria-current="true"] { outline: 2px solid var(--teal); }
.rooms small { color: var(--stone-400); font-weight: 400; }

.toast { position: fixed; z-index: 12; bottom: calc(var(--safe-b) + 84px); inset-inline: 0; margin-inline: auto; width: max-content; max-width: 90vw; padding: 10px 16px; border-radius: 20px; background: var(--sand); color: var(--stone-900); font-weight: 500; }
.noscript { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; padding: 2rem; }

/* presenter mode: bigger UI for an iPad or TV */
.present { font-size: 118%; }
.present .story__text { font-size: var(--f-24); }
.present .dock { max-width: 520px; }

@media (min-width: 900px) {
  .sheet__panel { inset-inline-end: 24px; inset-inline-start: auto; bottom: 24px; top: 24px; max-height: none; border-radius: var(--r-l); width: 420px; animation-name: slide; }
  [dir="ltr"] .sheet__panel { --from: 110%; } [dir="rtl"] .sheet__panel { --from: -110%; }
  .story__caption { inset-inline-start: 24px; inset-inline-end: auto; width: 460px; margin: 0; }
  @keyframes slide { from { transform: translateX(var(--from)); } }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.ls__hint { margin: 4px 0 0; text-align: center; font-size: var(--f-13); color: var(--stone-400); }
.ls__name[aria-disabled="true"] { cursor: default; }

/* what the product does, plain words (above the specs) */
.pc__what { font-size: 1.02rem; line-height: 1.7; margin: .6rem 0 1rem; color: var(--ink, inherit); opacity: .92; max-width: 60ch; }

/* opened from a product in the room (phones/tablets): half-height card over a clear room, so the zoomed device stays visible above it;
   scrolling the card expands it to full height */
@media (max-width: 899px) {
  .sheet--peek .sheet__scrim { background: transparent; }
  .sheet--peek .sheet__panel { max-height: 46dvh; transition: max-height .3s var(--ease); }
}