/* ==========================================================================
   Product Zoom & PhotoSwipe styling for Molly Bracken
   ========================================================================== */

/* Desktop 2-column image gallery: Plus cursor (+) */
#product .images-container-desktop .product-zoom-link {
  display: block;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cline x1='16' y1='4' x2='16' y2='28' stroke='%23111111' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='4' y1='16' x2='28' y2='16' stroke='%23111111' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, crosshair;
  text-decoration: none;
}

#product .images-container-desktop .product-zoom-link img {
  display: block;
  width: 100%;
  height: auto;
}

/* Mobile Product Cover Zoom button & trigger */
.product-cover-zoom-wrap {
  position: relative;
  cursor: pointer;
  display: block;
}

.product-cover-zoom-wrap .js-qv-product-cover {
  cursor: pointer;
  display: block;
  width: 100%;
}

.product-zoom-btn-mobile {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  padding: 0;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.product-zoom-btn-mobile:active {
  transform: scale(0.92);
  background-color: #fff;
}

.product-zoom-btn-mobile .material-icons {
  font-size: 22px;
  line-height: 1;
}

/* PhotoSwipe custom theme overrides for luxury feel */
.pswp {
  --pswp-bg: rgba(10, 10, 10, 0.94);
  --pswp-placeholder-bg: #1c1c1c;
  --pswp-root-z-index: 99999;
}

.pswp__button {
  background: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.pswp__button:hover {
  opacity: 1;
}

/* Desktop PhotoSwipe cursors */
@media (min-width: 768px) {
  /* Default cursor everywhere in PhotoSwipe (backdrop, scroll-wrap, container, item): CLOSE CROSS (×) in pure white */
  .pswp,
  .pswp__bg,
  .pswp__scroll-wrap,
  .pswp__container,
  .pswp__item {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cline x1='7.5' y1='7.5' x2='24.5' y2='24.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='7.5' y1='24.5' x2='24.5' y2='7.5' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, crosshair !important;
  }

  /* When image is NOT YET ZOOMED (at initial fit level): PLUS (+) zoom cursor in pure black */
  .pswp:not(.pswp--zoomed-in) .pswp__zoom-wrap,
  .pswp:not(.pswp--zoomed-in) .pswp__img,
  .pswp--zoom-allowed:not(.pswp--zoomed-in) .pswp__img {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cline x1='16' y1='4' x2='16' y2='28' stroke='%23111111' stroke-width='1.8' stroke-linecap='round'/%3E%3Cline x1='4' y1='16' x2='28' y2='16' stroke='%23111111' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, crosshair !important;
  }

  /* When image IS ALREADY ZOOMED (pswp--zoomed-in): MINUS (-) zoom-out cursor in pure black */
  .pswp--zoomed-in .pswp__zoom-wrap,
  .pswp--zoomed-in .pswp__img {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Cline x1='4' y1='16' x2='28' y2='16' stroke='%23111111' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") 16 16, crosshair !important;
  }

  .pswp__button,
  .pswp__button--close,
  .pswp__button--arrow {
    cursor: pointer !important;
  }
}

/* Hide default bootstrap modal layer search icon if present */
#product .layer {
  display: none !important;
}

/* Fix mobile sticky hover & thumbnail outline: only .selected has a border */
#main .product-images .thumb:not(.selected) {
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
}

@media (hover: none), (max-width: 767px) {
  #main .product-images .thumb:hover:not(.selected) {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }
}