/* Devwize Product Thumbnail — reference-style product gallery */
.dpt-gallery{
    --dpt-border:#dfe5ee;
    --dpt-active:#1683ff;
    /* --dpt-stage-bg:#f7f9fc; */
    --dpt-main-height:600px;
    --dpt-thumb-height:160px;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    isolation:isolate;
}
.dpt-gallery *,
.dpt-gallery *::before,
.dpt-gallery *::after{box-sizing:border-box !important}

.dpt-main-swiper{
    position:relative !important;
    width:100% !important;
    height:var(--dpt-main-height) !important;
    min-height:var(--dpt-main-height) !important;
    overflow:hidden !important;
    background:var(--dpt-stage-bg) !important;
    border:1px solid var(--dpt-border) !important;
    border-radius:11px !important;
}
.dpt-main-swiper .swiper-wrapper,
.dpt-main-swiper .swiper-slide{height:100% !important}
.dpt-main-swiper .swiper-slide{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:var(--dpt-stage-bg) !important;
}
.dpt-main-swiper .swiper-zoom-container,
.dpt-main-swiper .dpt-image-container{
    width:100% !important;
    height:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.dpt-main-image{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    user-select:none !important;
    -webkit-user-drag:none !important;
}

.dpt-arrow,
.dpt-zoom,
.dpt-thumb-arrow{
    appearance:none !important;
    -webkit-appearance:none !important;
    font-family:Arial,sans-serif !important;
    padding:0 !important;
}
.dpt-arrow{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    border:1px solid rgba(25,55,90,.06) !important;
    border-radius:50% !important;
    background:var(--dpt-arrow-bg,#fff) !important;
    color:var(--dpt-arrow-color,#1F4F8F) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    z-index:20 !important;
    box-shadow:0 4px 18px rgba(25,55,90,.07) !important;
}
.dpt-arrow:hover{transform:translateY(-50%) scale(1.04) !important}
.dpt-arrow svg{
    width:16px !important;
    height:16px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2.8 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.dpt-prev{left:28px !important}.dpt-next{right:28px !important}

/* Thumbnail strip: rectangular cards matching the main gallery language. */
.dpt-thumbs-row{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:center !important;
    gap:0 !important;
    margin-top:16px !important;
}
.dpt-thumbs-swiper{
    width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
}
.dpt-thumbs-swiper .swiper-wrapper{align-items:stretch !important}
.dpt-thumbs-swiper .swiper-slide{
    height:var(--dpt-thumb-height) !important;
    min-height:var(--dpt-thumb-height) !important;
}
.dpt-thumb{
    display:block !important;
    width:100% !important;
    height:var(--dpt-thumb-height) !important;
    min-width:0 !important;
    min-height:var(--dpt-thumb-height) !important;
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid #dfe5ee !important;
    border-radius:10px !important;
    background:#f7f9fc !important;
    overflow:hidden !important;
    cursor:pointer !important;
    box-shadow:none !important;
}
.dpt-thumb:hover{border-color:#b9c7d8 !important}
.dpt-thumbs-swiper .swiper-slide-thumb-active .dpt-thumb,
.dpt-thumb:focus-visible{
    border:2px solid var(--dpt-active) !important;
    box-shadow:none !important;
    outline:none !important;
}
.dpt-thumb-image{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#f7f9fc !important;
    overflow:hidden !important;
}
.dpt-thumb-image img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:100% !important;
    min-height:100% !important;
    max-width:none !important;
    max-height:none !important;
    /* object-fit:cover !important; */
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
}

/* Thumbnail navigation is hidden in the reference layout; the strip itself scrolls/swipes. */
.dpt-thumb-arrow{display:none !important}

.dpt-zoom{
    position:absolute !important;
    right:20px !important;
    bottom:20px !important;
    width:44px !important;
    height:44px !important;
    border:1px solid rgba(25,55,90,.08) !important;
    border-radius:50% !important;
    background:var(--dpt-arrow-bg,#fff) !important;
    color:var(--dpt-arrow-color,#1F4F8F) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    z-index:20 !important;
    box-shadow:0 3px 12px rgba(25,55,90,.07) !important;
}
.dpt-zoom-icon{width:20px !important;height:20px !important;fill:none !important;stroke:currentColor !important;stroke-width:1.9 !important;stroke-linecap:round !important}
.dpt-zoom-out-icon{display:none !important}
.dpt-zoom.is-zoomed .dpt-zoom-in-icon{display:none !important}
.dpt-zoom.is-zoomed .dpt-zoom-out-icon{display:block !important}

@media (min-width:1025px){
    .dpt-thumbs-swiper .swiper-slide{height:160px !important;min-height:160px !important}
    .dpt-thumb{height:160px !important;min-height:160px !important}
}
@media (max-width:1024px){
    .dpt-gallery{--dpt-main-height:480px;--dpt-thumb-height:125px}
    .dpt-thumbs-swiper .swiper-slide{height:125px !important;min-height:125px !important}
    .dpt-thumb{height:125px !important;min-height:125px !important}
}
@media (max-width:767px){
    .dpt-gallery{--dpt-main-height:360px}
    .dpt-main-swiper{border-radius:9px !important}
    .dpt-arrow{width:30px !important;height:30px !important;min-width:30px !important;min-height:30px !important}
    .dpt-prev{left:12px !important}.dpt-next{right:12px !important}
    .dpt-arrow svg{width:16px !important;height:16px !important}
    .dpt-thumbs-row{margin-top:10px !important}
    .dpt-thumbs-swiper .swiper-slide{height:88px !important;min-height:88px !important}
    .dpt-thumb{height:88px !important;min-height:88px !important;border-radius:8px !important}
    .dpt-thumbs-swiper .swiper-slide-thumb-active .dpt-thumb{border-width:2px !important}
}

/* Final reference tuning: thumbnails are compact cards, not tall pills. */
.dpt-thumbs-swiper .swiper-slide{
    aspect-ratio:1.20 / 1 !important;
}
.dpt-thumb{
    aspect-ratio:1.20 / 1 !important;
    border-radius:10px !important;
}
/* .dpt-thumb-image img{
    object-fit:cover !important;
    object-position:center !important;
} */
@media (max-width:767px){
    .dpt-thumbs-swiper .swiper-slide,.dpt-thumb{aspect-ratio:1.18 / 1 !important}
}


/* =========================================================
   Grid/Flex-safe thumbnail sizing
   ---------------------------------------------------------
   The gallery can be placed in a 2-column layout. Using a
   fixed slidesPerView there makes Swiper calculate very
   narrow thumbnails. We let CSS own the width instead.
   ========================================================= */

.dpt-gallery{
    min-width:0 !important;
    container-type:inline-size;
}

.dpt-main-swiper,
.dpt-thumbs-row,
.dpt-thumbs-swiper{
    min-width:0 !important;
}

.dpt-thumbs-swiper .swiper-wrapper{
    align-items:stretch !important;
}

.dpt-thumbs-swiper .swiper-slide{
    flex-shrink:0 !important;
    width:calc((100% - 72px) / 7) !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:1.20 / 1 !important;
}

.dpt-thumb{
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    aspect-ratio:auto !important;
}

/* A gallery around half-page width: show 6 comfortable thumbnails
   rather than squeezing 7 into the column. */
@container (max-width: 900px){
    .dpt-thumbs-swiper .swiper-slide{
        width:calc((100% - 60px) / 6) !important;
    }
}

/* Narrower content columns */
@container (max-width: 680px){
    .dpt-thumbs-swiper .swiper-slide{
        width:calc((100% - 48px) / 5) !important;
    }
}

@container (max-width: 500px){
    .dpt-thumbs-swiper .swiper-slide{
        width:calc((100% - 36px) / 4) !important;
    }
}

@container (max-width: 380px){
    .dpt-thumbs-swiper .swiper-slide{
        width:calc((100% - 24px) / 3) !important;
    }
}

/* Keep the gallery from inheriting min-width rules from page builders. */
.dpt-gallery img{
    max-width:100%;
}

@media (max-width:767px){
    .dpt-thumbs-swiper .swiper-slide{
        width:calc((100% - 24px) / 3) !important;
        height:auto !important;
        min-height:0 !important;
    }

    .dpt-thumb{
        height:100% !important;
        min-height:0 !important;
    }
}

/* =========================================================
   MOBILE ONLY — keep gallery in normal document flow
   ---------------------------------------------------------
   Do not use a fixed main-gallery height on phones.
   The square aspect-ratio gives the Swiper a real height,
   so content below the shortcode cannot overlap it.
   ========================================================= */
@media (max-width: 767px){
    .dpt-gallery{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        container-type:normal !important;
    }

    .dpt-main-swiper{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:1 / 1 !important;
    }

    .dpt-main-swiper .swiper-wrapper,
    .dpt-main-swiper .swiper-slide,
    .dpt-main-swiper .swiper-zoom-container,
    .dpt-main-swiper .dpt-image-container{
        height:100% !important;
        min-height:0 !important;
    }

    .dpt-thumbs-row{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        margin-top:10px !important;
    }

    .dpt-thumbs-swiper{
        height:120px !important;
        min-height:0 !important;
    }

    .dpt-thumbs-swiper .swiper-wrapper{
        height:auto !important;
        min-height:0 !important;
    }

    .dpt-thumbs-swiper .swiper-slide{
        height:auto !important;
        min-height:0 !important;
    }

    .dpt-thumb{
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:1.18 / 1 !important;
    }
}