/* ============================================================================= PRICE -- the engagement-ring rail's fourth group. Figma 14674:48902. ----------------------------------------------------------------------------- stone-first.css carries a note reading "NO PRICE GROUP ... this archive has no price filter to drive it". It now has one: WooCommerce's own `min_price` / `max_price` query args already constrain this archive's main product query (WC_Query::price_filter_post_clauses, hooked onto `posts_clauses` from WC_Query::product_query), so the control below is a real filter and not a skin. da-general.php's da_ring_price_filter_enqueue() injects the group and drives it; this sheet is only its geometry. The board's price frame is 344 wide and the rail is 345, so the group fills the rail exactly as SHAPE, METAL and STYLE do -- the one-pixel difference is the rail's, not this group's. EVERY COLOUR, RADIUS AND BOX SIZE HERE IS THE SIBLING BOARD'S. 14621:48072 draws the same control for the settings picker and it is already built in settings-picker.css (`.sf_picker_price*`); the numbers are lifted from there rather than re-read, so the two surfaces cannot drift: track 344 x 8 r15 #E4DED8 connect r15 #C2CEB2 thumbs 32 x 21 r16 #27423B inputs 110 x 40 r8 #FFFFFF, 1px #E4DED8, 16/16 ls +0.75 #0F0E0D ONE DELIBERATE DEPARTURE FROM THE SIBLING. settings-picker.css insets the noUiSlider target by `margin: 0 16px` -- half a thumb each side -- so that centred thumbs end flush inside the drawer's padding. That cannot be used here: the rail is `overflow: hidden` (stone-first.css), so a thumb centred on the minimum would have its left half CLIPPED AWAY, and the visible track would measure 313 rather than the board's 344. Instead the target keeps the full rail width and the two thumbs are anchored by their OUTER EDGES -- `.noUi-handle-lower { right: -32px }`, `.noUi-handle-upper { right: 0 }`. That is also what the board draws: `Rectangle 323`, the lower thumb, shares its x with the track, so the board's thumbs sit INSIDE the track's span, not centred on its ends. ============================================================================= */ /* The desktop rail only. Below 992 the rail is `d-none` and the phone filters are a separate `.shop_filters.mobile_filters` subtree, which this group is not injected into -- so the whole sheet lives in the rail's own breakpoint, mirroring the rest of the rail styling in stone-first.css. */ @media (min-width: 992px) { /* ---- the group -------------------------------------------------------- `> div { width: 100% }` and the rail's own 24px `gap` already come from stone-first.css, which is why the group is `.filter_heading` + `.filter_row` and nothing more: the spacing is INHERITED, not restated. ---------------------------------------------------------------------- */ /* THE HEAD IS A `::before`, NOT THE TEXT NODE. The rail prints "Shape:" / "Metal:" / "Style:" and stone-first.css answers with `font-size: 0` on `.filter_heading p` plus a `content:` per group, so the board's bare word is what paints. PRICE joins that scheme -- the font, size, colour and tracking all come from the shared rule; only the word is this group's. */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .price_filters .filter_heading p::before { content: "Price"; } /* `.filter_row` is a wrapping flex row of chips for every other group. This group holds one full-width control, so it goes back to a block. THE 4px IS THE BOARD'S, not a nudge. `price` (14674:48902) is 112 tall: a 31 head frame, 4, then the 77 of scale + 16 + inputs. The rail's shared head rule already spends 12 of that 31 as `margin-bottom`, which is the whole gap for the chip groups -- PRICE is the one group the board gives an extra 4 to. MEASURED: with it the group is 112 tall, without it 108. */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .price_filters .filter_row { display: block; padding-top: 4px; } /* ---- the slider ------------------------------------------------------ `scale`, the board's 344 x 21 group: an 8-tall bar with 21-tall thumbs overhanging it, so the bar is pushed down 6.5px to keep the two concentric ((21 - 8) / 2). ---------------------------------------------------------------------- */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track.noUi-target { width: auto; height: 8px; margin: 6.5px 0 0; border: 0; border-radius: 15px; background: #E4DED8; box-shadow: none; } body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-connect { background: #C2CEB2; border-radius: 15px; } body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-handle { width: 32px; height: 21px; top: -6.5px; border: 0; border-radius: 16px; background: #27423B; box-shadow: none; cursor: pointer; } /* Outer-edge anchoring -- see the note at the top of the file. Both ends are stated so neither inherits noUiSlider's own centred `right`. */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-handle-lower { right: -32px; } body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-handle-upper { right: 0; } /* noUiSlider's default stylesheet draws two 1px grip lines inside every handle. The board's thumb is a plain pill. */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-handle::before, body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-handle::after { display: none; } /* The default touch area is a padded box offset from the handle; with a 32 x 21 thumb that put the grabbable region off the pill. */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_track .noUi-touch-area { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none; } /* ---- the two value boxes --------------------------------------------- `Frame 1171276739` 344 x 40, SPACE_BETWEEN, itemSpacing 10, sitting 16 below the scale (`Frame 1171276738` itemSpacing 16). ---------------------------------------------------------------------- */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_inputs { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; } body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_input { flex: 0 0 110px; box-sizing: border-box; width: 110px; height: 40px; min-height: 0; /* main.css gives every text input an 8px vertical margin. MEASURED before this line: `.da_price_inputs` computed 48 tall rather than 40 and the scale-to-box gap read 24 where the board asks for 16. */ margin: 0; padding: 0 12px; border: 1px solid #E4DED8; border-radius: 8px; background: #FFFFFF; font-family: 'FoundersGrotesk', sans-serif; font-weight: 400; font-size: 16px; line-height: 16px; letter-spacing: 0.75px; color: #0F0E0D; text-align: center; } body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price_input:focus { outline: 0; border-color: #27423B; } /* The rail animates in from `visibility: hidden`; a slider built while the rail was closed must not flash its unstyled noUiSlider default. */ body.sf-ring-archive .the-content > .shop_filters:not(.mobile_filters) .da_price:not(.is-ready) .da_price_track { visibility: hidden; } }