/* Start custom CSS for section, class: .elementor-element-b3fe62d *//* --- BIOSUN PREMIUM VARIATION SWATCHES (AGRIBEGRI STYLE) --- */

/* Main Box Styling */
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-items-wrapper .variable-item {
    background-color: #ffffff !important;
    border: 2px solid #D4EDD6 !important; /* Biosun Mist Green Border */
    border-radius: 8px !important;
    padding: 10px 15px !important;
    min-width: 120px !important;
    min-height: 60px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02) !important;
}

/* Hover Effect */
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-items-wrapper .variable-item:hover {
    border-color: #2E6B35 !important; /* Biosun Leaf Green */
    box-shadow: 0 4px 10px rgba(46, 107, 53, 0.1) !important;
}

/* Active / Selected Box Design (Just like competitor) */
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-items-wrapper .variable-item.selected {
    border-color: #2E6B35 !important; /* Bold Leaf Green */
    background-color: #F2F5ED !important; /* Light Cream Background */
    box-shadow: 0 0 0 1px #2E6B35 inset !important;
}

/* Text Styling Inside Box */
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-items-wrapper .variable-item-span-color {
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #1A3A1F !important; /* Forest Green */
    text-transform: none !important;
}

/* Hide Default Tooltips */
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-item[data-balloon]::after,
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-item[data-balloon]::before {
    display: none !important;
}

/* Make grid layout like AgriBegri (2 boxes per row on mobile) */
.elementor-282 .elementor-element.elementor-element-b3fe62d .variable-items-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
}/* End custom CSS */