/* xl - DESKTOP STYLES */ 
.custom-variant-parent-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.custom-swatch-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-bottom: 10px;
}

/* Original Swatch Styles */
.swatch-item {
    padding: 8px 15px;
    border: 1px solid #035299;
    border-radius: 6px;
    color: #035299;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-family: 'Manrope';
    line-height: 1.2;
    font-size: 13px;
}

.swatch-item:hover, .swatch-item.active {
    background-color: #035299;
    color: #ffffff;
}

.swatch-item.out-of-stock {
    border-color: #EFEFEF;
    color: #BFC8D1 !important;
    text-decoration: line-through;
    cursor: not-allowed;
}

/* Add to Cart Button with Gradient */
.custom-ajax-add-to-cart {
    width: 100%;
    padding: 15px !important;
    background: linear-gradient(98.59deg, #2E485F -25.59%, #035299 82.5%);
    color: #F6F6F7 !important;
    border: none;
    border-radius: 100px;
    font-family: 'Poppins' !important;
    font-weight: 400 !important;
    cursor: pointer;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
	display: flex;
    gap: 10px
}

.custom-ajax-add-to-cart:disabled {
    background: #BFC8D1;
    cursor: not-allowed;
}

.custom-ajax-add-to-cart:hover:not(:disabled) {
    opacity: 0.9;
}

/* Desktop Hover Logic */
@media (min-width: 768px) {
    .custom-variantions-main-wrapper {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease;
        overflow: hidden;
    }

    .ab-product-loop-item-wrapper:hover .custom-variantions-main-wrapper {
        grid-template-rows: 1fr;
    }

    .custom-variantions-main-wrapper > div {
        min-height: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .ab-product-loop-item-wrapper:hover .custom-variantions-main-wrapper > div {
        opacity: 1;
    }
	
}

@media (max-width: 767px){
	.custom-swatch-container {
		grid-template-columns: repeat(2, 1fr);
	}
}