.pz-open {
    overflow: hidden;
}

:root {
    --pz-zoom-hint-trigger-bg: url('https://cdn.planetart.com/images/icons/controls/icon-zoom.svg');
}

#details_preview,
#details-container #scodix_img_first_inner,
#details-container #scodix_img_third_inner,
#details-container #scodix_img_second .generic_shot_box,
#details-container .detail_preview_mobile_1 {
    cursor: zoom-in;
}

/* Preview Zoom Hint Icon */
.pz-zoom-hint-container {
    position: relative;
}

.pz-zoom-hint-trigger {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 5;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: var(--pz-zoom-hint-trigger-bg) no-repeat center center / 100% 100%;
}
.designer_preview_page #preview_wrapper .preview_img_wrapper [id^="container"] {
    cursor: pointer;
}

.designer_preview_page #preview_wrapper .preview_img_wrapper [id^="container"]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;
    width: 40px;
    height: 40px;
    background: var(--pz-zoom-hint-trigger-bg) no-repeat center center / 100% 100%;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.designer_preview_page #preview_wrapper .preview_img_wrapper:hover [id^="container"]::after {
    opacity: 1;
}
/* End Preview Zoom Hint Icon */


/* Preview Zoom Dialog */
.pz-modal {
    --pz-shell-inset: 0 32px;
    --pz-toolbar-height: 80px;
    --pz-controls-toolbar-height: 120px;
    --pz-controls-toolbar-bg: linear-gradient(197deg, rgba(249, 247, 244, 0.00) -52.38%, #F9F7F4 65.27%);
    --pz-artboard-bg: #F9F7F4;

    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
}

.pz-modal.is-open {
    display: block;
}

.pz-shell {
    position: absolute;
    overflow: hidden;
    background: #f8f7f3;
    inset: var(--pz-shell-inset);
}

.pz-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(249, 247, 244, 0.80);
    height: var(--pz-toolbar-height);
}

.pz-close {
    width: 52px;
    height: 52px;
    cursor: pointer;
    touch-action: manipulation;
    background: url('https://cdn.planetart.com/images/icons/close/icon_circle_close_gray.svg') no-repeat center center / 100% 100%;
}

.pz-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: grab;
}

.pz-viewport:active {
    cursor: grabbing;
}

.pz-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding-top: var(--pz-toolbar-height);
    padding-bottom: var(--pz-controls-toolbar-height);
}

.pz-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    will-change: transform;
}

.pz-controls-toolbar {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 18px 12px;
    background: var(--pz-controls-toolbar-bg);
    height: var(--pz-controls-toolbar-height);
}

.pz-hints {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    color: #3E3430;
    font-size: 16px;
    line-height: 1.25;
}

.pz-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.pz-hint-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
}

.pz-hint-icon.pz-hint-icon-scroll {
    background: url('https://cdn.planetart.com/images/icons/controls/icon-scroll.svg') no-repeat center center / 100% 100%;
}

.pz-hint-icon.pz-hint-icon-pinch {
    background: url('https://cdn.planetart.com/images/icons/controls/icon-pinch-zoom.svg') no-repeat center center / 100% 100%;
}

.pz-hint-icon.pz-hint-icon-drag {
    background: url('https://cdn.planetart.com/images/icons/controls/icon-drag.svg') no-repeat center center / 100% 100%;
}

.pz-hint-icon.pz-hint-icon-double {
    background: url('https://cdn.planetart.com/images/icons/controls/icon-double-tap.svg') no-repeat center center / 100% 100%;
}

.pz-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 196px;
    padding: 10px 12px;
    color: #FFFFFF;
    line-height: 26px;
    border-radius: 25px;
    background: rgba(63, 58, 55, 0.78);
}

.pz-controls button {
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    touch-action: manipulation;
    font: inherit;
    font-size: 21px;
    font-weight: 400;
    min-width: 24px;
    padding: 0;
}

.pz-scale-label {
    min-width: 104px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
}

.pz-controls .pz-reset {
    width: 26px;
    height: 26px;
    margin-left: 14px;
    background: url('https://cdn.planetart.com/images/icons/controls/icon-reset.svg') no-repeat center center / 100% 100%;
}

