/* =============================================================================
   Ring builder — mobile redesign — ADVANCED LAB DIAMOND SEARCH
   Figma "[Mobile UI] PDP ring builder refresh" (file Ex10uQ9OY3OuzSPi4g2hPb).
   Frames covered:
     14463:35552 / 14463:35745  2.1 Advanced Search   390 × 2174 (grid results)
     14463:35938                2.1 Advanced Search   390 ×  883 (grid crop)
     14463:36073                2.1 Advanced Search   390 ×  883 (list crop)
     14463:32914                2.1 List View         390 × 1728
     14463:33199                2.1 List View         390 × 1728 (row selected)
     14463:32245                2.1 Stone Selection   390 × 2278 (card selected
                                                      + sticky CTA block)

   ---------------------------------------------------------------------------
   WHY EVERY SELECTOR IN THIS FILE STARTS WITH #ssq_diamond_search
   ---------------------------------------------------------------------------
   components/diamond-search/* has THREE mount points:

     1. components/page_builder/diamond-search-block/diamond-search-block.php:70
        — the ACF block behind the live /lab-grown-diamonds landing pages
     2. templates/diamonds_template.php:12
        — the standalone diamond landing pages
     3. components/ringbuilder/simple-select-quiz.php:239
        — the ring-builder quiz, and ONLY there is the component wrapped in
          <div id="ssq_diamond_search" class="ssq_diamond_search">

   Mount points 1 and 2 are live revenue pages. So: every rule below is scoped
   under #ssq_diamond_search AND wrapped in @media (max-width: 991px). Nothing
   here can reach a landing page. The two PHP files that were touched add nodes
   only, and every added node carries the `hidden` attribute — the UA sheet's
   [hidden] { display: none } keeps them out of the layout everywhere until a
   rule in THIS file re-displays them. A landing-page render therefore differs
   only by a handful of display:none subtrees.

   ---------------------------------------------------------------------------
   WHAT RENDERS THE RESULTS (important, and not what the brief assumed)
   ---------------------------------------------------------------------------
   diamond-result-items.php is NOT on the request path in production. It is
   referenced by nothing in the theme (`rg 'diamond-result-items'` → 0 hits);
   every result the user ever sees is built client-side by diamond-search.js:

     result_to_html(result)       — line 1941 → the LIST row  (.result_item_row)
     result_to_html_grid(result)  — line 2148 → the GRID card (.result_grid_item_container)

   result_to_html_grid() already emits, per card: the photo (.result_grid_img
   img, with a real src), the composed title
   "<carat> Carat <shape> <Lab|Natural> Diamond" (.grid_result_title a), the
   spec line "<cut> Cut • <color> • <clarity>" (.grid_result_info p) and the
   price (.grid_result_price p) — i.e. exactly the four text nodes the Figma
   card needs. So the grid card IS reachable by CSS over existing markup, and
   this file styles that markup as the primary target. The .dsq_card block added
   to diamond-result-items.php is styled identically so the two paths cannot
   diverge if that partial is ever wired up.

   Values come from the Figma REST API via SPEC.md. Nothing is eyeballed:
   letter-spacing really is -0.20999999344348907px, written -0.21px, and is
   taken from the --rb-ls-tight token in ../simple-select-redesign.css.
   Where a value the design needs does not exist in the data, the rule is
   omitted and the omission is commented rather than invented.
   ============================================================================= */

/* =============================================================================
   THE HEADER / SUMMARY BLOCK — shared base, mobile values
   ---------------------------------------------------------------------------
   THIS SECTION IS DELIBERATELY OUTSIDE ANY WIDTH MEDIA QUERY. Every other
   section of this file is mobile-only, but the header/summary block is drawn at
   BOTH 390 (14463:35696) and 1728 (14465:40247 + 14465:40219), and the two
   share their whole internal structure — the same flex rows, the same glyph
   geometry, the same two-tone sort label, the same segmented control. What
   differs is a dozen numbers, so the structure is declared once here at the
   mobile values and the `@media (min-width: 992px)` block at the bottom of the
   file overrides only the deltas.

   The scope is unchanged: every selector still starts with #ssq_diamond_search,
   which exists ONLY in components/ringbuilder/simple-select-quiz.php:338. The
   /lab-grown-diamonds ACF block and the standalone diamond templates render the
   same component without that id and are untouched at every width.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   2. THE HEADER / SUMMARY BLOCK — Figma 14463:35696
      390 × 204, fill #FAF3ED, AL:VERTICAL itemSpacing 10, pad T0 R12 B10 L12.

      It is ONE auto-layout column with four children, and the first of them
      is the iOS status-bar mockup (14463:35697, 391 × 46 — device chrome, not
      app UI), which is not drawn. Dropping the bar but keeping the 10px gap
      that followed it leaves a 10px lead-in, so the rendered column is:

         10  lead-in (the gap that followed the status bar)
         42  title row      14463:35711  (6px padT + a 36-tall flex row)
         10  gap
         40  control row    14463:35718
         10  gap
         36  segmented      14463:35739
         10  padB
        ---
        158  header height        (204 in Figma − the 46px status bar)

      Frame-relative x on every descendant carries a +0.38 sub-pixel drift
      because 14463:35696 itself sits at x 0.38 in a 390 frame. HEADER.md §7.1
      rules that accidental; the .38-free numbers (content left 12, content
      width 366) are the intended ones and are what is built here.

      MARKUP CONTRACT. diamond-search.php emits the three rows as real nested
      children and simple-select-redesign.js moves two pre-existing shared
      controls into the control row at runtime:
         .result_view.grid_results_view / .list_results_view -> .dsq_viewtoggle
         .diamond_sort_by                -> between .dsq_viewtoggle and .dsq_filters
      So every selector below addresses the RELOCATED position, not the
      node's authored position inside .results_count.mobile_count.
   --------------------------------------------------------------------------- */

/* !important is unavoidable on every [hidden] reveal in this file: the added
   nodes default to hidden so the landing-page mounts never paint them, and
   bootstrap's reboot ships `[hidden] { display: none !important; }`. The
   selector still out-specifies that rule (1,1,0 vs 0,1,0), so this only wins
   inside #ssq_diamond_search — it cannot leak to a landing page. */
#ssq_diamond_search .dsq_screen_header {
  display: flex !important;
  flex-direction: column;
  gap: 10px;                 /* 14463:35696 itemSpacing */
  /* UNDER THE NOTCH. Owner: *"in the BYR flow the ADVANCED LAB DIAMOND SEARCH
     heading is getting chopped on top."*

     header.php:21 ships `viewport-fit=cover`, so the layout viewport runs edge
     to edge and a `position: fixed; top: 0` band is laid out BEHIND the status
     bar on any phone that has one. MEASURED at 390 in a desktop engine the
     title's glyphs start at y=18 and nothing is clipped -- which is exactly why
     this only shows on a real handset, and why the 46px strip the board draws
     above this header is not decoration: it is the phone chrome.

     `env()` is the strip's real height and resolves to 0 everywhere there is
     none, so no other surface moves. simple-select-redesign.js measures this
     band and publishes `--dsq-header-h`, so the body's offset follows on its
     own and the 13px the owner asked for between the bar and the first card is
     unaffected. */
  padding-top: env(safe-area-inset-top, 0px);
  /* NOT the frame's 158. That height stacks three rows -- title, segmented,
     controls -- and rbDsqToolbar() lifts the segmented into the controls row on
     a phone, so the band has been painting 46px of nothing under its last
     child. Content-sized instead, which is 112 with the toolbar lifted and the
     frame's 158 if it ever is not. See the shell's padding-top. */
  height: auto;
  box-sizing: border-box;
  padding: 10px 12px;        /* padB 10 + the 10px lead-in described above */
  background: var(--rb-surface-page);
}

/* --- ROW 1: title row — 14463:35711 (366 × 42, padT 6) wrapping
       14463:35712 (366 × 36, AL:HORIZONTAL gap 12) ------------------------- */
#ssq_diamond_search .dsq_header_titlerow {
  flex: 0 0 42px;
  height: 42px;
  padding-top: 6px;
  box-sizing: border-box;
}
#ssq_diamond_search .dsq_header_bar {
  display: flex;
  flex-direction: row;
  /* CENTRED, AGAINST THE BOARD. Owner, with a screenshot of this header:
     *"center align title and the x"*.

     14463:35712 sets no counter-axis alignment, so the board's own answer is
     flex-start and that is what shipped (HEADER.md §7.7) -- the 28px close
     button pinned to the top of a 36-tall row while the title fills it, which
     reads as the two being out of line because they are. The owner is looking
     at the rendered thing and asking for the row to agree with itself; the
     board is one frame and this is the request about it. Desktop keeps its own
     flex-start (:1949): there the row is 65 tall with a 26px gap and the title
     block is deliberately pulled off its leading, so centring is a different
     question on a different frame and was not asked. */
  align-items: center;
  gap: 12px;
  height: 36px;
}

/* 14463:35713 — 330 × 36, AL:VERTICAL gap 1, layoutGrow 1 */
#ssq_diamond_search .dsq_header_titles {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  /* The title is a single 286px line in Figma (14463:35714) inside a 330
     column, and both string variants render through this one node:
     simple-select-redesign.js rewrites it from the selected stone, so the box
     carries "ADVANCED LAB DIAMOND SEARCH" (286px measured at 18/19, ls -0.21)
     and "ADVANCED NATURAL DIAMOND SEARCH" (332px — 2px over the column).
     Figma has no natural artboard, so there is no designed answer for the
     longer line and none is invented: no smaller size, no tighter tracking
     (-0.21 is pinned), no ellipsis that would eat the final word for 2px.
     The column clips, which keeps the close affordance reachable and is a
     no-op on the lab string. The 2px is a copy problem; see the report. */
  overflow: hidden;
}

/* 14463:35714 — Canela 300 18/19, ls -0.21, UPPER, #0F0E0D, box 286 × 19 */
#ssq_diamond_search .dsq_header_title {
  margin: 0;
  font-family: var(--rb-font-display);
  font-weight: 300;
  font-size: 18px;
  line-height: 19px;
  letter-spacing: var(--rb-ls-tight);
  text-transform: uppercase;
  color: var(--rb-text-primary);
  white-space: nowrap;
}

/* 14463:35715 — Founders Grotesk 400 14/16, ls -0.21, #3E3C39, box 79 × 16.
   ONE text node in Figma ("12,900 Results"); here the numeral is live data in
   span.result_counter, which diamond-search.js:967 writes, so the format is
   built around that span. The element also carries `.results_count`, which is
   half of that JS write selector — hence the unwind of the shared
   .results_count chrome (flex column, 20/15 padding, bottom hairline) rather
   than a display:none. */
#ssq_diamond_search .dsq_header_count.results_count {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 0;
  font-family: var(--rb-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  letter-spacing: var(--rb-ls-tight);
  color: var(--rb-text-secondary);
  white-space: nowrap;
}
/* EMPTY STATE — this is the "very wrong" the client reported: before the
   first search resolves the span is empty and the line renders as the bare
   word "Results" with no figure in front of it. simple-select-redesign.js
   stamps data-dsq-count=empty|ready on this <p>; until a real comma-formatted
   integer has landed the line is held back. visibility, never display:none —
   the node is half of the JS write selector, and keeping its 16px box means
   the header does not resize when the number arrives. */
#ssq_diamond_search .dsq_header_count[data-dsq-count="empty"] {
  visibility: hidden;
}

/* 14463:35716 — 24 × 24, fill #E4DED8 @ 0.60, r 4. The 8 × 8 glyph
   (14463:35717) is two diagonals stroked 1px #3E3C39, cap ROUND.
   The visible label text is kept in the DOM: diamond-search.js delegates the
   close on '.ssq_back p', so the <p> must stay a real hit target — it is
   stretched to fill the button and its text is collapsed to zero size rather
   than removed. */
#ssq_diamond_search .dsq_close {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: var(--rb-radius-sm);
  background: rgba(228, 222, 216, 0.60);
  cursor: pointer;
  /* AND NO INHERITED MARGIN, OR `align-items: center` CENTRES THE WRONG BOX.
     This node also carries `.ssq_back`, whose base rule
     (diamond-search.css:1219) adds `margin-bottom: 20px` for the stand-alone
     back link it was written for. Flexbox centres the MARGIN box: 24 + 20 = 44
     in a 36-tall row, so the button's own border box was pushed 4px ABOVE the
     row and measured y=12 against a title centred on 34 -- 10px out, which is
     the misalignment in the owner's screenshot. Centring could not fix it
     while the margin was still in the box being centred. */
  margin: 0;
}
#ssq_diamond_search .dsq_close > p {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
#ssq_diamond_search .dsq_close_glyph {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
}
#ssq_diamond_search .dsq_close_glyph::before,
#ssq_diamond_search .dsq_close_glyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11.3137px;          /* 8 x sqrt(2): the diagonal of the 8 × 8 box */
  height: 1px;               /* strokeWeight 1 */
  background: var(--rb-text-secondary);
  border-radius: 0.5px;      /* strokeCap ROUND */
}
#ssq_diamond_search .dsq_close_glyph::before { transform: translate(-50%, -50%) rotate(45deg); }
#ssq_diamond_search .dsq_close_glyph::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- ROW 2: control row — 14463:35718 (366 × 40, AL:HORIZONTAL gap 8)
       79 toggle + 8 + 182 sort (FILL) + 8 + 89 filters = 366 ---------------- */
#ssq_diamond_search .dsq_header_controls {
  flex: 0 0 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  height: 40px;
}

/* 14463:35719 — 79 × 40, itemSpacing -1 (the two 1px borders share a
   hairline: 40 + 40 - 1 = 79). */
#ssq_diamond_search .dsq_viewtoggle {
  flex: 0 0 79px;
  width: 79px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* NEW BOARD 14468:39018 `Frame 38323` carries cornerRadius 8 on the PAIR;
     the 14463 board had none, which is why the toggle rendered square. The
     halves keep their own [0,4,4,0] / [4,0,0,4] radii from the API; the clip
     is what rounds the two OUTER corners to the 8 the new board asks for. */
  border-radius: var(--rb-radius-md);
  overflow: hidden;
}
#ssq_diamond_search .dsq_viewtoggle .result_view {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rb-surface-page);
  border: var(--rb-stroke) solid var(--rb-border-subtle);
}
/* ROUND OUTSIDE, SQUARE INSIDE -- the slip is confirmed and corrected.
   Owner: *"rounded corners are on the wrong ends, like it's inverted -- it's
   like >< not <>."*

   rectangleCornerRadii came off the API verbatim:
     grid 14463:35720 -> [TL 0, TR 4, BR 4, BL 0]
     list 14463:35728 -> [TL 4, TR 0, BR 0, BL 4]
   which rounds the pair on the INSIDE and leaves the outside square. This file
   already called that a designer slip and flagged it for a design call
   (HEADER.md §7.2) but reproduced it anyway, on the principle that the board
   wins. The owner has now made the call, so it is corrected here: the grid half
   rounds on its LEFT, the list half on its RIGHT, and the seam between them is
   square.

   And it has to be done on the HALVES, not left to the wrapper. `Frame 38323`
   carries cornerRadius 8 on the pair with `overflow: hidden`, which would have
   rounded the two outer corners on its own -- but section 8 below deliberately
   sets `overflow: visible` on this same element, because the glyph SVGs are
   drawn to their edge and a clipping ancestor shaves their outer stroke. With
   the clip gone the wrapper's radius is inert and the halves are the only thing
   that can draw the corner, so they take the pair's own 8 rather than the 4
   each half was given.

   The base sheet (diamond-search.css) has always had this the right way round;
   this block was the only thing inverting it. */
#ssq_diamond_search .dsq_viewtoggle .result_view.grid_results_view {
  border-radius: var(--rb-radius-md) 0 0 var(--rb-radius-md);
}
#ssq_diamond_search .dsq_viewtoggle .result_view.list_results_view {
  border-radius: 0 var(--rb-radius-md) var(--rb-radius-md) 0;
  border-left: var(--rb-stroke) solid var(--rb-border-subtle);
  margin-left: -1px;         /* itemSpacing -1 */
}
/* Glyph box 16 × 16 for both. simple-select-redesign.js rewrites the shipped
   26 × 24 / 24 × 24 assets to a 0 0 16 16 viewBox holding Figma's own rects
   (four 6.5 squares, gutter 3 — 14463:35721; three 16 × 2.67 bars, gutter 4 —
   14463:35729), so the box is placed and coloured here and never scaled. */
#ssq_diamond_search .dsq_viewtoggle .result_view svg {
  width: 16px;
  height: 16px;
  display: block;
}
/* Selection is glyph colour only — never the button fill or border
   (HEADER.md §5.3). */
#ssq_diamond_search .dsq_viewtoggle .result_view svg > * {
  fill: var(--rb-border-subtle);   /* unselected #E4DED8 */
}
#ssq_diamond_search .dsq_viewtoggle .result_view.active svg > * {
  fill: var(--rb-text-primary);    /* selected #0F0E0D */
}

/* ONE BUTTON ON A PHONE, NOT A PAIR -- 14634:47676 and 14557:47293.
   Owner: *"the icons for phone are different (grid / list), check once"*, with
   both of those frames attached.

   Everything above is board 14463:35719, a 79 x 40 PAIR that shows both glyphs
   side by side with the active one inked. The owner's newer phone frames draw a
   single 40 x 40 `View button` -- fill #FAF3ED, 1px INSIDE #E4DED8, r4 -- whose
   glyph is the CURRENT view: four 6.5 squares in grid, three 16 x 2.7 bars in
   list. The archive mount has been built that way since 3.1 (stone-first.css),
   which is why the two mounts stopped matching.

   Both nodes stay in the DOM and keep their handlers; only the active one is
   drawn, and simple-select-redesign.js forwards its click to the hidden sibling
   -- diamond-search.js:2548 activates whichever node is clicked, so clicking
   the already-active one is otherwise a no-op. Same device, same reason, as the
   archive twin.

   Desktop is untouched: 14465:40221 is still the 120 x 38 pair. */
@media (max-width: 991px) {
  #ssq_diamond_search .dsq_viewtoggle {
    flex: 0 0 40px;
    width: 40px;
    overflow: visible;
    border-radius: 0;
  }
  /* The two variant selectors above carry an extra class each, so the pair's
     half-radii and the list half's -1px seam overlap have to be answered at
     that weight or they stay. A single button is r4 on all four corners
     (14612:39268 / 14557:48371) and has no seam to overlap. */
  #ssq_diamond_search .dsq_viewtoggle .result_view,
  #ssq_diamond_search .dsq_viewtoggle .result_view.grid_results_view,
  #ssq_diamond_search .dsq_viewtoggle .result_view.list_results_view {
    display: none;
    border-radius: var(--rb-radius-sm);
    border: var(--rb-stroke) solid var(--rb-border-subtle);
    margin-left: 0;
  }
  #ssq_diamond_search .dsq_viewtoggle .result_view.grid_results_view.active,
  #ssq_diamond_search .dsq_viewtoggle .result_view.list_results_view.active {
    display: flex;
  }
  /* The glyph is the view you are IN, so it is never the "unselected" grey the
     pair used to tell its two halves apart. */
  #ssq_diamond_search .dsq_viewtoggle .result_view.active svg > * {
    fill: var(--rb-brand-green);
  }
}

