#dag-lightbox {
  position:fixed;
  inset:0;
  z-index:999999;
  display:none;
}

#dag-lightbox .dag-lightbox__backdrop {
  position:absolute;
  inset:0;
  background:var(--c-000000bf);
}

#dag-lightbox .dag-lightbox__close {
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--c-ffffff40);
  background:var(--c-00000066);
  color:var(--color-white);
  font-size:28px;
  line-height:1;
}

#dag-lightbox .dag-lightbox__counter {
  position:absolute;
  left:18px;
  bottom:18px;
  background:var(--c-00000066);
  color:var(--color-white);
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--c-ffffff2e);
}

#dag-lightbox .dag-lightbox__frame {
  position:absolute;
  inset:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#dag-lightbox .dag-lightbox__img {
  max-width:calc(100vw - 80px);
  max-height:calc(100vh - 120px);
  border-radius:16px;
  box-shadow:0 30px 80px var(--c-00000080);
  background:var(--color-black);
}

#dag-lightbox .dag-lightbox__nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:999px;
  border:1px solid var(--c-ffffff40);
  background:var(--c-00000059);
  color:var(--color-white);
  font-size:34px;
  line-height:1;
}

#dag-lightbox .dag-lightbox__nav--next {
  right:18px;
}

#dag-lightbox .dag-lightbox__nav--prev {
  left:18px;
}

#dag-lightbox.is-open {
  display:block;
}

.dag-lightbox {
  display:none;
  inset:0;
  position:fixed;
  z-index:99999;
}

.dag-lightbox.is-open {
  display:block;
}

.dag-lightbox__backdrop {
  background:var(--c-000000e0);
  inset:0;
  position:absolute;
}

.dag-lightbox__close {
  align-items:center;
  background:var(--c-00000059);
  border-radius:999px;
  border:1px solid var(--c-ffffff38);
  color:var(--color-white);
  cursor:pointer;
  display:flex;
  font-size:26px;
  height:44px;
  justify-content:center;
  line-height:1;
  position:absolute;
  right:16px;
  top:16px;
  width:44px;
}

.dag-lightbox__counter {
  background:var(--c-0000008c);
  border-radius:999px;
  border:1px solid var(--c-ffffff2e);
  bottom:18px;
  color:var(--color-white);
  font-size:13px;
  left:50%;
  padding:8px 12px;
  position:absolute;
  transform:translateX(-50%);
}

.dag-lightbox__frame {
  align-items:center;
  display:flex;
  inset:0;
  justify-content:center;
  padding:18px;
  position:absolute;
}

.dag-lightbox__img {
  border-radius:14px;
  box-shadow:0 20px 60px var(--c-0000008c);
  height:auto;
  max-height:calc(100vh - 120px);
  max-width:min(1100px,100%);
  width:auto;
}

.dag-lightbox__nav {
  align-items:center;
  background:var(--c-00000059);
  border-radius:999px;
  border:1px solid var(--c-ffffff38);
  color:var(--color-white);
  cursor:pointer;
  display:flex;
  font-size:28px;
  height:52px;
  justify-content:center;
  line-height:1;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
}

.dag-lightbox__nav--next {
  right:16px;
}

.dag-lightbox__nav--prev {
  left:16px;
}

.dag-inv-card__media, .dag-lightbox__frame, .dag-stage {
  position:relative;
}

#dag-lightbox .dag-lightbox__close, #dag-lightbox .dag-lightbox__nav, .dag-lightbox__close, .dag-lightbox__nav, .dag-nav, .vehicle-nav {
  transition:transform var(--anim-med) var(--ease-out),  box-shadow var(--anim-med) var(--ease-out),  background-color var(--anim-med) var(--ease-out);
  will-change:transform;
}

#dag-lightbox .dag-lightbox__close:hover, #dag-lightbox .dag-lightbox__nav:hover, .dag-lightbox__close:hover, .dag-lightbox__nav:hover, .dag-nav:hover, .vehicle-nav:hover {
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 16px 40px var(--c-0000002e);
}

#dag-lightbox {
  display:block!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--anim-med) var(--ease-out),  visibility 0s linear var(--anim-med);
}

#dag-lightbox.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--anim-med) var(--ease-out);
}

#dag-lightbox .dag-lightbox__backdrop {
  opacity:0;
  transition:opacity var(--anim-med) var(--ease-out);
}

#dag-lightbox.is-open .dag-lightbox__backdrop {
  opacity:1;
}

#dag-lightbox .dag-lightbox__img {
  opacity:0;
  transform:scale(.98);
  transition:opacity var(--anim-med) var(--ease-out),  transform var(--anim-med) var(--ease-spring);
}

#dag-lightbox.is-open .dag-lightbox__img {
  opacity:1;
  transform:scale(1);
}

.dag-lightbox {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity var(--anim-med) var(--ease-out),  visibility 0s linear var(--anim-med);
}

.dag-lightbox.is-open {
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition:opacity var(--anim-med) var(--ease-out);
}

.dag-lightbox__backdrop {
  opacity:0;
  transition:opacity var(--anim-med) var(--ease-out);
}

.dag-lightbox.is-open .dag-lightbox__backdrop {
  opacity:1;
}

.dag-lightbox__img {
  opacity:0;
  transform:scale(.98);
  transition:opacity var(--anim-med) var(--ease-out),  transform var(--anim-med) var(--ease-spring);
}

.dag-lightbox.is-open .dag-lightbox__img {
  opacity:1;
  transform:scale(1);
}

#dag-lightbox {
  display:none;
  position:fixed;
  inset:0;
  z-index:99999;
}

#dag-lightbox .dag-lightbox__img {
  max-width:calc(100vw - 80px);
  max-height:calc(100vh - 80px);
  border-radius:16px;
  box-shadow:0 30px 80px var(--c-00000080);
  background:var(--color-black);
}

#dag-lightbox .dag-lightbox__close {
  position:absolute;
  top:18px;
  right:18px;
  width:44px;
  height:44px;
  border-radius:99px;
  border:1px solid var(--c-ffffff2e);
  background:var(--c-00000066);
  color:var(--color-white);
  font-size:28px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}

#dag-lightbox .dag-lightbox__nav {
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:50px;
  height:50px;
  border-radius:99px;
  border:1px solid var(--c-ffffff2e);
  background:var(--c-00000059);
  color:var(--color-white);
  font-size:34px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
}

#dag-lightbox .dag-lightbox__counter {
  position:absolute;
  left:18px;
  bottom:18px;
  color:var(--color-white);
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid var(--c-ffffff2e);
  background:var(--c-00000059);
}

@media (max-width:640px) {
  .dag-lightbox__close {
      right:10px;
      top:10px;
  }
  
    .dag-lightbox__frame {
      padding:12px;
  }
  
    .dag-lightbox__img {
      max-height:calc(100vh - 140px);
  }
  
    .dag-lightbox__nav {
      font-size:26px;
      height:46px;
      width:46px;
  }
  
    .dag-lightbox__nav--next {
      right:10px;
  }
  
    .dag-lightbox__nav--prev {
      left:10px;
  }
  
    #dag-lightbox .dag-lightbox__frame {
      inset:12px;
  }
  
    #dag-lightbox .dag-lightbox__img {
      max-width:calc(100vw - 40px);
      max-height:calc(100vh - 90px);
  }
}

@media (prefers-reduced-motion:reduce) {
  .dag-lightbox__img {
      transition:none;
  }
}