[data-lb] { cursor: zoom-in; position: relative; display: block; border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: inherit; width: 100%; }
[data-lb] .zoom { position: absolute; right: 8px; bottom: 8px; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #2B1D16;
  display: grid; place-items: center; font: 700 18px Fredoka, sans-serif; box-shadow: 0 3px 8px rgba(43,29,22,.25); opacity: .92; transition: transform .15s ease; }
[data-lb]:hover .zoom, [data-lb]:focus-visible .zoom { transform: scale(1.12); }
[data-lb]:focus-visible { outline: 3px solid #2B1D16; outline-offset: 4px; border-radius: 10px; }
[data-lb] .pages { position: absolute; left: 8px; top: 8px; background: #2B1D16; color: #fff; font: 700 12px Fredoka, sans-serif; padding: 3px 9px; border-radius: 999px; }

.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(27,18,13,.88); display: none; align-items: center; justify-content: center; padding: 16px; }
.lb.open { display: flex; }
.lb figure { margin: 0; max-width: min(92vw, 820px); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lb img { max-width: 100%; max-height: calc(100vh - 90px); width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.45); background: #fff; }
.lb figcaption { color: #fff; font: 600 15px Fredoka, sans-serif; margin-top: 10px; display: flex; gap: 14px; }
.lb .lb-count { opacity: .75; }
.lb button { position: absolute; border: 0; background: #fff; color: #2B1D16; width: 48px; height: 48px; border-radius: 50%; font: 700 30px/1 Fredoka, sans-serif; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.lb button:focus-visible { outline: 3px solid #FFCB2E; outline-offset: 3px; }
.lb .lb-close { top: 14px; right: 14px; }
.lb .lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb .lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb.single .lb-prev, .lb.single .lb-next { display: none; }
@media (max-width: 759px) {
  .lb .lb-prev, .lb .lb-next { top: auto; bottom: 14px; transform: none; }
  .lb img { max-height: calc(100vh - 150px); }
}
@media (prefers-reduced-motion: reduce) { [data-lb] .zoom { transition: none; } }