/* ==========================================================
   FAIM JEWELLERY ARABIA EXPERIENCE  |  Visitor experience (kiosk)
   Authored for a 1920 x 1080 landscape touchscreen (1rem = 16px).
   ========================================================== */
#kiosk { position: fixed; inset: 0; z-index: 50; background: var(--velvet); }
html[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

.k-bar {
  position: absolute; inset: 0 0 auto 0; height: 7rem; z-index: 5; display: flex; align-items: center; justify-content: space-between;
  padding: 0 3.5rem; border-bottom: 1px solid var(--gold-faint); background: rgba(14, 11, 9, .92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.k-brand { display: flex; align-items: center; height: var(--touch); }
.k-logo { height: 2.6rem; width: auto; }
.k-bar__end { display: flex; align-items: center; gap: 1rem; }
.k-lang { font-size: 1.15rem; min-width: 8rem; }
html[lang="en"] .k-lang { font-family: 'Amiri', serif; font-size: 1.35rem; }
html[lang="ar"] .k-lang { font-family: 'Jost', sans-serif; }
.k-assist { color: var(--ivory); }

.k-stage { position: absolute; inset: 7rem 0 0 0; overflow: hidden; }
#kiosk[data-screen="attract"] .k-stage, #kiosk[data-screen="language"] .k-stage { inset: 0; }
.k-screen { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; animation: kIn .55s var(--ease) both; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; }
.k-screen.is-leaving { animation: kOut .4s var(--ease) both; pointer-events: none; }
@keyframes kIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kOut { to { opacity: 0; } }
.k-exit { position: fixed; bottom: 1.5rem; inset-inline-start: 1.5rem; z-index: 60; background: rgba(14,11,9,.8); }
html.kiosk-mode .k-exit { display: none; }

/* ---------- attract ---------- */
.k-attract { overflow: hidden; cursor: pointer; }
.a-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.a-shade { position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(14,11,9,.94) 0%, rgba(14,11,9,.78) 34%, rgba(14,11,9,.15) 68%, rgba(14,11,9,.35) 100%),
  linear-gradient(0deg, rgba(14,11,9,.8) 0%, rgba(14,11,9,0) 30%); }
.a-glints { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.a-copy { position: absolute; left: 7rem; top: 50%; transform: translateY(-50%); width: 50rem; direction: ltr; }
.a-logo { width: 22rem; height: auto; margin-bottom: 5rem; }
.a-lines { position: relative; height: 15rem; }
.a-line { position: absolute; inset: 0; opacity: 0; transform: translateY(1rem); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); display: flex; flex-direction: column; gap: 1rem; }
.a-line.is-on { opacity: 1; transform: none; }
.a-line [lang="en"] { font-family: 'Cormorant', serif; font-weight: 300; font-size: 5.6rem; line-height: 1; letter-spacing: -.01em; }
.a-line [lang="ar"] { font-family: 'Amiri', serif; font-size: 3rem; color: var(--smoke); text-align: left; }
.a-cta { margin-top: 4rem; display: flex; align-items: center; gap: 1.5rem; font-size: 1.5rem; font-weight: 400; letter-spacing: .04em; }
.a-cta [lang="ar"] { font-family: 'Plex Arabic', sans-serif; }
.a-sep { width: 3rem; height: 1px; background: var(--gold-dim); }
.a-ring { width: 3.2rem; height: 3.2rem; border-radius: 50%; border: 1px solid var(--gold); position: relative; }
.a-ring::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--gold); animation: ring 2.4s var(--ease) infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
.a-feature { position: absolute; right: 6rem; bottom: 6rem; width: 21rem; margin: 0; }
.a-feature__item { position: absolute; inset: auto 0 0 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.a-feature__item.is-on { opacity: 1; }
.a-feature .vitrine { aspect-ratio: 1; box-shadow: 0 2rem 5rem rgba(0,0,0,.55); }
.a-feature figcaption { margin-top: 1rem; font-family: 'Cormorant', serif; font-size: 1.5rem; display: flex; flex-direction: column; gap: .2rem; }
.a-feature figcaption [lang="ar"] { font-family: 'Amiri', serif; font-size: 1.15rem; color: var(--smoke); direction: rtl; text-align: left; }
.a-event { position: absolute; left: 7rem; bottom: 3rem; font-size: 1rem; color: var(--smoke); letter-spacing: .06em; }
.a-hit { position: absolute; inset: 0; z-index: 3; background: transparent; }

/* ---------- language ---------- */
.l-bg { position: absolute; inset: 0; background-size: cover; background-position: 70% 30%; filter: blur(22px) brightness(.35); transform: scale(1.1); }
.l-wrap { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; }
.l-mono { width: 5rem; height: 5rem; }
.l-ask { display: flex; gap: 2rem; font-size: 1.4rem; color: var(--smoke); }
.l-ask [lang="ar"] { font-family: 'Plex Arabic', sans-serif; }
.l-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.l-choice {
  width: 30rem; height: 22rem; border: 1px solid var(--gold-dim); border-radius: var(--r-m); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
  background: rgba(23,18,15,.55); transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.l-choice:hover, .l-choice:focus-visible { background: rgba(33,26,21,.85); border-color: var(--gold); }
.l-choice:active { transform: scale(.98); }
.l-word { font-family: 'Cormorant', serif; font-size: 5rem; font-weight: 300; line-height: 1; }
.l-choice[lang="ar"] .l-word { font-family: 'Amiri', serif; font-size: 4.6rem; }
.l-choice[lang="ar"] .note { font-family: 'Plex Arabic', sans-serif; }

/* ---------- hub ---------- */
.h-wrap { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 2.5rem; padding: 3rem 3.5rem 2.5rem; }
.h-title { font-size: 4.2rem; max-width: 40ch; }
.h-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.5rem; min-height: 0; }
.h-tile { position: relative; overflow: hidden; border-radius: var(--r-m); text-align: start; display: flex; align-items: flex-end; min-height: 14rem; border: 1px solid var(--gold-faint); }
.h-tile--hero { grid-row: span 2; }
.h-tile:nth-child(2) { grid-column: 2 / 4; }
.h-tile__img { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transition: transform 1.2s var(--ease); }
.h-tile:hover .h-tile__img { transform: scale(1.03); }
.h-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14,11,9,.92) 0%, rgba(14,11,9,.2) 55%, rgba(14,11,9,0) 100%); }
.h-tile__txt { position: relative; z-index: 2; padding: 2.25rem; display: flex; flex-direction: column; gap: .4rem; }
.h-tile__title { font-family: var(--display); font-size: 2.6rem; line-height: 1.05; }
.h-tile--hero .h-tile__title { font-size: 4rem; }
.h-tile__sub { color: var(--smoke); font-size: 1.1rem; }
.h-links { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.h-link { min-height: var(--touch); display: inline-flex; align-items: center; gap: .7rem; padding: 0 1.5rem; border-radius: 999px; border: 1px solid var(--gold-faint); color: var(--smoke); font-size: 1.1rem; transition: all var(--t-fast); }
.h-link:hover { color: var(--ivory); border-color: var(--gold-dim); }
.h-link svg { width: 1.4rem; height: 1.4rem; color: var(--gold); }
.h-fast { margin-inline-start: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: var(--touch); color: var(--ivory); font-size: 1.15rem; border-bottom: 1px solid var(--gold-dim); }
.h-fast svg { width: 1.2rem; height: 1.2rem; }

/* ---------- heritage vault ---------- */
.v-wrap { height: 100%; display: grid; grid-template-rows: 1fr auto auto; padding: 2.5rem 3.5rem 2rem; gap: 1.5rem; }
.v-stage { position: relative; min-height: 0; }
.v-slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; gap: 5rem; align-items: center; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility .9s; }
.v-slide.is-on { opacity: 1; visibility: visible; }
.v-img { height: 100%; border-radius: var(--r-m); background-size: cover; background-position: center; }
.v-year { font-family: 'Cormorant', serif; font-weight: 300; font-size: 13rem; line-height: .85; color: var(--gold); letter-spacing: -.03em; }
.v-txt h2 { font-size: 3.4rem; margin: 2rem 0 1.5rem; }
.v-body { font-size: 1.45rem; line-height: 1.6; color: var(--ivory); max-width: 34em; font-weight: 300; }
.v-line { display: flex; justify-content: space-between; position: relative; padding-top: 1rem; }
.v-line::before { content: ''; position: absolute; left: 0; right: 0; top: 2.4rem; height: 1px; background: var(--gold-dim); }
.v-dot { position: relative; min-height: var(--touch); min-width: 8rem; display: flex; flex-direction: column; align-items: center; gap: .7rem; color: var(--smoke); font-size: 1.15rem; }
.v-dot::before { content: ''; width: .9rem; height: .9rem; border-radius: 50%; background: var(--velvet); border: 1px solid var(--gold); margin-top: .95rem; transition: all var(--t-fast); }
.v-dot.is-on { color: var(--ivory); }
.v-dot.is-on::before { background: var(--gold); transform: scale(1.4); }

