/* The dialog follows the photograph's natural proportions, with no fixed panel. */
.lightbox {
  inset:70px 20px 80px;
  width:max-content;
  height:max-content;
  max-width:calc(100vw - 40px);
  max-height:calc(100dvh - 150px);
  margin:auto;
  padding:0;
  overflow:visible;
  border:0;
  background:transparent;
  color:#fffdf7;
  box-shadow:none;
}
.lightbox::backdrop {
  background:#1c1a18ed;
  backdrop-filter:blur(5px);
}
.lightbox-layout {
  display:block;
  width:max-content;
  max-width:100%;
  min-height:0;
  height:max-content;
}
.lightbox-image {
  display:block;
  width:auto;
  height:auto;
  max-width:calc(100vw - 40px);
  max-height:calc(100dvh - 150px);
  background:transparent;
  border-radius:3px;
}
.viewer-toolbar {
  position:fixed;
  top:14px;
  left:24px;
  right:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:44px;
  font-family:'Manrope',Arial,sans-serif;
}
.viewer-toolbar p {
  font-size:10px;
  opacity:.7;
}
.viewer-toolbar h2 {
  margin-top:3px;
  font-size:14px;
  font-weight:500;
  line-height:1.4;
}
.viewer-toolbar .lightbox-close {
  position:static;
  display:flex;
  align-items:center;
  gap:9px;
  width:auto;
  min-width:44px;
  height:44px;
  padding:10px 14px;
  border:1px solid #ffffff50;
  border-radius:999px;
  background:#2a2521;
  color:#fffdf7;
  font-size:11px;
}
.lightbox-close svg {width:18px;height:18px}
.viewer-bottom {
  position:fixed;
  bottom:16px;
  left:24px;
  right:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px 30px;
}
.viewer-bottom .lightbox-controls {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0;
  padding:0;
}
.lightbox-controls button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-height:44px;
  height:auto;
  padding:10px 14px;
  border:1px solid #ffffff50;
  border-radius:999px;
  background:#2a2521;
  color:#fffdf7;
  font-family:'Manrope',Arial,sans-serif;
  font-size:11px;
}
.lightbox-controls button svg {width:17px;height:17px}
.lightbox-controls span {margin:0;font-size:11px;color:inherit}
.lightbox-controls>[data-viewer-counter] {min-width:48px;text-align:center;font-variant-numeric:tabular-nums}
.viewer-store {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:8px 12px;
  border-bottom:1px solid #ffffff70;
  font-family:'Manrope',Arial,sans-serif;
  font-size:11px;
}
.viewer-store svg {width:16px;height:16px}
.lightbox :is(button,a):focus-visible {outline:2px solid #fffdf7;outline-offset:4px}
[data-carousel] .gallery-photo .gallery-plus {
  display:flex;
  align-items:center;
  gap:5px;
  width:auto;
  height:32px;
  padding:6px 10px;
  border-radius:999px;
  font-family:'Manrope',Arial,sans-serif;
  font-size:10px;
}
.gallery-plus svg {width:14px;height:14px}
@media(max-width:600px) {
  .lightbox {inset:70px 12px 120px}
  .lightbox,.lightbox-image {max-width:calc(100vw - 24px);max-height:calc(100dvh - 210px)}
  .viewer-toolbar {left:12px;right:12px;gap:10px}
  .viewer-toolbar h2 {font-size:12px}
  .viewer-bottom {left:12px;right:12px;bottom:10px;gap:6px}
  .viewer-bottom .lightbox-controls {gap:8px}
  .lightbox-controls button {gap:5px;padding:10px;font-size:10px}
  .lightbox-controls button span {font-size:10px}
}