/* =========================================================
   Smart Zoom - storefront styles.
   Deliberately small: the gallery itself (.gallery, .picture-wrapper, .picture, .picture-thumbs, .thumb-item) is styled by
   the theme (and, on SevenSpikes themes, by the theme's CloudZoom.css). This file only holds what the theme does not
   have: the zoom overlays, the thumbnail strip mechanics and the lightbox. Per-theme fixes: Content/css/themes/{Theme}.css.
   ========================================================= */

.smart-zoom [hidden],
.sz-lb [hidden] { display: none !important; }

/* ---------- Main picture ---------- */
.smart-zoom .sz-main { position: relative; }
.smart-zoom .sz-main-link { display: block; cursor: zoom-in; }
.smart-zoom .sz-main-img { max-width: 100%; height: auto; }
.smart-zoom[data-zoom-mode="off"] .sz-main-link { cursor: pointer; }
.smart-zoom .sz-main.sz-zoom-loading .sz-main-link { cursor: progress; }

/* ---------- Hover zoom ---------- */
.sz-zoom-inner,
.sz-zoom-tint,
.sz-zoom-lens {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}
.sz-zoom-inner {
    z-index: 5;
    background-color: #fff;
    background-repeat: no-repeat;
}
.sz-zoom-tint { z-index: 4; }
.sz-zoom-lens {
    z-index: 6;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(0, 0, 0, 0.25);
}
.sz-zoom-lens.sz-zoom-lens-tinted { background-color: transparent; }
.sz-zoom-window {
    position: absolute;
    z-index: 1010;
    overflow: hidden;
    background-color: #fff;
    background-repeat: no-repeat;
    border: 1px solid #ddd;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}
.sz-zoom-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 10px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
}

/* ---------- Thumbnail strip: one row that scrolls (column when thumbnails are on the left) ---------- */
.smart-zoom .picture-thumbs.sz-thumbs { position: relative; }
.smart-zoom .sz-thumbs-track {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.smart-zoom .sz-thumbs-track::-webkit-scrollbar { display: none; }
.smart-zoom .sz-thumbs-track > .thumb-item {
    flex: 0 0 auto;
    float: none;
    scroll-snap-align: start;
}
.smart-zoom .sz-thumb:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.smart-zoom .sz-thumbs-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    font-size: 0;
}
.smart-zoom .sz-thumbs-arrow::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #444;
    border-right: 2px solid #444;
}
.smart-zoom .sz-thumbs-prev { left: 0; }
.smart-zoom .sz-thumbs-prev::before { transform: rotate(-135deg); margin-left: 3px; }
.smart-zoom .sz-thumbs-next { right: 0; }
.smart-zoom .sz-thumbs-next::before { transform: rotate(45deg); margin-right: 3px; }
.smart-zoom .sz-thumbs-arrow:disabled { opacity: 0.35; cursor: default; }

/* Thumbnails on the left (setting): the root lays the picture and the strip side by side. */
@media (min-width: 769px) {
    .smart-zoom.sz-thumbs-left { display: flex; flex-wrap: wrap; align-items: flex-start; }
    .smart-zoom.sz-thumbs-left > * { flex: 0 0 100%; order: 3; }
    .smart-zoom.sz-thumbs-left > .picture-wrapper { flex: 1 1 0; min-width: 0; order: 2; }
    .smart-zoom.sz-thumbs-left > .picture-thumbs.sz-thumbs { flex: 0 0 84px; width: 84px; margin: 0 12px 0 0; order: 1; }
}

/* A column of thumbnails: the "left" setting, or a theme that gives the strip a narrow column of its own
   (Emporium >= 1601px floats .picture-thumbs left at 15% / 87px). The script adds sz-thumbs-column when the
   strip is narrower than two thumbnails, so a row would show only one. */
