/* ============================================
   VARIATIONS SIDE BY SIDE FIX
   Ensure Color and Storage are truly side by side
   ============================================ */

/* CRITICAL: Top row - Color and Storage side by side */
html body .variation-row-top,
body .variation-row-top,
.variation-row-top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
    width: 100% !important;
    margin-bottom: 16px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    flex-direction: row !important; /* Override any flex */
}

/* Ensure items in top row are constrained and side by side */
html body .variation-row-top > .variation-item,
body .variation-row-top > .variation-item,
.variation-row-top > .variation-item {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    flex: none !important; /* Override flex: 0 0 50% from old CSS */
    min-width: 0 !important;
}

/* Bottom row - RAM below Color (left side only) */
.variation-row-bottom {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    align-items: start !important;
    box-sizing: border-box !important;
}

/* RAM item should align with Color (left side) */
.variation-row-bottom > .variation-item {
    width: auto !important;
    max-width: calc(50% - 12px) !important; /* Match Color width */
    box-sizing: border-box !important;
}

/* Override any conflicting styles */
.variations-details-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
}

.variations-details-section > .variation-row-top {
    margin-bottom: 16px !important;
}

.variations-details-section > .variation-row-bottom {
    margin-bottom: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
    .variation-row-top {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .variation-row-bottom > .variation-item {
        max-width: 100% !important;
    }
}