/* =====================================================================
 * Product page trigger styles + PhotoSwipe v5 UI (reference layout)
 * ===================================================================== */

/* --- Product page: main image trigger (no layout shift) --- */
.product__carousel .product__cover-link {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
}

.product__carousel .product__cover-link img {
  cursor: zoom-in;
}

.product__zoom.js-pswp-open {
  cursor: pointer;
}

/* --- PhotoSwipe product gallery UI --- */
.pswp--product-gallery {
  --pswp-bg: #000;
  --pswp-icon-color: #fff;
  --pswp-icon-color-secondary: #fff;
  --pswp-icon-stroke-color: transparent;
  --pswp-icon-stroke-width: 0;
  z-index: 100000;
}

.pswp--product-gallery .pswp__icn {
  color: #fff;
  fill: #fff;
}

/* Clean white icons (no drop-shadow outline from default CSS). */
.pswp--product-gallery .pswp__icn-shadow {
  display: none;
}

/* Dark overlay matching reference. */
.pswp--product-gallery .pswp__bg {
  background: #000;
}

/* Ensure toolbar controls are visible once the gallery is open. */
.pswp--product-gallery.pswp--open.pswp--ui-visible .pswp__hide-on-close {
  opacity: 1;
  pointer-events: auto;
}

/* Top toolbar */
.pswp--product-gallery .pswp__top-bar {
  height: 56px;
  padding: 0 12px;
  align-items: center;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
  pointer-events: none !important;
}

.pswp--product-gallery .pswp__top-bar > * {
  pointer-events: auto;
}

/* Image counter — top-left, "1 / 9" */
.pswp--product-gallery .pswp__counter {
  position: absolute;
  left: 20px;
  top: 14px;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
  text-shadow: none;
  opacity: 1;
}

/* Toolbar buttons — top-right cluster */
.pswp--product-gallery .pswp__button {
  width: 44px;
  height: 44px;
  margin: 0 2px;
  opacity: 0.88;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  background: #000;
}

.pswp--product-gallery .pswp__button:hover,
.pswp--product-gallery .pswp__button:focus {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
}

.pswp--product-gallery .pswp__button--close {
  margin-right: 4px;
}

.pswp--product-gallery .pswp__icn {
  top: 50%;
  left: 50%;
  width: 24px;
  height: 28px;
  margin: -14px 0 0 -14px;
}

/* Preloader stays left of toolbar buttons */
.pswp--product-gallery .pswp__preloader {
  width: 44px;
  height: 44px;
  margin-right: auto;
  margin-left: 72px;
}

/* Navigation arrows — vertically centered, dark square background */
.pswp--product-gallery .pswp__button--arrow--prev {
  left: 16px;
}

.pswp--product-gallery .pswp__button--arrow--next {
  right: 16px;
}

/* Show arrows on tablet and desktop (override touch-only hiding). */
@media (min-width: 768px) {
  .pswp--product-gallery.pswp--touch .pswp__button--arrow {
    visibility: visible;
  }
}

/* Mobile: keep swipe + pinch; compact toolbar, counter stays visible */
@media (max-width: 767px) {
  .pswp--product-gallery .pswp__counter {
    left: 14px;
    top: 12px;
    font-size: 14px;
  }

  .pswp--product-gallery .pswp__top-bar {
    height: 52px;
    padding: 0 6px;
  }

  .pswp--product-gallery .pswp__button {
    width: 42px;
    height: 42px;
    margin: 0 1px;
  }

  .pswp--product-gallery .pswp__preloader {
    margin-left: 58px;
  }

  /* Hide side arrows on small phones — swipe handles navigation */
  .pswp--product-gallery .pswp__button--arrow {
    display: none;
  }
}

/* Tablet: show arrows */
@media (min-width: 768px) and (max-width: 1024px) {
  .pswp--product-gallery .pswp__button--arrow--prev {
    left: 12px;
  }

  .pswp--product-gallery .pswp__button--arrow--next {
    right: 12px;
  }
}