body {
    background-color: white !important;
    --bs-body-bg: white !important;
}
/* Base gallery image cursor and sub-pixel rounding gap mask */
.expandable {
    cursor: pointer;
    display: block;
    width: 100%;
    
    /* FIX: Draws a microscopic 1px bleed ring that masks browser rounding gaps */
    outline: 1px solid transparent;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.05);
    
    /* Pre-renders the image layer via GPU to keep scales fluid */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    will-change: transform;
    
    transition: transform 0.2s ease-in-out;
}

/* Uses 3D matrix scaling to maintain perfect pixel alignment during hover zoom */
.expandable:hover {
    transform: scale3d(1.02, 1.02, 1) translateZ(0);
}

/* Lightbox Background Overlay */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
}

/* The Active Expanded Image */
.lightbox-content {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    border: 3px solid #fff;
    border-radius: 4px;
}

/* Control Buttons Styling */
.close, .prev, .next {
    position: absolute;
    color: #fff;
    font-size: 40px;
    font-weight: bold;
    user-select: none;
    cursor: pointer;
    transition: color 0.2s;
}

.close:hover, .prev:hover, .next:hover {
    color: #bbb;
}

/* Position Layout Elements */
.close {
    top: 20px;
    right: 35px;
    font-size: 60px;
}

.prev {
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.next {
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}