/* SmartRocks Shop AJAX — loading state */
.bde-woo-shop-filters,
.bde-wooshoppage {
    transition: opacity 150ms ease;
}

body.is-loading .bde-woo-shop-filters,
body.is-loading .bde-wooshoppage {
    opacity: 0.5;
    pointer-events: none;
}

/* Also dim custom sidebar widgets during loading */
body.is-loading [data-sr-widget] {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 150ms ease;
}

/* ================================================================== */
/* Custom sidebar filter widgets                                      */
/* ================================================================== */

/* --- Farben swatches --- */
.sr-swatches {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sr-swatch__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.sr-swatch__dot {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1px solid #000;
    flex: 0 0 auto;
}

.sr-swatch.is-active .sr-swatch__dot {
    box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #000;
}

/* --- WC native price filter — slim layout matching design ---
   - Hide submit "Filter" button (AJAX fires on slidestop instead).
   - Position min/max labels at the slider's left and right edges,
     directly under the bar.
   Inputs are already display:none from WC's own price-slider.js. */
.widget_price_filter .price_slider_amount button.button {
    display: none;
}
.widget_price_filter .price_slider_amount {
    margin-top: 8px;
}
.widget_price_filter .price_label {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}

/* Kill Breakdance's 0.3s transition on slider handle/range — it makes the
   drag visibly lag behind the cursor. jQuery UI's animate:false only
   suppresses JS-driven animation; this CSS transition is a separate cause. */
.breakdance-woocommerce .price_slider .ui-slider-handle,
.breakdance-woocommerce .price_slider .ui-slider-range {
    transition: none !important;
}

/* --- Bestseller toggle --- */
.sr-toggle {
    width: 40px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: #ccc;
    position: relative;
    cursor: pointer;
    transition: background .15s;
}

.sr-toggle.is-on {
    background: #000;
}

.sr-toggle__thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s;
    pointer-events: none;
}

.sr-toggle.is-on .sr-toggle__thumb {
    transform: translateX(14px);
}

/* ================================================================== */
/* Tab row                                                             */
/* ================================================================== */

/* Flex layout assumed via Breakdance Div config; just ensure spacing fallback */
.sr-tabs-row { gap: 16px; }

/* Tabs — override Breakdance's .breakdance-menu .breakdance-menu-link { border:none }
   and post-352's .breakdance .bde-wp-menu-352-4 … { border-top: var(--link-border) }.
   Using .breakdance .bde-wp-menu.sr-tabs … for specificity 0,4,1 to beat both. */
.bde-wp-menu.sr-tabs ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.bde-wp-menu.sr-tabs li { padding: 0; margin: 0; }
.breakdance .bde-wp-menu.sr-tabs li .breakdance-menu-link {
    display: inline-block;
    padding: 3px 13px;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    text-decoration: none;
    transition: border-color .15s;
}

/* ================================================================== */
/* Sort dropdown — minimal native styling                              */
/* ================================================================== */
.sr-sort { display: inline-flex; align-items: center; gap: 8px; }
.sr-sort__label { font: 400 16px/1.5 'Roboto Mono', monospace; }
.sr-sort__select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    padding: 4px 24px 4px 8px;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%23000' stroke-width='1.5' d='M1 1l4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
}