/* --- sort control — 14463:35733 (182 × 40, no fill, 1px INSIDE #E4DED8,
       r 4, pad T12 R8 B12 L8, primaryAxis SPACE_BETWEEN) -------------------- */
#ssq_diamond_search .dsq_header_controls .diamond_sort_by {
  /* basis 0 + min-width 0: the label is white-space:nowrap, so an `auto`
     basis would size the control to the longest sort string instead of the
     Figma 182 (= 366 - 79 - 8 - 89 - 8). */
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  height: 40px;
  box-sizing: border-box;
  /* NEW BOARD `Sorting` 14468:39018 — pad T12 R8 B12 L8, radius 8 (the 14463
     board said radius 4 and the build subtracted the 1px border off the side
     padding). CHECKLIST 13/14 assert the declared 8px / 12px, so they are
     declared verbatim. The 40px box with 12px block padding leaves a 14px
     content box for a 19px line — Figma clips the same overflow — and
     `align-items: center` keeps the label optically centred. */
  padding: 12px 8px;
  border: var(--rb-stroke) solid var(--rb-border-subtle);
  /* NEW BOARD: radius 8. */
  border-radius: var(--rb-radius-md);
  background: transparent;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;                  /* 14463:35733 itemSpacing (inert under
                                SPACE_BETWEEN, kept for the shrunk case) */
  color: var(--rb-text-primary);
}
/* 14463:35735 is ONE text node whose first run is styled differently
   (characterStyleOverrides [8 x7, 1]): "Sort by" in #3E3C39 at 0.80 paint
   opacity, the space at full opacity, the value in the node's base #0F0E0D.
   Rendered here as one line with two coloured runs — an <i> wrapper for the
   prefix and the pre-existing <span> for the value — never two flex children,
   which is what was spreading them apart under SPACE_BETWEEN. */
#ssq_diamond_search .dsq_header_controls .diamond_sort_by > p {
  display: block;
  min-width: 0;
  margin: 0;
  font-family: var(--rb-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: var(--rb-ls-tight);
  color: var(--rb-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#ssq_diamond_search .dsq_header_controls .diamond_sort_by .dsq_sort_prefix {
  font-style: normal;        /* it is an <i> on purpose: diamond-search.js:122
                                writes '.diamond_sort_by p span', so a second
                                <span> here would be overwritten by the sort
                                value on the first sort change. */
  color: rgba(62, 60, 57, 0.80);
}
#ssq_diamond_search .dsq_header_controls .diamond_sort_by > p > span {
  color: var(--rb-text-primary);
}
/* The inline 24 × 24 down-chevron.svg that ships inside the <p> cannot be the
   Figma glyph: 14463:35737 is 10 wide × 5 tall and sits 5px down inside a
   10 × 12 box (14463:35736) — NOT centred in it. Squeezing a 24-box V into
   10 × 12 distorts it, so the shipped one is hidden and the real geometry is
   drawn on the chevron slot simple-select-redesign.js adds as a real second
   child of the control (which is what lets SPACE_BETWEEN pin it right). */
#ssq_diamond_search .dsq_header_controls .diamond_sort_by > p svg { display: none; }
#ssq_diamond_search .dsq_sort_chevron {
  position: relative;
  display: block;
  flex: 0 0 10px;
  width: 10px;
  height: 12px;
}
#ssq_diamond_search .dsq_sort_chevron_glyph {
  position: absolute;
  left: 0;
  top: 5px;                  /* 14463:35737 y 127 in a box at y 122 */
  width: 10px;
  height: 5px;
  /* 1px #0F0E0D, strokeCap SQUARE, strokeJoin ROUND. The viewBox is inset by
     half the stroke so the drawn polyline measures exactly 10 × 5. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='-0.5 -0.5 11 6'%3E%3Cpath d='M0 0 5 5 10 0' fill='none' stroke='%230F0E0D' stroke-width='1' stroke-linecap='square' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0 / 10px 5px;
}
/* the dropdown keeps its existing behaviour, only re-anchored under the
   40px control */
#ssq_diamond_search .dsq_header_controls .diamond_sort_by .diamond_sort_by_options {
  top: 42px;
}

/* --- Filters pill — 14463:35738 (89 × 40, fill #27423B, 1px INSIDE #27423B,
       r 4, pad T0 R8 B0 L8, primary CENTER, itemSpacing 4) ------------------
       A real node in the header row, not the re-placed
       #search_filters_mobile .filters_mobile_toggle: that element becomes the
       filter drawer's OWN header once the drawer opens, which is why it had
       to be position:fixed and could never carry the count badge. This button
       proxies its click to that toggle, so the drawer behaviour is unchanged.
       89 = 8 padL + 49 label group + 4 gap + 20 badge + 8 padR. */
#ssq_diamond_search .dsq_filters {
  /* 89 IS A FLOOR, NOT A CAGE. Owner: *"the filters button looks cut off in the
     phone design ... give it some responsive stuff."*

     The board's 89 is sized for the pill's UNBADGED state. When a filter is
     active a badge is added inside the same fixed 89 -- MEASURED at 390 with
     one filter on: content 93 in an 87px content box, so the badge was pressed
     into the pill's right padding and read as clipped against the rounded edge.
     `min-width` with `width: auto` keeps the board's 89 wherever the content
     fits it and lets the badge push the pill a few px wider when it does not,
     instead of overflowing it. `max-width` stops it ever eating the toolbar on
     a narrow phone. */
  /* BACK TO THE BOARD'S 89. Letting this grow for its badge pushed the row onto
     two lines: 14557:45057 lays the phone filter bar out as ONE line -- view 40
     + 8 + segmented 220 + 8 + Filter 89 = 365 in a 366 box -- so six extra
     pixels here are enough to wrap the segmented control, which is the "all
     stones / shortlist went to the next line" report.
     The badge does fit 89 on the board: pad 6 + icon 14 + gap 1 + label 34 + 4
     + badge 24 + pad 6 = 89. The build was spending 8px of padding a side, and
     that is the 4px that overflowed -- so the padding comes back to the board's
     6 rather than the pill growing. */
  flex: 0 0 89px;
  width: 89px;
  height: 40px;
  box-sizing: border-box;
  margin: 0;
  /* NEW BOARD: pad T0 R8 B0 L8. The 14463 build subtracted the 1px CSS border
     to land the icon at frame+8; CHECKLIST 12 asserts the DECLARED 8px, and at
     a 1px discrepancy the assertion is the better master. */
  padding: 0 6px;   /* 14557:45057; was 8, which overflowed the badge */
  border: var(--rb-stroke) solid var(--rb-brand-green);
  /* NEW BOARD `Filter` 14468:39018 is radius 8; the 14463 board said 4. */
  border-radius: var(--rb-radius-md);
  background: var(--rb-brand-green);
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Figma's own maths is 8 + 49 + 4 + 20 + 8 = 89, but the real label group
     measures 47.97 (Founders Grotesk renders "Filters" at 32.97, not the
     34 the file records), leaving 1.03px of slack. SPACE_BETWEEN parks that
     slack in the middle gap so BOTH hard edges land exactly where the design
     puts them — icon at pill+8, badge right at pill-8 — instead of splitting
     the error across both of them, which is what centring did. */
  justify-content: space-between;
  gap: 4px;
  color: var(--rb-surface-page);
  cursor: pointer;
}
/* With the badge suppressed at zero filters the group is the only child, so
   SPACE_BETWEEN would pin it left; the design has no zero state, and a label
   hard against the left edge of an 89-wide pill reads as broken, so the lone
   group centres. */
#ssq_diamond_search .dsq_filters:has(.dsq_filters_badge.is-empty) {
  justify-content: center;
}
/* 14463:37092 — 49 × 19, AL:HORIZONTAL itemSpacing 1 (14 icon + 1 + 34 text) */
#ssq_diamond_search .dsq_filters_group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1px;
}
#ssq_diamond_search .dsq_filters_icon {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  line-height: 0;
}
#ssq_diamond_search .dsq_filters_icon svg {
  display: block;
  width: 14px;
  height: 14px;
}
/* the shipped asset strokes #C2CEB2; 14463:37094 is 1px #FAF3ED */
#ssq_diamond_search .dsq_filters_icon svg path { stroke: var(--rb-surface-page); }
#ssq_diamond_search .dsq_filters_label {
  font-family: var(--rb-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 19px;
  letter-spacing: var(--rb-ls-tight);
  color: var(--rb-surface-page);
}
/* NEW BOARD `Frame 1171276654` — 24 x 24, fill #D8DDCA @ 0.30, radius 50%,
   clip; the numeral is 12/19 #FAF3ED (CHECKLIST 74 / 101). The 14463 board
   said 20 x 20 at 14px, which is what shipped.
   (No `**` emphasis in a CSS comment, ever: `**12**` + `/19` spells a comment
   terminator and silently eats the rule that follows it.) */
#ssq_diamond_search .dsq_filters_badge {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(216, 221, 202, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#ssq_diamond_search .dsq_filters_badge_count {
  font-family: var(--rb-font-body);
  font-weight: 400;
  font-size: 12px;           /* NEW BOARD: 12/19. The 14463 board said 14. */
  line-height: 19px;
  letter-spacing: var(--rb-ls-tight);
  color: var(--rb-surface-page);
}
/* Figma samples "3" because its artboard has three filter groups engaged.
   simple-select-redesign.js counts the real ones and flags .is-empty at zero;
   a 0-badge is not in any frame, so at zero the badge is not drawn and the
   pill centres its label group inside the same 89 × 40 box. Nothing in
   diamond-search.js reads this node — it is added markup, and the only
   reader (dsqBadge) works on attributes, not on layout. */
/* CHECKLIST 75: this node must never be `display: none` — dsqBadge() writes
   into `.dsq_filters_badge_count` and a display:none subtree is a node whose
   text can still be written but whose box vanishes from every measurement.
   Collapsed to a zero box instead, so the pill closes up exactly as it did
   while the node stays in the layout and the a11y tree. */
#ssq_diamond_search .dsq_filters_badge.is-empty {
  flex-basis: 0;
  width: 0;
  height: 0;
  margin: 0;
  visibility: hidden;
}
/* 89 is the pill's width in its ZERO-filter state (CHECKLIST 73), which is the
   state the component boots in. With the 24px badge showing, the NEW board's
   own content — 8 + 49 group + 4 gap + 24 badge + 8 — is 93, so the pill hugs
   rather than clipping its own badge. `.diamond_sort_by` is the flex:1 sibling
   that absorbs the 4px. */
/* PHONE ONLY. At desktop the pill is 132 (one segmented half -- see
   _advanced-search-desktop.css), which holds the badge with room to spare, and
   this rule's `:has()` is specific enough to beat that width wherever it
   applies -- which is why the pill stayed content-sized at 1728 and the row read
   132 / 132 / 118.5 after the uniform-width pass. */
@media (max-width: 991px) {
  #ssq_diamond_search .dsq_filters:has(.dsq_filters_badge:not(.is-empty)) {
    flex: 0 0 auto;
    width: auto;
  }
}

/* The drawer's own toggle is now redundant in the CLOSED state — the header
   pill above replaces it. It is parked with visibility, never display:none:
   diamond-search.js:481 binds the drawer open/close on it and the pill
   forwards its click there, and #search_filters_mobile is a node the script
   reads. Once `.opened` it is the drawer's header again and is left alone. */
#ssq_diamond_search #search_filters_mobile:not(.opened) .filters_mobile_toggle {
  visibility: hidden;
}

/* --- ROW 3: segmented All Stones | Shortlist — 14463:35739
       366 × 36, no fill, 0.75px INSIDE #27423B, r 10, itemSpacing 0 --------- */
#ssq_diamond_search .dsq_segmented {
  flex: 0 0 36px;
  display: flex;
  flex-direction: row;
  /* 40, NOT 36, SO THE THREE CONTROLS ARE ONE ROW OF ONE HEIGHT. Owner: *"all
     stones / shortlist and the filters buttons -- alignment, different widths,
     all need to be uniform."* MEASURED at 390: the track was 36 tall beside a
     40-tall Filters pill, so their centres sat 1.7px apart on a bar that reads
     as one control set. */
  height: 40px;
  box-sizing: border-box;
  border: 0.75px solid var(--rb-brand-green);
  border-radius: var(--rb-radius-lg);
  background: transparent;
}
#ssq_diamond_search .dsq_seg {
  /* 14463:35740 is 184.25 and 14463:35742 is 180.25 — the selected half is
     4px WIDER, and the widths swap with the selection (verified on the
     flipped frame 14463:35938). Expressed as a constant 4px delta against the
     track's real inner width rather than as two pinned numbers, so it still
     holds when the UA rounds the 0.75px border up to a device pixel:
       inner 364.5 -> 184.25 / 180.25     inner 364 -> 184 / 180 */
  /* HALVES, NOT 184.25 / 180.25. The +-4px above is what Figma draws, and it
     is what the owner is calling out: *"different widths, all need to be
     uniform."* MEASURED at 1728 the three controls came out 134 / 130 / 118.5
     and at 390 91.2 / 87.2 / 90.5 -- three widths in a row of three. An even
     split, with the Filters pill set to the same number in the width blocks
     below, makes it one. The selected half keeps its fill; only its width
     stops moving. */
  flex: 0 0 auto;
  width: 50%;
  height: 100%;
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;                  /* 14463:35742 itemSpacing */
  padding: 0 17px;           /* Figma pads 13/17 in a frame FIXED at 36 and
                                clips its own vertical padding away */
  margin: 0;
  border: 0;
  border-radius: var(--rb-radius-md);
  background: transparent;
  color: var(--rb-brand-green);
  cursor: pointer;
}
#ssq_diamond_search .dsq_seg.is-active {
  width: 50%;
  background: var(--rb-brand-green);
  border: var(--rb-stroke-thick) solid var(--rb-brand-green);
  color: var(--rb-surface-page);
}
#ssq_diamond_search .dsq_seg_label {
  font-family: var(--rb-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: var(--rb-ls-wide);
  white-space: nowrap;
}
/* 14463:35743 — 13 × 12 outline heart, 1px stroke, colour tracks the
   selection (#27423B unselected -> #FAF3ED selected). Its #C65858 fill is
   authored but visible:false — that is the liked state, not this one. */
#ssq_diamond_search .dsq_seg_icon {
  display: block;
  flex: 0 0 13px;
  width: 13px;
  height: 12px;
  line-height: 0;
}
#ssq_diamond_search .dsq_seg_icon svg {
  display: block;
  width: 13px;
  height: 12px;
}
/* The Shortlist half is inert: nothing in diamond-search.js persists a
   hearted set, so there is no collection to filter to. It is rendered because
   it is half of the Figma component, and disabled so it cannot read as a
   broken tab — but it must not dim, because the design has no disabled
   state for it. */
#ssq_diamond_search .dsq_seg_shortlist[disabled] { opacity: 1; cursor: default; }

