/* AL BASIL OPTICALS · V14 "3D website": the building, the hall, and rooms that each hold one part of the site.
   world.js draws the building and hall; rooms.js switches between the hall (body.is-world) and a room (body.in-room). */

/* ---------- the two states ---------- */
.world{position:fixed;inset:0;z-index:30;background:#05070b;color:var(--paper);overflow:hidden;touch-action:none;transition:opacity .45s ease,visibility .45s}
.world__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
body.is-world{overflow:hidden;height:100svh}
body.is-world main,body.is-world .foot,body.is-world .utility,body.is-world .tabbar,body.is-world .live{display:none}
body.in-room .world{opacity:0;visibility:hidden;pointer-events:none}
.rm[hidden]{display:none!important}
.burger{display:block}
.nav__links,.vmode,.cine-wrap{display:none!important}

/* header floats over the 3D world */
body.is-world .nav{position:fixed;inset:env(safe-area-inset-top,0px) 0 auto;background:linear-gradient(180deg,rgba(5,7,11,.72),rgba(5,7,11,0));border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:40}
body.is-world .nav .btn--gold{background:rgba(201,163,92,.92)}
.hallbtn{display:inline-flex;align-items:center;gap:.4rem;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:var(--paper);border-radius:999px;padding:.42rem .85rem .42rem .7rem;font:500 .82rem var(--body);cursor:pointer;backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
.hallbtn i{font-style:normal;transition:transform .25s}
.hallbtn:hover i{transform:translateX(-3px)}
[dir=rtl] .hallbtn i{transform:scaleX(-1)}
.hallbtn[hidden]{display:none}
.nav__room{font:500 .7rem var(--mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--acc,var(--gold-lt));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
@media (max-width:560px){.nav__room{display:none}.brand__word{display:none}body.in-room .brand{display:none}}

/* drawer = the hall directory */
.drawer__k{margin:.6rem 0 .2rem;font:500 .68rem var(--mono,"IBM Plex Mono",monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lt)}
.drawer__rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 1.4rem}
.drawer__rooms a{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:baseline;padding:.75rem 0;border-bottom:1px solid var(--line-lt);text-decoration:none;color:var(--paper)}
.drawer__rooms em{font-style:normal;font-size:.72rem;color:var(--acc)}
.drawer__rooms b{font:500 1.18rem/1.2 var(--display);letter-spacing:-.02em}
.drawer__rooms small{grid-column:2;font-size:.8rem;color:var(--muted-lt)}

/* ---------- loading ---------- */
.world__load{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:1rem;background:radial-gradient(60% 50% at 50% 45%,#141a24,#05070b);font:500 .72rem var(--mono,"IBM Plex Mono",monospace);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lt);transition:opacity .7s}
.world__load img{width:120px;height:auto;animation:wl 1.6s ease-in-out infinite}
.world__load.is-out{opacity:0;pointer-events:none}
@keyframes wl{0%,100%{opacity:.35;filter:drop-shadow(0 0 0 rgba(255,210,122,0))}50%{opacity:1;filter:drop-shadow(0 0 18px rgba(255,210,122,.65))}}

/* door transition: the light of the room fills the screen as you step through */
.world__veil{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(70% 60% at 50% 50%,color-mix(in srgb,var(--acc,#c9a35c) 45%,#0b0d11),#05070b 75%);transition:opacity .55s ease .15s}
.world.is-through .world__veil{opacity:1}

/* ---------- HUD ---------- */
.world__hud{position:absolute;inset:0;z-index:4;pointer-events:none}
.wcard{pointer-events:auto;position:absolute;inset-inline-start:max(24px,env(safe-area-inset-left,0px));bottom:calc(28px + env(safe-area-inset-bottom,0px));width:min(420px,calc(100% - 48px));padding:1.25rem 1.3rem 1.05rem;border-radius:26px;
  background:var(--spot-dk),var(--g-dk);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim-dk),0 30px 60px -30px rgba(0,0,0,.8);border-top:2px solid var(--acc,#c9a35c)}
.wcard.is-in{animation:wcIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes wcIn{from{opacity:0;transform:translateY(14px) scale(.98)}}
.wcard__k{margin:0 0 .35rem;font:500 .68rem var(--mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--acc,var(--gold-lt))}
.wcard__t{margin:0;font:500 clamp(1.5rem,1.1rem + 1.6vw,2.2rem)/1.05 var(--display);letter-spacing:-.035em;color:#fff}
.wcard__l{margin:.5rem 0 .95rem;color:#c9d1db;font-size:.94rem;line-height:1.5}
.wcard__acts{display:flex;align-items:center;gap:.55rem}
.wcard__acts .btn{flex:1;justify-content:center;background:var(--acc,var(--gold));color:#0a0e13;font-weight:600}
.wbtn{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.07);color:#fff;font-size:1.1rem;cursor:pointer;transition:background .2s,opacity .2s}
.wbtn i{font-style:normal}
.wbtn:hover{background:rgba(255,255,255,.16)}
.wbtn:disabled{opacity:.3;cursor:default}
.wcard__hint{margin:.75rem 0 0;font-size:.74rem;color:#8e99a6}
body:not(.is-inside) .wbtn--nav{display:none}

.wmap{pointer-events:auto;position:absolute;inset-inline-end:max(18px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);list-style:none;margin:0;padding:.5rem;display:grid;gap:2px;border-radius:20px;background:rgba(10,14,19,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
body:not(.is-inside) .wmap{display:none}
.wmap button{display:flex;align-items:center;gap:.6rem;border:0;background:none;color:#cbd3dc;padding:.28rem .4rem;cursor:pointer;border-radius:10px;font:500 .74rem var(--body);text-align:start}
.wmap i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--acc,#c9a35c);flex:none;transition:transform .3s,background .3s}
.wmap span{max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .35s,opacity .3s}
.wmap:hover span,.wmap:focus-within span{max-width:220px;opacity:1}
.wmap em{font-style:normal;color:var(--acc,#c9a35c)}
.wmap li.is-on i{background:var(--acc,#c9a35c);transform:scale(1.35);box-shadow:0 0 12px var(--acc,#c9a35c)}
.wmap li.is-on span{max-width:220px;opacity:1;color:#fff}

.woffer{pointer-events:auto;position:absolute;inset-inline-end:max(24px,env(safe-area-inset-right,0px));top:96px;width:min(320px,calc(100% - 48px));display:grid;grid-template-columns:96px 1fr;gap:.8rem;padding:.7rem;border-radius:20px;background:var(--g-dk);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);box-shadow:var(--g-rim-dk);animation:wcIn .6s .2s both}
.woffer[hidden]{display:none}
.woffer img{width:96px;height:96px;object-fit:cover;border-radius:14px}
.woffer b{display:block;font:500 1.02rem/1.2 var(--display);color:#fff}
.woffer span{display:block;font-size:.8rem;color:#c9d1db;margin:.2rem 0 .5rem}
.woffer .eyebrow{margin:0 0 .2rem;font-size:.62rem}

@media (max-width:760px){
  .wcard{inset-inline:12px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:1rem 1rem .85rem;border-radius:22px}
  .wcard__l{font-size:.86rem;margin:.35rem 0 .75rem}
  .wcard__hint{display:none}
  .wmap{top:auto;bottom:auto;top:84px;transform:none;padding:.35rem;gap:0}
  .wmap button{padding:.22rem}
  .wmap li:not(.is-on) span,.wmap:hover li:not(.is-on) span{max-width:0;opacity:0}
  .wmap li.is-on span{display:none}
  .woffer{top:auto;bottom:calc(210px + env(safe-area-inset-bottom,0px));inset-inline:12px;width:auto;grid-template-columns:64px 1fr}
  .woffer img{width:64px;height:64px}
}

/* ---------- without WebGL: a CSS corridor of doors ---------- */
.world__dir{position:absolute;inset:0;z-index:2;overflow:auto;padding:110px 16px 260px;background:radial-gradient(80% 60% at 50% 0%,#1c2330,#06080c 70%)}
.world__dir[hidden]{display:none}
.world.no-gl .world__canvas{display:none}
.wdir__hall{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:22px;perspective:900px}
.wdoor{display:grid;gap:.5rem;text-decoration:none;color:#fff;text-align:center}
.wdoor__sign{font:500 .9rem/1.2 var(--display);padding:.45rem .4rem;border-radius:10px;background:#0e1014;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 18px -6px var(--acc)}
.wdoor__sign em{display:block;font:500 .7rem var(--mono,monospace);font-style:normal;color:var(--acc)}
.wdoor__frame{position:relative;aspect-ratio:3/4.4;border:6px solid #5d4730;border-radius:4px 4px 0 0;background:radial-gradient(60% 70% at 50% 60%,var(--acc),#0b0b0c 80%);box-shadow:0 0 0 2px var(--acc),0 30px 50px -30px var(--acc);transform-style:preserve-3d}
.wdoor__leaf{position:absolute;inset:0;background:linear-gradient(90deg,#2b211a,#3b2c20 60%,#2b211a);transform-origin:0 50%;transition:transform 1s cubic-bezier(.3,.7,.2,1);box-shadow:inset -10px 0 0 -8px #c9a35c}
.wdoor:hover .wdoor__leaf{transform:rotateY(-24deg)}
.wdoor.is-open .wdoor__leaf{transform:rotateY(-100deg)}
.wdoor small{font-size:.76rem;color:#9aa5b1}

/* ---------- a room ---------- */
body.in-room{background:#0b0d11}
.rm{--acc:#c9a35c;position:relative}
.rmh{position:relative;min-height:clamp(560px,92svh,980px);display:grid;align-items:end;overflow:hidden;color:#fff;isolation:isolate;background:#07090c}
.rmh__room{position:absolute;inset:0;perspective:900px;perspective-origin:50% 42%;z-index:-1}
.rmh__box{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(var(--walk,0)*220px)) rotateY(calc(var(--px,0)*-4deg)) rotateX(calc(var(--py,0)*3deg));transition:transform .2s linear}
.rmh__w{position:absolute;display:block}
/* back wall: the room itself (photo or film), framed in light */
.rmh__w--back{left:14%;right:14%;top:12%;bottom:22%;transform:translateZ(-420px);background:#000;box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 70%,#fff),0 0 120px 10px color-mix(in srgb,var(--acc) 45%,transparent)}
.rmh__photo{position:absolute;inset:0;background:#000 center/cover no-repeat;overflow:hidden}
.rmh__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rmh__w--l,.rmh__w--r{top:12%;bottom:22%;width:420px;background:linear-gradient(90deg,#0d0f13,color-mix(in srgb,var(--acc) 22%,#14161b))}
.rmh__w--l{left:14%;transform-origin:0 50%;transform:rotateY(90deg)}
.rmh__w--r{right:14%;transform-origin:100% 50%;transform:rotateY(-90deg)}
.rmh__w--f,.rmh__w--c{left:14%;right:14%;height:420px}
.rmh__w--f{bottom:22%;transform-origin:50% 100%;transform:rotateX(90deg);background:linear-gradient(0deg,color-mix(in srgb,var(--acc) 20%,#1a1712),#0b0a09),repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 80px)}
.rmh__w--c{top:12%;transform-origin:50% 0;transform:rotateX(-90deg);background:repeating-linear-gradient(90deg,transparent 0 30%,rgba(255,236,200,.85) 30% 31%,transparent 31% 69%,rgba(255,236,200,.85) 69% 70%,transparent 70%),#101216}
/* room themes on the side walls */
.rm[data-room=story] .rmh__w--l,.rm[data-room=story] .rmh__w--r{background:var(--sadu,none),linear-gradient(90deg,#2a1d12,#5b4128)}
.rm[data-room=frames] .rmh__w--l,.rm[data-room=frames] .rmh__w--r,.rm[data-room=reading] .rmh__w--l,.rm[data-room=reading] .rmh__w--r{background:repeating-linear-gradient(0deg,rgba(255,226,170,.9) 0 2px,transparent 2px 18%),linear-gradient(90deg,#1b130c,#4a3320)}
.rm[data-room=lens] .rmh__w--l,.rm[data-room=lens] .rmh__w--r{background:linear-gradient(90deg,#120203,#7a0f12)}
.rm[data-room=contacts] .rmh__w--l,.rm[data-room=contacts] .rmh__w--r{background:radial-gradient(40% 30% at 50% 50%,rgba(140,240,255,.35),transparent),linear-gradient(90deg,#03121a,#0f4656)}
.rm[data-room=eyetest] .rmh__w--l,.rm[data-room=eyetest] .rmh__w--r{background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 60px),linear-gradient(90deg,#0b1a1a,#cfe9e5)}
.rm[data-room=workshop] .rmh__w--l,.rm[data-room=workshop] .rmh__w--r{background:radial-gradient(circle,rgba(255,255,255,.18) 1.4px,transparent 1.6px) 0 0/22px 22px,linear-gradient(90deg,#15110d,#4b3423)}
.rm[data-room=acc] .rmh__w--l,.rm[data-room=acc] .rmh__w--r{background:repeating-linear-gradient(0deg,rgba(95,208,193,.55) 0 2px,transparent 2px 25%),repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 1px,transparent 1px 33%),linear-gradient(90deg,#0b1414,#21423f)}
.rm[data-room=people] .rmh__w--l,.rm[data-room=people] .rmh__w--r{background:radial-gradient(60% 40% at 50% 30%,rgba(255,190,140,.35),transparent),linear-gradient(90deg,#1d0f0a,#5e2c1d)}
.rm[data-room=md] .rmh__w--l,.rm[data-room=md] .rmh__w--r{background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 2px,transparent 2px 70px),linear-gradient(90deg,#1a110b,#5a3a22)}
.rm[data-room=showrooms] .rmh__w--l,.rm[data-room=showrooms] .rmh__w--r{background:radial-gradient(circle at 30% 40%,rgba(143,184,255,.9) 0 3px,transparent 4px),radial-gradient(circle at 70% 60%,rgba(143,184,255,.9) 0 3px,transparent 4px),repeating-linear-gradient(35deg,rgba(143,184,255,.12) 0 1px,transparent 1px 30px),linear-gradient(90deg,#070d18,#1d2f4f)}
/* sign over the back wall */
.rmh__sign{position:absolute;left:50%;top:7%;transform:translate3d(-50%,0,-300px);display:grid;justify-items:center;gap:.1rem;padding:.55rem 1.4rem .6rem;border-radius:10px;background:#0c0d10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 40px -8px var(--acc);white-space:nowrap;animation:signOn 2.4s steps(1) .3s both}
.rmh__sign em{font:500 .78rem var(--mono,monospace);font-style:normal;color:var(--acc)}
.rmh__sign b{font:600 1.15rem/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:#fff7e6;text-shadow:0 0 14px color-mix(in srgb,var(--acc) 80%,#fff)}
.rmh__sign small{font:600 .82rem "Noto Kufi Arabic",var(--body);color:var(--acc)}
@keyframes signOn{0%{opacity:.15}8%{opacity:1}12%{opacity:.2}18%{opacity:1}22%{opacity:.4}30%,100%{opacity:1}}
/* the double door you just came through, opening onto the room */
.rmh__leaf{position:absolute;top:0;bottom:0;width:50.5%;z-index:2;background:linear-gradient(90deg,#241a13,#3a2a1e 70%,#2a1f17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);transition:transform 1.25s cubic-bezier(.55,.05,.25,1),opacity 1.25s;transform-style:preserve-3d;pointer-events:none;opacity:0}
.rmh__leaf::after{content:"";position:absolute;top:38%;width:6px;height:24%;background:linear-gradient(#e7c98d,#a5803f);border-radius:3px}
.rmh__leaf--l{left:0;transform-origin:0 50%}
.rmh__leaf--l::after{right:22px}
.rmh__leaf--r{right:0;transform-origin:100% 50%}
.rmh__leaf--r::after{left:22px}
.rmh.is-enter .rmh__leaf{animation:leafL 1.5s cubic-bezier(.55,.05,.25,1) both}
.rmh.is-enter .rmh__leaf--r{animation-name:leafR}
@keyframes leafL{0%{opacity:1;transform:rotateY(0)}100%{opacity:0;transform:rotateY(-105deg)}}
@keyframes leafR{0%{opacity:1;transform:rotateY(0)}100%{opacity:0;transform:rotateY(105deg)}}
.rmh.is-enter .rmh__box{animation:walkIn 2.1s cubic-bezier(.2,.75,.2,1) both}
@keyframes walkIn{0%{transform:translateZ(-260px) scale(.96);filter:brightness(.35)}35%{filter:brightness(.8)}100%{transform:translateZ(0);filter:none}}
.rmh.is-enter .rmh__copy>*{animation:copyIn .9s cubic-bezier(.2,.8,.2,1) both}
.rmh.is-enter .rmh__copy>:nth-child(1){animation-delay:.75s}.rmh.is-enter .rmh__copy>:nth-child(2){animation-delay:.85s}.rmh.is-enter .rmh__copy>:nth-child(3){animation-delay:.95s}.rmh.is-enter .rmh__copy>:nth-child(4){animation-delay:1.05s}
@keyframes copyIn{from{opacity:0;transform:translateY(24px)}}
/* copy */
.rmh::after{content:"";position:absolute;inset:auto 0 0;height:62%;z-index:-1;background:linear-gradient(0deg,#07090c 8%,rgba(7,9,12,.82) 45%,rgba(7,9,12,0))}
.rmh__copy{padding-block:7rem clamp(2.2rem,5vw,4rem)}
.rmh__k{margin:0 0 .8rem;font:500 .72rem var(--mono,"IBM Plex Mono",monospace);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.rmh__t{margin:0;max-width:16ch;font:500 clamp(2.5rem,1.4rem + 5vw,5.6rem)/.98 var(--display);letter-spacing:-.045em}
.rmh__t em{display:block;font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;color:color-mix(in srgb,var(--acc) 55%,#fff)}
[dir=rtl] .rmh__t,[dir=rtl] .rmh__t em{letter-spacing:0;font-style:normal;font-family:var(--display)}
.rmh__l{max-width:60ch;margin:1.1rem 0 1.5rem;color:#d3dae2;font-size:clamp(1rem,.95rem + .3vw,1.15rem);line-height:1.6}
.rmh__in{display:flex;flex-wrap:wrap;gap:.5rem}
.rmh__in a{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem .95rem;border-radius:999px;color:#fff;text-decoration:none;font-size:.86rem;background:rgba(255,255,255,.08);box-shadow:var(--g-rim-dk);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .25s}
.rmh__in a::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc)}
.rmh__in a:hover{background:rgba(255,255,255,.16)}
.rmh__in a[hidden]{display:none}
@media (max-width:760px){
  .rmh{min-height:clamp(520px,88svh,820px)}
  .rmh__room{perspective:600px}
  .rmh__w--back{left:8%;right:8%;top:14%;bottom:40%;transform:translateZ(-300px)}
  .rmh__w--l,.rmh__w--r{top:14%;bottom:40%;width:300px}
  .rmh__w--l{left:8%}
  .rmh__w--r{right:8%}
  .rmh__w--f,.rmh__w--c{left:8%;right:8%;height:300px}
  .rmh__w--f{bottom:40%}
  .rmh__w--c{top:14%}
  .rmh__sign{top:10%;transform:translate3d(-50%,0,-200px);padding:.4rem .9rem}
  .rmh__sign b{font-size:.95rem}
  .rmh__copy{padding-block:5rem 2rem}
  .rmh::after{height:70%}
}
@media (prefers-reduced-motion:reduce){.rmh__box{transform:none!important;transition:none}.rmh__sign{animation:none}}

/* sections inside a room sit like exhibits: the room's colour runs along their edge */
.rm>section,.rm>nav.clp-tabs,.rm>.pp-rooms{position:relative}
.rm>section:first-of-type{border-top:0}
.rm .sec{scroll-margin-top:80px}
.rm .trust{margin-top:0}

/* leave the room */
.rmx{background:#07090c;color:#fff;padding:clamp(3rem,7vw,5.5rem) 0 clamp(6rem,10vw,7rem)}
.rmx__in{display:grid;justify-items:center;gap:1.1rem;text-align:center}
.rmx__k{margin:0;font:500 .72rem var(--mono,"IBM Plex Mono",monospace);letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.rmx__door{display:flex;align-items:center;gap:1.1rem;padding:1rem 1.6rem 1rem 1rem;border-radius:24px;border:0;cursor:pointer;color:#fff;background:var(--spot-dk),var(--g-dk);box-shadow:var(--g-rim-dk),0 0 60px -20px var(--acc);text-align:start;transition:transform .3s}
.rmx__door:hover{transform:translateY(-2px)}
.rmx__door i{position:relative;width:46px;height:64px;border-radius:4px 4px 0 0;border:3px solid #6a5132;background:radial-gradient(70% 70% at 50% 60%,var(--acc),#111 85%);perspective:200px}
.rmx__door i::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#2b211a,#3b2c20);transform-origin:0 50%;transition:transform .6s;box-shadow:inset -3px 0 0 -1px #c9a35c}
.rmx__door:hover i::before{transform:rotateY(-70deg)}
.rmx__door small{display:block;font-size:.78rem;color:#9aa5b1}
.rmx__door b{display:block;font:500 1.35rem/1.1 var(--display);letter-spacing:-.02em}

/* room-specific fixes for blocks that came from sub-pages */
.rm .pp-hero{min-height:auto}
.rm .pp-hero__bg{display:none}
.rm .clp-hero{padding-top:clamp(2.5rem,5vw,4rem)}
.rop-sec .perks__grid--one{display:block;max-width:760px}
.free-sec .freebox{margin-top:1rem}
.mdroom .leader--md{margin-block:0}

/* brands wall (owner admin › Brands) */
.brw__wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.brw__b{display:grid;place-items:center;gap:.35rem;min-height:110px;padding:1rem;border-radius:18px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:transform .25s,box-shadow .25s}
.brw__b:hover,.brw__b[aria-pressed=true]{transform:translateY(-3px);box-shadow:0 18px 30px -18px rgba(10,14,19,.45);border-color:var(--gold)}
.brw__b img{max-width:100%;max-height:54px;object-fit:contain}
.brw__b b{font:600 1.1rem var(--display)}
.brw__b small{font-size:.72rem;color:var(--muted)}
.brw__show{margin-top:1.4rem;padding:1.2rem;border-radius:22px;background:#fff;border:1px solid var(--line)}
.brw__head{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.brw__head img{max-height:48px;max-width:140px;object-fit:contain}
.brw__head h3{margin:0;font-size:1.4rem}
.brw__head p{margin:.2rem 0 0;color:var(--muted);max-width:60ch}
.brw__head>div{flex:1;min-width:200px}
.brw__ph{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:1rem}
.brw__ph figure{margin:0}
.brw__ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:var(--ivory)}
.brw__ph figcaption{font-size:.78rem;color:var(--muted);margin-top:.3rem}

/* tab bar in rooms */
body.in-room .tabbar a[data-hall]{color:var(--gold-lt)}

/* more photos of one model (owner admin › Eyewear models › More photos) */
.sheet__img{position:relative}
.sheet__thumbs{position:absolute;inset:auto 10px 10px;display:flex;gap:6px;overflow-x:auto}
.sheet__thumbs[hidden]{display:none}
.sheet__thumbs button{flex:none;width:52px;height:52px;padding:0;border-radius:10px;border:2px solid transparent;background:#fff;overflow:hidden;cursor:pointer}
.sheet__thumbs button[aria-pressed=true]{border-color:var(--gold)}
.sheet__thumbs img{width:100%;height:100%;object-fit:cover}
/* the hall directory over the 3D world needs its own solid glass */
body.is-world .drawer{background:rgba(7,9,12,.96);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);max-height:calc(100svh - 70px);border-radius:0 0 22px 22px}

/* ---------- V25 · the normal website: every room one after another, no 3D ---------- */
body.is-classic .world{display:none}
body.is-classic .rmh{min-height:clamp(420px,62svh,680px)}
body.is-classic .rmh__leaf{display:none}
body.is-classic .rm+.rm{border-top:1px solid rgba(255,255,255,.08)}
body.is-classic{background:#0b0d11}
.to-world{position:fixed;inset-inline-end:max(14px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;display:inline-flex;align-items:center;gap:.5rem;border:0;border-radius:999px;padding:.7rem 1.1rem;
  font:600 .9rem var(--body);color:#14100a;cursor:pointer;background:linear-gradient(180deg,#f1d79f,#c9a35c);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 30px -10px rgba(0,0,0,.7)}
.to-world i{font-style:normal}
.to-world[hidden]{display:none}
body.is-classic .tabbar~.to-world,body.is-classic .to-world{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media (min-width:761px){body.is-classic .to-world{bottom:calc(20px + env(safe-area-inset-bottom,0px))}}