/* ============================================
   PRODUCT VARIATIONS MOBILE FIX
   Fix gaps and spacing for uniform mobile layout
   Mobile view only - does not affect desktop
   ============================================ */

@media (max-width: 768px) {
    /* Variations Details Section - Remove extra gaps */
    .variations-details-section {
        gap: 12px !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Variation Rows - Reduce gaps */
    .variation-row-top {
        gap: 12px !important;
        margin-bottom: 12px !important;
        padding: 0 !important;
    }
    
    .variation-row-bottom {
        gap: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    .variation-row-top:last-child,
    .variation-row-bottom:last-child {
        margin-bottom: 0 !important;
    }

    /* Variation Item - Reduce gap between label and options */
    .variation-item {
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
    }

    /* Detail Content - Reduce gap */
    .variation-item .detail-content {
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
        align-items: center !important;
    }

    /* Variation Label - Consistent width, reduce padding */
    .variation-label-details {
        min-width: 70px !important;
        max-width: 70px !important;
        width: 70px !important;
        font-size: 13px !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 1.4 !important;
        padding-top: 0 !important;
        flex-shrink: 0 !important;
        color: #212121 !important;
        font-weight: 500 !important;
    }

    /* Variation Options Container - Reduce gap between options */
    .variation-options-details {
        gap: 8px !important;
        flex: 1 !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Color Options - Consistent sizing */
    .color-option-item {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Variation Option Buttons (RAM/Storage) - Consistent sizing */
    .variation-option-detail {
        padding: 8px 12px !important;
        font-size: 13px !important;
        min-width: 60px !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        border-radius: 4px !important;
    }

    /* Remove any extra margins/padding from detail-row */
    .detail-row {
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    /* Ensure consistent alignment */
    .variation-item,
    .variation-item .detail-content,
    .variation-options-details {
        align-items: center !important;
    }

    /* Remove any extra spacing from variation attribute containers */
    .variation-attribute {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }

    /* Ensure rows stack properly without gaps */
    .variation-row-top {
        grid-template-columns: 1fr !important;
    }

    /* Color swatch fallback - match color option size */
    .color-swatch-detail {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
    }
}