/* ---------- quiz ---------- */
.q-wrap { min-height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 2.5rem 3.5rem 2rem; gap: 2rem; }
.q-progress { display: flex; gap: .6rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.q-progress li { flex: 1; height: 2px; background: var(--gold-faint); }
.q-progress li.done { background: var(--gold-dim); }
.q-progress li.now { background: var(--gold); }
.q-count { color: var(--smoke); font-size: 1.05rem; margin-bottom: .6rem; }
.q-q { font-size: 4.4rem; }
.q-opts { display: grid; gap: 1.5rem; align-content: center; }
.q-opts--5 { grid-template-columns: repeat(5, 1fr); }
.q-opts--6 { grid-template-columns: repeat(6, 1fr); }
.q-opt { display: flex; flex-direction: column; gap: 1rem; text-align: start; border-radius: var(--r-m); padding: .75rem; border: 1px solid transparent; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.q-opt:hover { border-color: var(--gold-faint); background: var(--tray); }
.q-opt:active { transform: scale(.98); }
.q-opt[aria-pressed="true"] { border-color: var(--gold); background: var(--tray-2); }
.q-img { aspect-ratio: 3 / 4; border-radius: var(--r-s); overflow: hidden; background: var(--tray); display: block; }
.q-img img { width: 100%; height: 100%; object-fit: cover; }
.q-img.vitrine { background: var(--vitrine); }
.q-img.vitrine img { object-fit: contain; padding: 8%; }
.q-label { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; padding: 0 .25rem .5rem; }
.q-opt--swatch { align-items: center; text-align: center; padding: 2rem 1rem; }
.q-gem { width: 11rem; height: 11rem; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), inset -1.2rem -1.6rem 3rem rgba(0,0,0,.35), 0 1.5rem 3rem rgba(0,0,0,.4); transition: transform .4s var(--ease); }
.q-opt--swatch[aria-pressed="true"] .q-gem { transform: scale(1.06); }
.q-foot { display: flex; justify-content: space-between; }

/* ---------- result ---------- */
.r-wrap { padding: 2rem 3.5rem 3rem; display: grid; gap: 2rem; }
.r-kicker { color: var(--smoke); font-size: 1.15rem; }
.r-name { font-size: 5.4rem; margin: .4rem 0 .5rem; }
.r-line { font-family: var(--display); font-style: italic; font-size: 2rem; color: var(--smoke); max-width: 60ch; }
html[lang="ar"] .r-line { font-style: normal; }
.r-recs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.r-rec { display: grid; grid-template-rows: auto 1fr; gap: 1.5rem; }
.r-rec__img { aspect-ratio: 1.45; display: block; width: 100%; }
.r-rec__img img { padding: 6%; }
.r-rec__cat, .pd-cat { color: var(--gold); font-size: 1rem; letter-spacing: .04em; }
.r-rec__name { font-size: 2.3rem; margin: .4rem 0 1rem; }
.r-rec__why { font-size: 1.1rem; color: var(--smoke); line-height: 1.6; }
.r-rec__why span { display: block; color: var(--ivory); font-weight: 400; margin-bottom: .3rem; }
.r-rec__acts { display: flex; gap: 1rem; margin-top: 1.25rem; align-items: center; }
.r-foot { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- product card ---------- */
.p-card { position: relative; }
.p-card__open { display: block; width: 100%; text-align: start; }
.p-card__img { aspect-ratio: 1; }
.p-card__img img { padding: 7%; transition: transform .8s var(--ease); }
.p-card__open:hover .p-card__img img { transform: scale(1.04); }
.p-card__name { font-family: var(--display); font-size: 1.55rem; line-height: 1.15; margin: 1rem 0 .3rem; }
.p-card__meta { font-size: .95rem; color: var(--smoke); }
.fav-dot { position: absolute; top: .75rem; inset-inline-end: .75rem; z-index: 3; width: 3.6rem; height: 3.6rem; background: rgba(255,255,255,.85); color: #3b2f26; border-color: transparent; }
.fav-dot[aria-pressed="true"] { color: #8f6a2a; background: #fff; }
.fav-dot svg { width: 1.4rem; height: 1.4rem; }
.r-rec__acts .fav-dot, .t-acts .fav-dot { position: static; background: transparent; color: var(--ivory); border-color: var(--gold-dim); width: 3.25rem; height: 3.25rem; }
.r-rec__acts .fav-dot[aria-pressed="true"], .t-acts .fav-dot[aria-pressed="true"] { color: var(--gold); }

/* ---------- catalogue ---------- */
.c-wrap { display: grid; grid-template-columns: 22rem 1fr; height: 100%; }
.c-rail { padding: 2.5rem 2rem 2.5rem 3.5rem; border-inline-end: 1px solid var(--gold-faint); }
html[dir="rtl"] .c-rail { padding: 2.5rem 3.5rem 2.5rem 2rem; }
.c-rail fieldset { border: 0; padding: 0; margin: 0 0 2.5rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.c-rail legend { font-family: var(--display); font-size: 1.6rem; margin-bottom: 1rem; padding: 0; }
.c-main { overflow-y: auto; padding: 2.5rem 3.5rem 3rem; }
.c-ask { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--gold-dim); padding-bottom: .5rem; }
.c-ask svg { width: 1.8rem; height: 1.8rem; color: var(--gold); flex: none; }
.c-ask input { flex: 1; min-height: var(--touch); background: transparent; border: 0; font-family: var(--display); font-size: 2.2rem; color: var(--ivory); outline: none; }
.c-ask input::placeholder { color: var(--ash); }
.c-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 1.5rem; }
.c-count { margin-bottom: 1rem; }
.c-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 1.75rem; }
.c-empty { grid-column: 1 / -1; font-family: var(--display); font-size: 2rem; color: var(--smoke); padding: 4rem 0; }
.c-note { margin-top: 3rem; }

/* ---------- product detail ---------- */
.pd-wrap { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: calc(100vh - 7rem - 4rem) auto; gap: 2rem 4rem; padding: 2rem 3.5rem 3rem; }
.pd-media { display: grid; grid-template-rows: 1fr auto auto; gap: 1rem; min-height: 0; }
.pd-view { min-height: 0; }
.pv { width: 100%; height: 100%; touch-action: none; cursor: default; }
.pv[data-mode="zoom"] { cursor: grab; }
.pv[data-mode="turn"] { cursor: ew-resize; }
.pv-inner { width: 100%; height: 100%; transform-origin: center; will-change: transform; transition: transform .08s linear; }
.pv-inner img { width: 100%; height: 100%; object-fit: contain; padding: 5%; user-select: none; -webkit-user-drag: none; }
.pv-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light;
  background: linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 65%); background-size: 300% 100%; }
