/* 1. REMOVE THE ARROW */
.mod-menu__toggle-sub .icon-chevron-down {
    display: none !important;
}

/* 2. FIX THE BUTTON LOOK (Color, Size, Background) */
.mod-menu__toggle-sub {
    background: transparent !important; 
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #ffffff !important;      /* White text */
    font-size: 18px !important;     /* Size 18 */
}

/* 3. OPTIONAL: HOVER EFFECT (Matches the other links) */
.mod-menu__toggle-sub:hover {
    color: #cccccc !important;      /* Light gray on hover - change this color if needed */
}

/* THE NUCLEAR GRID FIX */

/* 1. Force the container to allow items side-by-side */
div[class*="j2store"], div[class*="j2commerce"], .j2store-product-list, .j2commerce-product-list {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 2. Force the individual products to be 3 columns (approx 33%) */
div[class*="j2store-product-item"], div[class*="j2commerce-product-item"], .j2store-product-item, .j2commerce-product-item {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    min-width: 250px !important; /* Prevents them from getting too tiny */
    display: block !important;
    box-sizing: border-box !important;
}

/* 3. Fix for Mobile (Force 1 column on small screens) */
@media (max-width: 768px) {
    div[class*="j2store-product-item"], div[class*="j2commerce-product-item"], .j2store-product-item, .j2commerce-product-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}


/* 1. Hide the "Select Media Types" button/grey box */
.j2commerce-configurable-button {
    display: none !important;
}

/* 2. Force the hidden container to reveal itself */
/* We target any div that starts with 'j2commerce-flexivariable-options' */
div[class*="j2commerce-flexivariable-options"] .collapse {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* 3. Ensure the dropdown itself is visible and styled */
div[class*="j2commerce-flexivariable-options"] select {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
}