.details_grid {
    display: grid;
    grid-template-columns: 1fr; /* Mobile First: Picture Up, Details Down */
    gap: 30px;
    padding: 20px;
}

/* Image Magnifier Container */
.main_img_box {
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    background: #f6f6f6;
    aspect-ratio: 1/1;
}

#mainImg {
    width: 60%;
    transition: transform 0.1s ease-out;
    transform-origin: center center;
}

/* Desktop View: Side by Side */
@media (min-width: 992px) {
    .details_grid {
        grid-template-columns: 1.2fr 0.8fr;
        padding: 40px;
    }
}

/* Size Selector Styling */
.size_system_tabs { display: flex; gap: 10px; margin-bottom: 10px; }
.tab_btn { cursor: pointer; border: none; background: #eee; padding: 5px 10px; font-size: 12px; }
.tab_btn.active { background: #000; color: #fff; }

.size_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; }
.size_btn { padding: 10px; border: 1px solid #ddd; background: #fff; cursor: pointer; }
.size_btn.selected { border: 2px solid #000; }