@media (max-width: 991px) {

  /* ---------------------------------------------------------------------------
     1. SHELL
     Figma 14463:35552 is a full-screen takeover: a 390 × 2174 frame on the
     #FAF3ED page ground, with the header frame (14463:35696) drawn LAST in the
     tree — i.e. pinned over the scrolling body — and, on 14463:32245, a `ctas`
     frame pinned to the bottom. Reproduced as a fixed shell that owns its own
     scroll, which is also what lets the pre-existing position:fixed filter
     toggle be re-placed into the control row further down.
     --------------------------------------------------------------------------- */
  /* LOAD-ORDER CRITICAL. diamond-search.css:1176 sets
     `div#ssq_diamond_search { position:absolute; top:4px; z-index:9999 }`
     and, in production, that sheet loads AFTER this one: da-general.php's
     enque_simple_select() enqueues these redesign partials in a loop and THEN
     calls enque_diamond_search_block(), which is what enqueues
     diamond-search.css. WordPress prints in queue order, so `div#…` here would
     TIE on specificity (0,1,0,1) and LOSE on order -- the screen fell back to
     position:absolute inside the quiz flow, which is what made it render
     thousands of pixels down the page with the site header on top of it.
     Adding the element's own `.ssq_diamond_search` class takes this to
     (0,1,1,1) so it wins regardless of sheet order, without !important.
     `display` is deliberately left to that base rule and to the .show()/.hide()
     diamond-search.js does. */
  div#ssq_diamond_search.ssq_diamond_search {
    position: fixed;
    inset: 0;
    z-index: 999998;           /* below .search_filters (9999999) and
                                  #search_filters_mobile (999999) so the filter
                                  drawer still covers this screen when opened */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: var(--rb-surface-page);
    /* CLEARED BY WHAT THE HEADER ACTUALLY MEASURES, not by what the frame did.
       Owner: *"spacing between the top bar -- all stones, filters etc -- and the
       first row of product cards, too much space."*

       14463:35696 is a 158px band because it stacks THREE rows: the title row,
       the segmented control, and the controls. rbDsqToolbar() lifts the
       segmented INTO the controls row on a phone, so the band has carried two
       rows for some time -- 10 + 42 + 10 + 40 + 10 = 112 -- while both this
       offset and the band's own height stayed at the three-row numbers.
       MEASURED at 390: header box 0->158 with its last child ending at 102, and
       the first card at 161. 46px of empty header, then 3 more.

       simple-select-redesign.js writes the measured height into
       `--dsq-header-h` whenever the screen opens or the viewport changes; the
       fallback is the two-row sum, so a failed script costs 3px rather than a
       header overlapping the first row. The +3 is the board's own 161 - 158. */
    padding-top: calc(var(--dsq-header-h, 112px) + 3px);
    padding-bottom: 24px;
  }

  /* Bootstrap gutters would re-introduce the 390px frame's side padding twice.
     The Figma side gutter is 12px and is applied on the scrolling lists only. */
  #ssq_diamond_search #diamond_search > .container,
  #ssq_diamond_search #diamond_search > .container > .row,
  #ssq_diamond_search .search_container,
  #ssq_diamond_search .diamond_search_results,
  #ssq_diamond_search .search_content,
  #ssq_diamond_search .search_results_grid_container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    width: 100%;
  }
  /* .search_container carries the desktop two-column rule
     (diamond-search.css:61 — border-left + border-bottom). The mobile design
     has no such divider, and the 1px left border was shifting the whole results
     column off the 12px gutter. */
  #ssq_diamond_search .search_container { border: 0; }

  /* The desktop filter column is empty at this breakpoint (.filters_headers is
     d-none, .search_filters is position:fixed, .result_count_mobile is
     display:none until the drawer opens) but still carries col padding. */
  #ssq_diamond_search #diamond_search > .container > .row > .search_filters_container {
    padding-left: 0;
    padding-right: 0;
  }

  /* The old cream page header ("Pick a Lab Diamond" + breadcrumbs, and the
     .ssq_diamonds_text_container that diamond-search.js injects into it) is
     replaced by .dsq_screen_header. Collapsed rather than display:none'd
     because diamond-search.js writes into it
     ($('.diamonds_search_header .container .row').html('') …) and reads
     $('.ssq_diamonds_title span').text() to decide the lab/natural label. */
  #ssq_diamond_search .diamonds_search_header {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;                 /* diamond-search.css:8 gives it a 1px bottom
                                  hairline, which was pushing the results
                                  column 1px below the header's 161px offset */
    overflow: hidden;
    visibility: hidden;
  }


  /* Mobile only: the header is a fixed band pinned over the scrolling body,
     which is what the 161px padding-top on the shell above clears. On desktop
     STONE-B it is an in-flow band, so this is overridden back to `static`. */
  #ssq_diamond_search .dsq_screen_header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* 4, NOT 3 -- AND THE SELECTED CARD IS WHY.
       Owner: *"fix the selected product card error"*, with a screenshot of the
       green selection outline drawn straight across ADVANCED LAB DIAMOND SEARCH
       and its close button.

       The outline is `.result_grid_item::after` at `z-index: 3` (:1002), and
       this band was at 3 as well. Equal z-index is decided by DOM order, and
       the grid comes after the header -- so the moment a selected card scrolled
       up under the band, its outline painted over the title. MEASURED at 390
       after scrolling 220: the selected `.result_grid_item` at y=-105, i.e.
       fully behind a band whose own segmented control sits at y=62.

       Raising the band rather than lowering the outline: the outline has to
       stay above the card's photo, which is what put it at 3 in the first
       place. The sticky CTAs (999999) and the panel itself (999998) are
       untouched. */
    z-index: 4;
  }

  /* ---------------------------------------------------------------------------
     2b. SEGMENTED CONTROL — the active pill OVERLAYS the track's stroke
     14463:35739 `Delivery Tab Interaction` is 366 x 36 at (12.38,158) with a
     0.75px INSIDE #27423B stroke; the active BG 14463:35740 is 184.25 x 36 at
     (13.12,158). Same TOP, same HEIGHT as the track, but 0.74 in from its LEFT
     edge -- Figma's INSIDE stroke takes no layout space, so the pill fills the
     full 36 vertically while the auto-layout's 0.75 padding-equivalent insets
     it horizontally.
     A real 0.75px border is snapped to 1 device pixel at DPR 1 and inset the
     pill on BOTH axes, so it measured 184 x 34 -- 2px short. Drawn as an inset
     shadow instead (the same device this file and _drawers.css already use for
     INSIDE strokes that must not eat the content box), with the horizontal
     inset restored as 0.75px of side padding. The pill then measures
     184.25 x 36 with dx 0.75 / dy 0, and (364.5 -+ 4) / 2 still gives the
     designed 184.25 / 180.25 halves.
     Mobile only: the desktop track (14465:40240) is 38 tall with a 36 pill,
     i.e. genuinely inset, and _advanced-search's desktop block is right as-is.
     --------------------------------------------------------------------------- */
  /* REVISED against the NEW board. The box-shadow dodge below was there so the
     active pill could stay 36 tall inside a 36-tall track — but it made
     `borderTopWidth` compute to 0, and CHECKLIST 79 asserts a real 0.75px
     stroke. Restored as a real border, with the pill pulled back over it by
     the same 0.75 on each side (`.dsq_seg` margin-block below): that is
     literally what Figma's INSIDE stroke does — the active BG 14468:39018 `BG`
     has the SAME top and the SAME 36 height as the track it sits in. Track
     stays 36 (so the header stays 158), the halves still measure 184.25 /
     180.25 against the 364.5 inner width. */
  #ssq_diamond_search .dsq_segmented {
    padding: 0;
    border: 0.75px solid var(--rb-brand-green);
    box-shadow: none;
  }
  /* The half now fills whatever the track is, instead of being pinned to the
     board's 36 -- the track went to 40 so the three controls in the phone
     toolbar are one height (see the base rule). `calc` rather than 100% so the
     two 0.75px strokes the pill is pulled back over are added back, which is
     what kept the active fill flush with the track's top and bottom. */
  #ssq_diamond_search .dsq_seg {
    margin-block: -0.75px;
    height: calc(100% + 1.5px);
  }

  /* ---------------------------------------------------------------------------
     3. THE NODES THE CONTROLS CAME FROM
        .result_view x2 and .diamond_sort_by are MOVED into the header, so what
        is left behind is an empty .search_view_options inside
        .results_count.mobile_count, plus that block's own
        `<p><span class="result_counter"></span> Results</p>`.

        .mobile_count is collapsed, NOT display:none'd: diamond-search.js:967
        writes every `.results_count span.result_counter` on the page, this is
        one of them, and .search_view_options is a selector the script reads.
     --------------------------------------------------------------------------- */
  #ssq_diamond_search .results_count.mobile_count {
    position: static;
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    gap: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* ---------------------------------------------------------------------------
     4. GRID RESULTS — Figma 14463:35553
        vertical stack gap 12; each row 390 wide, pad 0/12, gap 12, cgap 12;
        each card 177 × 300. On a 390 viewport (390 − 24 − 12) / 2 = 177 exactly,
        so the columns are expressed fluidly and land on the Figma number.
     --------------------------------------------------------------------------- */
  #ssq_diamond_search .search_results_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    /* Sides are the board's (the 390 row is pad 0/12). The BOTTOM is new:
       MEASURED at 390, `gridBottom` and the last card's bottom were the same
       number -- the run ended flush. One row-gutter of air, the same 12 this
       grid already puts between its rows.
       No padding-top here: the segmented control ends at 148 and the first
       card starts at 161, so mobile already has 13 against its own 12px gap.
       Desktop needed the top-up (17 against 24); this breakpoint does not. */
    padding: 0 12px 12px;
    margin: 0;
    width: 100%;
  }
  /* kill the bootstrap col-6 / g-3 gutters on the card wrappers */
  #ssq_diamond_search .search_results_grid > .result_grid_item_container {
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }
  /* ACF promo inserts span both columns. Their inner markup is customer
     content and is deliberately not restyled here — the dark-green
     "WE KNOW CHOOSING ISN'T EASY" panel in the Figma frame is the `gems`
     component standing in for whatever insert the merchandiser configures.
     Figma places it at x=-5, w=400 in a 390 frame, i.e. bleeding 5px past both
     gutters: 12px grid padding + 5px bleed = -17px. */
  #ssq_diamond_search .search_results_grid > .col-12 {
    grid-column: 1 / -1;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0 -17px;
  }

  /* --- the card — 14463:35555 (177 × 300, fill #FFFFFF, r=4, clip) ---------- */
  #ssq_diamond_search .result_grid_item,
  #ssq_diamond_search .dsq_card {
    display: flex !important;  /* .dsq_card is [hidden] by default; see above */
    flex-direction: column;
    height: 300px;
    background: var(--rb-surface-card);
    border-radius: var(--rb-radius-sm);
    overflow: hidden;
    position: relative;
  }
  /* diamond-result-items.php renders its .dsq_card INSIDE .result_item_row,
     which is the LIST row — so where that partial is used, the grid card would
     land in the list. Kept out of the list explicitly; the grid path never
     contains a .dsq_card today because result_to_html_grid() builds those cards
     in JS. See the report: wiring the partial (or porting .dsq_card into
     result_to_html_grid) is the outstanding markup work. */
  #ssq_diamond_search .search_results .dsq_card { display: none !important; }

  /* selected — 14463:32248: stroke #27423B w=1.5 align=OUTSIDE, r=4 */
  /* Drawn above the card's content -- see the desktop twin for the two wrong
     answers this replaces. Same 1.5px on the same pixels, painted after the
     photo instead of behind it. */
  #ssq_diamond_search .result_grid_item_container .result_grid_item,
  #ssq_diamond_search .dsq_card {
    position: relative;
  }
  #ssq_diamond_search .result_grid_item_container.active .result_grid_item,
  #ssq_diamond_search .dsq_card.is-selected {
    outline: 0;
  }
  #ssq_diamond_search .result_grid_item_container.active .result_grid_item::after,
  #ssq_diamond_search .dsq_card.is-selected::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--rb-brand-green);
    border-radius: var(--rb-radius-sm);
    pointer-events: none;
    z-index: 3;
  }

  /* photo — 14463:35556 (177 × 160, image fill scale=FILL) */
  #ssq_diamond_search .result_grid_img,
  #ssq_diamond_search .dsq_card_photo {
    flex: 0 0 160px;
    height: 160px;
    aspect-ratio: auto;        /* base sheet forces 1/1 */
    position: relative;
    padding: 10px;             /* 14463:35565/35575/35584. Two of the five
                                  sampled photo frames use 8 instead of 10;
                                  the file is inconsistent, 10 is the majority. */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  #ssq_diamond_search .result_grid_img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* Figma scale=FILL */
  }
  #ssq_diamond_search .result_grid_img > a { display: contents; }

  /* the 18px band across the top of the photo — 14463:35557 */
  #ssq_diamond_search .dsq_card_photo_top {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* The photo frame is `display: flex` in the base sheet, so this band is a
       flex ITEM of it and hugged its 57 + 17 content — parking the heart 95px
       short of the photo's right edge instead of on the design's 10px inset.
       Made to fill the row, which is what `space-between` needs to mean
       anything. */
    flex: 1 1 100%;
    width: 100%;
    height: 18px;
  }
  /* NO merchandising badge is rendered. Figma's four `Tags for Stones`
     variants ("Hearts & Arrows", "Statement Sparkle", "Best Value", "35% Off")
     are per-stone claims with no backing field, ACF key or Elasticsearch term
     anywhere in this codebase. The component's own DEFAULT variant is itself a
     57 × 18 pill at alpha 0.0 — a spacer, not a label — so the band is reserved
     at its Figma height and left empty. */
  #ssq_diamond_search .dsq_card_tagslot {
    display: block;
    width: 57px;
    height: 18px;
    border-radius: var(--rb-radius-sm);
  }

  /* heart — component 14463:37085, both variants 16 × 15.
     default: outline, stroke #3E3C39 · loved: fill + stroke #C65858 */
  #ssq_diamond_search .dsq_heart {
    position: relative;
    width: 17px;
    height: 16px;              /* the 16 × 15 stroked path inside a 17 × 16 box */
    flex: 0 0 17px;
    padding: 0;
    border: 0;
    background: url("../../../assets/media/ringbuilder/icon-heart-outline-dark.svg") no-repeat center / 17px 16px;
  }
  /* 48 x 48 of tap, 17 x 16 of heart. Owner: *"increase the tappable area --
     48 by 48 on the corner. Don't increase the icon size or location though."*
     A pseudo-element rather than padding because this heart is a FLEX ITEM in
     the card's top strip: padding would push its siblings and change where the
     glyph sits, which is the half of the ask that says don't. */
  #ssq_diamond_search .dsq_heart::after {
    content: "";
    position: absolute;
    /* At the card's corner, growing down and left -- see the archive twin in
       stone-first.css for why this is not centred on the glyph. */
    top: -10px;
    right: -10px;
    width: 48px;
    height: 48px;
  }
  #ssq_diamond_search .dsq_heart[aria-pressed="true"] {
    background-image: url("../../../assets/media/ringbuilder/icon-heart-filled-red.svg");
  }
  /* THE NO-JS FALLBACK HEART ONLY.  simple-select-redesign.js now injects a real
     `button.dsq_heart` into the `.dsq_card_photo_top` strip (styled above), and
     when it is there this decoration would paint a SECOND heart on every card —
     which is exactly what it did.  Gated on the injected button's absence, so
     the card still shows the design's heart if the redesign JS has not run, and
     shows exactly one the moment it has. */
  #ssq_diamond_search .result_grid_img:not(:has(.dsq_heart))::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 17px;
    height: 16px;
    z-index: 1;
    pointer-events: none;
    background: url("../../../assets/media/ringbuilder/icon-heart-outline-dark.svg") no-repeat center / 17px 16px;
  }
  #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");
  }

  /* info block — 14463:35560 (177 × 140, AL:VERTICAL gap=8, pad 12/6, centred) */
  #ssq_diamond_search .result_grid_item { padding: 0; }
  #ssq_diamond_search .dsq_card_info {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 6px;
    text-align: center;
  }

  /* title — 14463:35561: Canela 300 18/21 ls -0.21 UPPER #0F0E0D, 165 wide.
     size=FILL/HUG in Figma: two lines on "0.60 Carat ROUND LAB DIAMOND" (42px,
     14463:35561) and three on "0.45 CARAT MARQUISE LAB DIAMOND" (63px,
     14463:35570), with the info block re-centring around it either way. So the
     box HUGS. The !important is unavoidable: the base sheet pins
     .grid_result_title{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 fixed 300px card and the CSS grid already do. */
  #ssq_diamond_search .grid_result_title {
    height: auto !important;
    margin: auto 6px 0;
    padding: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    /* CHECKLIST 102/103 read the WRAPPER, not its <p>. The type was declared
       only on the descendants, so this box still computed the base sheet's
       Founders Grotesk 16/17.6 — and any future untagged text node inside it
       would have rendered in the wrong face. Declared here and inherited. */
    font-family: var(--rb-font-display);
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: var(--rb-ls-tight);
    text-transform: uppercase;
    color: var(--rb-text-primary);
  }
  #ssq_diamond_search .grid_result_title p,
  #ssq_diamond_search .dsq_card_title {
    margin: 0;
    padding: 0;
    font-family: var(--rb-font-display);
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: var(--rb-ls-tight);
    text-transform: uppercase;
    color: var(--rb-text-primary);
    text-align: center;
  }
  /* the composed title is an <a> to the stone permalink; the theme's global
     link colour has to be beaten with the card's own selector depth */
  #ssq_diamond_search .result_grid_item .grid_result_title p a,
  #ssq_diamond_search .grid_result_title a {
    font-family: var(--rb-font-display);
    font-weight: 300;
    font-size: 18px;
    line-height: 21px;
    letter-spacing: var(--rb-ls-tight);
    text-transform: uppercase;
    color: var(--rb-text-primary);
    text-decoration: none;
  }

  /* spec line — 14463:35562: Founders Grotesk 400 16/16 ls -0.21 #0F0E0D */
  #ssq_diamond_search .grid_result_info {
    margin: 8px 6px 0;
    /* 14463:35562 is 165 x 18 for "Excellent Cut  E  VS1", but the live spec
       line is composed from real data and a "Signature Ideal" cut pushes it to
       two lines. A fixed 18px height made that second line overflow the box and
       collide with the price underneath. HUG, with the Figma height as the
       floor, so the single-line case is byte-identical and the long case
       re-centres inside the 140px text block via its auto margins. */
    height: auto;
    min-height: 18px;
  }
  #ssq_diamond_search .grid_result_info p,
  #ssq_diamond_search .dsq_card_spec {
    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);
    color: var(--rb-text-primary);
  }

  /* price — 14463:35563: Founders Grotesk 400 16/16 ls -0.21 #0F0E0D */
  #ssq_diamond_search .grid_result_price {
    margin: 8px 6px auto;
    height: auto;              /* same reason as the spec line above */
    min-height: 16px;
  }
  #ssq_diamond_search .grid_result_price p,
  #ssq_diamond_search .dsq_card_price {
    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);
    color: var(--rb-text-primary);
  }

  /* The Figma 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: it is lifted out of the card
     and re-used as the sticky primary CTA in section 6. Its wrapper is
     collapsed so the 300px card keeps the Figma proportions. */
  #ssq_diamond_search .result_grid_item .grid_result_button {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  #ssq_diamond_search .result_grid_item .grid_result_button button {
    width: 100%;
  }
  /* An unselected card's Add-to-Ring button has no slot in the design, so it is
     parked off-canvas rather than display:none'd — display:none would make the
     .active promotion in section 6 a two-step transition and would take the
     control out of the accessibility tree entirely. */
  #ssq_diamond_search .result_grid_item_container:not(.active) .grid_add_to_ring {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ---------------------------------------------------------------------------
     5. LIST RESULTS — Figma 14463:32914 / 14463:36073
        stack gap 4, pad 0/12; row 366 × 48, pad 4/0, gap 9,
        stroke #E4DED8 @0.40 w=1 align=OUTSIDE.
        Cells frame 305 × 38, SPACE_BETWEEN, column widths
        45 / 30 / 51 / 30 / 40 / 58 then a 13 × 12 heart at x=361.
     --------------------------------------------------------------------------- */
  /* NOTE: `display` is deliberately not set on .search_results. The base sheet
     hides it (diamond-search.css:493) and diamond-search.js toggles it with an
     inline display when the view switches, so forcing a display here would show
     the list underneath the grid on first paint. The 4px stack gap is therefore
     carried on the rows as a margin rather than as a flex gap. */
  #ssq_diamond_search .search_results {
    padding: 0 12px;
  }
  /* ---- THE HEADING BAND -- 14634:47676 › 14634:47678 ----------------------
     The owner's newer board for this screen, attached with: *"the header bar is
     sticky, no vertical lines, shortlist, heart will be 48 by 48 tappable."*
     366 x 28, fill #EDE6E0, r4, bottom hairline #E4DED8 @0.40 OUTSIDE (the
     rows'), pad 4 / 7.5, HORIZONTAL gap 10, 13 above the first row.

     The labels keep the BAND's widths, not the row's: its inner frame is 351
     against the row's 305 and packs left on a 10px gap instead of spreading
     SPACE_BETWEEN, so `Shape` is 90 and starts at the band's own padding --
     spanning the stone tile and the shape name together. Measured against the
     row below, Carat / Cut / Color / Price land within a pixel of the centre of
     the column each names; Clarity is 3px out, which is the design's own.
     Sentence case: the markup already emits `Shape`.
     --------------------------------------------------------------------- */
  #ssq_diamond_search .search_header {
    height: auto;
    margin: 0 0 13px;
    padding: 0 12px;
    overflow: visible;
    visibility: visible;
    background: transparent;
    /* Sticky under the drawer's own fixed header band -- and that is `top: 0`
       here, NOT the header's height.

       Owner: *"in the BYR flow the sticky header is moving into the middle,
       looks weird and misplaced."* MEASURED at 390 with `top: 112px`: the band
       sat at 227 while the first row sat at 156, i.e. parked over rows two and
       three and pinned there at every scroll position.

       The archive and the drawer do not share a scrollport. On an archive page
       the list scrolls the VIEWPORT, so the band's offset is measured from the
       top of the screen and 115 is right (stone-first.css). In here the scroller
       is `#ssq_diamond_search` itself, and a sticky offset resolves against THAT
       box's content edge -- which already starts below its own
       `padding-top: calc(var(--dsq-header-h) + 3px)`, the padding that clears
       the fixed header. 112 was therefore being added to a 115 that had already
       cleared it: 227. `0` pins the band exactly where its own flow position is,
       115, which is 3px under the header -- the board's lead-in. */
    position: sticky;
    top: 0;
    z-index: 2;
  }
  /* A STICKY HEADING CANNOT LIVE INSIDE A SCROLLPORT THAT NEVER SCROLLS.
     `.diamond_search_results` carries `overflow: hidden` (base sheet), and
     `overflow: hidden` still establishes a scroll container -- so a sticky
     descendant resolves its offset against THAT box, whose scrollTop is
     permanently 0. MEASURED: the band was pushed down by exactly its own 115
     (static 264 -> sticky 379, painting over the second row) and then scrolled
     away with the page instead of pinning. Opened up below 992 so the viewport
     is the scrollport again; nothing here is wider than its column, so there is
     nothing for the clip to have been holding in. */
  #ssq_diamond_search .diamond_search_results {
    overflow: visible;
  }

  #ssq_diamond_search .search_header > .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    /* 16px, and a radius you can see. Owner: *"the heading must be 16px, and
       the header must be rounded on corners -- this is for the list view header
       row on diamond search results."* The band is 12/13 on 14634:47678; the
       owner has overridden that, and the box grows with it: 16/21 in a 28-tall
       bar would clip its own descenders, so the height follows the type. */
    min-height: 34px;
    height: auto;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 7.5px;
    background: #EDE6E0;
    border-radius: 8px;
    box-shadow: 0 1px 0 0 rgba(228, 222, 216, 0.40);
  }
  #ssq_diamond_search .search_header > .row > .header_item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
  }
  #ssq_diamond_search .search_header > .row > .header_item p {
    margin: 0;
    font-family: var(--rb-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 21px;
    letter-spacing: 0;
    text-transform: none;
    text-align: center;
    color: var(--rb-text-primary);
    white-space: nowrap;
  }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(1) { flex: 0 0 90px; width: 90px; justify-content: flex-start; }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(1) p { text-align: left; }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(2) { flex: 0 0 30px; width: 30px; }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(3) { flex: 0 0 44px; width: 44px; }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(4) { flex: 0 0 30px; width: 30px; }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(5) { flex: 0 0 40px; width: 40px; }
  #ssq_diamond_search .search_header > .row > .header_item:nth-child(8) { flex: 0 0 46px; width: 46px; }

  #ssq_diamond_search .search_results .result_item_row {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 48px;
    padding: 4px 0;
    margin: 0;
    border: 0;
    /* 14463:32916 default row — individualStrokeWeights {top:0,right:0,bottom:1,
       left:0}: a BOTTOM HAIRLINE ONLY, not a box. The previous `outline`
       shorthand drew all four edges, which turned every row into a bordered
       pill and is the single biggest reason the list view read as "weird".
       box-shadow (not border-bottom) because strokeAlign is OUTSIDE: the
       hairline must sit below the 48px box without eating into it, so the row
       pitch stays 48 + 4 = 52 exactly (assertion 73). */
    outline: 0;
    /* A HAIRLINE UNDER THE ROW, NOT A BOX AROUND IT. The previous round read
       14557:44601 as stroking the whole row and drew `0 0 0 1px #E4DED8`. The
       frame's own JSON says otherwise: `individualStrokeWeights {top: 0,
       right: 0, bottom: 1, left: 0}` at #E4DED8 @0.40, strokeAlign OUTSIDE --
       the same bottom hairline 14463:32916 had, only lighter. Designer: *"the
       lines are not there"*; what she is looking at is a build that boxed every
       row. box-shadow (not border-bottom) keeps strokeAlign OUTSIDE honest, so
       the hairline sits below the 48px box and the pitch stays 48 + 4 = 52. */
    box-shadow: 0 1px 0 0 rgba(228, 222, 216, 0.40);
    border-radius: 0;
    margin-bottom: 4px;        /* 14463:32917 itemSpacing */
  }
  #ssq_diamond_search .search_results .result_item_row:last-child { margin-bottom: 0; }
  /* row selected — 14463:33199: stroke #27423B w=1.5, r=4 */
  #ssq_diamond_search .search_results .result_item_row.active {
    /* 14463:33203 replaces the hairline with a full box: stroke #27423B, w 1.5,
       align OUTSIDE, r 4. outline reproduces OUTSIDE alignment exactly (it does
       not reflow the row), so the selected row does not shift its neighbours. */
    box-shadow: none;
    outline: 1.5px solid var(--rb-brand-green);
    outline-offset: 0;
    border-radius: var(--rb-radius-sm);
  }

  /* The 44 × 40 stone thumbnail (14463:32919) HAS NO NODE on this path:
     result_to_html() puts the only <img> inside .result_item_details, which
     carries an inline display:none that jQuery's accordion toggles. Rather than
     leave the slot empty, it is filled from data-shape — real, present data —
     with the shape glyphs already shipped in the theme. This is a deliberate
     deviation from the design's stone photograph; see the report. */
  #ssq_diamond_search .search_results .result_item_row > .results_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 0 4px;
    cursor: pointer;
  }
  #ssq_diamond_search .search_results .result_item_row > .results_header::before {
    content: "";
    flex: 0 0 44px;
    width: 44px;
    height: 40px;
    border-radius: var(--rb-radius-sm);
    /* The real stone PHOTO when we have one, falling back to the shape glyph.
       result_to_html() puts the only <img> inside .result_item_details, which
       carries an inline display:none, so the photo was never visible in list
       view -- every row showed a monochrome outline instead. The row already
       carries the URL in data-img; simple-select-redesign.js copies it into
       --dsq-thumb, and the glyph rules below stay as the fallback for rows
       whose data-img is empty. */
    background: var(--rb-surface-card) no-repeat center / 24px 24px;
  }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Round"]    > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-round.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Oval"]     > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-oval.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Pear"]     > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-pear.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Emerald"]  > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-emerald.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Cushion"]  > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-cushion.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Princess"] > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-princess.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Marquise"] > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-marquise.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Asscher"]  > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-asscher.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Radiant"]  > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-radiant.svg"); }
  #ssq_diamond_search .search_results .result_item_row[data-shape="Heart"]    > .results_header::before { background-image: url("../../../assets/media/ringbuilder/shape-glyph-heart.svg"); }

  /* AFTER the per-shape glyph rules on purpose: those carry the same specificity,
     so at equal weight source order decides and the glyph would otherwise win the
     background-image every time. */
  #ssq_diamond_search .search_results .result_item_row[style*="--dsq-thumb"] > .results_header::before {
    background-image: var(--dsq-thumb);
    background-size: cover;
    background-position: center;
  }

  #ssq_diamond_search .search_results .result_item_head_info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;   /* 14463:32920 primary=SPACE_BETWEEN */
    flex: 1 1 auto;
    height: 38px;
    margin: 0;
    padding: 0;
  }
  #ssq_diamond_search .search_results .result_item_head_info > .result_item {
    padding: 0;
    border: 0;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #ssq_diamond_search .search_results .result_item_head_info > .result_item p {
    margin: 0;
    font-family: var(--rb-font-body);
    font-weight: 400;
    font-size: 12px;
    line-height: 13px;
    letter-spacing: var(--rb-ls-tight);
    color: var(--rb-text-primary);
    text-align: center;
  }
  /* Figma column widths, in tree order. The ratio and measurements cells are
     already d-none below 992px, so the row lands on the six specced columns. */
  #ssq_diamond_search .search_results .result_item_head_info > .shape-col   { flex: 0 0 45px; width: 45px; justify-content: flex-start; }
  #ssq_diamond_search .search_results .result_item_head_info > .carat-col   { flex: 0 0 30px; width: 30px; }
  #ssq_diamond_search .search_results .result_item_head_info > .cut-col     { flex: 0 0 51px; width: 51px; }
  #ssq_diamond_search .search_results .result_item_head_info > .color-col   { flex: 0 0 30px; width: 30px; }
  #ssq_diamond_search .search_results .result_item_head_info > .clarity-col { flex: 0 0 40px; width: 40px; }
  #ssq_diamond_search .search_results .result_item_head_info > .price-col   { flex: 0 0 58px; width: 58px; }
  /* 14463:32921 — the shape cell alone is LEFT aligned at ls -0.5 */
  #ssq_diamond_search .search_results .result_item_head_info > .shape-col p {
    text-align: left;
    letter-spacing: var(--rb-ls-wide);
  }
  /* 14463:32927 — 13 × 12 heart, stroke #0F0E0D. Same caveat as the grid card:
     decoration only until a shortlist store exists. */
  /* THE DRAWN HEART IS GONE AND A REAL ONE IS IN ITS PLACE. Owner: *"in list
     view, favorites is missing."* It was drawn here as a `::after` and this
     rule's own note said "decoration only until a shortlist store exists" --
     the store has existed since the grid cards got theirs, so
     simple-select-redesign.js now appends the SAME `button.dsq_heart` to the
     row and the same handler reads and writes the same key. Same 13 x 12 box
     (14463:32927 / 14557:44601), with a tap target around it that does not
     disturb the line. */
  #ssq_diamond_search .search_results .result_item_head_info::after { content: none; }
  #ssq_diamond_search .search_results .result_item_head_info > .dsq_row_heart {
    position: relative;
    /* 14 x 13, NOT 13 x 12. Owner: *"the heart icon is getting chopped off in a
       weird way."* 14634:47697's glyph is 13 x 12 but Figma exports a stroked
       vector in a box padded by half its stroke, so the FILE is 14 x 13. Drawn
       at 14 x 13 in a 13 x 12 box it was cropped half a pixel on every side --
       the outline's own edge, shaved. The box takes the file's size; the glyph
       inside it is still the board's 13 x 12. */
    flex: 0 0 14px;
    width: 14px;
    height: 13px;
    padding: 0;
    border: 0;
    cursor: pointer;
    /* 14634:47697, the row heart on the owner's newer board -- 13 x 12 stroked
       #0F0E0D at 1 with round caps, exported to its own file. The card's
       `icon-heart-outline-dark.svg` was being reused here and is a different
       node (16 x 15, #3E3C39 on board 3.1); scaled to 13 it also thinned its
       stroke below 1px. */
    background: url("../../../assets/media/ringbuilder/icon-heart-row-13.svg") no-repeat center / 14px 13px;
  }
  /* THE RESTING HEART IS GREEN HERE TOO. Owner, about the list view on both
     surfaces: *"the colours for favourites are off -- green outline when not
     selected, and when selected outline plus fill is red. For the exact colour
     check how it was."*

     MEASURED on this row: `icon-heart-row-13.svg`, stroked #0F0E0D. A
     background-image cannot be recoloured from CSS, so the asset is forked --
     same 14 x 13 path, stroke #27423B, the jade that
     `icon-heart-outline-green.svg` already carries (that file is the "how it
     was" the owner means; it ships in this repo and nothing references it).
     The archive's list row gets the same pair in stone-first.css. */
  #ssq_diamond_search .search_results .result_item_head_info > .dsq_row_heart {
    background-image: url("../../../assets/media/ringbuilder/icon-heart-row-13-green.svg");
  }
  #ssq_diamond_search .search_results .result_item_head_info > .dsq_row_heart[aria-pressed="true"],
  #ssq_diamond_search .search_results .result_item_head_info > .dsq_row_heart.selected,
  #ssq_diamond_search .search_results .result_item_head_info > .dsq_row_heart.active {
    background-image: url("../../../assets/media/ringbuilder/icon-heart-filled-red.svg");
    background-size: 13px 12px;   /* the filled variant has no stroke to pad */
  }
  /* 48 x 48 of tap around a 13 x 12 glyph -- the owner's number, stated with
     the board: *"heart will be 48 by 48 tappable button."* Drawn outward from
     the glyph's own centre so the row's layout is untouched; `inset: -16px`
     before this gave 45 x 44. */
  #ssq_diamond_search .search_results .result_item_head_info > .dsq_row_heart::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 48px;
    height: 48px;
    transform: translate(-50%, -50%);
  }

  /* the expandable detail panel is not part of these frames; it keeps the base
     styling but loses the desktop 32px/81px padding at this width */
  #ssq_diamond_search .search_results .result_item_details {
    padding: 16px 12px;
    border: 0;
  }

  /* ---------------------------------------------------------------------------
     6. STICKY CTA BLOCK — Figma 14463:32347 (`ctas`, 390 × 178, fill #FAF3ED,
        AL:VERTICAL gap=10, pad 12,10,10,10; inner column 370 wide, gap 12).
        Checklist 82 / GEOMETRY 6: the two BUTTONS are 346 wide at x=22 on the
        Advanced Search + Stone Selection frames (14463:35685 / :35689 sit at
        x=22 inside the 370 column) and only stretch to the full 370 at
        x=10.375 on the List View frames 14463:32914 / :33199, where the frames
        are size=FILL/FIXED align=STRETCH. The tertiary link is 346 everywhere.
          primary   346 × 44  fill #27423B  r=4   "ADD TO RING →"
          secondary 346 × 44  stroke #27423B 1px  "VIEW MORE DETAILS"
          link      346 × 28  no fill             "Talk to a gemologist"
        Measured from the block's bottom edge: 122 / 66 / 26.
        Only present in 14463:32245 — i.e. once a stone is selected.
     --------------------------------------------------------------------------- */
  #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-ctas-closing .dsq_sticky_ctas[hidden],
  #ssq_diamond_search.dsq-ctas-closing .dsq_sticky_ctas,
  #ssq_diamond_search.dsq-has-selection .dsq_sticky_ctas {
    display: block !important; /* see the [hidden] note above */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* 122 = 12 pad-top + 44 secondary + 12 gap + 44 tertiary wrapper + 10
       pad-bottom — the block WITHOUT a primary. Only `.dsq-has-selection` on
       its own lands here now: both real selections (a grid card, a list row)
       have a button to lift into the top slot and take the designed 178 below.
       Reserving 178 with nothing to put in it left a visible 56px hole. */
    height: 122px;
    z-index: 6;
    background: var(--rb-surface-page);
  }
  /* 14463:32347 (grid) / 14463:33186 (list) — the full 390 x 178 bar, used
     whenever the primary CTA has a button to lift into it. Both selections do:
     the grid card owns `button.grid_add_to_ring` and the list row owns
     `.result_item_details .search_selectors button.primary_jade`. */
  #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:has(.result_grid_item_container.active) .dsq_sticky_ctas {
    height: 178px;
  }

  /* the real, already-wired "Add to Ring" button of the selected card, promoted
     into the block's top slot. No new handler, no duplicate control. */
  #ssq_diamond_search .result_grid_item_container.active .grid_add_to_ring {
    position: fixed;
    /* 14463:35685 / :32348 -- 346 x 44 at x=22, NOT the full 370 column width */
    left: 22px;
    right: 22px;
    bottom: 122px;
    width: auto;
    height: 44px;
    z-index: 7;
    margin: 0;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    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: 16px;
    line-height: 19px;
    letter-spacing: var(--rb-ls-tight);
    text-transform: uppercase;
  }
  /* 14463:32352 — a 12 × 0 vector stroked #FAF3ED at 1.25; the arrow glyph
     already shipped for the other redesign CTAs */
  #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;
  }

  #ssq_diamond_search .dsq_sticky_ctas .dsq_cta {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7;
    margin: 0;
    font-family: var(--rb-font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: var(--rb-ls-tight);
  }
  /* 14463:32353 / :35689 — 346 × 44 at x=22, fill #FAF3ED, stroke #27423B
     1px INSIDE, r=4 */
  #ssq_diamond_search .dsq_sticky_ctas .dsq_cta_secondary {
    left: 22px;
    right: 22px;
    bottom: 66px;
    height: 44px;
    padding: 14px 0;
    border: var(--rb-stroke) solid var(--rb-brand-green);
    border-radius: var(--rb-radius-sm);
    background: var(--rb-surface-page);
    color: var(--rb-brand-green);
    text-transform: uppercase;
  }
  /* 14463:32357 — 346 × 28, no fill, no stroke */
  #ssq_diamond_search .dsq_sticky_ctas .dsq_cta_link {
    left: 22px;
    right: 22px;
    bottom: 26px;
    height: 28px;
    padding: 14px 0;
    border: 0;
    border-radius: var(--rb-radius-sm);
    background: transparent;
    color: var(--rb-brand-green);
    /* 14463:35695 / :32357 — textDecoration: UNDERLINE */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }

  /* ROUND 2 -- BOARD CONFLICT, resolved in favour of the newer board.
     The rule that used to live here widened the secondary to 370 at x=10 while
     the list view was up, on the authority of 14463:32914 / :33199 (List View),
     where those two buttons alone are size=FILL/FIXED align=STRETCH.
     14468:39018 -- the newer mobile board, and the one this screen is now built
     from -- has exactly ONE `ctas` frame (14468:39121) and no list variant of
     it: the frame sits at x 27771 and all three CTAs sit at x 27793, i.e. 346
     wide inset 22, in every state the board draws. Honouring the older frame
     put three CTAs in one footer at two different widths (346 / 370 / 346), so
     the 14468 geometry wins and the override is gone. Nothing replaces it --
     the base `.dsq_cta_secondary` rule above is already 346 at x=22. */

  /* --- the LIST row's primary, promoted into the block's top slot -----------
     14468:39123 — 346 x 44 at x=22 inside the 370 column, fill #27423B, r=4,
     AL:HORIZONTAL gap=6, pad 14/0, label "SELECT {carat} Carat lab Diamond"
     (Founders Grotesk 400 16/19, textCase UPPER, #FAF3ED) followed by the
     12-wide `Vector 138` arrow.

     ROUND 2 — same board conflict as the secondary above. This used to be
     370 at x=10 per 14463:33188; the newer 14468:39018 draws one footer whose
     primary is 346 at x=22 whichever view is up, and the newer board wins. It
     now matches the grid card's promoted button exactly, which is the point:
     grid and list promote DIFFERENT buttons into the SAME slot. The label is
     matched too — simple-select-redesign.js rewrites the row's button to the
     carat template below 992 (COPY.md §5), so the two views no longer disagree
     on the wording of one action.

     Same move the grid card gets above and for the same reason: the row already
     owns a real, wired button — `.search_selectors button` is what
     diamond-search.js:1542 binds to commit the stone — so it is lifted rather
     than duplicated. The PHP deliberately renders no primary inside
     `.dsq_sticky_ctas` (a handler-less second button would look identical and
     do nothing), which is why the list view had an empty top slot at all.

     THE ANCESTOR HAS TO BE UN-HIDDEN FIRST. result_to_html() writes an inline
     `display: none` on `.result_item_details` (diamond-search.js:2075) and a
     descendant of a display:none box cannot paint however it is positioned. So
     the panel is switched to `display: block` and collapsed to a 0-height
     clipped box instead: nothing inside it renders, the row's own height is
     unchanged, and the fixed button escapes the clip (no ancestor here
     establishes a containing block for `fixed`). `:not(.opened)` keeps out of
     the way of the accordion the row's own click handler slides open. */
  /* `:not(.opened)` is GONE. It used to keep this clamp out of the accordion's
     way; the accordion no longer opens (see the end of this file), but jQuery
     still stamps `.opened` on the panel it thinks it slid down -- so with the
     guard in place an active row's panel dropped out of this rule on the second
     tap and the lifted button went with it. The clamp is now the panel's only
     state while the row is selected. */
  #ssq_diamond_search .search_results .result_item_row.active > .result_item_details {
    display: block !important;
    /* `!important` ON THE HEIGHT, AND THAT IS THE "WEIRD ANIMATION". Owner, on
       the phone list view: *"on clicking a diamond there's a weird animation
       which I think is a residue of the preview."*

       diamond-search.js:2294 still runs `slideDown()` on this panel, and jQuery
       animates by writing an INLINE `height` frame by frame. An inline
       declaration beats a plain author rule, so the clamp lost for the length
       of the slide: the panel grew to its full height, pushed every row below
       it down, and snapped back the moment jQuery finished and removed the
       inline value. The `display` was already !important for the same reason;
       the height has to be too, or the clamp only holds when nothing is
       animating it. */
    height: 0 !important;
    min-height: 0;
    /* jQuery's slideDown animates PADDING and MARGIN as well as height, each as
       an inline declaration -- MEASURED mid-slide: `height: 0px; padding-top:
       6.697px; padding-bottom: 6.697px`, so the clamp held the height and the
       box still grew to 13.4 and shrank back. Every box property the slide
       touches has to be stated the same way or the residue just moves to
       whichever one is left plain. */
    margin: 0 !important;
    padding: 0 !important;
    border: 0;
    overflow: hidden;
  }
  #ssq_diamond_search .search_results .result_item_row.active .search_selectors button.primary_jade {
    position: fixed;
    /* 14468:39123 — 346 x 44 at x=22, NOT the full 370 column width */
    left: 22px;
    right: 22px;
    bottom: 122px;
    width: auto;
    height: 44px;
    z-index: 7;
    margin: 0;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    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: 16px;
    line-height: 19px;
    letter-spacing: var(--rb-ls-tight);
    text-transform: uppercase;
  }
  /* 14463:33191 — a 12 x 0 vector stroked #FAF3ED at 1.25, the same arrow the
     grid card's promoted button carries. */
  #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 grid/list scroll body must clear the block while it is on screen --
     and by exactly as much as the bar is tall, which differs by view (above) */
  #ssq_diamond_search.dsq-has-selection {
    padding-bottom: 122px;
  }
  #ssq_diamond_search:has(.result_grid_item_container.active),
  #ssq_diamond_search:has(.result_item_row.active),
  #ssq_diamond_search.dsq-has-selection:has(.result_grid_item_container.active) {
    padding-bottom: 178px;
  }

}