.pd-modes { display: flex; gap: .6rem; align-items: center; }
.pd-modes .chip svg { width: 1.25rem; height: 1.25rem; }
.pd-zoombtns { display: inline-flex; gap: .5rem; margin-inline-start: auto; }
.pd-zoombtns .icon-btn { width: 3.25rem; height: 3.25rem; }
.pd-hint { min-height: 1.5em; }
.pd-info { min-height: 0; padding-inline-end: 1rem; }
.pd-name { font-size: 4.2rem; margin: .5rem 0 1rem; }
.pd-mat { font-size: 1.25rem; color: var(--smoke); }
.pd-price { margin: 1.25rem 0 1.75rem; font-family: var(--display); font-size: 1.7rem; font-style: italic; }
html[lang="ar"] .pd-price { font-style: normal; }
.pd-showme { width: 100%; min-height: 5rem; font-size: 1.25rem; }
.pd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0 2.5rem; }
.pd-acts .btn { padding: 0 1rem; font-size: 1.05rem; }
.pd-spec, .pd-block { border-top: 1px solid var(--gold-faint); padding: 1.5rem 0; }
.pd-spec h3, .pd-block h3 { font-family: var(--display); font-size: 1.6rem; margin-bottom: .75rem; }
.pd-spec ul { list-style: none; margin: 0 0 1rem; padding: 0; columns: 2; column-gap: 2rem; }
.pd-spec li, .t-spec li, .cmp-cell li { font-family: 'Jost', sans-serif; }
.pd-spec li { font-size: 1.05rem; padding: .35rem 0; border-bottom: 1px dotted var(--gold-faint); break-inside: avoid; direction: ltr; text-align: start; }
.pd-block p { font-size: 1.1rem; color: var(--smoke); }
.pd-related { grid-column: 1 / -1; }
.pd-related h2 { font-size: 2.4rem; margin-bottom: 1.5rem; }
.pd-related__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }

/* ---------- compare ---------- */
.cmp-empty { height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.5rem; padding: 0 7rem; }
.cmp-empty h1 { font-size: 5rem; }
.cmp-wrap { padding: 2rem 3.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem; height: 100%; }
.cmp-head { display: flex; justify-content: space-between; align-items: center; }
.cmp-head h1 { font-size: 3.6rem; }
.cmp-grid { flex: 1; min-height: 0; }
.cmp-row { display: grid; grid-template-columns: 12rem repeat(var(--n, 3), 1fr); gap: 2rem; padding: 1rem 0; border-bottom: 1px solid var(--gold-faint); align-items: start; }
.cmp-n1 .cmp-row { --n: 1; } .cmp-n2 .cmp-row { --n: 2; } .cmp-n3 .cmp-row { --n: 3; }
.cmp-row--img { border: 0; }
.cmp-row--img .cmp-cell { position: relative; }
.cmp-row--img .vitrine { aspect-ratio: 1.3; width: 100%; display: block; }
.cmp-row--img .vitrine img { padding: 6%; }
.cmp-row--img .btn { position: absolute; top: .5rem; inset-inline-end: .5rem; background: rgba(255,255,255,.9); color: #3b2f26; }
.cmp-label { color: var(--smoke); font-size: 1rem; }
.cmp-cell { font-size: 1.1rem; }
.cmp-cell ul { margin: 0; padding: 0; list-style: none; direction: ltr; }
.cmp-name { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }

/* ---------- RFID table ---------- */
.t-wrap { height: 100%; display: grid; grid-template-columns: 26rem 1fr; grid-template-rows: auto 1fr; gap: 1.5rem 3rem; padding: 2rem 3.5rem 2.5rem; }
.t-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: baseline; }
.t-head h1 { font-size: 3.4rem; }
.t-head p:not(.demo-flag) { color: var(--smoke); max-width: 52ch; }
.t-tray { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-content: start; overflow-y: auto; padding: .25rem; }
.t-card {
  aspect-ratio: 3 / 4.1; border-radius: .6rem; background: linear-gradient(160deg, #2a221c, #15110e); border: 1px solid var(--gold-dim); padding: .8rem;
  display: flex; flex-direction: column; gap: .6rem; text-align: start; touch-action: none; transition: opacity .4s, transform .3s var(--ease); position: relative;
}
.t-card::after { content: ''; position: absolute; inset-inline-end: .7rem; top: .7rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gem); box-shadow: 0 0 .8rem var(--gem); }
.t-card:active { transform: scale(.97); }
.t-card.is-placed { opacity: .28; }
.t-card__img { flex: 1; border-radius: .3rem; }
.t-card__img img { padding: 8%; }
.t-card__name { font-family: 'Cormorant', serif; font-size: 1.15rem; line-height: 1.1; }
html[lang="ar"] .t-card__name { font-family: 'Amiri', serif; }
.t-card__tag { font-size: .75rem; color: var(--ash); letter-spacing: .1em; }
.t-ghost { position: fixed; z-index: 700; width: 11rem; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg); box-shadow: 0 2rem 4rem rgba(0,0,0,.6); }
.t-surface { position: relative; border-radius: 1.5rem; background: radial-gradient(ellipse at 50% 55%, #1e1813 0%, #120e0b 70%); border: 1px solid var(--gold-faint); overflow: hidden; display: grid; }
.t-surface.is-hover { border-color: var(--gold); }
.t-glow { position: absolute; inset: 0; --gem: #d2b271; background: radial-gradient(ellipse 60% 55% at 50% 60%, color-mix(in srgb, var(--gem) 38%, transparent), transparent 70%); opacity: 0; transition: opacity 1s var(--ease), background 1s; pointer-events: none; }
.t-surface.has-cards .t-glow, .t-surface.is-hover .t-glow { opacity: 1; }
.t-idle { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; color: var(--ash); font-family: var(--display); font-size: 2rem; transition: opacity .5s; }
.t-mono { width: 5rem; height: 5rem; opacity: .7; animation: breathe 3s ease-in-out infinite; }
.t-surface.has-cards .t-idle { opacity: 0; }
.t-slots { position: relative; z-index: 2; display: grid; gap: 2rem; padding: 2rem; min-height: 0; }
.t-slots.n1 { grid-template-columns: 1fr; } .t-slots.n2 { grid-template-columns: 1fr 1fr; } .t-slots.n3 { grid-template-columns: 1fr 1fr 1fr; }
.t-piece { display: grid; gap: 1.5rem; min-height: 0; }
.t-slots.n1 .t-piece { grid-template-columns: 1.1fr 1fr; align-items: center; }
.t-piece__img { aspect-ratio: 1; box-shadow: 0 2rem 4rem rgba(0,0,0,.5); }
.t-slots.n2 .t-piece__img, .t-slots.n3 .t-piece__img { aspect-ratio: 1.2; }
.t-piece__img img { padding: 6%; }
.t-piece h2 { font-size: 2.4rem; margin: .4rem 0 .6rem; }
.t-slots.n3 .t-piece h2 { font-size: 1.8rem; }
.t-spec { list-style: none; padding: 0; margin: 1rem 0; font-size: 1rem; color: var(--smoke); direction: ltr; text-align: start; }
.t-acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; align-items: center; }
.t-spark { position: fixed; z-index: 750; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255,240,210,.9); pointer-events: none; }

/* ---------- gesture ---------- */
.g-wrap { height: 100%; display: grid; grid-template-columns: 1fr 30rem; grid-template-rows: auto 1fr auto; gap: 1.5rem 3rem; padding: 2rem 3.5rem 2rem; }
.g-head { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; gap: 2rem; align-items: baseline; }
.g-head h1 { font-size: 3.4rem; }
.g-head p:not(.demo-flag) { color: var(--smoke); max-width: 56ch; }
.g-zone { position: relative; min-height: 0; border-radius: var(--r-m); overflow: hidden; cursor: none; }
.g-view { position: absolute; inset: 0; }
.g-view .pv { pointer-events: none; }
.g-hand { position: absolute; left: 50%; top: 50%; width: 5rem; height: 5rem; margin: -2.5rem; border-radius: 50%; border: 1.5px solid rgba(150, 120, 60, .9); pointer-events: none; z-index: 5; transition: left .08s linear, top .08s linear; }
.g-hand span { position: absolute; inset: 1.7rem; border-radius: 50%; background: rgba(150, 120, 60, .9); }
.g-hand.is-paused { border-style: dashed; animation: breathe 1.5s ease-in-out infinite; }
.g-state { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 6; color: #5a4630; font-family: 'Cormorant', serif; font-size: 2rem; }
.g-side { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.g-name { font-size: 3rem; }
.g-touch { display: flex; gap: .75rem; margin: 2rem 0 1rem; flex-wrap: wrap; }
.g-rail { grid-column: 1 / -1; display: flex; gap: 1rem; }
.g-thumb { width: 7.5rem; height: 7.5rem; border: 2px solid transparent; flex: none; }
.g-thumb img { padding: 8%; }
.g-thumb.is-on { border-color: var(--gold); }

/* ---------- mirror ---------- */
.m-wrap { height: 100%; display: grid; grid-template-columns: 1fr 34rem; gap: 3rem; padding: 2rem 3.5rem 2.5rem; }
.m-stage { position: relative; border-radius: var(--r-m); overflow: hidden; background: #1a1512; }
.m-video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.m-standin { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; background: linear-gradient(#3b3129, #1d1814); }
.m-standin svg { width: 62%; height: auto; }
.m-standin svg path { fill: #c9b6a2; }
.m-standin .note { position: absolute; top: 1.5rem; left: 1.5rem; right: 1.5rem; color: #f2e9dc; }
.m-piece { position: absolute; width: 34%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(var(--s)); touch-action: none; cursor: move; mix-blend-mode: multiply; }
.m-piece img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.m-disclaimer { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; text-align: center; font-size: .95rem; color: #fff; background: rgba(14,11,9,.6); padding: .5rem 1rem; border-radius: 999px; width: max-content; margin: auto; max-width: 90%; }
.m-side { display: flex; flex-direction: column; gap: 1.25rem; min-height: 0; }
.m-side h1 { font-size: 3.2rem; }
.m-size { display: flex; align-items: center; gap: 1rem; }
.m-size input { flex: 1; accent-color: var(--gold); height: 3rem; }
.m-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; flex: 1; min-height: 0; align-content: start; }
.m-thumb { aspect-ratio: 1; border: 2px solid transparent; }
.m-thumb img { padding: 6%; }
.m-thumb.is-on { border-color: var(--gold); }
.m-acts { display: flex; gap: .75rem; flex-wrap: wrap; }
.m-modal { max-width: min(80rem, 94vw); }
.m-result { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.m-result > img { width: 100%; border-radius: var(--r-s); }
.m-result h2 { font-size: 2.8rem; margin-bottom: 1rem; }
.m-qr { width: 14rem; margin: 1.5rem 0 1rem; }

/* ---------- studio ---------- */
.s-wrap { height: 100%; display: grid; grid-template-columns: 40rem 1fr; }
.s-controls { padding: 2.5rem 2.5rem 3rem 3.5rem; border-inline-end: 1px solid var(--gold-faint); }
.s-controls h1 { font-size: 3rem; margin-bottom: .75rem; }
.s-group { border: 0; padding: 0; margin: 2rem 0 0; }
.s-group legend { font-family: var(--display); font-size: 1.5rem; margin-bottom: .8rem; padding: 0; }
.s-opts { display: flex; flex-wrap: wrap; gap: .6rem; }
.s-engrave { width: 100%; min-height: var(--touch); background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: 0 1.25rem; font-family: 'Cormorant', serif; font-size: 1.8rem; font-style: italic; }
.s-canvas { position: relative; background: radial-gradient(ellipse at 50% 45%, #241c16, #0e0b09 70%); }
.s-gl, .s-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; touch-action: none; cursor: grab; }
.s-engraved { position: absolute; left: 0; right: 0; bottom: 9rem; text-align: center; font-family: 'Cormorant', serif; font-style: italic; font-size: 2.4rem; color: var(--gold); }
.s-flag { position: absolute; top: 2rem; inset-inline-start: 2rem; max-width: 46rem; }
.s-go { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); }
.pp-modal { max-width: min(92rem, 94vw); padding: 2.5rem; }
.pp { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; }
.pp-card { border: 1px solid var(--gold-dim); border-radius: var(--r-m); padding: 2rem; background: linear-gradient(170deg, #211a15, #120e0b); }
.pp-card header { display: flex; gap: 1.25rem; align-items: center; }
.pp-card header h2 { font-size: 2.6rem; }
.pp-ref { margin-inline-start: auto; font-size: 1.1rem; letter-spacing: .08em; color: var(--gold); }
.pp-img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: radial-gradient(ellipse, #241c16, #0e0b09 75%); border-radius: var(--r-s); margin: 1.5rem 0; }
.pp-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; margin: 0 0 1.25rem; }
.pp-card dt { font-size: .95rem; color: var(--smoke); }
.pp-card dd { margin: 0; font-family: var(--display); font-size: 1.5rem; }
.pp-side { display: flex; flex-direction: column; gap: 1rem; }
.pp-side .qr { width: 13rem; }
.pp-side h3 { font-family: var(--display); font-size: 1.6rem; margin-top: 1rem; }
.pp-close { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.pp-close .vitrine { aspect-ratio: 1; }
.pp-close img { padding: 8%; }

/* ---------- shortlist ---------- */
.sl-wrap { min-height: 100%; display: grid; grid-template-columns: 1fr 38rem; gap: 3rem; padding: 2.5rem 3.5rem 3rem; }
.sl-main h1 { font-size: 4rem; margin-bottom: 2rem; }
.sl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.sl-empty { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.sl-empty p { width: 100%; font-family: var(--display); font-size: 2rem; color: var(--smoke); margin-bottom: 1rem; }
.sl-side { border-inline-start: 1px solid var(--gold-faint); padding-inline-start: 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.sl-qr { display: grid; grid-template-columns: 12rem 1fr; gap: 1.5rem; align-items: start; }
.sl-qr h2, .sl-next { font-size: 2rem; }
.k-ref { margin-top: 1rem; font-size: 1.1rem; }
.k-ref strong { color: var(--gold); letter-spacing: .08em; font-weight: 500; }
.sl-acts { display: grid; gap: .6rem; }
.sl-act { min-height: var(--touch); display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; border: 1px solid var(--gold-faint); border-radius: var(--r-s); text-align: start; font-size: 1.15rem; transition: all var(--t-fast); }
.sl-act:hover { border-color: var(--gold-dim); background: var(--tray); }
.sl-act svg { width: 1.5rem; height: 1.5rem; color: var(--gold); flex: none; }

/* ---------- booking ---------- */
.b-wrap { max-width: 82rem; margin: 0 auto; padding: 2.5rem 3.5rem 4rem; display: grid; gap: 1.75rem; }
.b-head { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.b-head h1 { font-size: 4rem; }
.b-pieces { display: flex; gap: .5rem; }
.b-pieces .vitrine { width: 4.5rem; height: 4.5rem; }
.b-pieces img { padding: 8%; }
.b-q { border: 0; padding: 0; margin: 0; }
.b-q legend { font-family: var(--display); font-size: 1.8rem; margin-bottom: .8rem; padding: 0; }
.b-opts { display: flex; flex-wrap: wrap; gap: .75rem; }
.b-pill { position: relative; }
.b-pill input { position: absolute; opacity: 0; inset: 0; }
.b-pill span { min-height: var(--touch); display: inline-flex; align-items: center; padding: 0 2rem; border-radius: 999px; border: 1px solid var(--gold-dim); font-size: 1.15rem; transition: all var(--t-fast); }
.b-pill input:checked + span { background: var(--ivory); color: var(--velvet); border-color: var(--ivory); }
.b-pill input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.b-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.b-field { display: flex; flex-direction: column; gap: .5rem; }
.b-field span { color: var(--smoke); }
.b-field input { min-height: 5rem; background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-s); padding: 0 1.5rem; font-size: 1.5rem; }
.b-field input:focus { border-color: var(--gold); outline: none; }
.b-check { display: flex; gap: 1rem; align-items: flex-start; font-size: 1.1rem; cursor: pointer; min-height: 2.5rem; }
.b-check input { width: 2rem; height: 2rem; accent-color: var(--gold); flex: none; margin: 0; }
.b-err { color: var(--alert); }
.b-send { justify-self: start; min-height: 5rem; padding: 0 3rem; font-size: 1.25rem; }
.b-done { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; text-align: center; padding: 3rem; }
.b-done h1 { font-size: 3.6rem; max-width: 22ch; }
.b-ref { font-family: 'Jost', sans-serif; font-size: 2.6rem; letter-spacing: .14em; color: var(--gold); }
.b-qr { width: 13rem; }

/* ---------- wall ---------- */
.w-wrap { min-height: 100%; display: grid; grid-template-columns: 1fr 30rem; gap: 3rem; padding: 2.5rem 3.5rem 3rem; }
.w-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.w-head h1 { font-size: 4rem; }
.w-grid { columns: 3; column-gap: 1.5rem; }
.w-card { break-inside: avoid; margin-bottom: 1.5rem; background: var(--tray); border: 1px solid var(--gold-faint); border-radius: var(--r-m); padding: 1.25rem; }
.w-card.is-new { border-color: var(--gold); }
.w-card__media { display: flex; gap: .75rem; }
.w-card__media .vitrine { flex: 1; aspect-ratio: 1.2; }
.w-card__media .vitrine img { padding: 6%; }
.w-selfie { width: 40%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); }
.w-card blockquote { margin: 1.25rem 0 .5rem; font-family: var(--display); font-size: 1.8rem; line-height: 1.15; font-style: italic; }
html[lang="ar"] .w-card blockquote { font-style: normal; }
.w-card__piece { color: var(--ivory); font-size: 1rem; }
.w-card__time { color: var(--ash); font-size: .9rem; margin-top: .4rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.w-side { display: flex; flex-direction: column; gap: 2rem; border-inline-start: 1px solid var(--gold-faint); padding-inline-start: 2.5rem; }
.w-stat h2 { font-size: 1.6rem; color: var(--smoke); margin-bottom: .75rem; }
.w-loved { aspect-ratio: 1.2; margin-bottom: .75rem; }
.w-loved img { padding: 6%; }
.w-big { font-family: var(--display); font-size: 3.4rem; line-height: 1; }
.w-privacy { display: flex; gap: .75rem; align-items: flex-start; }
.w-privacy svg { width: 1.4rem; height: 1.4rem; flex: none; color: var(--gold); }
.wf-modal { max-width: min(72rem, 94vw); }
.wf h2 { font-size: 1.9rem; margin: 1.5rem 0 1rem; }
.wf h2:first-child { margin-top: 0; }
.wf-pieces { display: grid; grid-template-columns: repeat(8, 1fr); gap: .6rem; }
.wf-pieces .vitrine { aspect-ratio: 1; border: 2px solid transparent; }
.wf-pieces .vitrine[aria-pressed="true"] { border-color: var(--gold); }
.wf-pieces img { padding: 8%; }
.wf-prompts { display: flex; flex-wrap: wrap; gap: .6rem; }
.wf-selfie { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.wf-selfie video, .wf-selfie img { width: 12rem; height: 12rem; object-fit: cover; border-radius: var(--r-s); transform: scaleX(-1); }
.wf-selfie img { transform: none; }
.wf-acts { display: flex; gap: 1rem; margin-top: 1.5rem; }

/* ---------- modals ---------- */
.k-assist-modal, .k-idle { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; padding: 1rem 2rem; }
.k-assist-modal h2, .k-idle h2 { font-size: 3rem; max-width: 18ch; }
.k-idle p { font-size: 1.3rem; color: var(--smoke); }
.k-idle__n { color: var(--gold); font-size: 2rem; }
.k-qr-modal { display: grid; grid-template-columns: 16rem 1fr; gap: 2.5rem; align-items: center; }
.k-qr-modal h2 { font-size: 2.6rem; margin-bottom: 1rem; }
.k-qr-modal .btn { margin-top: 1.5rem; }

/* ---------- smaller screens (laptops in portrait, tablets) ---------- */
@media (max-width: 1200px), (max-aspect-ratio: 4/3) {
  body[data-area="kiosk"] { overflow: auto; }
  .h-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .h-tile--hero { grid-row: auto; grid-column: 1 / -1; min-height: 22rem; }
  .h-tile:nth-child(2) { grid-column: auto; }
  .q-opts--5, .q-opts--6 { grid-template-columns: repeat(3, 1fr); }
  .r-recs, .c-grid, .sl-grid, .pd-related__row { grid-template-columns: repeat(2, 1fr); }
  .c-wrap, .s-wrap, .pd-wrap, .m-wrap, .sl-wrap, .w-wrap, .t-wrap, .g-wrap { grid-template-columns: 1fr; height: auto; }
  .pd-wrap { grid-template-rows: auto; }
  .pd-media { height: 70vh; }
  .c-rail, .s-controls { border: 0; padding: 2rem 2rem 0; }
  .s-canvas { height: 70vh; }
  .m-stage, .g-zone, .t-surface { height: 60vh; }
  .v-slide { grid-template-columns: 1fr; gap: 2rem; }
  .v-img { height: 30vh; }
  .v-year { font-size: 7rem; }
  .a-copy { left: 2rem; right: 2rem; width: auto; }
  .a-feature { display: none; }
  .w-grid { columns: 2; }
  .sl-side, .w-side { border: 0; padding: 0; }
  .t-head, .g-head { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .k-bar { padding: 0 1rem; } .k-assist span { display: none; }
  .c-grid, .r-recs, .sl-grid, .pd-related__row, .l-choices, .b-fields, .m-result, .pp, .k-qr-modal { grid-template-columns: 1fr; }
  .l-choice { width: 80vw; height: 12rem; }
  .q-opts--5, .q-opts--6 { grid-template-columns: repeat(2, 1fr); }
  .w-grid { columns: 1; }
}