/* ── Toolbar Layout ── */
.x-shop-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 20px;
    gap: 10px;
}

.x-shop-toolbar__left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.x-shop-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.x-result-count {
    font-size: 12px;
    color: #888;
}

/* Right side: Filter btn + Sort inline */
.x-shop-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ── Filter Button Style ── */
.x-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}

.x-filter-btn:hover {
    background: #333;
}

/* ── WooCommerce Sort Dropdown ── */
.x-sort-wrap .woocommerce-ordering {
    margin: 0;
}

.x-sort-wrap .woocommerce-ordering select {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 7px 32px 7px 12px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    appearance: auto;
    cursor: pointer;
    height: auto;
    max-width: 160px;
}

.x-sort-wrap .woocommerce-ordering select:focus {
    outline: none;
    border-color: #111;
}

/* ── Product Grid — always start from LEFT ── */
.woocommerce ul.products,
#shop-products ul.products {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;   /* LEFT align — fix for single product */
    align-items: stretch;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Each product card equal width */
.woocommerce ul.products li.product,
#shop-products ul.products li.product {
    flex: 0 0 calc(50% - 8px) !important;   /* 2 columns mobile */
    max-width: calc(50% - 8px) !important;
    margin: 0 !important;
    float: none !important;
}

@media (min-width: 992px) {
    .woocommerce ul.products li.product,
    #shop-products ul.products li.product {
        flex: 0 0 calc(33.333% - 11px) !important;  /* 3 columns desktop */
        max-width: calc(33.333% - 11px) !important;
    }
}

/* Remove WooCommerce default float */
.woocommerce ul.products::after,
.woocommerce ul.products::before {
    display: none !important;
}

/* ===========================
   PRICE SLIDER
=========================== */
.price-slider-wrapper {
    padding: 8px 2px;
}

.noUi-target {
    background: #e8e8e8 !important;
    border: none !important;
    box-shadow: none !important;
    height: 4px !important;
    border-radius: 4px !important;
    margin: 20px 10px 18px 10px !important;
}

.noUi-connect {
    background: #111 !important;
}

.noUi-handle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    background: #fff !important;
    border: 2px solid #111 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    top: -9px !important;
    cursor: grab !important;
    right: -10px !important;
}

.noUi-handle:active { cursor: grabbing !important; }
.noUi-handle::before,
.noUi-handle::after { display: none !important; }

.price-inputs-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 10px !important;
}

.price-input-box { flex: 1 !important; }

.price-input-box input {
    width: 100% !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222 !important;
    text-align: center !important;
    background: #fff !important;
    outline: none !important;
}

.price-inputs-row::after {
    color: #aaa;
    font-size: 13px;
    flex-shrink: 0;
}


/* ===========================
   FILTER GROUPS
=========================== */
.filter-group {
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 16px;
}

.filter-group:last-child { border-bottom: none; }

.filter-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111 !important;
    margin-bottom: 10px !important;
}

.form-check { margin-bottom: 6px !important; }

.form-check-input:checked {
    background-color: #111 !important;
    border-color: #111 !important;
}

.form-check-label {
    font-size: 13px !important;
    color: #444 !important;
    cursor: pointer !important;
}

/* Active Tags */
#active-filters { margin-bottom: 12px; }

#active-filter-tags .badge {
    font-size: 12px !important;
    padding: 5px 10px !important;
    border-radius: 20px !important;
    background: #111 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.remove-filter-tag {
    font-size: 14px !important;
    opacity: 0.7;
    cursor: pointer;
}

.remove-filter-tag:hover { opacity: 1; }

/* Loading Spinner */
#filter-loading .spinner-border {
    width: 28px !important;
    height: 28px !important;
    border-width: 2px !important;
    color: #111 !important;
}