/* =============================================================================
   DESKTOP — the header / summary block at >= 992px
   Figma SECTION 14465:38712, frame STONE-B 14465:39929 (1728 x 1240).

   STONE-B is NOT a wide variant of the mobile screen. The header splits into
   TWO top-level bands that are no longer one auto-layout column:

     (a) `Top Stuff`  14465:40247   1728 x 128, full-bleed, pad T44 R80 B44 L80,
                                    border-BOTTOM only (0.75 #E4DED8).
                                    [ title stack  ................  close 36 ]
     (b) `Frame 1171276644` 14465:40219   x 514, y 128, 1134 x 60,
                                    pad T12 R0 B10 L0, SPACE_BETWEEN.
                                    [ toggle 120 · 24 · sort 265 ...  segmented 266 ]

   x = 514 because the 491-wide filter rail occupies the left of the page; the
   band starts where the results column does.

   THE MARKUP IS ONE COLUMN, THE DESIGN IS TWO BANDS. .dsq_header_titlerow,
   .dsq_header_controls and .dsq_segmented are three siblings inside
   .dsq_screen_header and CSS cannot re-parent them, so the header becomes a
   2-column grid: the title row spans both columns as band (a), and band (b) is
   the controls row in column 1 with the segmented control in column 2. That
   reproduces the design's SPACE_BETWEEN without a wrapper node.

   NO FILTERS PILL AND NO COUNT BADGE EXIST ON DESKTOP (CHECKLIST D-56): the
   `Filter` instance is absent from 14465:39929 entirely, and "Filters"/"Reset"
   there are plain labels in the left rail's own bar, outside this region.

   Everything below is inside #ssq_diamond_search, so the /lab-grown-diamonds
   ACF block and the standalone diamond templates are untouched.
   ============================================================================= */

