/* Look switcher — "Choose your Souqly". Centered gallery on computers, bottom sheet on phones. */
.lk{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;padding:24px;font-family:var(--x-font,'Readex Pro','Inter Tight',system-ui,sans-serif)}
.lk[hidden]{display:none}
.lk-veil{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0%,rgba(40,30,80,.55),rgba(5,6,12,.82));backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);opacity:0;transition:opacity .35s}
.lk-sheet{position:relative;width:min(1040px,100%);max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#14151f,#0d0e16);color:#f4f2ee;border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:30px 30px 22px;box-shadow:0 40px 120px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);opacity:0;transform:translateY(18px) scale(.97);transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1)}
html.lk-open .lk-veil{opacity:1}
html.lk-open .lk-sheet{opacity:1;transform:none}
html.lk-going .lk-sheet{opacity:0;transform:scale(.98)}
.lk-grip{display:none}
.lk-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.lk-k{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e9c46a}
html[dir=rtl] .lk-k{letter-spacing:0;font-size:13px}
.lk-k i{width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,#e9c46a,#8b5cf6,#2563eb)}
.lk-h h2{margin:8px 0 6px;font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.01em;color:#fff;font-weight:800;font-family:inherit}
.lk-h p{margin:0;color:rgba(244,242,238,.66);font-size:15px;max-width:560px;line-height:1.6}
.lk-x{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .2s,transform .2s}
.lk-x:hover{background:rgba(255,255,255,.14);transform:rotate(90deg)}
.lk-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.lk-card{--ac:#e9c46a;position:relative;display:flex;flex-direction:column;text-align:start;padding:10px 10px 16px;border-radius:22px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:inherit;font:inherit;cursor:pointer;opacity:0;transform:translateY(14px);transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .25s,background .25s,box-shadow .35s,opacity .4s;transition-delay:calc(var(--i)*60ms)}
html.lk-open .lk-card{opacity:1;transform:none}
.lk-sp{--ac:#a78bfa}.lk-ed{--ac:#60a5fa}
.lk-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.06);border-color:color-mix(in srgb,var(--ac) 50%,transparent);box-shadow:0 24px 50px -24px color-mix(in srgb,var(--ac) 60%,transparent)}
.lk-card:focus-visible{outline:2px solid var(--ac);outline-offset:3px}
.lk-card.on{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 9%,rgba(255,255,255,.03));box-shadow:0 0 0 1px var(--ac),0 24px 60px -28px color-mix(in srgb,var(--ac) 70%,transparent)}
.lk-shot{position:relative;display:block;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#000;box-shadow:0 10px 30px -14px rgba(0,0,0,.9)}
.lk-shot img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.lk-card:hover .lk-shot img{transform:scale(1.045)}
.lk-glare{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-100%);transition:transform .9s}
.lk-card:hover .lk-glare{transform:translateX(100%)}
.lk-badge{position:absolute;top:10px;inset-inline-start:10px;padding:5px 11px;border-radius:99px;background:var(--ac);color:#111;font-size:12px;font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.lk-info{display:flex;flex-direction:column;gap:4px;padding:14px 6px 0;padding-inline-end:44px}
.lk-name{display:flex;align-items:center;gap:9px}
.lk-name b{font-size:18px;color:#fff}
.lk-name .sqx-sw{width:18px;height:18px}
.lk-info small{color:rgba(244,242,238,.72);font-size:13.5px;line-height:1.5}
.lk-info em{font-style:normal;font-size:12px;color:var(--ac);font-weight:600;margin-top:2px}
.lk-go{position:absolute;bottom:16px;inset-inline-end:14px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);color:#fff;transition:background .25s,transform .25s}
.lk-card:hover .lk-go{background:var(--ac);color:#111;transform:translateX(3px)}
html[dir=rtl] .lk-card:hover .lk-go{transform:translateX(-3px)}
.lk-card.on .lk-go{background:var(--ac);color:#111}
.lk-cta{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lk-foot{margin:18px 2px 0;color:rgba(244,242,238,.55);font-size:13px;line-height:1.6}
.lk-hint,.sqx-dock,.sqx-dock-tip{display:none!important}
html.lk-open,html.lk-open body{overflow:hidden}

/* Phones: a bottom sheet with one row per look */
@media (max-width:760px){
  .lk{padding:0;place-items:end stretch}
  .lk-sheet{width:100%;max-height:88vh;border-radius:26px 26px 0 0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));border-bottom:0;transform:translateY(100%)}
  html.lk-open .lk-sheet{transform:none}
  .lk-grip{display:block;width:44px;height:5px;border-radius:5px;background:rgba(255,255,255,.25);margin:4px auto 14px}
  .lk-h{margin-bottom:14px}
  .lk-h h2{font-size:23px;margin:6px 0 4px}
  .lk-h p{font-size:13.5px}
  .lk-x{width:40px;height:40px}
  .lk-list{grid-template-columns:1fr;gap:10px}
  .lk-card{flex-direction:row;align-items:center;gap:12px;padding:8px;border-radius:18px;transform:translateY(10px)}
  .lk-card:hover{transform:none}
  .lk-shot{flex:none;width:118px;aspect-ratio:16/11;border-radius:12px}
  .lk-badge{top:6px;inset-inline-start:6px;padding:3px 8px;font-size:10.5px}
  .lk-info{padding:0;padding-inline-end:40px;min-width:0}
  .lk-name b{font-size:16px}
  .lk-info small{font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .lk-info em{font-size:11.5px}
  .lk-go{bottom:auto;top:50%;margin-top:-16px;width:32px;height:32px;inset-inline-end:10px}
  .lk-foot{font-size:12px;margin-top:12px}
}
@media (prefers-reduced-motion:reduce){.lk-sheet,.lk-card,.lk-veil,.lk-shot img,.lk-glare{transition:none!important}}

/* The button in the menu */
.sqx-era-btn{position:relative;gap:10px;height:42px;padding:0 14px 0 6px!important;border-radius:99px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:inherit;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
html[dir=rtl] .sqx-era-btn{padding:0 6px 0 14px!important}
.sqx-era-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.sqx-era-btn .sqx-sws{padding:4px 6px;border-radius:99px;background:rgba(0,0,0,.25)}
body.sqx:not(.sqr) .sqx-era-btn{border-color:rgba(10,12,27,.14);background:rgba(10,12,27,.04)}
html.sqx-dark-nav body.sqx:not(.sqr) .sqx-era-btn{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.08)}
@media (max-width:760px){.sqx-era-btn{padding:0 4px!important;height:40px}.sqx-era-btn .sqx-sws{background:transparent}}
