/* lightbox — the whole screen over a photo, as lightbox.js builds it: the picture, its caption and count, the
   arrows and «close». */

/* The whole screen: the same photos, whole, on a dark veil. */
.product-lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: color-mix(in srgb, var(--shade) 94%, transparent);
  color: #fff;
}

.product-lightbox::backdrop { background: transparent; }

.product-lightbox__img { position: absolute; inset: 5.5rem 6rem 3.5rem; width: calc(100% - 12rem); height: calc(100% - 9rem); object-fit: contain; }

/* the top clears the ✕, the sides the arrows */
.product-lightbox__btn {
  position: absolute; display: grid; place-items: center;
  width: 2.8rem; height: 2.8rem; padding: 0;
  border: 1px solid rgb(255 255 255 / .25); border-radius: 999px;
  background: rgb(255 255 255 / .08); color: #fff; font-size: 1.4rem; cursor: pointer;
}

.product-lightbox__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.product-lightbox__close { top: 1.5rem; right: 2rem; width: 3.2rem; height: 3.2rem; border: 0; background: none; opacity: .75; transition: opacity .15s ease; }

.product-lightbox__close:hover { opacity: 1; }

.product-lightbox__close svg { width: 2.2rem; height: 2.2rem; }

@media (max-width: 640px) {
  .product-lightbox__close { top: .8rem; right: .8rem; }
}

.product-lightbox__prev { left: 2rem; top: 50%; transform: translateY(-50%); }

.product-lightbox__next { right: 2rem; top: 50%; transform: translateY(-50%); }

/* The same as the ✕: the distance from the edge, the size, the line. */
.product-lightbox__prev, .product-lightbox__next { width: 3.2rem; height: 3.2rem; border: 0; background: none; opacity: .75; transition: opacity .15s ease; }

.product-lightbox__prev:hover, .product-lightbox__next:hover { opacity: 1; }

.product-lightbox__prev:disabled, .product-lightbox__next:disabled { opacity: .2; }

.product-lightbox__prev svg, .product-lightbox__next svg { width: 2.2rem; height: 2.2rem; stroke-width: 1.8; }

.product-lightbox__count { position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%); font-size: .9rem; opacity: .8; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .product-lightbox__img { inset: 4.5rem .5rem 3.5rem; width: calc(100% - 1rem); height: calc(100% - 8rem); }
  .product-lightbox__prev, .product-lightbox__next { display: none; }
}

.product-lightbox.has-caption .product-lightbox__img { bottom: 6rem; height: calc(100% - 11.5rem); }

.product-lightbox__caption { position: absolute; left: 50%; bottom: 2.6rem; transform: translateX(-50%); width: min(40rem, calc(100% - 2rem)); margin: 0; text-align: center; display: grid; gap: .2rem; }

.product-lightbox__caption strong { font-family: var(--font-display); font-weight: 600; }

.product-lightbox__caption span { font-size: .88rem; opacity: .75; }