@media (min-width: 992px) {

  /* The --rb-* tokens are declared by simple-select-redesign.css inside
     `max-width: 991px` and by redesign/_stone-desktop.css inside
     `min-width: 992px`, both on #simple-select-quiz. Re-declaring the handful
     this block uses on #ssq_diamond_search keeps the file self-sufficient — if
     _stone-desktop.css is ever dropped from the enqueue loop the header still
     paints. Values are identical; nothing here shadows a different number. */
  #ssq_diamond_search {
    --rb-text-primary:   #0F0E0D;
    --rb-text-secondary: #3E3C39;
    --rb-border-subtle:  #E4DED8;
    --rb-surface-page:   #FAF3ED;
    --rb-brand-green:    #27423B;
    --rb-font-body:      'FoundersGrotesk', sans-serif;
    --rb-font-display:   'Canela', serif;
    --rb-ls-tight:       -0.21px;
    --rb-ls-wide:        -0.5px;
    --rb-radius-sm:      4px;
    --rb-radius-md:      8px;
    --rb-radius-lg:      10px;
    --rb-stroke:         1px;
    --rb-stroke-thick:   2px;
  }

  /* SHELL. STONE-B is a full-page takeover — 1728 x 1240 with no site header,
     no footer and no preview column — so the desktop screen is pinned exactly
     as the mobile one is. Without this, diamond-search.css:1176's
     `div#ssq_diamond_search { position:absolute; top:4px }` leaves the whole
     screen sitting wherever the quiz column happens to be in the document
     (measured ~4,950px down the PDP), with the site header painted over it,
     and the header band below has nothing to anchor to.
     Same specificity trick as the mobile rule: the element's own class takes
     this to (0,1,1,1) so it beats `div#…` (0,1,0,1) regardless of which sheet
     WordPress prints last. `display` is deliberately left to that base rule and
     to the .show()/.hide() diamond-search.js does.
     No padding-top here (unlike mobile): the desktop header band is in flow. */
  div#ssq_diamond_search.ssq_diamond_search {
    position: fixed;
    inset: 0;
    z-index: 999998;           /* below .search_filters (9999999) so the desktop
                                  filter rail still layers correctly */
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--rb-surface-page);
  }

  /* Same collapse as mobile: the cream "Pick a Lab Diamond" page header is
     replaced by this block, but diamond-search.js writes into it
     ($('.diamonds_search_header .container .row').html('')) and reads
     $('.ssq_diamonds_title span').text() to pick the lab/natural label, so it
     is zero-height + hidden, never display:none. */
  #ssq_diamond_search .diamonds_search_header {
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    visibility: hidden;
  }

  /* --- the header, as the two bands ---------------------------------------- */
  #ssq_diamond_search .dsq_screen_header {
    display: grid !important;  /* beats the reboot's [hidden]{display:none!important} */
    grid-template-columns: 1fr auto;
    gap: 0;                    /* the mobile column's 10px itemSpacing does not
                                  exist here: the two bands are flush (the page
                                  bar ends at 128, the controls band starts at
                                  128) and the segmented is placed by the grid's
                                  second column, not by a gap. */
    position: static;
    height: auto;
    padding: 0;
    background: var(--rb-surface-page);
  }

  /* (a) 14465:40247 — 1728 x 128, pad T44 L80 R80, hairline on the BOTTOM edge
         only (individualStrokeWeights {top 0, right 0, bottom 0.75, left 0}).
         44 + 65 + 44 = 153 but the frame is FIXED at 128, i.e. the design clips
         its own bottom padding; reproduced as a fixed 128 with the padding on
         the top and sides only. */
  #ssq_diamond_search .dsq_header_titlerow {
    grid-column: 1 / -1;
    height: 128px;
    box-sizing: border-box;
    padding: 44px 80px 0;
    border-bottom: 0.75px solid var(--rb-border-subtle);
  }
  /* 14465:40248 — 1568 x 65, gap 26, SPACE_BETWEEN */
  #ssq_diamond_search .dsq_header_bar {
    height: 65px;
    gap: 26px;
    justify-content: space-between;
    align-items: flex-start;
  }
  /* 14465:40249 — 518 x 65, VERTICAL gap 26 */
  #ssq_diamond_search .dsq_header_titles {
    flex: 0 1 auto;
    /* Figma measures TIGHT text boxes: the 32px title is 23 tall, not the 35.2
       its line-height implies. A CSS line box is the full 35.2, so the 12.2px
       of leading is pulled back off the title (6.1 above, 6.1 below) and the
       26px gap is reduced by the 6.1 that now sits inside the title's own box.
       Pulling 6.1 off BOTH ends collapses the title's margin box back to the
       23 Figma records, so the gap stays the design's own 26.
       Net: glyphs start at y 44 and the count's box starts at y 93 — the two
       numbers the frame actually records. */
    gap: 26px;
  }
  /* 14465:40250 — Canela 300 32 / 35.2 (110%), letter-spacing 0, UPPER */
  #ssq_diamond_search .dsq_header_title {
    font-size: 32px;
    line-height: 35.2px;
    letter-spacing: 0px;       /* the mobile -0.21 is NOT carried to desktop */
    margin: -6.1px 0;
  }
  /* 14465:40251 — Founders Grotesk 400 16 / 16 (100%), ls -0.21, #3E3C39 */
  #ssq_diamond_search .dsq_header_count.results_count {
    font-size: 16px;
    line-height: 16px;
  }
  /* 14465:40252 — 36 x 36, fill #E4DED8 at FULL opacity (not the mobile 0.60),
     r 4; glyph 14465:40253 is 10 x 10 stroked #0F0E0D. */
  #ssq_diamond_search .dsq_close {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    background: var(--rb-border-subtle);
  }
  #ssq_diamond_search .dsq_close_glyph {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
  }
  #ssq_diamond_search .dsq_close_glyph::before,
  #ssq_diamond_search .dsq_close_glyph::after {
    width: 14.1421px;          /* 10 x sqrt(2) */
    background: var(--rb-text-primary);
  }

  /* (b) 14465:40219 / 14465:40220 — the controls band.
         60 tall = 12 padT + 38 + 10 padB; content starts at x 514, which is
         where the results column starts once the 491-wide filter rail is
         placed. The rail itself is NOT styled here — only the offset the band
         needs to line up with it. */
  #ssq_diamond_search .dsq_header_controls {
    grid-column: 1;
    grid-row: 2;
    height: 60px;
    box-sizing: border-box;
    padding: 12px 0 10px 514px;
    gap: 24px;                 /* 14465:40220 itemSpacing — 8 on mobile */
  }
  /* 14465:40221 — 120 x 38, itemSpacing still -1 */
  #ssq_diamond_search .dsq_viewtoggle {
    flex: 0 0 120px;
    width: 120px;
    height: 38px;
  }
  /* 14465:40222 / 14465:40230 — 60.5 x 38 each; the 16 x 16 glyph is unchanged */
  #ssq_diamond_search .dsq_viewtoggle .result_view {
    flex: 0 0 60.5px;
    width: 60.5px;
    height: 38px;
  }
  /* 14465:40235 — 265 x 38, FIXED (not FILL as on mobile), pad 12/8 */
  #ssq_diamond_search .dsq_header_controls .diamond_sort_by {
    flex: 0 0 265px;
    width: 265px;
    height: 38px;
  }
  /* 14465:40237 — 18px (mobile 14), line-height stays 19px, ls stays -0.21 */
  #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: 40px;
  }

  /* CHECKLIST D-56 — no Filters pill and no count badge on desktop. The pill is
     added markup that nothing in diamond-search.js reads (the only reader,
     simple-select-redesign.js's dsqBadge, works on attributes, not on layout),
     so display:none is safe here where it would not be on a shared node. */
  #ssq_diamond_search .dsq_filters { display: none; }

  /* 14465:40240 — 266 x 38, pinned to the right end of the controls band
     (x 1382 .. 1648, i.e. flush to the 80px page gutter) by the grid's second
     column. Segment widths keep the same +4 asymmetry: 134.25 / 130.25. */
  #ssq_diamond_search .dsq_segmented {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    flex: 0 0 auto;
    width: 266px;
    height: 38px;
    margin: 12px 80px 0 0;
  }
  /* 14465:40242 / 14465:40245 — 18px / lh 18px (100%), ls -0.5 */
  #ssq_diamond_search .dsq_seg_label {
    font-size: 18px;
    line-height: 18px;
  }

  /* diamond-results.php renders a SECOND controls row (.results_count.d-lg-flex:
     its own count, view toggle and sort control) inside .diamond_search_results.
     simple-select-redesign.js relocates the MOBILE pair — the first match in
     document order — into the header, so this one is the leftover duplicate.
     Collapsed, never display:none'd: it carries a span.result_counter that
     diamond-search.js:967 writes and a .search_view_options / .diamond_sort_by
     the script reads. */
  #ssq_diamond_search .diamond_search_results > .results_count {
    height: 0;
    min-height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    gap: 0;
    overflow: hidden;
    visibility: hidden;
  }

}

/* =============================================================================
   ADDENDUM — MOBILE (<=991px), added against DEFECTS.md D1 / D2 / D3.

   Every number below was measured on dev-0 at 390 through adv3/lib.js with the
   builder open, the advanced search open and the mobile FILTERS sheet open.
   Authorities: adv3/FILTERS-RAIL.md (14468:43530, 14468:43528) for D1,
   DEFECTSPEC.md §D2 (component set `shape` 14468:44330) for D2,
   DEFECTSPEC.md §D3 / CHECKLIST2 #163 (14468:39096) for D3.

   Additive only: nothing above is deleted or reordered, and no rule here sets
   `display` on anything the base state machines or jQuery drive.
   ============================================================================= */

@media (max-width: 991px) {

  /* ===========================================================================
     D1 — "only one scrollbar, nice and clean"

     MEASURED at 390, filters sheet open:
       .search_filters.opened   overflow auto/auto
                                clientW 390 / scrollW 390   (nothing overflows)
                                clientH 844 / scrollH 1338  (the one real scroll)
       section.diamond_filters  overflow visible/visible    (already correct)
     So the DESKTOP two-nested-scrollers shape does NOT reproduce at mobile:
     there is already exactly one scroll container. Two things are still wrong
     against FILTERS-RAIL.md and both are fixed here.

     (a) The single scroller is `auto` on BOTH axes, so it is one overflowing
         row away from growing the second bar the customer complained about.
         Pin it to one axis.
     (b) FILTERS-RAIL: "there must be NOTHING to scroll horizontally". The
         range-slider handles break that rule today — MEASURED:
           column          x=24  w=342   -> right edge 366
           .slider__bar    x=34  w=325.36 (98% of a 332px padded box)
           upper handle    x=356.36 w=20 -> right edge 376.36, i.e. 10.36px
                           OUTSIDE the column
           .noUi-touch-area 36 wide      -> right edge 384.36, 18.36px outside
         FILTERS-RAIL's remedy is to inset the track by half a handle on each
         side rather than let it overhang, so the handle's travel ends flush
         with the column.
     =========================================================================== */

  #ssq_diamond_search .search_filters {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Scrollbar `14468:43528`: 6px lane, thumb r20, #3E3C39 @ 20%, no track
       fill, no arrows. Firefox first, WebKit below. */
  /* 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. */
    scrollbar-width: thin;
    scrollbar-color: #3E3C39 #E4DED8;
  }
  #ssq_diamond_search .search_filters::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  #ssq_diamond_search .search_filters::-webkit-scrollbar-track {
    background: #E4DED8;
    border-radius: 20px;
  }
  /* Fades when nothing is moving -- see the desktop twin. This sheet loads
     after diamond-search.css, so the fade there was being painted over. */
  #ssq_diamond_search .search_filters::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: transparent;
    transition: background-color 400ms linear;
  }
  #ssq_diamond_search .search_filters.sf-scrolling::-webkit-scrollbar-thumb {
    background: #3E3C39;
  }
  #ssq_diamond_search .search_filters::-webkit-scrollbar-button,
  #ssq_diamond_search .search_filters::-webkit-scrollbar-corner {
    display: none;
    width: 0;
    height: 0;
  }

  /* (b) THE SAME SLIDER AS DESKTOP, and contained. Owner: *"the filters are old
     on phone -- the sliders are still round on the ends, not like those on
     desktop for advanced diamond search."*

     They were. The pill thumb only ever existed above 992
     (_advanced-search-desktop.css:855 for this rail, stone-first.css:3346 for the
     archive one), so phone fell all the way back to diamond-search.css:1055 --
     MEASURED at 390: a 20 x 20 thumb at `border-radius: 50%` on a 10px track with
     `background: #FAFAFA` and `right: -17px`. A circle on a near-white rail,
     against desktop's 26 x 17 green capsule on an #E4DED8 one.

     Numbers are desktop's, verbatim, because the board draws one control:
     track 8 tall r15 #E4DED8, connect #C2CEB2 r8, thumb 26 x 17 r16 #27423B, and
     32 x 21 on price (the only group whose thumb is taller).

     CONTAINMENT CARRIES OVER, with new arithmetic. FILTERS-RAIL's rule is that
     nothing may overhang the column, and a thumb sits centred on the track END,
     so the track has to be inset by HALF a thumb on each side -- 13 now, not the
     10 that a 20px thumb needed, and 16 on price. The inset moved from padding on
     `.nuslider` to margin on the bar itself so that the <input> pair underneath
     keeps the column's full width, and `.nuslider`'s inherited 3/10px padding is
     zeroed or it would land asymmetrically on top of the margin. */
  #ssq_diamond_search .diamond_filters .nuslider {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;
  }
  #ssq_diamond_search .diamond_filters .nuslider .slider__bar.noUi-horizontal {
    grid-column: 1 / -1;       /* inert unless .nuslider is a grid */
    box-sizing: border-box;
    width: auto;               /* fill what the margins leave */
    height: 8px;
    margin: 4.5px 13px;        /* centres the 17-tall thumb; 13 = half of 26 */
    border: 0;
    border-radius: 15px;
    background: var(--rb-border-subtle, #E4DED8);
    box-shadow: none;
  }
  #ssq_diamond_search .diamond_filters .nuslider .noUi-connect {
    background: var(--rb-brand-sage-strong, #C2CEB2);
    border-radius: 8px;
  }
  #ssq_diamond_search .diamond_filters .nuslider .noUi-horizontal .noUi-handle.noUi-handle-lower,
  #ssq_diamond_search .diamond_filters .nuslider .noUi-horizontal .noUi-handle.noUi-handle-upper {
    width: 26px;
    height: 17px;
    top: -4.5px;
    right: -13px;              /* half the thumb, so travel ends flush */
    border: 0;
    border-radius: 16px;
    background: var(--rb-brand-green, #27423B);
    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 .slider__bar.noUi-horizontal {
    margin: 6.5px 16px;
  }
  #ssq_diamond_search .diamond_filters .d_filter.price .nuslider .noUi-horizontal .noUi-handle.noUi-handle-lower,
  #ssq_diamond_search .diamond_filters .d_filter.price .nuslider .noUi-horizontal .noUi-handle.noUi-handle-upper {
    width: 32px;
    height: 21px;
    top: -6.5px;
    right: -16px;
  }
  /* The invisible hit target is 36 wide and noUiSlider translates it, so it
     overhangs a 26px thumb on both sides. Clamped to the thumb; the thumb plus
     the 13px of track inset around it is the touch target. */
  #ssq_diamond_search .diamond_filters .nuslider .noUi-handle .noUi-touch-area {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    transform: none;
  }

  /* (c) FLUID GUARD, and the D1 defect's real second scroller at mobile.
     MEASURED at 320: `.filter_options.shape_filter` turns into a scroll
     container — overflow auto/auto, clientW 272 / scrollW 340, i.e. 68px of
     horizontal overflow and a second bar inside the one the sheet already has.
     diamond-search.css:1089 declares `grid-template-columns: 1fr x5` plus
     `overflow-x: auto`, and a bare `1fr` floors at the track's MIN-CONTENT
     width (~64.4 here, set by the 50px glyph and the longest label), so below
     ~360 the five tracks refuse to shrink and the grid overflows instead.
     That is HARNESS trap 6 exactly: size from what the gaps leave.

     `minmax(0, 1fr)` removes the min-content floor so the grid can never push
     past its column, and the row drops to 4-up below 375 so each tile keeps
     the ~64 it has at 390 rather than collapsing to 50. `overflow` (not
     `overflow-x`) because a visible/auto pair is computed back to auto/auto.
     FILTERS-RAIL: exactly one scroll container in the rail. */
  /* FOUR PER ROW, which is what the board draws. Owner: *"in the filters
     section make it 4 of the shape buttons in a row and adjust the rest
     accordingly"*, against 14557:53209.

     That frame's shape group is a 344-wide column of 80 x 96 tiles, four to a
     row, column gap 8 and row gap 9 -- 4 x 80 + 3 x 8 = 344 exactly, and the ten
     shapes fall 4 / 4 / 2. The build was on the legacy five
     (diamond-search.css:1114, gap 5), which is where the cramped tiles and the
     clipped labels came from.

     Stated as a count with `minmax(0, 1fr)` rather than a fixed 80: the 80 is
     what 4-up resolves to at the board's own 390, and below that the tracks have
     to shrink or the rail grows a horizontal scrollbar -- the one thing
     FILTERS-RAIL forbids. minmax(0, ...) is what lets them, by removing the
     min-content floor that a bare `1fr` keeps (the longest shape label). */
  #ssq_diamond_search .diamond_filters .filter_options.shape_filter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 9px;
    overflow: visible;
  }
  #ssq_diamond_search .diamond_filters .filter_options.shape_filter > button {
    min-width: 0;
  }

  /* ===========================================================================
     D2 — "on click of a swatch it's doublish"

     MEASURED at 390 with one chip selected in each family. All FOUR families
     paint the same thing, and mobile is worse than the 1728 render in DEFECTS:

       shape tile  .shape_filter button.active   64.39 x 85.19
       cut chip    .cut_filter button.active     81.75 x 58.38
       color swtch .color_filter button.active   44.56 x 45.19
       clarity     .clarity_filter button.active 81.75 x 45.19
         border      1px solid rgb(228,222,216)
         box-shadow  inset 0 0 0 2px rgb(15,14,13)   <- the near-black ring
         outline     none
         background  rgba(0,0,0,0)                   <- the sage fill is MISSING

     The black ring comes from diamond-search.css:131 and :182
     (`.d_filter .shape_filter button.active`, `.filter_buttons button.active`,
     `.filter_options.color_filter button.active`, all unmediaed). At 1728 the
     desktop sheet already replaces border/outline/background but leaves the
     shadow; at mobile nothing replaced any of it, so the black ring is the
     only selection signal there is.

     BOARD (`shape` component set 14468:44330, and FILTERS-RAIL for the cut /
     color / clarity rows): EXACTLY ONE stroke in both states —
       Default   0.75px #E4DED8 INSIDE, no fill
       Selected  1.5px  #27423B OUTSIDE + fill #C2CEB2 @ 0.30
     `strokeAlign: OUTSIDE` is why this is an `outline` and not a `border`:
     a border is inside and would shift the glyph by 1.5px on selection.

     Radius is deliberately NOT touched. The composed boards' 12 -> 20 morph is
     a DESKTOP reading (DEFECTSPEC §D2); there is no mobile filter board in the
     file at all (14463:35552 / 35745 draw the results, never the rail), so the
     build's existing 4px is left as the only sourced value.
     =========================================================================== */

  #ssq_diamond_search .diamond_filters .d_filter .shape_filter > button.active,
  #ssq_diamond_search .diamond_filters .d_filter .filter_buttons > button.active,
  #ssq_diamond_search .diamond_filters .d_filter .filter_options.color_filter > button.active {
    /* One declaration does both halves: it REPLACES the inset near-black ring
       and draws the board's single stroke. A non-inset box-shadow paints
       outside the border box, which is exactly `strokeAlign: OUTSIDE`, and
       unlike `outline-width` its spread is not rounded to a device pixel — an
       `outline: 1.5px` computes back to 1px at DPR 1, measured. */
    box-shadow: 0 0 0 1.5px var(--rb-brand-green);
    border-color: transparent;                   /* keeps the box from jumping */
    outline: 0;
    background-color: rgba(194, 206, 178, 0.30); /* #C2CEB2 @ 0.30 */
  }
  /* The unselected chip is 1px #E4DED8 already (the board's 0.75 is below one
     device pixel — DEFECTSPEC says keep 1px). Only the selected label colour
     is restated, because the sage fill changes its contrast. */
  #ssq_diamond_search .diamond_filters .d_filter .shape_filter > button.active p,
  #ssq_diamond_search .diamond_filters .d_filter .filter_buttons > button.active,
  #ssq_diamond_search .diamond_filters .d_filter .filter_options.color_filter > button.active {
    color: var(--rb-text-primary);
  }

  /* ===========================================================================
     D3 — "images between diamond cards are weird"

     MEASURED at 390, results grid:
       cards          177 x 300 at x=12 / 201, row pitch 312   <- matches board
       card image     177 x 160, object-fit cover              <- matches board
       editorial tile child 8, `.col-12.col-lg-8.g-3`
                      x = -5, w = 400          <- matches 14468:39096 exactly
                      h = 533.41               <- board is 372.67
                      textContent = ""         <- board draws a scrim, headline,
                                                  body, five thumbs and a CTA
       gaps above/below the tile 12 and 12                     <- match

     So at mobile the position, the bleed and the rhythm are all already right
     and the ONLY geometry defect is the height: a 1541 x 2055 portrait photo
     is being let run to its own aspect inside a row whose card height is 300,
     which is what breaks the run visually. Pinned to the board's 372.67 with
     the board's own FILL (= object-fit: cover).

     The empty content is NOT fixable from CSS — the tile is a bare <div> with
     one <img> and no text nodes. See the report.
     =========================================================================== */

  #ssq_diamond_search .search_results_grid > .col-12.col-lg-8 {
    height: 372.67px;
    overflow: hidden;
  }
  #ssq_diamond_search .search_results_grid > .col-12.col-lg-8 > img,
  #ssq_diamond_search .search_results_grid > .col-12.col-lg-8 > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;         /* IMAGE scaleMode FILL on 14468:39096 */
  }

}