@media (min-width: 769px) {
    .smart-zoom.sz-thumbs-left .sz-thumbs-track {
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        scroll-snap-type: y mandatory;
    }
    .smart-zoom.sz-thumbs-left .sz-thumbs-track > .thumb-item { width: 100%; margin: 0 0 8px; }
    .smart-zoom.sz-thumbs-left .sz-thumbs-arrow { left: 50%; right: auto; margin: 0 0 0 -14px; }
    .smart-zoom.sz-thumbs-left .sz-thumbs-prev { top: 0; }
    .smart-zoom.sz-thumbs-left .sz-thumbs-prev::before { transform: rotate(-45deg); margin: 3px 0 0; }
    .smart-zoom.sz-thumbs-left .sz-thumbs-next { top: auto; bottom: 0; }
    .smart-zoom.sz-thumbs-left .sz-thumbs-next::before { transform: rotate(135deg); margin: 0 0 3px; }
}
.smart-zoom.sz-thumbs-column .sz-thumbs-track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
}
.smart-zoom.sz-thumbs-column .sz-thumbs-track > .thumb-item { width: 100%; margin: 0 0 10px; }
.smart-zoom.sz-thumbs-column .sz-thumbs-arrow { left: 50%; right: auto; margin: 0 0 0 -14px; }
.smart-zoom.sz-thumbs-column .sz-thumbs-prev { top: 0; }
.smart-zoom.sz-thumbs-column .sz-thumbs-prev::before { transform: rotate(-45deg); margin: 3px 0 0; }
.smart-zoom.sz-thumbs-column .sz-thumbs-next { top: auto; bottom: 0; }
.smart-zoom.sz-thumbs-column .sz-thumbs-next::before { transform: rotate(135deg); margin: 0 0 3px; }

/* ---------- Lightbox ---------- */
html.sz-lb-open,
html.sz-lb-open body { overflow: hidden; }

.sz-lb {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100000;
    background: rgba(17, 17, 17, 0.94);
    color: #fff;
    -webkit-user-select: none;
    user-select: none;
}
.sz-lb-stage {
    position: absolute;
    top: 48px;
    right: 56px;
    bottom: 48px;
    left: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: none;
}
.sz-lb-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    cursor: zoom-in;
    transform-origin: center center;
    transition: transform 0.15s ease-out;
    will-change: transform;
}
.sz-lb-zoomed .sz-lb-img { cursor: zoom-out; }
.sz-lb-touching .sz-lb-img { transition: none; }
.sz-lb-loading {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 13px;
    opacity: 0.7;
    pointer-events: none;
}
.sz-lb-counter,
.sz-lb-caption {
    position: absolute;
    font-size: 13px;
    line-height: 1.3;
    opacity: 0.85;
}
.sz-lb-counter { top: 14px; left: 16px; }
.sz-lb-caption { bottom: 14px; left: 56px; right: 56px; text-align: center; }

.sz-lb button {
    position: absolute;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    opacity: 0.8;
}
.sz-lb button:hover,
.sz-lb button:focus-visible { opacity: 1; }
.sz-lb button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.sz-lb-close { top: 6px; right: 8px; width: 40px; height: 40px; }
.sz-lb-close::before,
.sz-lb-close::after {
    content: "";
    position: absolute;
    top: 19px;
    left: 9px;
    width: 22px;
    height: 2px;
    background: currentColor;
}
.sz-lb-close::before { transform: rotate(45deg); }
.sz-lb-close::after { transform: rotate(-45deg); }
.sz-lb-prev,
.sz-lb-next { top: 50%; width: 48px; height: 64px; margin-top: -32px; }
.sz-lb-prev { left: 4px; }
.sz-lb-next { right: 4px; }
.sz-lb-prev::before,
.sz-lb-next::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
}
.sz-lb-prev::before { transform: rotate(-135deg); margin-left: 8px; }
.sz-lb-next::before { transform: rotate(45deg); margin-right: 8px; }

@media (max-width: 768px) {
    .sz-lb-stage { top: 44px; right: 0; bottom: 40px; left: 0; }
    .sz-lb-prev,
    .sz-lb-next { display: none; }
    .sz-lb-caption { left: 12px; right: 12px; }
}

/* Progressive loading: the picture on screen stands in (stretched) until the large variant arrives. */
.smart-zoom .sz-zoom-preview .sz-zoom-inner,
.sz-zoom-preview ~ .sz-zoom-window { filter: blur(0.5px); }
.sz-lb-preview .sz-lb-img { width: 100%; height: 100%; object-fit: contain; }
.sz-lb-preview .sz-lb-loading { top: auto; bottom: 16px; }