/* ==============================
   MAIN PRODUCT GALLERY (PAGE)
============================== */

.nwg-gallery{
    display:flex;
    gap:24px;
    height:546px;
}

/* LEFT THUMBS */
.nwg-thumbs{
    width:98px;
    height:546px;
}

.nwg-thumbs .swiper{
    height:100%;
}

.nwg-thumbs .swiper-wrapper{
    flex-direction:column;
    gap:14px;
}

.nwg-thumbs .swiper-slide{
    width:98px !important;
    height:98px !important;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    cursor:pointer;
    margin:0 !important;
    padding:0 !important;
    border-radius:12px;
    position:relative;
    opacity:0.6;
}

.nwg-thumbs .swiper-slide-thumb-active{
    opacity:1;
}

.nwg-thumbs img{
    max-width:85% !important;
    max-height:85% !important;
    object-fit:contain;
}

/* +X overlay (thumb #5) */
.nwg-thumb-more img{
    filter:brightness(60%);
}

.nwg-more-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    color:#fff;
    font-size:24px;
    font-weight:700;
    background:rgba(0,0,0,0.5);
    line-height:1.2;
    pointer-events:none; /* allow click to pass to slide */
}

.nwg-more-overlay small{
    font-weight:400;
    font-size:15px;
}

/* MAIN IMAGE */
.nwg-main{
    flex:1;
    height:546px;
    position:relative;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

.nwg-main .swiper{
    height:100%;
}

.nwg-main .swiper-slide{
    display:flex;
    align-items:center;
    justify-content:center;
    height:546px;
}

.nwg-main img{
    max-width:90% !important;
    max-height:90% !important;
    width:auto;
    object-fit:contain;
}

/* ARROWS (PAGE + POPUP) */
.nwg-prev,
.nwg-next,
.nwg-modal-prev,
.nwg-modal-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    cursor:pointer;

    width:44px;
    height:44px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 .764px 3.055px #00000040;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* PAGE positions */
.nwg-prev{ left:50px; }
.nwg-next{ right:50px; }

/* POPUP positions */
.nwg-modal-prev{ left:50px; }
.nwg-modal-next{ right:50px; }

/* rotate left arrow */
.nwg-prev svg,
.nwg-modal-prev svg{ transform:rotate(180deg); }

.nwg-prev svg,
.nwg-next svg,
.nwg-modal-prev svg,
.nwg-modal-next svg{
    fill:#818181;
    width:24px;
    height:auto;
}

.nwg-prev:focus-visible,
.nwg-next:focus-visible,
.nwg-modal-prev:focus-visible,
.nwg-modal-next:focus-visible{
    outline:none !important;
}

/* hide disabled arrows */
.nwg-prev.swiper-button-disabled,
.nwg-next.swiper-button-disabled,
.nwg-modal-prev.swiper-button-disabled,
.nwg-modal-next.swiper-button-disabled{
    display:none;
}

/* Prevent selection & drag highlight */
.nwg-gallery,
.nwg-gallery *{
    -webkit-user-select:none;
    user-select:none;
}

.nwg-main img,
.nwg-thumbs img{
    -webkit-user-drag:none;
    user-drag:none;
    pointer-events:auto;
}

/* Ensure clickable */
.nwg-prev,
.nwg-next,
.nwg-modal-prev,
.nwg-modal-next,
.nwg-thumbs .swiper-slide{
    pointer-events:auto;
}

/* ==============================
   MODAL / LIGHTBOX
============================== */

.nwg-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.6);
    display:none;
    z-index:9999;
}

.nwg-modal.active{
    display:block;
}

.nwg-modal-overlay {
    position:absolute;
    inset:0;
    z-index: 1;
}

.nwg-modal-content{
    position:absolute;
    z-index:2;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    width:1440px;
    height:780px;

    background:#fff;
    border-radius:12px;
    padding:30px;

    max-width:calc(100vw - 40px);
    max-height:calc(100vh - 40px);
    overflow:hidden;
    box-sizing:border-box;
}

.nwg-modal-close{
    position:absolute;
    top:20px;
    right:25px;
    font-size:22px;
    cursor:pointer;
    z-index:50;
}

/* Layout inside modal */
.nwg-modal-gallery{
    display:flex;
    height:100%;
    gap:40px;
    box-sizing:border-box;
}

/* LEFT MODAL THUMBS (250px, grey bg, 2 per row) */
.nwg-modal-thumbs{
    width:250px;
    height:100%;
    border-radius:12px;
    padding:16px;
    box-sizing:border-box;
    overflow:hidden; /* scroll if many images */
}

.nwg-modal-thumbs .swiper{
    height:100%;
}

/* Make thumbs grid */
.nwg-modal-thumbs .swiper-wrapper{
    display:grid !important;
    grid-template-columns:repeat(2, 1fr);
    gap:14px;
    align-content:start;
}

/* Thumb cell */
.nwg-modal-thumbs .swiper-slide{
    width:auto !important;
    height:auto !important;
    aspect-ratio:1 / 1;

    background:#fff;
    border-radius:12px;
    overflow:hidden;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    border:2px solid #f1f1f1; /* for active border */
    box-sizing:border-box;
}

.nwg-modal-thumbs img{
    width:85%;
    height:85%;
    object-fit:contain;
}

/* Active thumb red border */
.nwg-modal-thumbs .swiper-slide-thumb-active{
    border-color:#05529E;
}

/* RIGHT MODAL MAIN */
.nwg-modal-main{
    flex:1;
    height:100%;
    background:#fff;
    border-radius:12px;
    position:relative;
    overflow:hidden;
}

.nwg-modal-main .swiper{
    height:100%;
}

.nwg-modal-main .swiper-slide{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.nwg-modal-main img{
    max-width:85%!important;
    max-height:85%!important;
    object-fit:contain;
}

.nwg-modal-left-title {
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    position: relative;
    margin-bottom: 24px;
}

.nwg-modal-left-title::after {
    background: #05529E;
    border-radius: 12px;
    bottom: -10px;
    content: "";
    display: block;
    height: 4px;
    left: 0;
    position: absolute;
    right: 0;
    width: auto;
}

/* Prevent selection/blue highlight INSIDE MODAL */
.nwg-modal,
.nwg-modal *{
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Prevent image dragging inside modal */
.nwg-modal img{
    -webkit-user-drag: none;
    user-drag: none;
}

/* Optional: stop blue overlay on drag in some browsers */
.nwg-modal .swiper,
.nwg-modal .swiper-wrapper,
.nwg-modal .swiper-slide{
    -webkit-user-select: none;
    user-select: none;
}