/* The 4-up-below-375 exception that used to live here is gone: 14557:53209 puts
   the row at four across the board, so every phone width gets it from the rule
   above and there is nothing left for this breakpoint to change. */


/* =============================================================================
   RESULTS IN FLIGHT. diamond-search.js stamps `ds-loading` on the results
   containers from the moment a filter fetch leaves until the response for THAT
   request renders. Measured on dev-0, a single shape change took ~8s to come
   back, and for all of it the grid showed the previous query's diamonds with
   nothing to say they were stale.

   Dimmed and made inert rather than emptied or covered: the customer keeps their
   scroll position and the grid does not collapse and re-expand, but they cannot
   click a diamond that is about to be replaced.
   ============================================================================= */
#ssq_diamond_search .search_results_grid.ds-loading,
#ssq_diamond_search .search_results.ds-loading {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 160ms linear;
}
@media (prefers-reduced-motion: reduce) {
    #ssq_diamond_search .search_results_grid.ds-loading,
    #ssq_diamond_search .search_results.ds-loading { transition: none; }
}


/* =============================================================================
   SORT, MOVED INSIDE THE FILTERS (mobile only, requested).
   The controls bar keeps the view toggle and the Filters pill; sorting now sits
   with everything else that narrows the list. simple-select-redesign.js moves the
   one existing `.diamond_sort_by` node into `.search_filters` below 992 -- it is
   not a copy, so every handler diamond-search.js bound to it comes along.

   Styled as a filter block rather than the header pill it used to be: full width,
   the same gutter as its neighbours, and a rule beneath it so it reads as the
   first row of the panel rather than something floating above the shape filter.
   ============================================================================= */
#ssq_diamond_search .search_filters > .diamond_sort_by {
    order: -1;
    width: 100%;
    margin: 0 0 4px;
    padding: 12px 0;
    border: 0;
    border-bottom: var(--rb-stroke) solid var(--rb-border-subtle);
    border-radius: 0;
    background: transparent;
    display: flex;
    align-items: center;
    /* WRAP, and start from the left. `space-between` pushed the options
       container to the right edge, which rendered its chevron as a second
       stray caret opposite the real one. Row 1 is label + value + caret; the
       options list takes a full row of its own underneath. */
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 6px;
    cursor: pointer;
}
/* ONE CARET, NOT TWO. The control ships TWO of them: a legacy inline <svg>
   inside the <p> (two <line>s forming a chevron) and the redesign's own
   `.dsq_sort_chevron` span. The header layout hides the legacy one; that hide did
   not carry into the panel, so the row rendered "Sort by Price (Low to high) v v".
   Guessing at pseudo-elements and background images did not find it -- dumping the
   control's innerHTML did. */
#ssq_diamond_search .search_filters > .diamond_sort_by > p > svg {
    display: none;
}
#ssq_diamond_search .search_filters > .diamond_sort_by > p::before,
#ssq_diamond_search .search_filters > .diamond_sort_by > p::after {
    content: none;
    background: none;
}
#ssq_diamond_search .search_filters > .diamond_sort_by > p {
    background-image: none;
    margin: 0;
    font-family: var(--rb-font-body);
    font-size: 16px;
    line-height: 19px;
    letter-spacing: var(--rb-ls-tight);
    color: var(--rb-text-primary);
}
/* The options list is absolutely positioned as a dropdown in the header; inside
   the panel it belongs in flow, under its own row. */
#ssq_diamond_search .search_filters > .diamond_sort_by .diamond_sort_by_options {
    flex: 0 0 100%;          /* its own row, never beside the label */
    position: static;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}
#ssq_diamond_search .search_filters > .diamond_sort_by .diamond_sort_by_options span {
    display: block;
    padding: 10px 0;
    font-size: 16px;
    line-height: 19px;
    color: var(--rb-text-secondary);
}

/* =============================================================================
   "TALK TO GEMOLOGIST" HAS TO BE VISIBLE FROM INSIDE THE DRAWER
   -----------------------------------------------------------------------------
   Owner: *"in BYR flow, talk to gemologist does nothing -- literally nothing,
   on the bottom bar in the advanced diamond search."*

   The button is fine and so is its handler. MEASURED: the click reaches
   main.js:222, `#contact_modal_popup` gains `.is-open` and
   `.contact-modal-container` renders at [1184,0,400,449] with
   `visibility: visible`. It simply cannot be seen, for two independent reasons,
   and both are about where the modal lives rather than anything in this flow:

     .contact-modal-container   position: absolute   z-index: auto
       #contact_modal_popup     position: absolute   z-index: 1
         #masthead              position: absolute   z-index: 99999
                                overflow: hidden     box [0,0,1728,0]
     #ssq_diamond_search        position: fixed      z-index: 999998, full screen

   1. the drawer's 999998 paints over the header's 99999 -- `elementFromPoint`
      at the modal's own centre returned `DIV.dsq_header_titlerow`; and
   2. the header is a ZERO-HEIGHT box with `overflow: hidden`, so an absolutely
      positioned child is clipped away to nothing regardless of stacking.

   `position: fixed` answers both at once: a fixed box is not clipped by an
   ancestor's overflow (no ancestor here carries a transform or filter, which
   would re-trap it), and it takes a z-index in the viewport's own stacking
   context rather than the header's. The offsets are pinned to the measured
   resting place instead of inherited, because switching to fixed changes what
   they resolve against.

   SCOPED TO `body.rb_quiz_open`, which is the class the builder puts on while
   it is open -- verified on the live page, not assumed. Off that state the site
   header's modal is byte-for-byte what it was, on the product page and
   everywhere else.

   NOT THE GEMOLOGIST DECK. `.is-gemologist` (contact-modal.css) is a centred
   390 card with its own fixed, full-viewport shell, so it already clears both
   problems and must not be dragged into the corner by this rule.
   ============================================================================= */
body.rb_quiz_open #contact_modal_popup.is-open:not(.is-gemologist) .contact-modal-container {
    position: fixed;
    top: 24px;
    right: 24px;
    left: auto;
    z-index: 1000000;
}
/* ...AND THE HEADER HAS TO BE LIFTED WITH IT, because a z-index is only ever
   resolved inside its own stacking context. `#masthead` carries
   `z-index: 99999`, which MAKES it one, so the 1000000 above is compared
   against its siblings INSIDE the header, not against the drawer's 999998
   outside it. MEASURED with only the rule above: the modal computed
   `position: fixed`, `z-index: 1000000` at [1304,24,400,449] and
   `elementFromPoint` at its own centre still returned `DIV.dsq_header_bar`.

   Lifting the header costs nothing here: its box measures [0,0,1728,0] with
   `overflow: hidden`, so every part of it except this now-fixed modal is
   already clipped to nothing and there is no nav or logo to appear over the
   drawer. Gated on the modal actually being open, so the header's stacking
   order is untouched the rest of the time -- including on the plain product
   page, which must not change. */
body.rb_quiz_open:has(#contact_modal_popup.is-open) #masthead {
    z-index: 1000000;
}

/* The segmented control, once simple-select-redesign.js has lifted it into the
   toolbar row on a phone -- see rbDsqToolbar() for why it has to be moved
   rather than styled in place. It takes what is left of the 366-wide row after
   the two fixed ends and their 8px gaps, which is the board's one-line filter
   bar reproduced with the widths this build actually has. */
@media (max-width: 991px) {
    #ssq_diamond_search .dsq_header_controls > .dsq_segmented.dsq_segmented_inbar {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
        margin: 0;
        align-self: stretch;
    }
}

/* =============================================================================
   PHONE: THE SORT CONTROL LOOKS LIKE A CONTROL, AND THE BURIED COUNT GOES
   -----------------------------------------------------------------------------
   Owner: *"the sort one -- keep it clear, it looks out of place and weird from
   the others, give it proper stuff and styling while maintaining usability.
   Also covered by [the] green heading on top is [the count] of results -- I
   don't think that is required, remove that all on mobile."*

   MEASURED at 390 with the filter drawer open:
     green header  `.filters_mobile_toggle`  [0,-50,390,100] r50, #27423B
     results count `.results_count`          [12,36,330,16]
     sort          `.diamond_sort_by`        [0,60,390,44] transparent, r0
   so the count sits inside the band the green header paints over (0..50) and
   was showing as a sliver of "30,7" under its edge, and the sort was the one
   control in the panel with no fill, no border and no radius -- full-bleed text
   against the sheet while everything around it is a bordered pill.

   THE COUNT. Removed at <=991 as asked, not merely un-overlapped: the drawer
   already ends in `VIEW 30,789 RESULTS` (MEASURED [0,732,390,112]), so the
   number is still on screen while filtering and this was a second copy of it
   hidden behind a header. The <h*> itself is untouched above 992.

   THE SORT. Given the same shape as the filter controls it sits among -- the
   22px gutter the rest of the sheet uses, a #FDFAF8 field with the 1px #E4DED8
   inset stroke and r4. Usability is unchanged: the whole row stays the hit
   target (44px tall, above the 44 minimum), the chevron keeps its place, and
   nothing about the handler or the options list is touched -- this is fill,
   stroke and spacing only. */
@media (max-width: 991px) {
    /* SPECIFICITY, asked for rather than guessed: CDP matched-styles names
       `#ssq_diamond_search .dsq_header_count.results_count` (1 id + 2 classes)
       as the rule that sets `display: block` here, so a 1-id-1-class selector
       loses to it however late it is written. */
    /* ...THE HEADER'S OWN COUNT IS NOT THE ONE THAT WAS ASKED ABOUT.
       Owner, now: *"on phone, in the advanced lab and natural diamond search,
       the results number is not there."* The removal above was asked for and
       still stands -- but it was written as a blanket on `.results_count`, and
       `.dsq_header_count` is NOT the copy that was buried: MEASURED at 390, it
       sits in `.dsq_header_titles > .dsq_header_bar > .dsq_header_titlerow`,
       the advanced search's OWN header, while the one the owner was looking at
       is the copy inside the filter panel that the green `.filters_mobile_toggle`
       paints over. One selector took both, so the main screen lost its count
       entirely.

       The panel's copies stay hidden; the header's comes back. */
    #ssq_diamond_search .results_count {
        display: none;
    }
    #ssq_diamond_search .dsq_header_count.results_count {
        display: block;
    }
    /* Same check for the sort shell: the winner is
       `#ssq_diamond_search .search_filters > .diamond_sort_by`, which sets
       width 100%, margin 0, radius 0 and a transparent background. Matched
       here so the field styling actually lands. */
    #ssq_diamond_search .search_filters > .diamond_sort_by,
    #ssq_diamond_search .diamond_sort_by {
        box-sizing: border-box;
        width: calc(100% - 44px);
        margin: 12px 22px;
        padding: 0;
        border-radius: var(--rb-radius-sm);
        background: var(--rb-surface-input);
        box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-border-subtle);
        overflow: visible;
        /* containing block for the chevron below */
        position: relative;
    }
    #ssq_diamond_search .search_filters > .diamond_sort_by > p,
    #ssq_diamond_search .diamond_sort_by > p {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        min-height: 44px;
        margin: 0;
        padding: 0 12px;
        font-family: var(--rb-font-body);
        font-size: 15px;
        line-height: 19px;
        letter-spacing: var(--rb-ls-tight);
        color: var(--rb-text-secondary);
        /* NOWRAP, or the chevron drops to a second line of its own -- MEASURED
           after the first pass, the field came out 57 tall with the glyph
           sitting under the label at the left. It is the last item on the row,
           so with wrapping off it takes the `margin-left: auto` below and goes
           to the far end. */
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    /* The chosen value carries the weight, the "Sort by" lead-in stays quiet --
       the same relationship the filter rows use between label and value. */
    #ssq_diamond_search .search_filters > .diamond_sort_by > p > span,
    #ssq_diamond_search .diamond_sort_by > p > span {
        color: var(--rb-text-primary);
    }
    /* Chevron to the far end, so the row reads as a field rather than a
       sentence with an icon after it. */
    /* THE CHEVRON IS A SIBLING OF THE <p>, NOT INSIDE IT. Walked the subtree
       rather than assuming the markup: `.diamond_sort_by` holds three children
       -- the <p>, `span.dsq_sort_chevron` (the drawn glyph; the inline <svg>
       inside the <p> computes `display: none`) and the options list. So the
       glyph was a block after the text and took a line of its own, which is
       what made the field 57 tall with the chevron under the label.

       Pinned to the right edge instead of ordered on a row: making the shell a
       flex row would also make the OPTIONS LIST a flex item, and that list is
       the dropdown -- it has to stay out of the row's layout. Absolute keeps
       the shell's box exactly the <p>'s 44px. */
    #ssq_diamond_search .search_filters > .diamond_sort_by > .dsq_sort_chevron,
    #ssq_diamond_search .diamond_sort_by > .dsq_sort_chevron {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
    }
    /* Room for it, so a long sort label never runs under the glyph. */
    #ssq_diamond_search .search_filters > .diamond_sort_by > p,
    #ssq_diamond_search .diamond_sort_by > p {
        padding-right: 32px;
    }
}

