/* Product details media layout */
.product-main-frame {
    width: 520px; /* desktop square */
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .product-main-frame img,
    .product-main-frame video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* never crop; fit inside square */
    }

.product-thumbs {
    width: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 520px;
    overflow: auto;
}

.product-thumb {
    width: 84px;
    height: 84px;
    object-fit: cover;
    cursor: pointer;
    border-radius: .375rem;
    border: 1px solid #dee2e6;
    background: #fff;
}

    .product-thumb.active {
        outline: 2px solid #0d6efd;
        border-color: #0d6efd;
    }

/* Stack thumbs below main image on smaller screens */
@media (max-width: 991.98px) {
    .product-media {
        flex-direction: column;
    }

    .product-thumbs {
        width: 100%;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Smaller square on mobile for better fit */
@media (max-width: 575.98px) {
    .product-main-frame {
        width: 100%;
        max-width: 360px;
        margin-inline: auto;
    }
}