@media only screen and (max-width: 767px) {
    /* Preview Zoom Hint Icon */
    .pz-zoom-hint-trigger {
        position: absolute;
        bottom: 0.77vmin;
        right: unset;
        left: 50%;
        transform: translateX(-50%);
        width: 10.25vmin;
        height: 10.25vmin;
    }

    .designer_preview_page .pz-designer-preview-mobile-zoom-hint {
        position: static;
        margin: 0 auto;
        transform: none;
    }

    /* End Preview Zoom Hint Icon */
    .pz-modal {
        --pz-shell-inset: 55px 0;
        --pz-toolbar-height: 10.25vmin;
        --pz-controls-toolbar-height: 30.7vmin;
        --pz-controls-toolbar-bg: rgba(249, 247, 244, 0.70);
        
        background: rgba(0, 0, 0, 0.2);
    }

    /* Header Toolbar */
    .pz-toolbar {
        padding: 1.025vmin 4.1vmin;
    }

    .pz-close {
        width: 5.6vmin;
        height: 5.6vmin;
        background: url(https://cdn.planetart.com/images/icons/close/icon_line_close.svg) no-repeat center center / 3.07vmin 3.33vmin;
    }

    /* Bottom Toolbar */
    .pz-controls-toolbar {
        gap: 4.1vmin;
        padding: 4.1vmin 4.1vmin 5.12vmin;
    }

    .pz-hints {
        flex-wrap: wrap;
        gap: 2.05vmin;
        font-size: 3.58vmin;
        color: rgb(45 41 38 / 80%);
    }

    .pz-hint {
        gap: 1.025vmin;
    }

    .pz-hint-icon {
        width: 4.1vmin;
        height: 4.1vmin;
    }

    .pz-controls {
        min-width: 44.8vmin;
        padding: 2.82vmin 5.12vmin;
    }

    .pz-controls button {
        font-size: 5.64vmin;
        line-height: 7.18vmin;
    }

    .pz-scale-label {
        min-width: 19.23vmin;
        font-size: 3.58vmin;
    }

    .pz-controls .pz-reset {
        width: 6.55vmin;
        height: 6.55vmin;
        margin-left: 5.12vmin;
    }
}

@media only screen and (min-width: 1420px) {
    .pz-modal {
        --pz-shell-inset: 0 5.5%;
    }
}

@media only screen and (min-width: 1900px) {
    .pz-modal {
        --pz-shell-inset: 0 8%;
    }
}


/* ===== Preview Zoom Composition Layers ===== */
.pz-artboard-scaler {
    flex: 0 0 auto;
    overflow: visible;
}

.pz-artboard {
    position: relative;
    overflow: visible;
    background: var(--pz-artboard-bg, transparent);
}

.pz-composite {
    position: relative;
    overflow: visible;
}

.pz-main-image,
.pz-overlay,
.pz-layer {
    position: absolute;
    inset: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    -webkit-user-drag: none;
    pointer-events: none;
    user-select: none;
}

.pz-main-image,
.pz-layer-base,
.pz-main-image.generic_shot_box_img_2 {
    left: var(--pz-base-left, 0);
    top: var(--pz-base-top, 0);
    right: auto;
    bottom: auto;
    width: var(--pz-base-width, 100%);
    height: var(--pz-base-height, 100%);
    object-fit: contain;
    transform: var(--pz-base-transform, none);
    transform-origin: center center;
    z-index: 1;
}

.pz-overlay,
.pz-layer-overlay {
    left: var(--pz-overlay-left, 0);
    top: var(--pz-overlay-top, 0);
    width: var(--pz-overlay-width, 100%);
    height: var(--pz-overlay-height, 100%);
    object-fit: fill;
    z-index: 2;
}

.pz-overlay-fill {
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.pz-main-image.orient-landscape,
.pz-artboard.pz-orientation-landscape .pz-main-image,
.pz-main-image.wide_orientation {
    --pz-base-left: 9.75%;
    --pz-base-top: 0;
    --pz-base-width: 80.5%;
    --pz-base-height: 100%;
}

.pz-artboard.pz-orientation-landscape .pz-main-image.pz-banner-preview,
.pz-artboard.pz-orientation-portrait .pz-main-image.pz-banner-preview,
.pz-artboard.pz-orientation-landscape .pz-main-image.pz-calendar-preview,
.pz-artboard.pz-orientation-portrait .pz-main-image.pz-calendar-preview {
    --pz-base-left: 0;
    --pz-base-top: 0;
    --pz-base-width: 100%;
    --pz-base-height: 100%;
}
/* override the multi_view_image original origin class for banner previews */
.pz-artboard .pz-main-image.pz-banner-preview.multi_view_image,
.pz-artboard .pz-main-image.pz-calendar-preview.multi_view_image {
    width: 100% !important;
    margin-top: 0 !important;
}
.pz-main-image.orient-portrait,
.pz-artboard.pz-orientation-portrait .pz-main-image,
.pz-main-image.tall_orientation {
    --pz-base-left: 0;
    --pz-base-top: 8.9%;
    --pz-base-width: 100%;
    --pz-base-height: 82.2%;
}

.pz-main-image.orient-square,
.pz-artboard.pz-orientation-square .pz-main-image,
.pz-main-image.square_orientation {
    --pz-base-left: 8.5%;
    --pz-base-top: 8.5%;
    --pz-base-width: 83%;
    --pz-base-height: 83%;
}

.pz-main-image.main-image-folded,
.pz-main-image.main-image-folded-only,
.pz-artboard.pz-orientation-landscape:has(.pz-overlay-folded) .pz-main-image {
    --pz-base-left: 8%;
    --pz-base-top: 0;
    --pz-base-width: 82%;
    --pz-base-height: 100%;
    --pz-base-transform: skewX(-2.5deg);
}

.pz-main-image.main-image-folded-portrait,
.pz-main-image.main-image-folded-portrait-only,
.pz-artboard.pz-orientation-portrait .pz-main-image.main-image-folded-portrait,
.pz-artboard.pz-orientation-portrait .pz-main-image.main-image-folded-portrait-only {
    --pz-base-left: 10%;
    --pz-base-top: 9.9%;
    --pz-base-width: 80%;
    --pz-base-height: 82%;
    --pz-base-transform: skewY(2.5deg);
}

.pz-overlay-folded:not(.folded-overlay-portrait),
.pz-overlay-folded.folded-non-dc-overlay,
.pz-overlay-folded.folded-only-overlay {
    background-position: center;
    background-size: 100%;
}

.pz-overlay-folded.folded-overlay-portrait {
    background-position: center;
    background-size: 100%;
}

.pz-overlay-diecut.landscape {
    --pz-overlay-width: 100%;
    --pz-overlay-height: 100%;
}

.pz-overlay-diecut.portrait,
.pz-overlay-diecut.square {
    --pz-overlay-width: 100%;
    --pz-overlay-height: 100%;
}

.pz-overlay-diecut {
    object-fit: cover;
}

.pz-layer-folded {
    left: var(--pz-folded-left, 0);
    top: var(--pz-folded-top, 0);
    width: var(--pz-folded-width, 100%);
    height: var(--pz-folded-height, 100%);
    background-position: var(--pz-folded-position, center);
    background-repeat: no-repeat;
    background-size: var(--pz-folded-size, 100% 100%);
    z-index: 3;
}

.pz-layer-badge {
    left: var(--pz-badge-left, auto);
    top: var(--pz-badge-top, 0);
    width: var(--pz-badge-width, auto);
    height: var(--pz-badge-height, auto);
    object-fit: contain;
    z-index: 4;
}

.pz-composite[data-preview-mode="shadow"] .pz-layer-overlay {
    object-fit: cover;
}

/*
 * Mobile PDP .cardImg.portrait uses height: ~95.5vw (not square), but composition
 * vars assume a square artboard. Scale top/height so absolute vw matches desktop.
 * Factor for height: desktop-percent / 0.955. Top: (100 - height) / 2 to stay centered.
 */
@media only screen and (max-width: 767px) {
    .pz-main-image.orient-portrait,
    .pz-artboard.pz-orientation-portrait .pz-main-image,
    .pz-main-image.tall_orientation {
        --pz-base-top: 7.6%;
        --pz-base-height: 86.1%;
    }

    .pz-main-image.orient-square,
    .pz-artboard.pz-orientation-square .pz-main-image,
    .pz-main-image.square_orientation {
        --pz-base-top: 6.6%;
        --pz-base-height: 86.9%;
    }

    .pz-main-image.main-image-folded-portrait,
    .pz-main-image.main-image-folded-portrait-only,
    .pz-artboard.pz-orientation-portrait .pz-main-image.main-image-folded-portrait,
    .pz-artboard.pz-orientation-portrait .pz-main-image.main-image-folded-portrait-only {
        --pz-base-width: 100%;
        --pz-base-left: 0;
        --pz-base-top: 8%;
        --pz-base-height: 85.9%;
    }
}
/* ===== End Preview Zoom Composition Layers ===== */