/* AL BASIL OPTICALS · V24 · our own photos in the rooms (real.js) and the virtual try-on (tryon.js) */
.real{padding-block:clamp(56px,8vw,110px);overflow:hidden}
.real__head{display:grid;gap:.6rem;margin-bottom:clamp(20px,3vw,34px)}
.real__head .h2{color:#fff;margin:0}.real__head .sec__lede{color:rgba(236,230,214,.72);max-width:56ch;margin:0}
.real__try{justify-self:start;margin-top:.6rem}
.real__strip{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px max(16px,calc((100vw - 1180px)/2)) 18px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.real__fig{flex:0 0 min(78vw,420px);margin:0;scroll-snap-align:center;border-radius:20px;overflow:hidden;background:#111317;border:1px solid rgba(233,207,149,.16);box-shadow:0 18px 40px -22px rgba(0,0,0,.7);animation:realIn .7s calc(var(--i)*70ms) both cubic-bezier(.2,.8,.2,1)}
.real__fig button{all:unset;display:block;cursor:zoom-in;width:100%}
.real__fig img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.real__fig:hover img{transform:scale(1.04)}
.real__fig figcaption{padding:12px 16px 14px;font:500 .84rem/1.4 var(--sans,Inter,sans-serif);color:#ece6d6}
@keyframes realIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.real__lb{position:fixed;inset:0;z-index:120;display:grid;place-items:center;background:rgba(5,6,9,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:16px}
.real__lb[hidden]{display:none}
.real__lb figure{margin:0;max-width:min(1100px,100%);display:grid;gap:10px}
.real__lb img{max-width:100%;max-height:78vh;border-radius:14px;object-fit:contain}
.real__lb figcaption{color:#ece6d6;font:500 .9rem var(--sans,Inter,sans-serif);text-align:center}
.real__x,.real__nav{position:absolute;border:0;border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:1.6rem;width:46px;height:46px;cursor:pointer}
.real__x{top:max(14px,env(safe-area-inset-top));inset-inline-end:14px}
.real__nav--p{inset-inline-start:10px;top:50%}.real__nav--n{inset-inline-end:10px;top:50%}
.frame__try{position:absolute;top:10px;inset-inline-end:12px;font-size:.9rem;color:#b88a35}
.btn--gold{background:linear-gradient(120deg,#c9a35c,#f1d79c 55%,#c9a35c);color:#1a1307;border:0}
/* try-on */
.to{position:fixed;inset:0;z-index:130;display:grid;place-items:center;background:rgba(4,5,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .25s ease;padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
.to.is-open{opacity:1}.to[hidden]{display:none}
.to__card{width:min(560px,100%);max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:10px;background:linear-gradient(180deg,#14161b,#0b0c10);border:1px solid rgba(233,207,149,.2);border-radius:24px;padding:14px;color:#f3ecdc;overflow:hidden}
.to__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.to__k{margin:0;font:600 .66rem var(--mono,monospace);letter-spacing:.2em;text-transform:uppercase;color:#e9cf95}
.to__t{margin:.2rem 0 0;font:600 1.02rem/1.3 var(--sans,Inter,sans-serif)}
.to__x{border:0;background:rgba(255,255,255,.08);color:#fff;border-radius:999px;width:40px;height:40px;font-size:1.4rem;cursor:pointer;flex:none}
.to__stage{position:relative;border-radius:18px;overflow:hidden;background:#0b0d12;min-height:46vh;aspect-ratio:3/4;max-height:58vh;justify-self:center;width:100%}
.to__stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab}
.to__stage video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.to__msg{position:absolute;inset:auto 14px 14px;margin:0;text-align:center;font:500 .86rem/1.4 var(--sans,Inter,sans-serif);color:#e9e2cf;pointer-events:none}
.to__mode{position:absolute;top:10px;inset-inline-start:10px;padding:5px 10px;border-radius:999px;background:rgba(0,0,0,.45);font:600 .7rem var(--sans,Inter,sans-serif);color:#9ff0c0}
.to__ctl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.to__b{border:1px solid rgba(233,207,149,.35);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:9px 14px;font:600 .82rem var(--sans,Inter,sans-serif);cursor:pointer}
.to__b--cam{background:linear-gradient(120deg,#c9a35c,#f1d79c);color:#1a1307;border:0}
.to__b:disabled{opacity:.4;cursor:default}
.to__rng{display:flex;align-items:center;gap:8px;font:500 .78rem var(--sans,Inter,sans-serif);color:#cfc6b0;flex:1 1 150px}.to__rng input{flex:1;accent-color:#c9a35c}
.to__pick{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.to__pick button{flex:0 0 96px;border:1px solid rgba(255,255,255,.12);background:#f4f1ea;border-radius:12px;padding:6px;display:grid;gap:3px;cursor:pointer}
.to__pick button[aria-selected=true]{outline:2px solid #e9cf95;outline-offset:1px}
.to__pick img{width:100%;height:38px;object-fit:contain}.to__pick span{font:600 .62rem var(--sans,Inter,sans-serif);color:#3a3226;min-height:.8em}
.to__foot{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between}
.to__foot p{margin:0;font:400 .7rem/1.4 var(--sans,Inter,sans-serif);color:rgba(236,230,214,.6);flex:1 1 220px}
.to__ask{font:600 .78rem var(--sans,Inter,sans-serif);color:#9ff0c0;text-decoration:none}
@media (max-width:560px){.to__card{border-radius:18px;padding:10px}.to__stage{min-height:0;max-height:52vh}}
@media (prefers-reduced-motion:reduce){.real__fig{animation:none}}
.frame{position:relative}