/* ─────────────────────────────────────────────────────────────────────────────
   Vince — PDP frontend styles.

   Currently only the review-photo gallery (section 7 of vince-pdp.js). The base
   .pdp-rev-lightbox overlay rules live in the Bricks page CSS; everything here
   is double-classed (.pdp-rev-lightbox.pdp-rev-lb) so it outranks them without
   needing an edit to the Bricks template.
   ───────────────────────────────────────────────────────────────────────────── */

/* Lock the page behind the gallery. */
html.pdp-rev-lb-open,
html.pdp-rev-lb-open body { overflow: hidden; }

/* Self-contained on purpose: the matching .pdp-rev-lightbox rules in the Bricks
   page CSS are not guaranteed to reach the browser (the class only ever exists
   after JS creates it, so WP Rocket's "remove unused CSS" can drop them), and a
   gallery with no backdrop is unusable. Everything the overlay needs is here. */
.pdp-rev-lightbox.pdp-rev-lb {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    background: rgba(34, 32, 33, 0.92);
    cursor: default;
    overscroll-behavior: contain;
    -webkit-tap-highlight-color: transparent;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-viewport {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-track {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    touch-action: pan-y;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 12px;
    box-sizing: border-box;
}

/* Beats the single-class `.pdp-rev-lightbox img` rule in the Bricks CSS. */
.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    background: transparent;
    user-select: none;
    -webkit-user-drag: none;
}

/* ── Controls ─────────────────────────────────────────────────────────────── */

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-close,
.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(34, 32, 33, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-close:hover,
.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-nav:hover {
    background: rgba(34, 32, 33, 0.85);
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-close svg,
.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    z-index: 2;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    z-index: 2;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-prev { left: 12px; }
.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-next { right: 12px; }

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-nav[disabled] {
    opacity: 0.25;
    cursor: default;
}

.pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-count {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(34, 32, 33, 0.55);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.02em;
    z-index: 2;
}

/* On touch widths the arrows only cover the photo — swiping is the gesture. */
@media (max-width: 767px) {
    .pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-nav { display: none; }
    .pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-slide { padding: 56px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pdp-rev-lightbox.pdp-rev-lb .pdp-rev-lb-track { transition: none; }
}