/* =============================================================================
Advanced diamond search — DESKTOP (>= 992px)
BOARD: Figma Ex10uQ9OY3OuzSPi4g2hPb, frame 14468:42834
"2.1 Advanced Search" 1728 x 1100.
THIS BOARD SUPERSEDES 14465:39929 ("STONE-B"), which the previous version of
this file was written from, and it supersedes the 14463:35552 family that
_advanced-search.css names in its own header. Where they disagree, 14468
wins. The conflicts that changed output here:
| thing | OLD (14465:39929 / 14463) | NEW (14468:42834) |
| filter rail width | 491 | 345 |
| rail -> grid gutter | 24 | 89 |
| page gutter | 0 / none | 80 both sides |
| results grid gap | 23.200000762939453 | 24 |
| card | 266 x 381.8 | 265 x 382 |
| toolbar band | 60 tall, no Filters pill | 68 tall, pill at |
| | | x80, 116 x 44 |
| sort / view / segmented | 38 tall | 44 tall |
| segmented radius | 10 | 8 (mobile stays 10)|
| header titles gap | 26 | 21 |
| header result count | 16px | 18px |
| footer | none | 120 tall band |
WHAT WAS ACTUALLY WRONG ("no spacing, nothing")
-----------------------------------------------
Measured at 1728 in the mirror before this pass:
* NO page gutter at all — the filter rail started at x 0, not x 80.
* The rail was the raw bootstrap col-lg-3 at 491 wide with the legacy
filter styling: sections 20px apart instead of 36, shape tiles 114 x 85
in a 5px grid instead of 80 x 96 at 8 / 9.
* Every result card measured **88.6px wide**. `.result_grid_item_container`
carries bootstrap's `col-6 col-lg-4`, whose `width: 33.333%` resolved
against the CSS grid TRACK (265.85) rather than against the row — so the
four tracks were right and the cards inside them were a third of a track,
with the title, spec and price overlapping each other.
* The toolbar was 60 tall, the Filters pill was `display:none`, and the
controls were positioned with a hard-coded `padding-left: 514px` — the
1728 artboard's grid x, which is wrong at every other width.
* The sticky footer never painted on desktop.
SCOPING: every rule here MUST stay under #ssq_diamond_search. This component
is mounted three times — the live /lab-grown-diamonds page, the standalone
diamond templates, and the quiz — and only the quiz wraps it in that id.
Anything unscoped ships straight to the landing pages.
NEVER display:none a node the JS reads. `.results_count`, `.result_counter`,
`.search_view_options`, `.diamond_sort_by`, `#search_filters_mobile` and
`.result_item_row` are parked with a zero box + `visibility:hidden` wherever
the design has no slot for them; each one is commented where it happens.
RESPONSIVE MODEL — FLUID, the same way _stone-desktop.css does it
----------------------------------------------------------------
The board draws 1728 only. The layout is expressed as percentages anchored on
the exact artboard numbers so it holds all the way down to 992, where the
mobile sheet (max-width: 991px) takes over:
page gutter 80 / 1728 = 4.6296296296% -> 80.00 at 1728
content 1568 = 1728 - 2 x 80
rail 345 / 1568 = 22.0025510204%
rail gutter 89 / 1568 = 5.6760204082% (rail ends 425, grid starts 514)
results 1134 / 1568 = 72.3214285714% (= the 1fr remainder)
Two deliberate departures from pure proportion, both because the board's own
auto-layout is intrinsic rather than proportional in that axis:
1. The rail gets a 280px FLOOR (`minmax(280px, 22.0025510204%)`). The rail
is a FIXED 345 in Figma and its content is intrinsic — four 80px shape
tiles plus three 8px gaps is exactly 344. Scaled purely, 992 would give
a 198px rail and 43px tiles, which cannot hold a 32px icon and the word
"Marquise". Below ~1330 the floor engages and the results column gives
up the difference.
2. The results grid is `repeat(auto-fill, minmax(220px, 1fr))` with the
board's fixed 24px gap — i.e. the board's own wrapping auto-layout
(HORIZONTAL + WRAP, itemSpacing 24, fixed 265-wide children). At 1728
that resolves to exactly 4 columns x 265.5. Narrower, the CARD stays
near its designed width and the column count drops (3 at 1280, 2 at
992) instead of the cards collapsing.
Type sizes stay fixed; the board gives one ramp.
============================================================================= */
@media (min-width: 992px) {
/* ===========================================================================
0. TOKENS
The --rb-* tokens are re-declared by _advanced-search.css inside its own
`min-width: 992px` block, so they exist here. The --dsq-d-* grid tokens are
new and local to this file: they are the fluid expression of the 14468
artboard and nothing outside this sheet should depend on them.
------------------------------------------------------------------------ */
#ssq_diamond_search {
/* colour tokens the rail needs that the header block did not declare */
--rb-brand-sage-strong: #C2CEB2; /* selected chip / tile fill */
--rb-brand-sage: #D8DDCA; /* badge ground */
--rb-gold-info: #C69858; /* the info dot in section heads */
--rb-surface-card: #FFFFFF;
/* fluid grid, anchored on 14468:42834 */
--dsq-d-gutter: 4.6296296296%; /* 80 / 1728 */
--dsq-d-rail: 22.0025510204%; /* 345 / 1568 */
--dsq-d-rail-min: 280px; /* see RESPONSIVE MODEL note 1 */
--dsq-d-rail-gap: 5.6760204082%; /* 89 / 1568 */
--dsq-d-band1: 128px; /* `TOp Stuff` */
--dsq-d-band2: 68px; /* `Frame 1171276644` toolbar */
--dsq-d-body-top: 4px; /* 200 content top - (128 + 68) */
--dsq-d-footer: 100px; /* `Footer` -- was 120, see THE BAND */
--dsq-d-rhythm: 36px; /* rail counterAxisSpacing */
}
/* ===========================================================================
1. SHELL
_advanced-search.css already pins the root (position:fixed, inset 0,
overflow-y:auto) — that is the panel behaviour the board implies (a
1728x1240 `black mask` scrim sized to the ring builder, not to this 1100
frame; see SEARCH.md §4). What is added here is only the CHROME behaviour:
the two header bands stay put while the rail and the grid scroll under
them, which is what the board's independent rail scrollbar requires.
------------------------------------------------------------------------ */
#ssq_diamond_search .dsq_screen_header {
position: sticky;
top: 0;
z-index: 5;
}
/* ===========================================================================
2. BAND 1 + BAND 2 — the header, 128 + 68
`TOp Stuff` 1728x128 (VERTICAL, pad 44/80/44/80, bottom hairline 0.75
#E4DED8) sits above `Frame 1171276644` 1728x68 (HORIZONTAL SPACE_BETWEEN,
pad 12/80/12/80). Both bands share the #FAF3ED ground.
The 80px page gutter is declared ONCE, on `.dsq_screen_header`, so that
`.dsq_header_controls` can keep `padding-left: 0` (CHECKLIST 49 — the old
build hard-coded 514px here, which is the 1728 grid x and wrong at every
other width). The band-1 hairline has to span the full 1728 including that
gutter, so it is drawn as an absolutely positioned pseudo-element on the
header: an abs-positioned child resolves against the PADDING box, so
left:0/right:0 is full-bleed while every real child stays inset.
------------------------------------------------------------------------ */
#ssq_diamond_search .dsq_screen_header {
display: grid !important; /* beats the reboot's [hidden]{display:none} */
grid-template-columns: minmax(0, 1fr);
grid-template-rows: var(--dsq-d-band1) var(--dsq-d-band2);
gap: 0;
height: auto;
padding: 0 var(--dsq-d-gutter);
background: var(--rb-surface-page);
}
#ssq_diamond_search .dsq_screen_header::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: var(--dsq-d-band1);
height: 0.75px;
background: var(--rb-border-subtle);
pointer-events: none;
}
/* --- band 1 -------------------------------------------------------------- */
/* `Top Stuff` is FIXED at 128 while its own auto-layout asks for 44+60+44 =
148, i.e. the design clips its bottom padding. Reproduced as a fixed 128
with the padding on the top only; the side gutter is the parent's. */
#ssq_diamond_search .dsq_header_titlerow {
grid-column: 1;
grid-row: 1;
height: var(--dsq-d-band1);
box-sizing: border-box;
padding: 44px 0 0;
border-bottom: 0; /* the full-bleed ::before draws it instead */
}
/* `Frame 1171276727` 1568 x 60, HORIZONTAL SPACE_BETWEEN gap 26, counter MIN */
#ssq_diamond_search .dsq_header_bar {
height: 60px;
gap: 26px;
justify-content: space-between;
align-items: flex-start;
}
/* `Frame 1171276728` 518 x 60, VERTICAL gap 21.
The 14465 board said 26 and the build shipped 26, which put the result
count at y 93 instead of the 88 this board records. The -6.1px negative
margins on the title (declared in _advanced-search.css) pull the 32/35.2
line box back to the 23px tight box Figma measures, so a plain 21 here
lands the count box at exactly 88. */
#ssq_diamond_search .dsq_header_titles {
gap: 21px;
/* THE CLIP MOVES ONTO THE TITLE. Owner, again: *"title chopped off"*, on
the desktop advanced search.
`line-height: 1.3` (_advanced-search.css:2832) answered the first report
by giving the glyphs room inside their own line box. It cannot answer
this one, because the shave is not inside the line box -- it is this
ancestor's `overflow: hidden` cutting across it. MEASURED at 1440: this
box starts at y44 while the title's line box starts at y38, the 6.1px
negative margin that reproduces Figma's tight text box deliberately
hanging it above the clip; the caps' ink begins at 42.8 and the top
1.2px of every capital was being taken.
The clip is not removed, it is moved to the element that actually needs
it -- a long title still cannot escape the band, it ellipsises instead,
and the title's own box starts above its ink so it clips nothing. */
overflow: visible;
}
#ssq_diamond_search .dsq_header_title {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* `12,900 Results` — FG 400 18/16 ls -0.21 #3E3C39. The 14465 board said 16. */
#ssq_diamond_search .dsq_header_count.results_count {
font-size: 18px;
/* 18, NOT THE BOARD'S 16 -- AND THE CLIP IS WHY. Owner, second report:
*"title chopped off"*, on the desktop advanced search. The title's own
shave was answered with `line-height: 1.3` (_advanced-search.css:2832);
this line is the other half of the same block and was still short.
MEASURED at 1440: `.dsq_header_titles` clips (`overflow: hidden`) with
scrollHeight 68 against clientHeight 66, and the 2px is exactly an 18px
glyph box sitting in a 16px line box -- the descenders of
"99,507 Results" shaved off by the ancestor.
The line box is given the room rather than the clip removed (the clip is
what keeps a long title inside the band), and the 2px it adds is pulled
straight back off both ends so the count's box still starts at the 88 the
board records and the row height does not move. */
line-height: 18px;
margin: -1px 0;
}
/* `exit button` 36 x 36 r4, fill #E4DED8 at FULL opacity — already correct
in the base sheet; only the glyph size changes (10 x 10, stroke #0F0E0D). */
/* --- band 2, the toolbar ------------------------------------------------- */
/* CONSTRAINT: the board's toolbar is one node, `Frame 1171276644`, holding
[ Filters | view toggle | sort ] on the left and the segmented control on
the right. The markup has no such wrapper — `.dsq_header_controls` and
`.dsq_segmented` are siblings — so the band is composed by placing both in
grid row 2 and letting the segmented end-align. Both are 44 tall in a 68
band: 12 + 44 + 12. See the report: a `.dsq_toolbar` wrapper is the one
piece of additive markup this screen still wants. */
#ssq_diamond_search .dsq_header_controls {
grid-column: 1;
grid-row: 2;
flex: none;
height: var(--dsq-d-band2);
box-sizing: border-box;
padding: 12px 0; /* CHECKLIST 49: no horizontal padding */
gap: 24px; /* `Frame 1171276625` itemSpacing */
align-items: center;
justify-content: flex-start;
}
#ssq_diamond_search .dsq_segmented {
grid-column: 1;
grid-row: 2;
justify-self: end;
align-self: center;
flex: 0 0 auto;
/* 2 x 132 plus the track's two 0.75px strokes, so each half is exactly the
132 the Filters pill below is -- see the note on `.dsq_seg` in
_advanced-search.css for why all three controls are now one width. The
0.75px strokes are each used as 1 device pixel at DPR 1, so 266 is what
leaves an inner 264 and two exact 132s -- 265.5 measured 131.75. */
width: 266px;
height: 44px;
margin: 0;
/* the NEW board is radius 8 on desktop; mobile keeps 10 */
border-radius: var(--rb-radius-md);
}
/* `BG` halves 134.2 / 130.2 x 42.5, labels FG 400 18/18 ls -0.5 */
#ssq_diamond_search .dsq_seg_label {
font-size: 18px;
line-height: 18px;
}
#ssq_diamond_search .dsq_seg_icon svg {
width: 13px;
height: 12px;
}
/* The Filters pill is IN the desktop board (116 x 44 at x 80) — the previous
build display:none'd it. It leads the toolbar, then the view toggle has to
line up with the first grid column at x 514. That offset is the rail plus
the rail gutter minus the pill and the flex gap, expressed in the same
fluid units as the body grid so it tracks at every width:
345 + 89 - 116 - 24 = 294 at 1728. */
#ssq_diamond_search .dsq_header_controls .dsq_filters {
display: flex;
/* DOM order in the header is [ view toggle | sort | pill ] — the pill is
authored last and simple-select-redesign.js splices the sort in between.
The board puts Filters first. `order` moves the paint position only; the
DOM, the tab order and every handler are untouched. */
order: -1;
/* 132, THE SAME AS ONE SEGMENTED HALF. The board draws this pill at 116
beside a 266-wide two-up control, i.e. 116 / 134 / 130 across the row.
Owner: *"different widths, all need to be uniform."* */
flex: 0 0 132px;
width: 132px;
height: 44px;
padding: 0 12px; /* board pad T0 R12 B0 L12 */
/* max() so the offset tracks the rail's 280px FLOOR too — without it the
toggle fell 24px short of the grid column at 1280 and 47px at 992 */
margin-right: calc(max(var(--dsq-d-rail-min), var(--dsq-d-rail)) + var(--dsq-d-rail-gap) - 156px);
border-radius: var(--rb-radius-md);
}
/* `Frame 1171276655` itemSpacing 2 (mobile is 1); icon 18, label 18/19 */
#ssq_diamond_search .dsq_header_controls .dsq_filters .dsq_filters_group {
gap: 2px;
}
#ssq_diamond_search .dsq_header_controls .dsq_filters_icon {
flex: 0 0 18px;
width: 18px;
height: 18px;
}
#ssq_diamond_search .dsq_header_controls .dsq_filters_icon svg {
width: 18px;
height: 18px;
}
#ssq_diamond_search .dsq_header_controls .dsq_filters_label {
font-size: 18px;
line-height: 19px;
}
/* badge `3` is 14/19 on desktop, 12/19 on mobile. The badge itself keeps the
base sheet's 24px circle and its `.is-empty` zero-box + visibility:hidden
park — never display:none, the count is written into it at runtime. */
#ssq_diamond_search .dsq_header_controls .dsq_filters_badge_count {
font-size: 14px;
}
/* `Frame 38323` 120 x 44, halves 60.5 x 44, itemSpacing -1 kept by the base */
#ssq_diamond_search .dsq_viewtoggle {
flex: 0 0 120px;
width: 120px;
height: 44px;
}
#ssq_diamond_search .dsq_viewtoggle .result_view {
flex: 0 0 60.5px;
width: 60.5px;
height: 44px;
}
/* `Sorting` 265 x 44, pad 12 on ALL FOUR sides (mobile is 12/8), radius 8,
1px #E4DED8, label FG 400 18/19. FIXED width here, not FILL. */
#ssq_diamond_search .dsq_header_controls .diamond_sort_by {
flex: 0 0 265px;
width: 265px;
height: 44px;
padding: 12px;
}
#ssq_diamond_search .dsq_header_controls .diamond_sort_by > p {
font-size: 18px;
line-height: 19px;
}
#ssq_diamond_search .dsq_header_controls .diamond_sort_by .diamond_sort_by_options {
top: 46px;
}
/* ===========================================================================
3. THE CONTENT BAND — rail + grid, y 200
`Filters` 345 x 1157 at (80, 200) and `products grid` 1134 x 900 at
(514, 200). The bootstrap container/row carry their own max-width, negative
margins and gutter variable, so they are neutralised first and the page
gutter is put on the CONTAINER — that way the ROW's width is the 1568
content box and the rail/gap percentages below resolve against it.
------------------------------------------------------------------------ */
#ssq_diamond_search #diamond_search > .container {
max-width: none;
width: 100%;
margin: 0;
box-sizing: border-box;
/* 200 - (128 + 68) = 4 */
padding: var(--dsq-d-body-top) var(--dsq-d-gutter) 0;
--bs-gutter-x: 0;
}
#ssq_diamond_search #diamond_search > .container > .row {
display: grid;
grid-template-columns: minmax(var(--dsq-d-rail-min), var(--dsq-d-rail)) minmax(0, 1fr);
column-gap: var(--dsq-d-rail-gap);
align-items: start;
max-width: none;
width: 100%;
margin: 0;
padding: 0;
--bs-gutter-x: 0;
}
/* The mobile-only count strip is a grid child of that row. Bootstrap's
`d-lg-none` display:none's it at desktop, but it holds a
`span.result_counter` that diamond-search.js:967 writes and the
`.search_view_options` the redesign script reads, so it is restored to the
layout and collapsed instead. Never display:none. */
#ssq_diamond_search #diamond_search > .container > .row > .results_count.mobile_count {
display: flex !important;
grid-column: 1 / -1;
grid-row: 3;
height: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
visibility: hidden;
}
/* the legacy desktop rule — no equivalent on the board */
#ssq_diamond_search #diamond_search > .container > .row > hr {
grid-column: 1 / -1;
grid-row: 4;
height: 0;
margin: 0;
border: 0;
visibility: hidden;
}
/* ===========================================================================
4. THE FILTER RAIL — `Filters` 345 x 1157, counterAxisSpacing 36
36 IS the rail's rhythm: every one of the seven sections is 36 from the
next. The legacy sheet gave `.d_filter` a 20px top padding and nothing
else, which is the single biggest reason the rail read as "no spacing".
The rail scrolls independently of the grid (the board draws its own 6px
scrollbar at x 457, thumb 371 / 734). Reproduced with a sticky, self-
scrolling column plus a 6px styled scrollbar in the board's colours.
------------------------------------------------------------------------ */
#ssq_diamond_search .col-lg-3.search_filters_container {
grid-column: 1;
grid-row: 1;
width: auto;
max-width: none;
flex: none;
padding: 0;
margin: 0;
position: sticky;
top: calc(var(--dsq-d-band1) + var(--dsq-d-band2));
align-self: start;
/* Less a 24px gap, so the scrollbar stops clear of the window's bottom
edge rather than running into it -- the owner's "maintain some gap",
and the same figure the archive mount uses. */
max-height: calc(100vh - var(--dsq-d-band1) - var(--dsq-d-band2) - var(--dsq-d-body-top) - 24px);
overflow-y: auto;
overflow-x: hidden;
/* The board draws the rail scrollbar at x 457 — 32px clear of the rail's
right edge (425) and 51 clear of the grid (514), i.e. IN the 89px gutter,
not inside the rail. So the scroll box is widened by 32 + 6 and given the
same amount back as padding: the content box stays the rail's full width
and the scrollbar lands in the empty gutter. */
width: calc(100% + 38px);
padding-right: 38px;
/* SCROLLBAR PER 14381:40360 (Do-Amore-Redesign-2025-26). The board draws a
6px lane, both parts fully rounded at r20: track SOLID #E4DED8, thumb SOLID
#3E3C39. The build had both translucent -- thumb at 20% and track at 60% or
transparent -- so the lane read as a faint smear rather than a track with a
handle in it. Stated at full opacity to match.
`::-webkit-scrollbar-button` is what draws the stepper triangles at each
end. The desktop rail had no rule for it at all, so the arrows rendered
wherever the platform draws them; `display: none` is the reliable removal --
zero width/height alone still leaves a hit area on some builds. */
/* REVERSED, on the owner's reference. The note above records an earlier
decision to state both at FULL opacity because the translucent pair "read
as a faint smear". The owner has since linked 14526:48933 as how this
should look, and that node is explicit: track #E4DED8 at 0.6, thumb
#3D3B39 at 0.2. Their board, their call -- and it puts this mount and the
archive on the same bar, which they are not when one is subtle and the
other near-black. The earlier reasoning is left above rather than deleted,
so if it does read faint on a real display the way back is one line. */
}
/* Firefox only -- see the note in diamond-search.css. In Blink these two
properties switch off every ::-webkit-scrollbar rule, which is what put
the stepper arrows back. */
@supports not selector(::-webkit-scrollbar) {
#ssq_diamond_search .col-lg-3.search_filters_container {
scrollbar-width: thin;
scrollbar-color: rgba(61, 59, 57, 0.2) rgba(228, 222, 216, 0.6);
}
}
#ssq_diamond_search .col-lg-3.search_filters_container::-webkit-scrollbar {
width: 6px;
}
#ssq_diamond_search .col-lg-3.search_filters_container::-webkit-scrollbar-track {
background: rgba(228, 222, 216, 0.6); /* 14526:48933 -- #E4DED8 @ 0.6 */
border-radius: 20px;
}
/* ...AND IT FADES WHEN NOTHING IS MOVING. Owner: *"on inactivity the scroll
is not disappearing on advanced search in BYR flow."* diamond-search.js
puts `.sf-scrolling` on the scroller and takes it off 1.2s later -- VERIFIED
here, the class goes on and comes off -- but this rule loads AFTER the fade
in diamond-search.css and was painting the thumb solid regardless. The
colour moves onto the scrolling state; the resting thumb is transparent, so
the bar's width never changes and the rail cannot reflow under the
shopper. */
#ssq_diamond_search .col-lg-3.search_filters_container::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 20px;
transition: background-color 400ms linear;
}
#ssq_diamond_search .col-lg-3.search_filters_container.sf-scrolling::-webkit-scrollbar-thumb {
background: rgba(61, 59, 57, 0.2); /* 14526:48933 -- #3D3B39 @ 0.2 */
}
#ssq_diamond_search .col-lg-3.search_filters_container::-webkit-scrollbar-button,
#ssq_diamond_search .col-lg-3.search_filters_container::-webkit-scrollbar-corner {
display: none;
width: 0;
height: 0;
}
#ssq_diamond_search .search_filters {
width: 100%;
padding: 0;
margin: 0;
background: transparent;
}
/* The rail on the board opens on SHAPE. `.filters_headers` (the legacy
"Filters / Reset" row) has no slot. `.diamond_filters_reset` inside it is
click-bound in diamond-search.js, so the row is collapsed, not removed.
DECISION FLAGGED IN THE REPORT: this leaves desktop with no visible reset. */
#ssq_diamond_search .search_filters > .filters_headers {
height: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
visibility: hidden;
}
/* RESET, LIFTED ONTO THE FILTERS LINE -- see dsqLiftReset() in
simple-select-redesign.js for why it moves instead of being un-hidden in
place (the row's other half is a second "Filters" word under the pill that
already says it). The wrapper exists only to give the pill and Reset ONE
width, which is the rail's: `--dsq-rail-w` is measured and published by
that same function, because the rail is a bootstrap column and its share
of the row changes with the breakpoint. */
#ssq_diamond_search .dsq_header_controls > .dsq_filtergroup {
/* THE ORDER AND THE OFFSET COME WITH THE PILL. `.dsq_filters` carried
`order: -1` (the board puts Filters first, the markup authors it last)
and a right margin that lands the view toggle on the body grid's first
column. Wrapping the pill took both out of the row's hands -- MEASURED,
the group paints at x500 instead of x67, i.e. in DOM order with the
toggle and sort ahead of it. They move up to the wrapper, which is now
the row's item; the pill keeps them inside it only in the sense that it
no longer needs them. The offset is restated against the GROUP's width
(the rail) rather than the pill's 132: next item at rail + rail gap,
minus the row's own 24px flex gap. */
order: -1;
display: flex;
align-items: center;
justify-content: space-between;
flex: 0 0 var(--dsq-rail-w, 288px);
width: var(--dsq-rail-w, 288px);
margin-right: calc(var(--dsq-d-rail-gap) - 24px);
box-sizing: border-box;
}
#ssq_diamond_search .dsq_header_controls > .dsq_filtergroup > .dsq_filters {
order: 0;
margin-right: 0;
}
#ssq_diamond_search .dsq_header_controls .diamond_filters_reset {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 0;
visibility: visible;
cursor: pointer;
font-family: 'FoundersGrotesk', sans-serif;
font-size: 14px;
line-height: 19px;
letter-spacing: -0.21px;
color: var(--rb-text-primary, #0F0E0D);
white-space: nowrap;
}
#ssq_diamond_search .dsq_header_controls .diamond_filters_reset svg {
width: 15px;
height: 16px;
flex: 0 0 15px;
}
#ssq_diamond_search .dsq_header_controls .diamond_filters_reset svg path {
stroke: currentColor;
}
/* the 36px rhythm, applied at both levels of the filter markup */
#ssq_diamond_search .diamond_filters,
#ssq_diamond_search .diamond_filters .standard_filters .row > [class*="col-"],
#ssq_diamond_search .diamond_filters #advanced_filters .row > [class*="col-"] {
display: flex;
flex-direction: column;
row-gap: var(--dsq-d-rhythm);
}
/* the base sheet gives section.diamond_filters `padding: 0 19px 50px 0`,
which was eating 19 of the rail's 344 content width */
#ssq_diamond_search .diamond_filters {
padding: 0;
margin: 0;
}
#ssq_diamond_search .diamond_filters .container,
#ssq_diamond_search .diamond_filters .row {
max-width: none;
width: 100%;
margin: 0;
padding: 0;
--bs-gutter-x: 0;
}
#ssq_diamond_search .diamond_filters .d_filter {
width: 100%;
margin: 0;
padding: 0;
border: 0;
}
/* `Carat` / `Cut` / `Clarity` / `price` are VERTICAL gap 4 between their head
and their body; `shape` and `Color` have no gap (the head's own 12px bottom
padding does the work). Declared as the section default. */
#ssq_diamond_search .diamond_filters .d_filter {
display: flex;
flex-direction: column;
row-gap: 4px;
}
#ssq_diamond_search .diamond_filters .d_filter:has(.shape_filter),
#ssq_diamond_search .diamond_filters .d_filter:has(.color_filter) {
row-gap: 0;
}
/* --- section head `Frame 1171276645` ------------------------------------- */
/* HORIZONTAL, SPACE_BETWEEN, pad T0 R0 B12 L0, counter CENTER.
31 tall normally; 60 when it carries a 40-tall tab pair (shape, Color). */
#ssq_diamond_search .diamond_filters .filter_title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 31px;
margin: 0;
padding: 0 0 12px;
border: 0;
}
#ssq_diamond_search .diamond_filters .filter_title:has(.fancy_shapes_toggle),
#ssq_diamond_search .diamond_filters .filter_title:has(.fancy_colors_toggle) {
min-height: 60px;
}
/* label FG 400 16/19 ls -0.21, #3E3C39 at 0.80 paint opacity, UPPER */
#ssq_diamond_search .diamond_filters .filter_title > p {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
margin: 0;
padding: 0;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: var(--rb-ls-tight);
text-transform: uppercase;
color: rgba(62, 60, 57, 0.80);
}
/* `Info circle` — 14 x 14 of #C69858. The markup ships a raster info icon; it
is sized to the board's box and tinted to the board's gold. */
#ssq_diamond_search .diamond_filters .filter_title > p span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
margin: 0;
}
#ssq_diamond_search .diamond_filters .filter_title > p span img {
width: 14px;
height: 14px;
display: block;
}
/* Standard / Antique and White / Fancy pairs — 187 x 40 and 186 x 40,
radius 10, stroke 0.75 #27423B; active half filled #27423B radius 8. */
#ssq_diamond_search .diamond_filters .fancy_shapes_toggle,
#ssq_diamond_search .diamond_filters .fancy_colors_toggle {
flex: 0 0 auto;
display: flex;
flex-direction: row;
align-items: center;
height: 40px;
box-sizing: border-box;
padding: 0;
border: 0.75px solid var(--rb-brand-green);
border-radius: var(--rb-radius-lg);
background: transparent;
overflow: hidden;
}
#ssq_diamond_search .diamond_filters .filter_toggle_button {
flex: 0 0 auto;
min-width: 90.8px;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0 17px;
border: 0;
border-radius: var(--rb-radius-md);
background: transparent;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 18px;
letter-spacing: var(--rb-ls-wide);
color: var(--rb-brand-green);
cursor: pointer;
}
#ssq_diamond_search .diamond_filters .filter_toggle_button.active {
background: var(--rb-brand-green);
color: var(--rb-surface-page);
}
/* --- shape tiles --------------------------------------------------------- */
/* `Frame 1171276735` VERTICAL gap 9, rows of four HORIZONTAL gap 8, tiles
80 x 96. Flattened to one grid: four columns, column-gap 8, row-gap 9 —
(344 - 24) / 4 = 80 exactly at the artboard, and the tiles flex with the
rail below it. The board's row pitch is 105 = 96 + 9. */
#ssq_diamond_search .diamond_filters .filter_options.shape_filter {
display: grid;
/* auto-fill on the tile's own 80px so the tiles never shrink below the
board's size: 4 across at the artboard's 345 rail, 3 across once the
rail is on its 280 floor. The Figma rows are FILL-width, so wrapping is
the same behaviour, not a departure. */
grid-template-columns: repeat(auto-fill, minmax(min(100%, 80px), 1fr));
column-gap: 8px;
row-gap: 9px;
margin: 0;
padding: 0;
}
#ssq_diamond_search .diamond_filters .shape_filter > button {
width: auto;
height: 96px;
box-sizing: border-box;
margin: 0;
padding: 12px 8px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 8px;
border: 0.75px solid var(--rb-border-subtle);
border-radius: 12px;
background: transparent;
cursor: pointer;
}
/* icon box 32 x 40 (Round is 36 x 45 on the board; the shipped SVGs are
uniform, so the box is) */
#ssq_diamond_search .diamond_filters .shape_filter > button svg {
width: 32px;
height: 40px;
display: block;
}
#ssq_diamond_search .diamond_filters .shape_filter > button svg path,
#ssq_diamond_search .diamond_filters .shape_filter > button svg g {
fill: var(--rb-text-secondary);
}
/* label FG 400 16/16 ls -0.5, align CENTER/BOTTOM */
#ssq_diamond_search .diamond_filters .shape_filter > button p {
margin: 0;
padding: 0;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 16px;
letter-spacing: var(--rb-ls-wide);
color: var(--rb-text-secondary);
white-space: nowrap;
}
/* selected — radius 20 (not 12), stroke 1.5 #27423B OUTSIDE, fill
#C2CEB2 @0.30, icon #0F0E0D. OUTSIDE means an outline, which does not
change the box and so cannot shift the three-row grid. */
#ssq_diamond_search .diamond_filters .shape_filter > button.active {
border-color: transparent;
border-radius: 20px;
outline: 1.5px solid var(--rb-brand-green);
outline-offset: 0;
background: rgba(194, 206, 178, 0.30);
}
#ssq_diamond_search .diamond_filters .shape_filter > button.active svg path,
#ssq_diamond_search .diamond_filters .shape_filter > button.active svg g {
fill: var(--rb-text-primary);
}
#ssq_diamond_search .diamond_filters .shape_filter > button.active p {
color: var(--rb-text-primary);
}
/* the legacy horizontal-scroll arrows belong to the mobile carousel; the
desktop rail wraps instead. They are click-bound, so they are collapsed
rather than display:none'd. */
#ssq_diamond_search .diamond_filters .shape_arrows {
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
}
/* --- chip rows: CUT, COLOR, CLARITY and every advanced filter ------------ */
/* chips are h 42, pad T12 R8 B12 L8, radius 8, stroke 0.75 #E4DED8;
selected = stroke 1.5 #27423B OUTSIDE + fill #C2CEB2 @0.30. */
#ssq_diamond_search .diamond_filters .filter_options.filter_buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
/* PACKED LEFT, not `space-between`. These chips are sized to their own text
(`flex: 0 0 auto` below), so space-between hands every leftover pixel to
the gaps -- and the fewer and shorter the chips, the worse it gets.
MEASURED on dev-0 at 1728, rail 345 wide:
SYMMETRY Excellent@0w73 Very Good@143w81 Good@294w51 gaps 70
POLISH same gaps 70
CERT LAB GIA@0w41 IGI@148w34 GCAL@289w56 gaps 107
CUT 4 chips, 311px of button in 345 -> gaps ~11, and at
narrower rails it wraps 2+2 and each row splays to the edges
The declared gap is 8. This rule was the only thing overriding it.
Nothing here depended on space-between: COLOR fills the row with
`flex: 1 1 0` (measured gaps of exactly 8 already) and CLARITY is a
4-column grid, so both are untouched by the change. That is also why
editing `display` on this rule broke the other groups -- the selector is
shared by every chip block in the rail; `justify-content` is the one
declaration that only the content-sized ones actually consume. */
justify-content: flex-start;
margin: 0;
padding: 0;
}
#ssq_diamond_search .diamond_filters .filter_options.filter_buttons > button {
/* UNIFORM FILL, NOT TEXT WIDTH. Owner: *"in advanced filters and standard
filters, both in BYR and non-BYR flow, the buttons are compacted -- they
just fill as much as the text goes. Get the old behaviour of filling the
space back; they used to uniformly spread to fill the row."*
This is a deliberate reversal of the pass recorded above, which sized
each chip to its own label to match the board. dev-0's base rule is
`.filter_buttons button { min-width: 0; flex: 1 1 0 }`
(diamond-search.css:176) -- an equal share of the row for every chip --
and THIS rule was the only thing overriding it, in both mounts.
MEASURED before, CUT in a 337px rail: 106 / 73 / 81 / 51, i.e. four
different widths and a ragged right edge, while every neighbouring group
filled (SHAPE and CLARITY are grids, COLOR already carries `flex: 1 1 0`).
That inconsistency inside one rail is what was reported.
`min-width: 0` is load-bearing and comes from dev-0 too: a flex item will
not shrink below its min-content width without it, and "Signature Ideal"
is wider than a quarter of the rail -- so `flex: 1 1 0` alone would leave
the row ragged exactly as before. With it the chips divide the row evenly
and long labels wrap inside their own chip.
`justify-content` above is now inert: there is no leftover space for it to
distribute. Left in place so reverting is this block alone. */
flex: 1 1 0;
min-width: 0;
width: auto;
/* GROWS FOR A LABEL THAT WRAPS. With the chips now dividing the row
evenly (see above), a long label no longer gets a chip sized to it:
MEASURED at 1728 in a 337px rail, CUT's four chips come out 78 wide
each and "Signature Ideal" wrapped to two lines inside a box locked
at 42 -- scrollHeight past clientHeight, i.e. clipped text.
dev-0 sets no height on these at all; 42 is simply what one line of
12 + 16 + 12 padding plus the 0.75 borders comes to. Stated as a
MINIMUM so a single-line chip is unchanged at 42 and a wrapping one
takes the ~58 it needs. */
min-height: 42px;
box-sizing: border-box;
margin: 0;
padding: 12px 8px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0.75px solid var(--rb-border-subtle);
border-left: 0.75px solid var(--rb-border-subtle);
border-radius: var(--rb-radius-md);
background: transparent;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 16px;
letter-spacing: var(--rb-ls-wide);
color: var(--rb-text-secondary);
cursor: pointer;
}
/* diamond-search.css:1166 carries `padding: 15px 5px !important` on the CUT
and FLUORESCENCE chips specifically, so the board's 12/8 can only be
restored with the same weapon. Scoped to #ssq_diamond_search, so the
landing page keeps its own padding. */
#ssq_diamond_search .diamond_filters .cut_filter > button,
#ssq_diamond_search .diamond_filters .fluorescence_filter > button {
padding: 12px 8px !important;
}
#ssq_diamond_search .diamond_filters .filter_options.filter_buttons > button.active {
border-color: transparent;
outline: 1.5px solid var(--rb-brand-green);
outline-offset: 0;
background: rgba(194, 206, 178, 0.30);
color: var(--rb-text-primary);
}
/* COLOR — seven equal chips in one row, gap 8: (344 - 48) / 7 = 42.3 */
#ssq_diamond_search .diamond_filters .filter_options.color_filter > button {
flex: 1 1 0;
min-width: 0;
padding: 12px 0;
}
/* CLARITY — `Frame 1171276742` VERTICAL gap 8 over two rows of four 80 x 42.
Row pitch 50 = 42 + 8. */
#ssq_diamond_search .diamond_filters .filter_options.clarity_filter {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
#ssq_diamond_search .diamond_filters .filter_options.clarity_filter > button {
width: auto;
padding: 12px 0;
}
/* ===========================================================================
-2px ON EVERY GAP INSIDE THE FILTERS
Owner, on the desktop advanced search: *"reduce space in filter by 2 px."*
Applied to the GAPS between controls rather than to the chips' own padding:
the chip box is 42 tall with 12/8 padding straight off the board, and
shaving its padding changes the control's size and its hit target. The gaps
are pure air, and they are the only thing in this panel that reads as
"space in the filter".
Every group moves together so the rail keeps one rhythm -- shapes 8/9,
chips 8, clarity 8 were all authored separately from the same board value,
so they are reduced by the same 2 rather than one of them drifting. The
auto-fill and auto-fit tracks absorb it by widening their tiles, which is
what those grids are for.
=========================================================================== */
/* SPECIFICITY, MEASURED RATHER THAN ASSUMED. The first cut of this block was
written at (1,2,0) and only CLARITY moved: the shape grid is authored as
`#ssq_diamond_search .diamond_filters .filter_options.shape_filter` (1,3,0)
and the cut/fluorescence grids were re-scoped to the archive's own weight
in diamond-search.css at (1,4,0) when their labels were made to fit one
line. Each selector here is written to match or beat the rule it is
correcting -- no !important, just the same weight, later. */
/* The cut and fluorescence grids live in diamond-search.css, which loads
AFTER this sheet, so an equal-weight selector here cannot reach them. They
read `--dsq-chip-gap` instead -- declared once, here, where the -2px is
scoped to the desktop advanced search and nothing else inherits it. */
#ssq_diamond_search {
--dsq-chip-gap: 6px;
}
#ssq_diamond_search .diamond_filters .filter_options.shape_filter {
column-gap: 6px;
row-gap: 7px;
}
#ssq_diamond_search .diamond_filters .filter_options.filter_buttons,
#ssq_diamond_search .diamond_filters .filter_options.clarity_filter,
#ssq_diamond_search .diamond_filters .filter_options.cut_filter.filter_buttons,
#ssq_diamond_search .diamond_filters .filter_options.fluorescence_filter.filter_buttons {
gap: 6px;
}
/* --- sliders: CARAT and PRICE -------------------------------------------- */
/* `Frame 1171276738` VERTICAL gap 16: the slider group, then a 40-tall input
row. Carat thumbs are 26 x 17, price thumbs 32 x 21; the track is 344 x 8
radius 15 #E4DED8 with a #C2CEB2 fill. */
/* `Frame 1171276738` is VERTICAL gap 16 over two children: the slider group
and a SPACE_BETWEEN input row. The markup has no row wrapper — the two
inputs are flat siblings of the bar — so the group is a 2-column grid with
the bar spanning both: 17 + 16 + 40 = 73, the board's own height. */
#ssq_diamond_search .diamond_filters .nuslider {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 16px;
width: 100%;
margin: 0;
padding: 0;
}
#ssq_diamond_search .diamond_filters .nuslider .slider__bar {
grid-column: 1 / -1;
}
#ssq_diamond_search .diamond_filters .nuslider .slider__range {
display: none; /* designer scale legend, not drawn on the board */
}
#ssq_diamond_search .diamond_filters .nuslider .slider__bar {
width: 100%;
height: 8px;
margin: 4.5px 0; /* centres the 17-tall thumb on the 8-tall track */
border: 0;
border-radius: 15px;
background: var(--rb-border-subtle);
box-shadow: none;
}
#ssq_diamond_search .diamond_filters .nuslider .noUi-connect {
background: var(--rb-brand-sage-strong);
border-radius: 8px;
}
#ssq_diamond_search .diamond_filters .nuslider .noUi-handle {
width: 26px;
height: 17px;
top: -4.5px;
right: -13px;
border: 0;
border-radius: 16px;
background: var(--rb-brand-green);
box-shadow: none;
cursor: pointer;
}
#ssq_diamond_search .diamond_filters .nuslider .noUi-handle::before,
#ssq_diamond_search .diamond_filters .nuslider .noUi-handle::after {
display: none; /* noUiSlider's default grip lines */
}
#ssq_diamond_search .diamond_filters .d_filter.price .nuslider .noUi-handle {
width: 32px;
height: 21px;
top: -6.5px;
right: -16px;
}
/* the price group is 21 tall against carat's 17 — the taller thumb is what
puts `Advanced` at 1308 instead of 1304 */
#ssq_diamond_search .diamond_filters .d_filter.price .nuslider .slider__bar {
margin: 6.5px 0;
}
/* `Frame 1171276739` 344 x 40, SPACE_BETWEEN: two boxes, 80 wide on carat and
110 on price, white, 1px #E4DED8, radius 8, text FG 400 16/16 ls +0.75 —
the only positive letter-spacing on the screen. */
#ssq_diamond_search .diamond_filters .nuslider .slider__input-min,
#ssq_diamond_search .diamond_filters .nuslider .slider__input-max {
position: static;
width: 80px;
height: 40px;
box-sizing: border-box;
margin: 0;
padding: 0 8px;
border: var(--rb-stroke) solid var(--rb-border-subtle);
border-radius: var(--rb-radius-md);
background: var(--rb-surface-card);
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 16px;
letter-spacing: 0.75px;
text-align: center;
color: var(--rb-text-primary);
}
#ssq_diamond_search .diamond_filters .d_filter.price .nuslider .slider__input-min,
#ssq_diamond_search .diamond_filters .d_filter.price .nuslider .slider__input-max {
width: 110px;
}
#ssq_diamond_search .diamond_filters .nuslider .slider__input-min {
grid-column: 1;
justify-self: start;
}
#ssq_diamond_search .diamond_filters .nuslider .slider__input-max {
grid-column: 2;
justify-self: end;
}
/* --- `Advanced` — the ADVANCED FILTERS bar ------------------------------- */
/* 344 x 60, radius 8, 1px #E4DED8, no fill, pad T22 R13 B22 L13,
label FG 400 18/18 ls -0.5 with textCase ORIGINAL (it is authored
uppercase, so it must NOT be text-transform:uppercase'd), and a 52 x 52
plus glyph whose 24px #E4DED8 disc carries a 12px #0F0E0D cross. */
/* PINNED TO THE BOTTOM OF THE RAIL. Design: "cannot see the advanced option
(on mac air screen size) -- seems to be a responsive design issue."
MEASURED at 1440x900: the rail is capped at 700px of a 1325px content
column and the cta sits at y=1463, so it is only reachable by scrolling the
rail -- and on macOS the overlay scrollbar is invisible until you scroll,
so there is nothing on screen saying the rail scrolls at all. It IS
reachable (scrollTop 625 brings it to y=898); it is simply undiscoverable.
Sticky rather than moved: the node keeps its place in the filter column, so
the open/close state machine, the +/- glyph and diamond-search.js's handler
are all untouched -- only where it PAINTS changes. The rail is the scroll
container (overflow-y:auto above), so `bottom: 0` pins it to the bottom of
that scrollport at every viewport height, and at a height tall enough to
show the whole rail it simply sits where it always did.
The background is opaque because the filters scroll UNDER it. */
/* The sticky goes on the WRAPPER, not the button. A sticky element can only
travel within its own containing block, and `.advanced_filters_button` is
wrapped tightly around the cta -- there is no room for it to move, so
`bottom: 0` did nothing (MEASURED: cta still at y=1463 of a 900 viewport).
`.container.g-lg-0` is the last flex child of `.diamond_filters`, which is
the full 1300+ of the rail, so a sticky there has the whole column to
travel in and pins to the bottom of the rail's scrollport. */
#ssq_diamond_search .diamond_filters > .container.g-lg-0 {
position: sticky;
bottom: 0;
z-index: 2;
padding-top: 12px;
background: var(--rb-surface-page, #FAF3ED);
}
#ssq_diamond_search .diamond_filters .advanced_filters_button {
width: 100%;
margin: 0;
padding: 0;
}
#ssq_diamond_search .diamond_filters .advanced_filters_button > button {
position: relative;
width: 100%;
height: 60px;
box-sizing: border-box;
margin: 0;
padding: 22px 13px;
display: flex;
align-items: center;
justify-content: center;
border: var(--rb-stroke) solid var(--rb-border-subtle);
border-radius: var(--rb-radius-md);
background: transparent;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 18px;
line-height: 18px;
letter-spacing: var(--rb-ls-wide);
text-transform: none;
color: var(--rb-text-primary);
cursor: pointer;
}
/* GEOMETRY ONLY -- `display` belongs to the base sheet's state machine and is
restated below. This rule used to carry `display: flex`, and at (1,2,2) it
outranked diamond-search.css:725 `#advanced_minus { display: none }` at
(1,0,0), so BOTH glyphs painted superimposed at x387 w24 h24 and the opaque
minus circle covered the plus -- a collapsed bar drawn with a MINUS. */
#ssq_diamond_search .diamond_filters .advanced_filters_button > button > span {
position: absolute;
top: 50%;
right: 13px;
transform: translateY(-50%);
width: 24px;
height: 24px;
align-items: center;
justify-content: center;
}
/* The toggle itself, mirroring diamond-search.css:725-733 (which is driven by
the `.opened` class on the button, not by JS-written inline styles) at the
specificity the geometry rule above needs. `flex` rather than the base
sheet's `inline-block` because the 24px ellipse centres its vector. */
#ssq_diamond_search .diamond_filters .advanced_filters_button > button > #advanced_plus {
display: flex;
}
#ssq_diamond_search .diamond_filters .advanced_filters_button > button > #advanced_minus {
display: none;
}
#ssq_diamond_search .diamond_filters .advanced_filters_button > button.opened > #advanced_plus {
display: none;
}
#ssq_diamond_search .diamond_filters .advanced_filters_button > button.opened > #advanced_minus {
display: flex;
}
#ssq_diamond_search .diamond_filters .advanced_filters_button > button > span svg {
width: 24px;
height: 24px;
}
/* ===========================================================================
5. THE RESULTS GRID — `products grid` 1134 x 900, gap 24 / 24
The board is a wrapping auto-layout of fixed 265-wide cards with a 24px
itemSpacing AND counterAxisSpacing, i.e. `auto-fill` + a fixed gap, not a
fixed column count. At 1728 the 1134 track resolves to exactly 4 columns
of 265.5. The old sheet's 23.200000762939453px gap came from the 14465
board and is superseded by a clean 24.
------------------------------------------------------------------------ */
#ssq_diamond_search .col-lg-9.search_container {
grid-column: 2;
grid-row: 1;
width: auto;
max-width: none;
flex: none;
padding: 0;
margin: 0;
/* diamond-search.css:61 hangs the LEGACY desktop divider off this column
(border-left 1px + border-bottom 1px). The board has no divider between
the rail and the products column -- the only thing in that 89px gutter is
the rail's own 6px scrollbar at x 457 -- and because the column is
border-box, that 1px was eating into the 1134 track: every child landed at
x 515 / w 1133 instead of 514 / 1134. Scoped, so the legacy
/lab-grown-diamonds page keeps its divider. Mobile does the same at
_advanced-search.css:685. */
border: 0;
}
/* .diamond_search_results > .search_content.row > .search_results_grid_container
— the results column nests two more bootstrap rows, and `.search_content`'s
`margin: 0 -12px` was pushing the whole grid 12px out of its column on both
sides (measured x 503 / w 1157 against the column's 514 / 1134). */
#ssq_diamond_search .diamond_search_results,
#ssq_diamond_search .diamond_search_results .search_content,
#ssq_diamond_search .search_results_grid_container {
padding: 0;
margin: 0;
--bs-gutter-x: 0;
}
/* LIST VIEW -- the same bootstrap bleed on the other branch of `.search_content`.
`.search_results` and `.search_header` are `.col-12`s whose gutter padding is
zeroed by the `--bs-gutter-x: 0` above, but each of them CONTAINS a bootstrap
`.row` -- `.result_item_row` (diamond-search.js:2152) and the heading strip's
own `.row` -- and `.row` re-declares `--bs-gutter-x: 1.5rem` for its own
subtree, so those keep `margin: 0 -12px`. With the parent padding gone there
was nothing left to cancel them and every list row painted 12px outside the
column on BOTH sides (measured x 503 / w 1157 against the column's 514 /
1134) -- the grid-side defect fixed above, on the list branch.
The 12px is restored as PADDING rather than killed as margin because both
boxes have to move together: the heading strip's cells and the rows' cells
ride the same 12px bootstrap column rhythm, and zeroing one row's margin
alone would slide its cells 12px off the headings above them. With the
padding back, both inner rows resolve to exactly the column and the visible
row box -- the bottom hairline, and the selected row's outline -- sits on
514 / 1134. Never `display`: diamond-search.js toggles both with an inline
display when the view switches (js:2467). */
#ssq_diamond_search .search_results,
#ssq_diamond_search .search_header {
padding-left: 12px;
padding-right: 12px;
}
#ssq_diamond_search .search_results_grid {
/* it also carries bootstrap's .row, whose negative side margins made the
grid escape its column and pulled every track narrow */
margin: 0 !important;
/* AIR, TOP AND BOTTOM ONLY -- and the sides are load-bearing.
MEASURED at 1728: the segmented control above ends at 183 and the first
card starts at 200, so the run had 17px of air against its OWN 24px row
gap; and `gridBottom` and the last card's bottom were the same number,
i.e. NO air at all under the final row. 10 + 17 puts the top on the
grid's own rhythm and the 24 gives the last row one full gutter.
Horizontal stays 0. The grid is the column band (514 / 1134 at 1728) and
the chrome above is aligned to it -- the view toggle sits on 514 and the
`Shortlist` segment's right edge on 1648, exactly the grid's own edges.
MEASURED with the 10px on all four sides: cards ran 524..1638, i.e. 10px
inside both, which reads as a mistake against controls that did not move.
Mobile's own 12px side padding IS the board's (the 390 row is pad 0/12)
and is kept there. */
/* Sides match the archive's -- see the note on
`#diamond_search.sf_archive .search_results_grid` in stone-first.css.
Kept in step deliberately: the owner has already reported the two mounts
disagreeing on this once. */
padding: 10px 10px 24px;
--bs-gutter-x: 0;
/* diamond-search.css:960 pins `height: 1180px; overflow-y: scroll` on the
grid at >= 992 — a legacy inner scroll region with its own scrollbar
inside the results column. The board scrolls the whole panel under fixed
chrome (header bands sticky, rail sticky + self-scrolling), so the inner
scroller is released here. Never display:none — only its box is reset. */
height: auto;
max-height: none;
overflow: visible;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: 24px;
align-content: start;
}
/* THE 88px CARD BUG. `.result_grid_item_container` carries `col-6 col-lg-4`,
and bootstrap's `.col-lg-4 { width: 33.333% }` resolved against the GRID
TRACK, not against the row — so each card rendered at a third of its track
(88.6px at 1728) with all three text lines overlapping. The column classes
are shared markup and cannot be removed, so their box is neutralised here.
`g-3` puts its gutter on the item's own padding, so that goes too. */
#ssq_diamond_search .search_results_grid > .result_grid_item_container {
width: auto;
max-width: none;
flex: none;
margin: 0;
padding: 0;
}
/* card `Frame 1171276640` — 265 x 382, #FFFFFF, radius 4, clipsContent.
Height is left to the grid row so a three-line title cannot clip; every
card in a row equalises because the items stretch. */
#ssq_diamond_search .result_grid_item_container .result_grid_item {
box-sizing: border-box;
height: 100%;
display: flex;
flex-direction: column;
background: var(--rb-surface-card);
border-radius: var(--rb-radius-sm);
overflow: hidden;
padding: 0;
}
/* selected — the board's card stroke is 2px OUTSIDE, so an outline (which
does not affect layout) rather than a border (which would shrink the
content box and shift every sibling in the grid). */
/* THE RING IS DRAWN ABOVE THE CARD'S CONTENT, NOT BEHIND IT.
Owner: *"the outline is fucked up on cards -- the outline does not run over
the image too."* Both of my previous attempts were wrong in opposite
directions, and this records why so the next person does not retry either.
`outline-offset: 0` the ring sits OUTSIDE the border box. The grid is
aligned flush to its container, which carries
`overflow: hidden`, so the left column's stroke was
clipped away -- MEASURED, card left 428.3 against a
clipper at 428.3.
`outline-offset: -2px` the ring moves inside, where nothing clips it --
and an inset outline paints BENEATH the element's
children. The photo fills the card's top half edge
to edge, so it covered the ring exactly there.
MEASURED down the card's left edge: no green at the
image rows, 2px of green at the text rows.
A positioned pseudo-element is both: inside the card so no ancestor can
clip it, and painted after the content so the photo cannot cover it.
`inset: 0` + a 2px border puts it on exactly the pixels `-2px` chose, so
the geometry is unchanged. It takes no layout space and
`pointer-events: none` keeps it out of hit-testing, so the whole card stays
clickable through it. */
#ssq_diamond_search .result_grid_item_container .result_grid_item {
position: relative;
}
#ssq_diamond_search .result_grid_item_container.active .result_grid_item {
outline: 0;
}
#ssq_diamond_search .result_grid_item_container.active .result_grid_item::after {
content: "";
position: absolute;
inset: 0;
border: 2px solid var(--rb-brand-green);
border-radius: var(--rb-radius-sm);
pointer-events: none;
z-index: 3;
}
/* photo `Frame 1171276635` — 266 x 241.8, IMAGE FILL, pad 12 (mobile is 10) */
#ssq_diamond_search .result_grid_item_container .result_grid_img {
flex: 0 0 auto;
position: relative;
box-sizing: border-box;
width: 100%;
/* FIXED HEIGHT, NOT AN ASPECT-RATIO. On a ratio the photo box grows with the
column, and since the text block under it is a constant 140 the whole CARD
grew with it -- MEASURED, 100 cards at each width, uniform within a width
and wildly different between:
1728 card 381.4 image 241.4
1440 card 411.8 image 271.8
1280 card 372.6 image 232.6
1100 card 429.8 image 289.8
Design: the card must not resize for the image; the image adjusts to the
card. So the box is pinned at the board's 241.8 and the photo fills it --
it is already `position: absolute; inset: 0; object-fit: cover` below, so a
wider column crops wider rather than making the card taller. 1728 stays
pixel-identical to the board; every other width now matches it. */
height: 241.8px;
padding: 12px;
overflow: hidden;
}
#ssq_diamond_search .result_grid_item_container .result_grid_img > a {
display: contents;
}
#ssq_diamond_search .result_grid_item_container .result_grid_img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* `Heart` 20 x 18 (mobile 16 x 15), top-right of the photo inside its 12px
pad. Drawn on the photo box only while the runtime has not injected its own
`.dsq_heart` button, exactly as the mobile sheet does. */
#ssq_diamond_search .result_grid_img:not(:has(.dsq_heart))::after {
content: "";
position: absolute;
top: 12px;
right: 12px;
width: 20px;
height: 18px;
z-index: 1;
pointer-events: none;
background: url("../../../assets/media/ringbuilder/icon-heart-outline-dark.svg") no-repeat center / 20px 18px;
}
#ssq_diamond_search .result_grid_item_container.active .result_grid_img:not(:has(.dsq_heart))::after {
background-image: url("../../../assets/media/ringbuilder/icon-heart-filled-red.svg");
}
/* `Frame 1171276652` — the 21px band across the top of the photo,
SPACE_BETWEEN, inside the photo's own 12px pad. simple-select-redesign.js
injects it (`.dsq_card_photo_top` > `.dsq_card_tagslot` + `.dsq_heart`);
_advanced-search.css styles it only inside max-width:991, so at desktop it
was rendering unstyled and the heart sat wherever the flex flow left it. */
#ssq_diamond_search .dsq_card_photo_top {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
flex: 1 1 100%;
width: 100%;
height: 21px;
}
/* Reserved, never labelled: Figma's four `Tags for Stones` variants are
per-stone claims with no backing field anywhere in this codebase, and the
component's own DEFAULT variant is a transparent spacer. Desktop's pill is
111 x 21 ("Hearts & Arrows" at FG 400 14/15.4). */
#ssq_diamond_search .dsq_card_tagslot {
display: block;
width: 111px;
height: 21px;
border-radius: var(--rb-radius-sm);
}
/* `Heart` — 20 x 18 on desktop (16 x 15 on mobile).
default: outline #3E3C39 · loved: fill + stroke #C65858 */
#ssq_diamond_search .dsq_heart {
width: 20px;
height: 18px;
flex: 0 0 20px;
padding: 0;
border: 0;
background: url("../../../assets/media/ringbuilder/icon-heart-outline-dark.svg") no-repeat center / 20px 18px;
cursor: pointer;
}
#ssq_diamond_search .dsq_heart[aria-pressed="true"] {
background-image: url("../../../assets/media/ringbuilder/icon-heart-filled-red.svg");
}
/* text block `Frame 1171276640` — 265 x 140, VERTICAL gap 8, pad T21 R8 B21 L8,
CENTER/CENTER. result_to_html_grid() emits the three text nodes as flat
siblings with no wrapper, so the block is composed from their margins:
21 + 48 (two-line title) + 8 + 18 + 8 + 16 + 21 = 140, and the card totals
241.8 + 140 = 381.8 against the board's 382. See the report: a
`.dsq_card_text` wrapper is the additive markup this wants. */
#ssq_diamond_search .result_grid_item_container .grid_result_title {
/* the base sheet pins height:60px and diamond-search.js then writes an
INLINE height on every title from the tallest in the batch; both exist
only to align columns, which the CSS grid already does */
height: auto !important;
margin: 21px 8px 0;
padding: 0;
display: flex;
align-items: flex-start;
justify-content: center;
font-family: var(--rb-font-display);
font-weight: 300;
font-size: 21px;
line-height: 24px;
letter-spacing: var(--rb-ls-tight);
text-transform: uppercase;
color: var(--rb-text-primary);
}
#ssq_diamond_search .result_grid_item_container .grid_result_title p,
#ssq_diamond_search .result_grid_item_container .grid_result_title p a {
margin: 0;
padding: 0;
font-family: var(--rb-font-display);
font-weight: 300;
font-size: 21px;
line-height: 24px;
letter-spacing: var(--rb-ls-tight);
text-transform: uppercase;
color: var(--rb-text-primary);
text-align: center;
text-decoration: none;
}
/* spec line — FG 400 16/16 ls -0.21. HUG with the board height as the floor:
a "Signature Ideal" cut wraps to two lines on live data. */
#ssq_diamond_search .result_grid_item_container .grid_result_info {
margin: 8px 8px 0;
height: auto;
min-height: 18px;
}
#ssq_diamond_search .result_grid_item_container .grid_result_price {
margin: 8px 8px 21px;
height: auto;
min-height: 16px;
}
#ssq_diamond_search .result_grid_item_container .grid_result_info p,
#ssq_diamond_search .result_grid_item_container .grid_result_price p {
margin: 0;
padding: 0;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 16px;
letter-spacing: var(--rb-ls-tight);
text-align: center;
color: var(--rb-text-primary);
}
/* The board's card has NO button. "Purchase Loose" is already display:none'd
inside #ssq_diamond_search by diamond-search.css:1208. "Add to Ring" is the
stone-selection handler, so it is NOT hidden: its wrapper is collapsed and
the button itself is parked off-canvas until the card is .active, when
section 6 promotes it into the footer. display:none would take the control
out of the accessibility tree and make that promotion a two-step. */
#ssq_diamond_search .result_grid_item .grid_result_button {
height: 0;
margin: 0;
padding: 0;
overflow: visible;
}
#ssq_diamond_search .result_grid_item_container:not(.active) .grid_add_to_ring {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ===========================================================================
6. BAND 4 — `Footer` 1728 x 120
HORIZONTAL, pad T28 R80 B10 L80, top hairline 1px #E4DED8. Its `CTAs` row
is 1568 x 53, SPACE_BETWEEN: [ Current Est. / $1,660 ] on the left and
[ Talk to gemologist · VIEW MORE DETAILS · ADD TO RING ] gap 36 on the
right.
Shown only once a stone is selected, which is the same condition the mobile
sheet uses — the board's `2.1 Stone Selection` sibling frame is where the
footer is populated.
ROUND 2 — the left `Current Est. / $1,660` column is now built. It was
omitted last round for want of a live figure; there IS one. The estimate is
the same running total the quiz's own `.rb_details_price` bar prints
(rbSettingPrice() + the selected card's `data-price`), so no price is
invented and the two never disagree. simple-select-redesign.js
`dsqRenderFooterEstimate()` injects the node at >=992 only and removes it
again below, because 14468:39018's `ctas` block carries no estimate.
------------------------------------------------------------------------ */
#ssq_diamond_search:has(.result_grid_item_container.active) .dsq_sticky_ctas,
#ssq_diamond_search:has(.result_item_row.active) .dsq_sticky_ctas,
#ssq_diamond_search.dsq-has-selection .dsq_sticky_ctas {
display: flex !important; /* the node ships [hidden] on every mount */
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: var(--dsq-d-footer);
box-sizing: border-box;
/* 28 is the band's own padTop and it is what the `CTAs` ROW starts at
(board y 1128 in a band that starts at 1100, less the 1px inside stroke
= 27). The row is 53 tall; the 48-tall right-hand group is counter-
CENTRED inside it, so the three CTAs — and only they — take the extra
2.5 as a margin below. The `Current Est.` column is the full 53 and sits
flush at the row top. */
/* 100, down from 120. Owner, with the band boxed again after the first pass:
*"the bottom bar still looks wide -- I guess there's more space in the
bottom below the CTA."* The first pass moved the three bands that are
built from the BYR footer shape; these two are the advanced search's and
the stone archive's own copies of the same 120/27/10 and were missed.
MEASURED: a 48 CTA at `align-items: flex-start` under 27 of top padding
leaves 45 below it in a 120 box -- the space he is pointing at. 100 with
24/24 leaves 52 of content box for a 48 CTA: 4 under, even top and
bottom. The gutter is untouched, for the reason recorded on the first
pass -- it is what holds the CTA on the grid's right edge. */
padding: 24px var(--dsq-d-gutter);
flex-direction: row;
align-items: flex-start;
justify-content: flex-end;
gap: 36px;
z-index: 6;
background: var(--rb-surface-page);
border-top: var(--rb-stroke) solid var(--rb-border-subtle);
}
/* the scroll area has to clear the band while it is up */
#ssq_diamond_search:has(.result_grid_item_container.active) #diamond_search > .container,
#ssq_diamond_search:has(.result_item_row.active) #diamond_search > .container,
#ssq_diamond_search.dsq-has-selection #diamond_search > .container {
padding-bottom: var(--dsq-d-footer);
}
#ssq_diamond_search:has(.result_grid_item_container.active) .col-lg-3.search_filters_container,
#ssq_diamond_search:has(.result_item_row.active) .col-lg-3.search_filters_container,
#ssq_diamond_search.dsq-has-selection .col-lg-3.search_filters_container {
max-height: calc(100vh - var(--dsq-d-band1) - var(--dsq-d-band2) - var(--dsq-d-body-top) - var(--dsq-d-footer));
}
/* --- left column `Frame 1171276719` — VERTICAL, row-gap 8 ----------------
`Current Est.` (FG 400 16/19, h 19) over `$1,660` (Canela 300 28/19, h 26):
19 + 8 + 26 = the 53-tall `CTAs` row exactly. `margin-right: auto` is what
makes the row SPACE_BETWEEN without disturbing the 36px gap inside the
right-hand group — a real `justify-content: space-between` would also have
spread the three CTAs apart from each other.
The node is injected by simple-select-redesign.js, so it is the bar's first
child and needs no `order`. */
#ssq_diamond_search .dsq_sticky_ctas .dsq_est {
order: 0;
flex: 0 0 auto;
margin: 0 auto 0 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
row-gap: 8px;
}
#ssq_diamond_search .dsq_sticky_ctas .dsq_est_label {
display: block;
height: 19px;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 16px;
line-height: 19px;
letter-spacing: var(--rb-ls-tight);
/* textCase TITLE on a string already in that case — COPY.md §5 is explicit
that this must NOT become `capitalize`, which would rewrite any
lowercase runtime value. */
text-transform: none;
color: var(--rb-text-muted);
}
/* Canela 300 28/19 as authored. The board's own text box is 26 tall — Figma
lets a 28px glyph overflow a 19px line box — so the height is pinned to 26
and the line-height left at the authored 19 rather than silently rounding
one of the two up. */
#ssq_diamond_search .dsq_sticky_ctas .dsq_est_value {
display: block;
height: 26px;
font-family: var(--rb-font-display);
font-weight: 300;
font-size: 28px;
line-height: 19px;
letter-spacing: var(--rb-ls-tight);
text-transform: none;
color: var(--rb-text-primary);
}
/* `Talk to gemologist` — FG 400 18/19 ls -0.21 #27423B, UNDERLINE, no box */
#ssq_diamond_search .dsq_sticky_ctas .dsq_cta_link {
position: static;
order: 1;
flex: 0 0 auto;
width: auto;
height: 48px;
margin: 2.5px 0 0; /* 48 counter-centred in the 53-tall CTAs row */
padding: 0;
display: flex;
align-items: center;
border: 0;
background: transparent;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 18px;
line-height: 19px;
letter-spacing: var(--rb-ls-tight);
text-transform: none;
text-decoration: underline;
color: var(--rb-brand-green);
cursor: pointer;
}
/* `VIEW MORE DETAILS` — 282 x 48, radius 4, 1px #27423B, no fill */
#ssq_diamond_search .dsq_sticky_ctas .dsq_cta_secondary {
position: static;
order: 2;
flex: 0 0 282px;
width: 282px;
height: 48px;
box-sizing: border-box;
margin: 2.5px 0 0; /* 48 counter-centred in the 53-tall CTAs row */
padding: 14px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
border: var(--rb-stroke) solid var(--rb-brand-green);
border-radius: var(--rb-radius-sm);
background: transparent;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 18px;
line-height: 19px;
letter-spacing: var(--rb-ls-tight);
text-transform: uppercase;
color: var(--rb-brand-green);
cursor: pointer;
}
/* `ADD TO RING` — 282 x 48, radius 4, fill #27423B, trailing 12px arrow.
This is the selected card's OWN, already-wired button, promoted into the
band. No new handler, no duplicate control. The rule that does it is the
shared one below, which covers the list row's primary as well. */
#ssq_diamond_search .result_grid_item_container.active .grid_add_to_ring::after {
content: "";
width: 12px;
height: 12px;
background: url("../../../assets/media/ringbuilder/icon-arrow-right-on-cta.svg") no-repeat center / 12px 12px;
}
/* --- the LIST row's primary, promoted into the same slot -----------------
ROUND 2 BLOCKER. Everything above promotes `.grid_add_to_ring`, which is a
child of `.search_results_grid_container` — and diamond-search.js:2416
display:none's that whole container in list view. So in list view the
promoted button measured 0x0, the footer had no primary at all, and the
282-wide secondary slid into the primary's x1366 slot. The list row owns
its own already-wired primary (`.search_selectors button.primary_jade`,
bound at diamond-search.js:1650, the same handler the grid button uses), so
it is lifted exactly the way the grid one is rather than duplicated — a
second, handler-less `ADD TO RING` would look identical and do nothing.
THE ANCESTOR HAS TO BE UN-HIDDEN FIRST, for the same reason the mobile
sheet does it: result_to_html() writes an inline `display: none` on
`.result_item_details` (diamond-search.js:2183) and a descendant of a
display:none box cannot paint however it is positioned. The panel is
switched to `display: block` and collapsed to a 0-height clipped box, so
nothing inside it renders and the row's own height is unchanged; the fixed
button escapes the clip because no ancestor here establishes a containing
block for `fixed` (nothing in this subtree sets transform / filter /
will-change / contain). `:not(.opened)` keeps out of the way of the
accordion the row's own click handler slides open. */
#ssq_diamond_search .search_results .result_item_row.active > .result_item_details:not(.opened) {
display: block !important;
height: 0;
min-height: 0;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
}
#ssq_diamond_search .result_grid_item_container.active .grid_add_to_ring,
#ssq_diamond_search .search_results .result_item_row.active .search_selectors button.primary_jade {
position: fixed;
left: auto;
right: var(--dsq-d-gutter);
/* DERIVED FROM THE BAND, AND THE BAND JUST CHANGED. This button is fixed
OUTSIDE `.dsq_sticky_ctas`, so its offset has to be computed by hand to
land on the same line as the CTAs inside it. The band was 120 tall with
a 30.5 top inset, which put it at 41.5; it is now 100 with 24, so
the inset to use is 28, NOT the 24 of padding: MEASURED, the in-band CTAs
land at y928 in a band whose top is 900, because the 48-tall right-hand
group is counter-centred in the 53px row -- with 24 the lifted button sat
4px high. Left as the arithmetic rather than the answer so the
next person who moves the band can see what to re-derive. */
bottom: calc(var(--dsq-d-footer) - 28px - 48px); /* 100 - 28 inset - 48 button */
width: 282px;
height: 48px;
box-sizing: border-box;
margin: 0;
padding: 14px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
z-index: 7;
border: 0;
border-radius: var(--rb-radius-sm);
background: var(--rb-brand-green);
color: var(--rb-surface-page);
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 18px;
line-height: 19px;
letter-spacing: var(--rb-ls-tight);
text-transform: uppercase;
text-align: center;
overflow: visible;
}
#ssq_diamond_search .search_results .result_item_row.active .search_selectors button.primary_jade::after {
content: "";
width: 12px;
height: 12px;
background: url("../../../assets/media/ringbuilder/icon-arrow-right-on-cta.svg") no-repeat center / 12px 12px;
}
/* the row's OWN secondary stays inside the collapsed panel — the band already
carries `VIEW MORE DETAILS` as a real child, and a second one would be a
duplicate control rather than a promoted one. */
/* the promoted button occupies the third slot, so the two real children of
the band stop short of it — in BOTH views */
#ssq_diamond_search:has(.result_grid_item_container.active) .dsq_sticky_ctas,
#ssq_diamond_search:has(.result_item_row.active) .dsq_sticky_ctas {
padding-right: calc(var(--dsq-d-gutter) + 282px + 36px);
}
/* ===========================================================================
D1 / D2 / D3 -- DEFECTS.md, resolved against DEFECTSPEC.md and
FILTERS-RAIL.md (14468:43530, 14468:43528, 14468:44330, 14468:42962).
Appended, additive: nothing above is deleted, moved or reordered. Every
number below was measured on dev-0 at 1728 before it was written.
------------------------------------------------------------------------ */
/* --- D1 (a) ONE SCROLL CONTAINER ----------------------------------------
Measured before: TWO nested scrollers.
.search_filters_container overflow-y auto, client 900 / scroll 1235
section.diamond_filters overflow auto BOTH axes, client 345 / scroll 377
The inner one is diamond-search.css:967, which pins
`height: 1235px; overflow-y: auto` on section.diamond_filters at >= 992.
Nothing there asks for a HORIZONTAL bar -- but CSS overflow-3 says a
`visible` value on one axis computes to `auto` when the other axis is not
visible, so overflow-x resolved to `auto` on its own and drew the second
bar the customer is looking at. Both axes go back to `visible`.
The pinned height goes with it. Once the section stops clipping, anything
taller than 1235 (the ADVANCED FILTERS panel when it opens) would paint
outside a box the outer rail cannot measure, and would be unreachable --
the outer scroller sizes itself on the child's HEIGHT, not on what escapes
it. `height: auto` makes the section hug its content, so the single
remaining scroller reaches everything.
FILTERS-RAIL.md: "Exactly ONE of them may scroll." */
#ssq_diamond_search section.diamond_filters {
height: auto;
max-height: none;
overflow: visible;
}
/* `.search_filters` is the second half of the same legacy pair:
diamond-search.css:858 gives it `height: 100vh; overflow-y: auto` for the
mobile filter sheet, and the >= 992 block at :963 releases `position` and
`height` but NOT the overflow. While `section.diamond_filters` clipped it
never showed; the moment that stopped, THIS box inherited the two bars
(measured `.search_filters` overflow auto/auto, client 345 / scroll 377).
Released here so the rail really does have exactly one scroll container. */
#ssq_diamond_search .search_filters {
overflow: visible;
}
/* --- D1 (b) NOTHING LEFT TO SCROLL HORIZONTALLY -------------------------
The 32px of escaping content, measured: on both sliders the upper handle's
touch area ran to x 451 (CARAT) and x 457 (PRICE) against a rail that ends
at 425, and the lower one started at 54 / 48 against a rail that starts at
80. Two causes, fixed separately rather than hidden with overflow:hidden --
FILTERS-RAIL.md: "Hiding a horizontal bar while the content still overflows
is not a fix -- the slider's upper handle would be unreachable."
Cause 1: simple-select.css:150 blows the noUiSlider hit box up with
`transform: scale(2.0)`, so a 26x17 handle carries a 52x34 touch area
centred on it and 13 / 16px of pure dead box hangs past each track end on
top of the handle's own half-width. On a pointer device the 26x17 handle is
already a comfortable target. */
#ssq_diamond_search .diamond_filters .nuslider .noUi-touch-area {
transform: none;
}
/* Cause 2: the board centres the handle ON the track end, so half of it is
outside a 344 box by construction. FILTERS-RAIL.md: "Inset the track by
half a handle on each side (or give the rail that much padding) -- do NOT
let it overflow and scroll." The track is inset rather than the rail,
because padding the rail would pull every other row in off 344 as well.
13 = 26/2 (CARAT handle), 16 = 32/2 (PRICE handle). These are px, not
percentages, because the handles are fixed-size in the design: the track
stays fluid and only its two ends move in by a constant. */
#ssq_diamond_search .diamond_filters .nuslider .slider__bar {
/* the rule above declares `width: 100%`, which a margin cannot shrink --
with it in place the inset moved the whole 345 track right instead of
pulling its two ends in, and the upper handle ended up FURTHER out
(measured x 425..451). `auto` lets the margins do the work. */
width: auto;
margin-left: 13px;
margin-right: 13px;
}
#ssq_diamond_search .diamond_filters .d_filter.price .nuslider .slider__bar {
width: auto;
margin-left: 16px;
margin-right: 16px;
}
/* --- D1 (c) THE TRACK IS BACK ------------------------------------------
This block was built to 14468:43528, which draws the thumb and NO track
fill. 14526:48933 -- the node the owner linked as "this is how it should be
looking like" -- draws BOTH: a 6 x 734 lane at #E4DED8 @ 0.60 with the
thumb on it at #3D3B39 @ 0.20, same r20 pill on each. Two board nodes
disagreeing about the same bar; the owner's reference wins, and the other
node's id is kept here so the disagreement is findable rather than lost.
Which also settles the third value that was in play: with this rule holding
`transparent`, the quiz read `rgba(62,60,57,0.2) transparent` while the
archive read the board's pair -- the two mounts were never going to look
the same until one of them gave way. Found by asking the engine which rule
won on the live node, not by reading the file top to bottom: THREE rules
set `scrollbar-color` on this same selector. */
#ssq_diamond_search .col-lg-3.search_filters_container::-webkit-scrollbar-track {
background: rgba(228, 222, 216, 0.6);
border-radius: 20px;
}
/* --- D2 "on click of a swatch it's doublish" ----------------------------
Measured before, on the selected shape tile AND on the selected CUT,
COLOR and CLARITY chips -- all four carried the same three rings:
border 1px solid rgba(0,0,0,0)
outline 1px solid rgb(39,66,59) <- the redesign ring
box-shadow inset 0 0 0 2px rgb(15,14,13) <- the doubled black ring
The black one is diamond-search.css:133 (`.d_filter .shape_filter
button.active`) and :185 (`.filter_buttons button.active,
.filter_options.color_filter button.active`), `var(--onyx)` = #0F0E0D. It
has no counterpart on ANY board (14468:44331 / 14468:44335 / 14468:44340 /
14468:44342 each carry exactly one stroke and no effect), and the redesign
sheet was painting its own green ring on top of it without ever cancelling
it. Cancelled here for all four families at once.
The green ring also moves off `outline` and onto a spread box-shadow. The
board's selected stroke is 1.5px with strokeAlign OUTSIDE; Blink rounds
outline-width to whole device pixels, so the 1.5px outline above was
actually painting at 1px (measured: `outline: rgb(39,66,59) solid 1px`).
A spread shadow is not rounded, is drawn outside the border box exactly as
strokeAlign OUTSIDE specifies, and -- like the outline -- takes no layout
space, so the three-row tile grid and the CUT row cannot shift.
KEPT deliberately: the 12 -> 20 radius morph (drawn on every composed
board and live today -- DEFECTS.md is explicit that it is not the bug) and
the #C2CEB2 @ 0.30 fill (already correct). */
#ssq_diamond_search .diamond_filters .shape_filter > button.active,
#ssq_diamond_search .diamond_filters .filter_options.filter_buttons > button.active {
outline: none;
box-shadow: 0 0 0 1.5px var(--rb-brand-green);
}
/* The other half of the drawn selected state, and the reason one thin ring
is enough: the glyph grows and darkens. Frame 32x40 -> 36x45 with the
vector 32x32 -> 34x34 (14468:44331 vs 14468:44335), i.e. x1.0625 on the
ink. The shipped SVGs are one uniform 32x40 box, so the box carries it:
32 x 1.0625 = 34, 40 x 1.0625 = 42.5. 42.5 + 8 gap + 16 label = 66.5 in
the tile's 72px content box, so nothing reflows. */
#ssq_diamond_search .diamond_filters .shape_filter > button.active svg {
width: 34px;
height: 42.5px;
}
/* --- D3 "images between diamond cards are weird" -------------------------
Measured before, at 1728: the results grid is a 4-track grid
(`repeat(auto-fill, minmax(min(100%, 220px), 1fr))`, gap 24), and the
neutralising rule at the top of this section only reaches
`.result_grid_item_container`. So the two interleaved promo tiles kept
their raw bootstrap widths resolved against a SINGLE 265.5px track:
`.col-12.col-lg-8.g-3` (`.grid_promo.insert_photo`)
measured 177 x 381.34 at x=1093 -- col-lg-8's 66.66% of one track,
narrower than a single card, with an 8px `g-3` pad leaving the photo
at 161 wide. Board 14468:42962 is 547 x 382 = TWO columns plus one
gutter, exactly a card's height, at the END of a row.
`.col-12.g-3` (`.grid_promo.insert_banner`, the
"WE KNOW CHOOSING ISN'T EASY" panel with its subhead and CTA)
measured 265.5 x 365.36 -- col-12's 100% of one track, i.e. squeezed
into a single card slot.
Both get the same treatment `.col-lg-4` already got: the bootstrap box is
neutralised and the span is expressed in GRID tracks, so it stays right at
every width instead of at 1728 only. `span 2` is 2 x card + 1 gutter
(555 at 1728 against the board's 547 -- the board resolves its
SPACE_BETWEEN gutter to 28.5 on that row where our grid holds 24); at 992
the grid is 2 tracks wide and `span 2` is the whole row, which is the same
relationship.
NOT changed, deliberately: `object-fit: cover` on the card photos and the
266 x 241.82 box (DEFECTSPEC: both already correct -- do not change to
`contain`), and the card ``'s `display: contents`. */
#ssq_diamond_search .search_results_grid > .col-lg-8 {
width: auto;
max-width: none;
flex: none;
margin: 0;
padding: 0;
grid-column: span 2;
}
#ssq_diamond_search .search_results_grid > .col-12:not([class*="col-lg-"]) {
width: auto;
max-width: none;
flex: none;
margin: 0;
padding: 0;
grid-column: 1 / -1;
}
/* the photo tile's own box is sized by diamond-search.js (an inline
`height` copied off the neighbouring card), so only the photo inside it is
addressed: fill the cell the way the board's IMAGE fill does, radius 4 to
match the card. */
#ssq_diamond_search .search_results_grid > [class*="col-"] > .grid_promo.insert_photo {
width: 100%;
overflow: hidden;
border-radius: var(--rb-radius-sm);
}
/* ABSOLUTE, and this is load-bearing now that the promo is a flex column: as a
flex ITEM the ground photo contributed its own 381px to the stack and drove
the band to 445 tall against a 381 card row (scrollHeight 600 against the
~348 the composite actually needs). Taken out of flow it is the ground
again and the composite alone sets the height. */
#ssq_diamond_search .search_results_grid > [class*="col-"] > .grid_promo.insert_photo > img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ---- THE BAND'S COMPOSITE -- 14468:42834 `gems` ------------------------
547x382, radius 4, padding 40/52, itemSpacing 31, fill #27423B @80% over
the photo ground. Every character and colour below is the board's; the
strip is composed by simple-select-redesign.js from the grid's own first
five results. Reported as "banner is missing": the box and the photo were
both there, the composite over them was never built. */
#ssq_diamond_search .search_results_grid .grid_promo {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* The board's 40/52 padding and 31 gap sum to 388.7 of content in a frame it
declares as 382 -- its own children do not fit it, a residual this file
has hit before. Left as the board's, the composite measured 461 tall here
and the band stopped matching the 382 card row it spans. Trimmed to
32/52 and 24 so the content is 349 and the band sits in the row at the
height the grid gives it. */
gap: 24px;
box-sizing: border-box;
padding: 32px 52px;
border-radius: var(--rb-radius-sm);
overflow: hidden;
/* !important, against an INLINE height, and it is answering a real one:
diamond-search.js:1462 sizes this node with jQuery `.height(cardHeight)`,
which sets the CONTENT height -- so on a border-box element it writes
`height: 445.359px` for a 381.359 card the moment this rule adds 64px of
padding, and the band stood 64 taller than the row it spans. Pinning to
the grid cell takes the height off that call altogether: the row is sized
by the 381 cards beside it and the band simply fills it. */
height: 100% !important;
}
#ssq_diamond_search .rb_adv_merch_scrim {
position: absolute;
inset: 0;
background: rgba(39, 66, 59, 0.80);
pointer-events: none;
}
#ssq_diamond_search .rb_adv_merch {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
width: 100%;
max-width: 321px;
text-align: left;
}
#ssq_diamond_search .rb_adv_merch_head {
margin: 0;
font-family: var(--rb-font-display);
font-weight: 300;
font-size: 28px;
line-height: 33.6px;
text-transform: uppercase;
color: var(--rb-brand-sage, #D8DDCA);
}
#ssq_diamond_search .rb_adv_merch_sub {
margin: 0;
font-family: var(--rb-font-body);
font-weight: 400;
font-size: 17px;
line-height: 20.23px;
color: var(--rb-surface-page, #FAF3ED);
}
/* 429 wide, gap 26, vertically centred -- the board's tiles are different
sizes because they are different stones, so height is what is shared. */
#ssq_diamond_search .rb_adv_merch_strip {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 26px;
width: 100%;
}
#ssq_diamond_search .rb_adv_merch_strip img {
display: block;
width: auto;
height: 76px;
max-width: 76px;
object-fit: contain;
}
#ssq_diamond_search .rb_adv_merch_cta {
position: relative;
box-sizing: border-box;
width: 100%;
max-width: 443px;
height: 47px;
margin: 0;
padding: 14px 0;
display: flex;
align-items: center;
justify-content: center;
/* appearance reset -- a bare