/*
 * File: assets/css/lightbox.css, the product photo lightbox styles.
 * Purpose: the magnifier cursor of the product page main photo, and the full screen view lightbox.js opens: the dark
 * backdrop, the photo fitted to the viewport, the zoomed photo and the 3 round buttons.
 * Defines: the cursor of .gallery-main img, the html.lb-open scroll lock, and the classes lb, lb-img, lb-btn, lb-close,
 * lb-prev, lb-next, is-zoomed and is-anim
 * Doc: docs/notes/client-sites/andreasmasterpiece.com/assets/css/lightbox.css.md
 */

/* A plus magnifier drawn in ink on white, its hot spot at the lens center; zoom-in where an image cursor fails. */
.gallery-main img,.lb-img{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M19.5 19.5L27 27' stroke='%23fff' stroke-width='6'/%3E%3Ccircle cx='13' cy='13' r='9' fill='%23fff' stroke='%23fff' stroke-width='4'/%3E%3Cpath d='M19.5 19.5L27 27' stroke='%231e293b' stroke-width='3'/%3E%3Ccircle cx='13' cy='13' r='9' stroke='%231e293b' stroke-width='2'/%3E%3Cpath d='M13 9v8M9 13h8' stroke='%231e293b' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 13 13,zoom-in}

html.lb-open{overflow:hidden}

/* style.css gives the drawers z-index 120 and the toasts 200. */
.lb{--lb-bg:#111111;--lb-btn:#2b2b2b;--lb-btn-hover:#444444;--lb-on:#ffffff;
  position:fixed;inset:0;z-index:160;overflow:hidden;background:var(--lb-bg);
  touch-action:none;-webkit-user-select:none;user-select:none}
.lb:focus{outline:0}

/* Centered by the auto margins and held inside the view by the 2 max sizes at its own ratio. */
.lb-img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;
  transform-origin:0 0;-webkit-user-drag:none}
.lb.is-zoomed .lb-img{cursor:zoom-out}
.lb.is-anim .lb-img{transition:transform .2s ease}

.lb-btn{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;padding:0;border:0;border-radius:50%;
  background:var(--lb-btn);color:var(--lb-on);font-size:1.2rem;cursor:pointer}
.lb-btn:hover{background:var(--lb-btn-hover)}
.lb-btn:focus-visible{outline:3px solid var(--lb-on);outline-offset:2px}
.lb-close{top:14px;right:14px}
.lb-prev,.lb-next{top:50%;margin-top:-23px}
.lb-prev{left:14px}
.lb-next{right:14px}

/* From 700 px the fitted photo leaves the 2 side gutters to the arrows and the top one to the close button. */
@media (min-width:700px){
  .lb-img{max-width:calc(100% - 156px);max-height:calc(100% - 112px)}
}
@media (prefers-reduced-motion:reduce){
  .lb.is-anim .lb-img{transition:none}
}