/* --- PRODUCT HOVER IMAGE SWAP (Truewerk Grid) --- */
.tw-image-wrapper {
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer;
}

.tw-img-main, .tw-img-hover {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.tw-img-hover {
    opacity: 0 !important;
    z-index: 2 !important;
}

.tw-image-wrapper:hover .tw-img-hover {
    opacity: 1 !important;
}

.tw-image-wrapper:hover .tw-img-main,
.tw-image-wrapper:hover .tw-img-hover {
    transform: scale(1.08) !important;
}

/* --- QUICK VIEW MODAL GALLERY --- */
.ozd-modal-gallery {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    overflow: hidden !important;
    background: #000 !important;
}

.ozd-modal-image-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.ozd-modal-img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 0.8s ease-in-out !important;
    /* --- Fix Grain/Aliasing --- */
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    image-rendering: auto !important; 
}



.ozd-modal-img.active {
    opacity: 1 !important;
}

/* --- QUICK VIEW THUMBNAILS (OVERLAY) --- */
.ozd-modal-thumbnails {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    padding: 30px 20px !important;
    z-index: 10 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%) !important;
    pointer-events: none !important;
}

.ozd-thumb {
    width: 55px !important;
    height: 75px !important;
    object-fit: cover !important;
    cursor: pointer !important;
    opacity: 0.5 !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 4px !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6) !important;
}

.ozd-thumb:hover, .ozd-thumb.active {
    opacity: 1 !important;
    border-color: #F8A500 !important;
    transform: translateY(-5px) !important;
    border-width: 2px !important;
}

/* Ensure details don't push gallery and layout matches original grid */
.ozd-modal-product-content {
    display: grid !important;
    grid-template-columns: 1.2fr 1fr !important;
    gap: 0 !important;
    min-height: 600px !important;
}

.ozd-modal-details {
    padding: 60px !important;
    flex: none !important;
}