/* Increase diamonds dropdown column width to 300px for desktop only - NO OTHER CHANGES */

/* ========================================
   DIAMONDS DROPDOWN WIDTH INCREASE - DESKTOP ONLY
   ======================================== */

/* Desktop only - increase diamonds dropdown column width from 250px to 300px */
@media (min-width: 768px) {
    /* Target the diamonds dropdown specifically */
    .mega-menu-dropdown.diamonds {
        /* Increase overall dropdown width to accommodate wider columns */
        width: 1200px !important; /* Increase from 100% to fixed 1200px (3 * 300px + padding) */
        max-width: 1200px !important; /* Ensure it doesn't exceed this width */
    }
    
    /* Target the row container within diamonds dropdown */
    .mega-menu-dropdown.diamonds .row.padiing-left-5 {
        /* Adjust padding to accommodate wider columns */
        padding: 0 30px !important; /* Increase from 0 20px to 0 30px */
    }
    
    /* Target all columns within diamonds dropdown */
    .mega-menu-dropdown.diamonds .col-lg-3 {
        width: 300px !important; /* Increase from 25% to fixed 300px */
        max-width: 300px !important; /* Ensure it doesn't exceed 300px */
        flex: 0 0 300px !important; /* Flexbox: don't grow, don't shrink, 300px basis */
    }
    
    /* Target the first column (Search For Diamond) */
    .mega-menu-dropdown.diamonds .row > div:first-child {
        width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
    }
    
    /* Target the second column (Custom Diamond Jewelry) */
    .mega-menu-dropdown.diamonds .row > div:nth-child(2) {
        width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
    }
    
    /* Target the third column (B2C Experience) */
    .mega-menu-dropdown.diamonds .row > div:nth-child(3) {
        width: 300px !important;
        max-width: 300px !important;
        flex: 0 0 300px !important;
    }
    
    /* Ensure the row uses flexbox for proper column distribution */
    .mega-menu-dropdown.diamonds .row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
    }
    
    /* Adjust padding for the columns to maintain spacing */
    .mega-menu-dropdown.diamonds .row > div {
        padding: 0 15px !important; /* Add horizontal padding between columns */
    }
    
    /* Ensure the dropdown doesn't overflow the viewport */
    .mega-menu-dropdown.diamonds {
        left: 50% !important;
        transform: translateX(-50%) !important; /* Center the dropdown */
    }
}

/* Mobile - keep original width and behavior */
@media (max-width: 767px) {
    /* Target the diamonds dropdown specifically */
    .mega-menu-dropdown.diamonds {
        width: 100% !important; /* Keep original 100% width for mobile */
        max-width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
    
    /* Target the row container within diamonds dropdown */
    .mega-menu-dropdown.diamonds .row.padiing-left-5 {
        padding: 0 20px !important; /* Keep original mobile padding */
    }
    
    /* Target all columns within diamonds dropdown */
    .mega-menu-dropdown.diamonds .col-lg-3 {
        width: 100% !important; /* Keep original 100% width for mobile */
        max-width: 100% !important;
        flex: none !important;
    }
    
    /* Target the row for mobile */
    .mega-menu-dropdown.diamonds .row {
        display: block !important; /* Keep original block display for mobile */
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
    }
    
    /* Adjust padding for the columns on mobile */
    .mega-menu-dropdown.diamonds .row > div {
        padding: 15px 0 !important; /* Keep original mobile padding */
    }
}