.weaf-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    padding: 0 10px;
}

.weaf-form > div {
    flex-grow: 1;
}

.mb-2 {
    margin-bottom: 16px;
}

.weaf-form input, .weaf-form select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    min-width: 160px;
    width: 100%;
}

.weaf-btn, .weaf-reset {
    padding: 9px 14px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

.weaf-btn {
    background: #2271b1;
    color: #fff;
}

.weaf-btn:hover {
    background: #1a5f90;
}

.weaf-reset {
    background: #eaeaea;
}

/* Base grid */
.weaf-grid {
    display: grid;
    gap: 16px;
    padding: 0 10px;
}

/* Default column counts */
.weaf-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weaf-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.weaf-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.weaf-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.weaf-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.weaf-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.weaf-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

/* Equal Height for Product Cards */
.weaf-grid .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
}

/* Force inner content to stretch */
.weaf-grid .product > * {
    flex: 1;
}

/* Make the Add to Cart button stick to bottom */
.weaf-grid .product .add_to_cart_button {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Ensure images scale properly */
.weaf-grid .product img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}


/* Large desktops & laptops (≤ 1400px) */
@media (max-width: 1400px) {
    .weaf-cols-8 {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .weaf-cols-7 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .weaf-cols-6 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Medium desktops & tablets landscape (≤ 1200px) */
@media (max-width: 1200px) {
    .weaf-cols-8 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .weaf-cols-7 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .weaf-cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .weaf-cols-5 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Tablets (≤ 992px) */
@media (max-width: 992px) {
    .weaf-cols-8,
    .weaf-cols-7,
    .weaf-cols-6,
    .weaf-cols-5,
    .weaf-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile (≤ 768px) */
@media (max-width: 768px) {
    .weaf-cols-8,
    .weaf-cols-7,
    .weaf-cols-6,
    .weaf-cols-5,
    .weaf-cols-4,
    .weaf-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Extra small mobile (≤ 480px) */
@media (max-width: 480px) {
    .weaf-cols-8,
    .weaf-cols-7,
    .weaf-cols-6,
    .weaf-cols-5,
    .weaf-cols-4,
    .weaf-cols-3,
    .weaf-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

.weaf-empty {
    padding: 20px;
    text-align: center;
    color: #666;
}

.weaf-loadmore-wrap {
    text-align: center;
    margin-top: 12px;
}

.weaf-loadmore {
    padding: 10px 16px;
    border-radius: 8px;
    border: 0;
    background: #111;
    color: #fff;
    cursor: pointer;
    opacity: 0.9;
}

.weaf-loadmore[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

.weaf-form-actions {
    flex-grow: 1;
    display: flex;
    gap: 10px;
    padding: 0 10px;
    justify-content: flex-end;
}

.weaf-wrap {
    position: relative;
}

/* Loader Wrapper */
.weaf-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.3s ease-in-out;
}

/* Hide loader when not active */
.weaf-loading.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Spinner Styles */
.weaf-spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #e0e0e0;
    border-top: 6px solid #2271b1; /* WooCommerce / Elementor accent color */
    border-radius: 50%;
    animation: weaf-spin 1s linear infinite;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Spinner Animation */
@keyframes weaf-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}