@media (max-width: 991px) {
    /* =========================================================================
       THE OPEN SORT LIST IS A PANEL, NOT EXTRA ROWS IN THE FIELD
       -------------------------------------------------------------------------
       Owner: *"when I drop it down the alignment is weird, also colors are weird
       -- why is it white -- and the text is overlapping on [the] border."*

       MEASURED at 390 with the list open:
         .diamond_sort_by_options  [22,124,346,159] position: STATIC, display:
                                   block, background transparent
         its four rows            40px each, padding `10px 0`
       so the list was in normal flow INSIDE the field's own box. Three
       consequences, which are exactly the three things reported:
         * the field grew from 45 to ~204 tall, so its 1px stroke was drawn
           around the whole stack and the lower rows sat on top of it -- the
           "text overlapping on border";
         * the rows have no ground of their own, so they showed the field's
           #FDFAF8 where they overlapped it and the page behind where they did
           not -- the "why is it white";
         * the chevron is centred on the field, and the field was now 204 tall,
           so it floated down beside the second row -- the "alignment is weird".

       Lifting the list out of flow fixes all three at once: the field goes back
       to its 45px box (so the stroke and the chevron are right again) and the
       list becomes a panel under it with its own fill, stroke and radius. The
       rows get the field's own 12px inset so their text lines up with the
       closed value rather than starting at the panel edge. */
    #ssq_diamond_search .search_filters > .diamond_sort_by > .diamond_sort_by_options,
    #ssq_diamond_search .diamond_sort_by > .diamond_sort_by_options {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 30;
        box-sizing: border-box;
        padding: 4px 0;
        border-radius: var(--rb-radius-sm);
        background: var(--rb-surface-input);
        box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-border-subtle),
                    0 6px 18px rgba(15, 14, 13, 0.10);
        /* A long list stays reachable instead of running off the sheet. */
        max-height: 60vh;
        overflow-y: auto;
    }
    #ssq_diamond_search .search_filters > .diamond_sort_by > .diamond_sort_by_options > span,
    #ssq_diamond_search .diamond_sort_by > .diamond_sort_by_options > span {
        display: block;
        box-sizing: border-box;
        min-height: 40px;
        height: auto;
        padding: 10px 12px;
        font-family: var(--rb-font-body);
        font-size: 15px;
        line-height: 20px;
        letter-spacing: var(--rb-ls-tight);
        color: var(--rb-text-secondary);
        cursor: pointer;
    }
    /* The row already chosen reads as chosen -- the same weight/colour pairing
       the filter chips use for their active state. */
    #ssq_diamond_search .search_filters > .diamond_sort_by > .diamond_sort_by_options > span.selected,
    #ssq_diamond_search .search_filters > .diamond_sort_by > .diamond_sort_by_options > span.active,
    #ssq_diamond_search .diamond_sort_by > .diamond_sort_by_options > span.selected,
    #ssq_diamond_search .diamond_sort_by > .diamond_sort_by_options > span.active {
        color: var(--rb-text-primary);
        background: var(--rb-surface-page);
    }
}

/* =============================================================================
   THE ADVANCED SEARCH RISES FROM THE BOTTOM
   -----------------------------------------------------------------------------
   Owner: *"make the advanced diamond search slide in from the bottom to top.
   Opening 300-350ms, cubic-bezier(0.22, 1, 0.36, 1) ... under
   prefers-reduced-motion drop the slide and use a 150ms fade."*

   Keyed on the inline `display: block` diamond-search.js writes when the drawer
   opens -- MEASURED, the section goes `display: none` -> `display: block` with
   no class change, exactly as the builder does, so this uses the same hook and
   the same reasoning as `rbQuizSlideIn`.

   NO `animation-fill-mode` on the way IN. The drawer holds three
   `position: fixed` descendants (the CTA bar among them) and a transform on an
   ancestor becomes their containing block -- `both` would keep the final
   keyframe's `translateY(0)` forever, which is still a transform, and those
   three would start positioning against the drawer instead of the viewport.
   With no fill the computed transform returns to `none` the moment the
   animation ends.

   The closing half was not specified; it mirrors the builder's -- 250ms ease-in
   back down -- so the two panels in this flow behave the same way. Its `both`
   IS correct: the drawer has to hold its off-screen frame until the script
   hides it, and the class is dropped the moment that lands.
   ============================================================================= */
@keyframes rbDsqSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes rbDsqSlideDown {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}
@keyframes rbDsqFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes rbDsqFadeOut { from { opacity: 1; } to { opacity: 0; } }

#ssq_diamond_search[style*="display: block"] {
    animation: rbDsqSlideUp 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
#ssq_diamond_search.dsq-closing[style*="display: block"] {
    animation: rbDsqSlideDown 250ms ease-in both;
}
@media (prefers-reduced-motion: reduce) {
    #ssq_diamond_search[style*="display: block"] {
        animation: rbDsqFadeIn 150ms linear;
    }
    #ssq_diamond_search.dsq-closing[style*="display: block"] {
        animation: rbDsqFadeOut 150ms linear both;
    }
}

/* THE TITLE'S CAPS WERE BEING SHAVED. Owner: *"title is chopped, the grid/list
   buttons CTAs are chopped."*
   `.dsq_header_titles` clips (`overflow: hidden`) and the title is a 32px
   display serif on a 35.2px line box -- MEASURED font-size 32, line-height
   35.2, so the glyphs' ink reaches above the line box and the ancestor shaves
   it. The line box is given room instead of the clip being removed, because the
   clip is what keeps a long title from escaping the header band; 1.3 puts the
   caps comfortably inside and the block still fits the 60px row alongside the
   results count (41.6 + 16 = 57.6). */
#ssq_diamond_search .dsq_header_title {
    line-height: 1.3;
}
/* Belt and braces on the row itself: the grid/list group and its icons sit in
   a 44px control whose SVGs are drawn to the edge, so a clipping ancestor takes
   their outer stroke the same way. Nothing here needs to clip. */
#ssq_diamond_search .dsq_header_controls,
#ssq_diamond_search .dsq_viewtoggle,
#ssq_diamond_search .dsq_viewtoggle .result_view {
    overflow: visible;
}

/* ===========================================================================
   [Flow 3] A VISIBLE FOCUS RING ON THE TWO-STEP CARD
   ---------------------------------------------------------------------------
   Owner: *"make sure this interaction is accessible, navigable using keyboard
   as well."* diamond-search.js's sfSearchA11y() note covers the tab order and
   the announcements; this is the half that has to be seen.

   `:focus-visible`, not `:focus`: a mouse click on a card must not leave a ring
   behind it, and the browser already knows the difference. The ring is the
   brand green at 2px with a 2px offset so it reads on the card's own pale
   ground without touching the neighbouring card's gutter (cards sit on an 8px
   grid gap).
   =========================================================================== */
#ssq_diamond_search .result_grid_item_container a:focus-visible,
#ssq_diamond_search .result_grid_item_container button:focus-visible,
#ssq_diamond_search .result_item_row a:focus-visible,
#ssq_diamond_search .result_item_row button:focus-visible,
#diamond_search .result_grid_item_container a:focus-visible,
#diamond_search .result_grid_item_container button:focus-visible,
#diamond_search .result_item_row a:focus-visible,
#diamond_search .result_item_row button:focus-visible {
    outline: 2px solid var(--rb-brand-green, #27423B);
    outline-offset: 2px;
    border-radius: 2px;
}
/* The selected card already reads visually; this only makes the SELECTED +
   FOCUSED combination legible, where the green ring would otherwise sit on the
   green selection outline. */
#ssq_diamond_search .result_grid_item_container.active a:focus-visible,
#diamond_search .result_grid_item_container.active a:focus-visible {
    outline-color: var(--rb-text-primary, #0F0E0D);
}

/* ===========================================================================
   [Flow 3] THE PLACEHOLDER IS SMALL AND CENTRED (mount-scoped half)
   ---------------------------------------------------------------------------
   The reasoning is written out once in diamond-search.css. It has to be
   restated here because both mounts size the card photo through an
   id-scoped rule -- `#ssq_diamond_search .result_grid_img img` -- which
   outranks anything the base sheet can say about the same element. Same
   specificity, later sheet; no !important.
   =========================================================================== */
#ssq_diamond_search .result_grid_img.sf-img-missing img {
    width: 48.12%;
    max-width: none;
    min-width: 32px;
    height: auto;
    margin: auto;
    object-fit: contain;
}
#ssq_diamond_search .result_grid_img.sf-img-none img {
    display: none;
}

/* ===========================================================================
   [Flow 3] THE FANCY COLOUR CHIPS CARRY THEIR COLOUR -- 14526:50130
   ---------------------------------------------------------------------------
   Owner: *"fancy buttons are not colorful -- use these."*

   Read off the REST API, component set `Color` 14526:50101:
     Property 1=Default   the WHITE state -- D..J, 42 x 42, the rail's ordinary
                          chip. Unchanged.
     Property 1=Variant2  the FANCY state -- six 80 x 42 chips, radius 8, text
                          16/30, each with its OWN solid fill:
                            Pink #F6D6DE   Blue #D1E3F0   Yellow #FBE8B4
                            Orange #F8D3B2 Green #D3EAD3  Brown #EAD8CC
   Mapped by the buttons' own `data-slug` (pink/blue/yellow/orange/green/brown,
   MEASURED off the live markup), so nothing depends on DOM order.

   ONE DELIBERATE DEVIATION, stated because it is one. In that frame ALL SIX
   chips also carry `stroke #27423B w1.5 OUTSIDE` -- which in this rail's own
   grammar is the SELECTED treatment (resting is 0.75 #E4DED8). Reproduced
   literally, every fancy chip would look selected and the real selection would
   be unreadable. The board is showing the row in its selected look rather than
   specifying six permanently-selected chips, the same way it gives the empty
   progress track the band's own colour. So the FILLS are taken exactly and the
   stroke keeps the rail's grammar: 0.75 #E4DED8 at rest, 1.5 #27423B when
   active. The board also differs by one shade on two chips' text (#0F0E0D on
   Pink and Brown, #3E3C39 on the other four); the rail's own resting/active
   text colours are used for all six instead of carrying that inconsistency in.
   =========================================================================== */
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug="pink"] {
    --fancy-fill: #F6D6DE;
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug="blue"] {
    --fancy-fill: #D1E3F0;
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug="yellow"] {
    --fancy-fill: #FBE8B4;
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug="orange"] {
    --fancy-fill: #F8D3B2;
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug="green"] {
    --fancy-fill: #D3EAD3;
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug="brown"] {
    --fancy-fill: #EAD8CC;
}
/* THE FILL IS THE CHIP'S IDENTITY, SO IT SURVIVES SELECTION -- only the stroke
   and the text colour change, exactly as they do on every other chip in the
   rail. Carried on a custom property rather than as six background rules
   because the generic selected rule
   (`... .filter_options.filter_buttons > button.active`, which paints
   #C2CEB2 @0.30) weighs the same (1,3,1) and lives in a LATER sheet, so it won
   on source order -- MEASURED, selecting Green repainted it to
   rgba(194,206,178,0.3) and the colour was gone.

   The `[data-slug]` attribute takes both selectors below to (1,4,1), which
   beats that rule outright whatever the load order, and the property means the
   hex is written once per chip rather than twice. */
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug],
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button[data-slug].active {
    background-color: var(--fancy-fill);
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button {
    border-radius: 8px;          /* board cornerRadius 8 */
    color: var(--rb-text-secondary);
}
#ssq_diamond_search .diamond_filters .filter_options.fancy_colors > button.active {
    color: var(--rb-text-primary);
}

/* ===========================================================================
   [Flow 3] THE ADVANCED FILTERS' OWN ROW GAP
   ---------------------------------------------------------------------------
   Owner: *"in advanced filters the vertical space per filter, filter to filter
   ke beech mein, is weird."*

   It was weird in exactly ONE place. MEASURED at 1440 with the section open,
   the gap above each group: SHAPE -, CARAT 36, CUT 36, COLOR 36, CLARITY 36,
   PRICE 36, DEPTH 36, TABLE 36, RATIO 36, LENGTH 36, SYMMETRY **0**, POLISH 36,
   FLUORESCENCE 36, CERTIFIED BY 36.

   `#advanced_filters` splits its groups across TWO `.col-12` columns inside one
   `.row`. Each column is a flex stack with its own `gap: 36px`, which is where
   every 36 comes from -- but the `.row` between them has no row-gap at all, so
   the seam between the two columns (LENGTH -> SYMMETRY) closed to nothing and
   SYMMETRY's heading sat on LENGTH's inputs.

   The row is given the same 36 its columns already use, so the seam is
   indistinguishable from any other filter boundary and there is one number, not
   two, deciding this spacing.
   =========================================================================== */
#ssq_diamond_search #advanced_filters .row,
#diamond_search #advanced_filters .row {
    row-gap: 36px;
}

/* ===========================================================================
   [Flow 3] 230px OF NOTHING UNDER THE LAST FILTER
   ---------------------------------------------------------------------------
   Owner: *"in advanced search of diamond, too much space below the filters
   row."*

   `section.diamond_filters { padding-bottom: 230px }` (diamond-search.css:67)
   is legacy and unmediated. Desktop replaces it -- MEASURED at 1728, the rail
   computes 2px -- so only the phone drawer still carries it, and there it is
   the last thing a shopper scrolls through: the rail's last group ends at 1237
   and the section at 1467.

   The clearance it was standing in for is real: `.result_count_mobile` is the
   FIXED apply bar at the foot of the sheet, MEASURED at 112 tall, and content
   has to be able to scroll clear of it. 112 + 24 is that, with a gap under the
   last filter rather than a screen and a half of ground.
   =========================================================================== */
@media (max-width: 991px) {
  #ssq_diamond_search section.diamond_filters {
    padding-bottom: 136px;
  }
}

/* =============================================================================
   [Flow 3] THE CTA BAND RISES, IT DOES NOT APPEAR
   -----------------------------------------------------------------------------
   Owner: *"the bottom bar -- view more details, add to ring etc -- in the stone
   flow advanced search, the animation must be added: it must come from down to
   up, instead of just appearing. A smooth move from down to up."*

   It appeared. The band is `display: none` until a stone is selected and then
   `display: block !important`, and a display switch cannot be transitioned --
   which is why this is a keyframe animation and not a transition: an animation
   runs on an element that has just become displayed, a transition has nothing
   to run from.

   TRANSLATED BY THE BAND'S OWN HEIGHT, not by 100%. The promoted CTA -- the
   selected card's real `Add to Ring`, lifted into the band's top slot -- is
   `position: fixed` OUTSIDE the band, so it has to be moved by the same
   animation or it would sit still while the band slid up behind it. A
   percentage would be a percentage of each element's own box, so the 178-tall
   band and the 44-tall button would travel different distances at different
   speeds; one length moves them as one object.

   The band's own buttons need nothing: they are `position: fixed` DESCENDANTS,
   and a transformed ancestor becomes their containing block, so they ride the
   band. That re-basing is exact rather than lucky -- the band is
   `bottom: 0; left: 0; right: 0` with no padding, so its box is precisely the
   strip they were positioned against.
   ============================================================================= */
@keyframes dsq_ctas_rise_m {
  from { transform: translateY(190px); }
  to   { transform: none; }
}
/* ...AND THE WAY BACK OUT. The rise above has been here since the band was
   built; there was never a fall, because `display` cannot be transitioned and
   everything that gives the band a box hangs off `.dsq-has-selection`.
   diamond-search.js's `rbSfDrawerClearSelection()` now holds
   `.dsq-ctas-closing` on the root for the length of this animation, and the
   display rule below is widened to that state so the band keeps its fixed box
   while it travels instead of dropping into the document. */
/* THE LIST VIEW'S COLUMN HEADS ARE 14 ON PHONE.
   Owner: *"decrease font size of header, like shape, carat, cut, color,
   clarity, price -- must be smaller."* That list is exactly `.header_item`,
   the list view's column rule. MEASURED 16/21 at 390, which is the size the
   VALUES under it are set in -- so the head carried no hierarchy and ate the
   width six columns have to share. 14/18 with the board's own tracking.

   Phone only: at 992 and up the row has the width for 16 and the desktop
   board draws it there. */
@media (max-width: 991px) {
  /* MATCHED TO THE RULE IT NARROWS, not written at the first specificity that
     looked sufficient: the size comes from
     `#ssq_diamond_search .search_header > .row > .header_item p` (1,4,1), and a
     plain `#ssq_diamond_search .header_item p` (1,2,1) loses to it -- MEASURED
     after the first deploy, still 16/21. */
  #ssq_diamond_search .search_header > .row > .header_item p {
    font-size: 14px;
    line-height: 18px;
    letter-spacing: -0.21px;
  }
}

@keyframes dsq_ctas_fall_m {
  from { transform: none; }
  to   { transform: translateY(190px); }
}
@media (max-width: 991px) {
  /* THE BAND RISES. THE LIFTED BUTTON DOES NOT. Owner: *"no need to animate
     when I click on different product cards -- Add to Ring flashes and expands
     on every click on a different product card; it should not animate on
     click."*

     The card's own ADD TO RING is lifted into the band's area with `position:
     fixed`, and it was on this animation list. The band's class does not change
     when the selection MOVES between cards -- but the element the two card
     selectors match does, so a fresh element started the 320ms every single
     time, which is the flash and the grow.

     Dropped rather than made conditional: there is no CSS expression for "only
     the first time", and the band behind the button is already carrying the
     motion. The trade is that on the very first selection the band slides up
     while the lifted button appears in place; that is one frame of difference
     against a flash on every tap, which is what was reported. */
  #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 {
    animation: dsq_ctas_rise_m 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  /* ...AND THE LIFTED BUTTON RIDES WITH IT, ON THE FIRST SELECTION ONLY.
     Owner: *"the primary CTA is static and the rest of the drawer is sliding up.
     Looks glitchy, everything should animate together."* The trade described
     above was the right call for the flash and the wrong one for this; the half
     that was missing is a selector that fires once.

     `.dsq-ctas-rising` is that selector. simple-select-redesign.js stamps it on
     the root only when `.dsq-has-selection` goes absent -> present -- NOT when
     the selection moves between cards, which is the state change that caused the
     flash -- and clears it when the animation is over. Same keyframes, same
     duration and same curve as the band, so the two cannot drift. */
  #ssq_diamond_search.dsq-ctas-rising .result_grid_item_container.active .grid_add_to_ring,
  #ssq_diamond_search.dsq-ctas-rising .search_results .result_item_row.active .search_selectors button.primary_jade {
    animation: dsq_ctas_rise_m 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ssq_diamond_search .dsq_sticky_ctas,
  #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 {
    animation: none;
  }
}

