/**
 * Our overrides on top of filters.css.
 *
 * Kept in a separate file so filters.css stays a pristine copy and can be
 * re-synced or replaced wholesale (see HANDOVER.md §2g on licensing).
 */

/* ---------------------------------------------------------------------
 * Price slider: bigger cursor target.
 *
 * The inherited design draws an 18x18 handle on a 10px track. That reads
 * fine but is a small mouse target and a poor touch target. These rules
 * add an INVISIBLE hit area around the handle — nothing about the visible
 * design changes.
 *
 * The base stylesheet sets `.noUi-handle:after { display: none }` to hide
 * noUiSlider's grip lines, so the pseudo-element is free to reuse here and
 * has to be switched back on explicitly.
 * ------------------------------------------------------------------- */

.ssf_range_slider.rounded .noUi-handle::after,
.ssf_range_slider.square .noUi-handle::after {
    display: block;
    content: "";
    position: absolute;
    top: -13px;
    right: -13px;
    bottom: -13px;
    left: -13px;
    /* noUiSlider's own ::after sets an explicit width/height for the grip
       lines. Without resetting them the negative insets cannot stretch the
       box and the hit area stays ~6px — measured in a real browser. */
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 50%;
}

/* Make it look draggable. */
.ssf_range_slider .noUi-handle {
    cursor: grab;
}

.ssf_range_slider .noUi-handle.noUi-active {
    cursor: grabbing;
}

/* Hover/focus feedback.
 *
 * Scale ONLY — never width/height/top/right. noUiSlider positions handles
 * with `right`/`top` offsets, so changing those on hover moves the handle out
 * from under the cursor (it visibly jumps up and sideways). `transform` is
 * not used on .noUi-handle by either stylesheet (the library transforms
 * .noUi-origin, the parent), so scaling here is safe and grows from the
 * centre, leaving the handle exactly where it sits. */
.ssf_range_slider .noUi-handle {
    transition: transform 0.12s ease;
}

.ssf_range_slider .noUi-handle:hover,
.ssf_range_slider .noUi-handle:focus,
.ssf_range_slider .noUi-handle.noUi-active {
    transform: scale(1.25);
}

/* NOTE on the visible handle size.
 *
 * The theme pins it at 10x10 with !important:
 *
 *     product-archive.min.css  .noUi-handle { width:10px!important; height:10px!important }
 *
 * That is a deliberate design choice, and it is why the handle felt hard to
 * grab. Rather than fight it, the invisible ::after above gives a ~36px
 * target on mouse AND touch while the visible dot stays as the theme drew it.
 * Verified in a real browser: the handle is grabbable 13px off-centre.
 *
 * If a larger VISIBLE handle is ever wanted, it has to beat that !important —
 * better done in the theme than by escalating here. */