/* hassan-parts lightbox 1.1.2. Copied by sync.mjs: edit it in ~/development/hassan-parts. */
.lightbox { position:fixed; inset:0; z-index:40; background:var(--lb-bg, #121710); display:none; flex-direction:column; color:#fff; }
.lightbox.on { display:flex; }
.lb-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:calc(10px + env(safe-area-inset-top)) 12px 8px; }
.lb-tabs { display:flex; background:rgba(255,255,255,.12); border-radius:999px; padding:3px; }
.lb-tabs button { font:inherit; font-size:15px; font-weight:500; color:#fff; background:none; border:0; border-radius:999px; padding:8px 18px; cursor:pointer; }
.lb-tabs button.on { background:#fff; color:var(--lb-ink, #1f2a1c); }
.lb-title { font-size:15px; font-weight:500; padding:0 6px; }
.lb-close { width:40px; height:40px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:22px; line-height:1; cursor:pointer; flex:none; }
.lb-track { flex:1; min-height:0; overflow:hidden; touch-action:pan-y; overscroll-behavior:contain; }
.lb-strip { display:flex; height:100%; will-change:transform; }
.lb-slide { flex:0 0 100%; min-width:0; display:flex; align-items:center; justify-content:center; padding:4px 12px; overflow:auto; }
.lb-slide img, .lb-slide video { -webkit-user-drag:none; user-select:none; -webkit-user-select:none; }
.lb-slide.zoom { touch-action:auto; }
.lb-slide img, .lb-slide video { max-width:100%; max-height:100%; object-fit:contain; border-radius:10px; cursor:zoom-in; }
.lb-slide.zoom { display:block; }
.lb-slide.zoom img { max-width:none; max-height:none; width:220%; cursor:zoom-out; }
.lb-foot { text-align:center; font-size:13px; line-height:1.4; color:rgba(255,255,255,.72); padding:8px 16px calc(12px + env(safe-area-inset-bottom)); min-height:44px; }
.lb-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:22px; cursor:pointer; }
.lb-arrow.l { left:12px; }
.lb-arrow.r { right:12px; }
.lb-arrow[hidden] { display:none; }
@media (hover:none) { .lb-arrow { display:none; } }