/* ===========================================================================
   A LIST ROW SELECTS. IT DOES NOT UNFOLD.
   ---------------------------------------------------------------------------
   Owner: *"the summary inline opening of the stone is no longer necessary in
   list view... not needed, in both advanced lab search and the non-BYR flow.
   We will just open the bottom drawer."*

   The archive twin of this is in stone-first.css -- but that sheet is enqueued
   for the stone archives and the stone PDP, not for an engagement-ring PDP, so
   the rule there never reached this mount. MEASURED in the drawer with only
   that rule shipped: `.result_item_details` still computed `display: block`
   after a row click.

   `!important` is answering jQuery: diamond-search.js:2294 `slideDown()`s the
   panel with an INLINE `display: block`, which no plain author rule outranks.
   The handler still runs; nothing is painted. The node stays in the DOM because
   `result_to_html()` puts the row's only <img> inside it.

   ONLY ON ROWS THAT ARE NOT SELECTED. A selected row's panel is deliberately
   kept at `display: block` with `height: 0; overflow: hidden` (section 5
   above): the row's real ADD TO RING lives inside it and is lifted into the
   sticky block with `position: fixed`, and a descendant of a `display: none`
   box cannot paint however it is positioned. Blanket-hiding the panel took
   that button off the screen -- the clamp is what makes "nothing unfolds" and
   "the button still works" both true.

   The row still takes `.active` -- that is what raises the sticky CTA block --
   so the tap now does one thing instead of two.
   =========================================================================== */
#ssq_diamond_search .search_results .result_item_row:not(.active) > .result_item_details {
    display: none !important;
}


@media (max-width: 991px) {
  #ssq_diamond_search.dsq-ctas-closing .dsq_sticky_ctas {
    animation: dsq_ctas_fall_m 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}
@media (prefers-reduced-motion: reduce) {
  #ssq_diamond_search.dsq-ctas-closing .dsq_sticky_ctas {
    animation-duration: 1ms;
  }
}

/* =============================================================================
   DIAMOND SEARCH FILTERS -- 14663:47745, the new board, BOTH RAILS
   -----------------------------------------------------------------------------
   Owner: *"this is the new design for the filters of diamond search in both BYR
   and non-BYR. Exact reconstruction."*

   One 345-wide column at x22 inside 390, groups 24 apart, in the frame's order:
   SHAPE, CARAT, CUT, COLOR, CLARITY, PRICE, then ADVANCED FILTERS.

   Read off the frame, and these are the numbers every rule below states:

     group gap          24                  (`Filters`, WRAP, itemSpacing 24)
     title row          344 x 31, pad-bottom 12; 60 where it carries a toggle
     title              16/19 ls -0.21, #3E3C39 @80%, UPPER
     info circle        13 x 13, #C69858
     chip               h42, r8, pad 12/8, gap 8, label 16/18 ls -0.5
       resting          0.75px #E4DED8, label #3E3C39
       selected         #C2CEB2 @30% + 1.5px #27423B, label #0F0E0D
     clarity chip       fixed 80 wide, four to a row (4x80 + 3x8 = 344)
     carat track        344 x 8 r15 #E4DED8, connect #C2CEB2, thumbs 26 x 17 r16
     carat inputs       80 x 40 r8 #FFFFFF 1px #E4DED8, 16/16 ls +0.75
     price inputs       110 x 40, same box and tracking
     advanced           344 x 60 r8, 1px #E4DED8, label 18/18 ls -0.5 #0F0E0D,
                        with a 24 x 24 #E4DED8 disc carrying a + at the right
     shape toggle       187 x 40 r10 0.75px #27423B; halves 94/90 x 38 r8 2px;
                        active #27423B on #FAF3ED, inactive #27423B on nothing

   TRACKING IS THE THING TO WATCH. The chips and the toggle run at -0.5 and the
   numeric inputs at **+0.75**, where this file's own default is -0.21. All three
   are stated explicitly or the default wins.

   Written with BOTH rail roots on every selector -- `#diamond_search.sf_archive`
   (category) and `#ssq_diamond_search` (builder) -- because the board covers
   both and the two sheets that own them load on different surfaces. Phone only;
   the desktop rails keep their own geometry.
   ============================================================================= */
@media (max-width: 991px) {
    /* ---- the column and the group rhythm ------------------------------- */
    #diamond_search.sf_archive .diamond_filters .d_filter,
    #ssq_diamond_search .diamond_filters .d_filter {
        margin-bottom: 24px;
    }

    /* ---- group title ---------------------------------------------------- */
    #diamond_search.sf_archive .diamond_filters .filter_title,
    #ssq_diamond_search .diamond_filters .filter_title,
    #diamond_search.sf_archive .diamond_filters .d_filter > p:first-child,
    #ssq_diamond_search .diamond_filters .d_filter > p:first-child {
        margin: 0;
        padding: 0 0 12px;
        font-family: 'FoundersGrotesk', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: -0.21px;
        text-transform: uppercase;
        color: rgba(62, 60, 57, 0.80);
    }
    /* `Info circle` 13 x 13 #C69858 -- the glyph is inline svg in the markup. */
    #diamond_search.sf_archive .diamond_filters .filter_title svg,
    #ssq_diamond_search .diamond_filters .filter_title svg {
        width: 13px;
        height: 13px;
        color: #C69858;
    }

    /* ---- chips: CUT, COLOR, CLARITY ------------------------------------- */
    #diamond_search.sf_archive .diamond_filters .filter_options:not(.shape_filter),
    #ssq_diamond_search .diamond_filters .filter_options:not(.shape_filter) {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 0;
        overflow: visible;
    }
    #diamond_search.sf_archive .diamond_filters .filter_options:not(.shape_filter) > button,
    #ssq_diamond_search .diamond_filters .filter_options:not(.shape_filter) > button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: auto;
        min-width: 0;
        height: 42px;
        padding: 12px 8px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: inset 0 0 0 0.75px #E4DED8;
        font-family: 'FoundersGrotesk', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 18px;
        letter-spacing: -0.5px;
        color: #3E3C39;
        white-space: nowrap;
        cursor: pointer;
    }
    #diamond_search.sf_archive .diamond_filters .filter_options:not(.shape_filter) > button.active,
    #ssq_diamond_search .diamond_filters .filter_options:not(.shape_filter) > button.active {
        background: rgba(194, 206, 178, 0.30);
        box-shadow: inset 0 0 0 1.5px #27423B;
        color: #0F0E0D;
    }
    /* CLARITY is the one group the frame pins: 80 wide, four to a row. */
    #diamond_search.sf_archive .diamond_filters .clarity_filter > button,
    #ssq_diamond_search .diamond_filters .clarity_filter > button,
    #diamond_search.sf_archive .diamond_filters .filter_options.clarity > button,
    #ssq_diamond_search .diamond_filters .filter_options.clarity > button {
        flex: 0 0 80px;
        width: 80px;
    }

    /* ---- numeric inputs under the two sliders --------------------------- */
    #diamond_search.sf_archive .diamond_filters .d_filter input[type=text],
    #ssq_diamond_search .diamond_filters .d_filter input[type=text] {
        box-sizing: border-box;
        width: 80px;
        height: 40px;
        padding: 0 8px;
        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;      /* POSITIVE -- `0.50 ct` / `$3,000` */
        color: #0F0E0D;
        text-align: center;
    }
    /* price carries the wider pair, 110 x 40. */
    #diamond_search.sf_archive .diamond_filters .d_filter.price input[type=text],
    #ssq_diamond_search .diamond_filters .d_filter.price input[type=text] {
        width: 110px;
    }

    /* ---- ADVANCED FILTERS -- 344 x 60, r8, 1px #E4DED8 ------------------ */
    #diamond_search.sf_archive .diamond_filters .advanced_filters_toggle,
    #ssq_diamond_search .diamond_filters .advanced_filters_toggle,
    #diamond_search.sf_archive .diamond_filters .advanced_toggle,
    #ssq_diamond_search .diamond_filters .advanced_toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        padding: 0 13px;
        border: 1px solid #E4DED8;
        border-radius: 8px;
        background: transparent;
        font-family: 'FoundersGrotesk', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: -0.5px;
        text-transform: uppercase;
        color: #0F0E0D;
        cursor: pointer;
    }
    /* `Ellipse 67` 24 x 24 #E4DED8 with an 11 x 12 plus stroked #0F0E0D. */
    #diamond_search.sf_archive .diamond_filters .advanced_filters_toggle::after,
    #ssq_diamond_search .diamond_filters .advanced_filters_toggle::after,
    #diamond_search.sf_archive .diamond_filters .advanced_toggle::after,
    #ssq_diamond_search .diamond_filters .advanced_toggle::after {
        content: "";
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background:
            linear-gradient(#0F0E0D, #0F0E0D) center/12px 1px no-repeat,
            linear-gradient(#0F0E0D, #0F0E0D) center/1px 12px no-repeat,
            #E4DED8;
    }

    /* ---- SHAPE's Standard / Antique toggle ------------------------------ */
    #diamond_search.sf_archive .diamond_filters .fancy_shapes_toggle,
    #ssq_diamond_search .diamond_filters .fancy_shapes_toggle {
        display: inline-flex;
        align-items: center;
        box-sizing: border-box;
        height: 40px;
        padding: 0;
        border-radius: 10px;
        box-shadow: inset 0 0 0 0.75px #27423B;
        overflow: hidden;
    }
    #diamond_search.sf_archive .diamond_filters .fancy_shapes_toggle > *,
    #ssq_diamond_search .diamond_filters .fancy_shapes_toggle > * {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: 38px;
        padding: 0 17px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        font-family: 'FoundersGrotesk', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: -0.5px;
        color: #27423B;
        white-space: nowrap;
        cursor: pointer;
    }
    #diamond_search.sf_archive .diamond_filters .fancy_shapes_toggle > .active,
    #ssq_diamond_search .diamond_filters .fancy_shapes_toggle > .active {
        background: #27423B;
        color: #FAF3ED;
    }

    /* ---- the two corrections my own measurement caught ------------------
       1. PADDING NEEDS `!important` HERE. diamond-search.css:1188 carries
          `padding: 15px 5px !important` on these chips, so the board's 12/8
          cannot be stated any other way -- MEASURED before this, the chips came
          back `15px 5px` with every other value correct. stone-first.css:3452
          already does exactly this for the archive's cut and fluorescence
          groups and records the same reason; this generalises it to every chip
          group the new board covers, on both rails.
       2. THE ADVANCED CONTROL IS `.advanced_filters_button button`, which is
          what diamond-search.js:2613 binds. The earlier guess at
          `.advanced_filters_toggle` matched nothing -- MEASURED as `none`. */
    #diamond_search.sf_archive .diamond_filters .filter_options:not(.shape_filter) > button,
    #ssq_diamond_search .diamond_filters .filter_options:not(.shape_filter) > button {
        padding: 12px 8px !important;
    }
    #diamond_search.sf_archive .diamond_filters .advanced_filters_button button,
    #ssq_diamond_search .diamond_filters .advanced_filters_button button {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        width: 100%;
        height: 60px;
        padding: 0 13px;
        border: 1px solid #E4DED8;
        border-radius: 8px;
        background: transparent;
        font-family: 'FoundersGrotesk', sans-serif;
        font-weight: 400;
        font-size: 18px;
        line-height: 18px;
        letter-spacing: -0.5px;
        text-transform: uppercase;
        color: #0F0E0D;
        cursor: pointer;
    }
    /* NO `::after` PLUS -- and this is the SECOND copy of that mistake. Owner,
       twice: *"advanced filters on phone still has two plus symbols on its
       CTA."* The first removal took the rule out of stone-first.css only; this
       sheet carries a byte-identical twin, which is why the archives came back
       clean and the in-quiz drawer did not. MEASURED after that first pass: on
       /natural-diamonds/ `::after` computed `none`, in `#ssq_diamond_search` it
       still computed `""`.

       The markup's own `<span id="advanced_plus">` is the glyph that stays -- it
       pairs with `#advanced_minus` and diamond-search.css flips them on
       `.opened`, which a pseudo-element cannot follow. */
    #diamond_search.sf_archive .diamond_filters .advanced_filters_button button > span,
    #ssq_diamond_search .diamond_filters .advanced_filters_button button > span {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }
}

/* =============================================================================
   SORT BY -- 14664:47958 `Sorting`, the row above the groups
   -----------------------------------------------------------------------------
   Owner: *"add sort by like in this design exactly."*

   The frame puts it FIRST in the filters column, above SHAPE, and gives it a
   box the build never had:

     row     345 x 40, r4, 1px #E4DED8, pad 12/8, itemSpacing 6
     label   "Sort by Carat (High to low)" 16/19 ls -0.21 #0F0E0D, one run
     chevron `Frame 39470` 10 x 12 at the trailing edge, a 10 x 5 vector
             stroked #0F0E0D at 1px -- i.e. a plain down chevron, no box
     below    16 before `shape` starts (y153 -> y169)

   `order: -1` puts it first without moving the markup: diamond-search.php prints
   `.diamond_sort_by` AFTER the groups, and re-ordering the PHP would move it on
   the desktop rail too, where it has its own home in `.dsq_header_controls`
   (_advanced-search.css:418) and is not part of this column at all.

   The options list keeps whatever the base sheet gives it -- the board draws the
   row closed and says nothing about the open state.
   ============================================================================= */
@media (max-width: 991px) {
    #diamond_search .search_filters .diamond_sort_by,
    #ssq_diamond_search .search_filters .diamond_sort_by {
        /* ALIGNED WITH THE GROUPS, AND 40 TALL.
           MEASURED with the drawer open at 390: the groups sit at x24 w342
           (they live in a `.col-12` wrapper at x12 that carries 12px of its own
           padding), while this row is a DIRECT child of `.search_filters` at
           x0 w390 -- so it ran full-bleed while everything under it was inset.
           The 24 either side puts it on the groups' own column; the board's is
           345 at x22 inside 390, which is the same column one pixel over.

           `height: 40` is the frame's own `Sorting` height. Its 12/8 padding and
           a 19px line come to 43, i.e. Figma is clipping there -- so the height
           is stated and the vertical padding derived from it (9.5 + 19 + 9.5 +
           2 of border = 40) rather than the reverse. */
        order: -1;
        position: relative;
        box-sizing: border-box;
        width: auto;
        height: 40px;
        margin: 0 24px 16px;
        padding: 0;
        border: 1px solid #E4DED8;
        border-radius: 4px;
        background: transparent;
    }
    /* A BLOCK, NOT A FLEX ROW. The board's label is ONE run -- "Sort by Carat
       (High to low)" -- and the markup spells it as a text node plus a <span>.
       Making the <p> a flex container turns those into two flex items, and the
       whitespace between them collapses: MEASURED, the row read
       "Sort byPrice (Low to high)" with the space gone. Left as normal inline
       flow, the run is intact; the chevron is taken out of that flow and pinned
       instead, with room reserved for it in the right padding (8 + 10 + 6). */
    #diamond_search .search_filters .diamond_sort_by > p,
    #ssq_diamond_search .search_filters .diamond_sort_by > p {
        display: block;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 9.5px 24px 9.5px 8px;   /* 9.5 + 19 + 9.5 + 2 border = 40 */
        font-family: 'FoundersGrotesk', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 19px;
        letter-spacing: -0.21px;
        color: #0F0E0D;
        white-space: nowrap;
        cursor: pointer;
    }
    /* The label is ONE run on the board, so the value is not restyled away from
       the words in front of it. */
    #diamond_search .search_filters .diamond_sort_by > p > span,
    #ssq_diamond_search .search_filters .diamond_sort_by > p > span {
        font-size: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        color: inherit;
        text-align: left;
    }
    #diamond_search .search_filters .diamond_sort_by > p svg,
    #ssq_diamond_search .search_filters .diamond_sort_by > p svg {
        position: absolute;
        top: 50%;
        right: 8px;
        transform: translateY(-50%);
        width: 10px;
        height: 12px;
        color: #0F0E0D;
    }

    /* THE WORD SPACE, which the markup does not carry. 14664:47958's label is a
       single run -- "Sort by Carat (High to low)" -- but the rails build it as
       two ADJACENT elements: MEASURED on the archive, the <p> holds
       `<span class="sf_sort_prefix">Sort by</span><span>Price (Low to high)</span>`
       with nothing between them, so it read "Sort byPrice". The builder's twin
       uses `.dsq_sort_prefix` and is written the same way. A non-breaking space
       after the prefix restores the run without touching either writer, and
       cannot be collapsed away by a future layout change. */
    #diamond_search .search_filters .diamond_sort_by .sf_sort_prefix::after,
    #ssq_diamond_search .search_filters .diamond_sort_by .sf_sort_prefix::after,
    #diamond_search .search_filters .diamond_sort_by .dsq_sort_prefix::after,
    #ssq_diamond_search .search_filters .diamond_sort_by .dsq_sort_prefix::after {
        content: "\00a0";
    }
}


/* =============================================================================
   NO SECOND PROGRESS BAR IN THE ADVANCED SEARCH -- 14557:44308
   -----------------------------------------------------------------------------
   Owner: *"I still see the top progress bar, whole section, Stone Size Engraving
   in the diamond PDP ... in the BYR advanced lab diamond search and natural too.
   Why is that even there?"*

   Because diamond-search.js:3660 CLONES it:

       $('.ssq_diamonds_text_container').append( $('.rb-progress-bar').get(0).outerHTML );

   That is a legacy line from before this flow had a designed header. It copies
   the quiz's own progress bar -- outerHTML, classes and all -- into
   `.diamonds_search_header`, so the page carries TWO of them. MEASURED at 390
   with the search open: EIGHT visible `.progress_label` nodes, `Stone, Size,
   Engraving, Review` twice, one set in `.quiz_options > .rb-progress-bar` at
   y82 and the clone in `.ssq_diamonds_text_container > .rb-progress-bar` at
   y228 -- on screen, inside an 844 viewport.

   14557:44308 draws this screen with the Ring-details bar at the top and no
   progress bar at all, and the header this flow actually renders
   (`.dsq_screen_header` -- title, count, close) has no slot for one either.

   HIDDEN, NOT DELETED FROM THE JS. The clone is also what
   diamond-search.js:3661 measures and writes a width into on the next line;
   removing the append would need that line to go too, and this file cannot
   reach into a script that ships to five other surfaces. One CSS rule is the
   smaller, reversible change. The QUIZ's own bar is untouched -- that one is the
   flow's chrome and the design keeps it.

   Both widths. The clone is a duplicate of an element that already exists on the
   page at every breakpoint; it measured [24,228,342,24] at 390 and
   [1038,30,318,24] at 1440, and two identical progress bars on one screen is
   not a width question.
   ============================================================================= */
.ssq_diamonds_text_container > .rb-progress-bar { display: none !important; }

/* =============================================================================
   THE NATURAL TITLE WRAPS INSTEAD OF BEING CUT
   -----------------------------------------------------------------------------
   Owner: *"on phone when I click on advanced natural diamond search the top
   title is cut due to its length -- accommodate it properly in two lines."*

   `ADVANCED NATURAL DIAMOND SEARCH` is one word longer than the LAB string this
   header was sized against, and :196 of this sheet sets `white-space: nowrap`.
   MEASURED at 390 the line is 330 wide in a 330 box -- it fits here with nothing
   to spare, which is why it survived at this width and is cut on a narrower
   screen (the owner's device reports 361 CSS px). `nowrap` means the overflow
   has nowhere to go.

   So it wraps. The header is `height: auto` already, so a second line grows the
   band rather than clipping, and `text-wrap: balance` splits it evenly instead
   of leaving one word stranded. Phone only -- the >=992 rule at :1949 sets its
   own 32px type on a header with room for it.
   ============================================================================= */
@media (max-width: 991px) {
  #ssq_diamond_search .dsq_header_title {
    white-space: normal;
    text-wrap: balance;
  }
}