/* ============================================================================= Ring builder — DESKTOP — DRAWERS, POPUP and REVIEW Figma file Ex10uQ9OY3OuzSPi4g2hPb, SECTION 14465:38712 (named "[Mobile UI] PDP ring builder refresh" -- mislabelled; it holds the 1728px DESKTOP frames). Frames covered -------------- 14465:38713 Select metal 1728 x 1240 drawer `Frame 1171276585` 14465:38956 14465:38995 Select Shape 1728 x 1240 drawer `Frame 1171276717` 14465:39240 14465:39286 Select gemstone 1728 x 1240 modal `gemstones` 14465:39529 REVIEW -- NO FRAME ON EITHER BOARD. See section 5. [POPUP] Talk to gemologist has NO desktop frame. The desktop board is eight frames (LAYOUT.md section 1) and none of them is the gemologist popup, so #contact_modal_popup is deliberately NOT touched above 991px -- it keeps contact-modal.css's own `@media (min-width:992px)` treatment. Styling it from the mobile frame would be scaling a phone sheet onto a 1728 canvas, which the brief explicitly rules out. DESKTOP IS A DIFFERENT TREATMENT, NOT A SCALED SHEET ---------------------------------------------------- Mobile parks all three sheets below the frame and slides them up 809px over a full-bleed scrim. Desktop splits them in two (LAYOUT.md section 6): a) IN-COLUMN DRAWERS (metal, shape). Not centred and not bottom-anchored: both sit at x=70, y=769 -- the exact origin of the `Settings` summary pill row in the left preview column -- and are 764 wide, i.e. the whole left column. They overlay the pills that opened them. Corner radius is 8 on ALL FOUR corners here, not [8,8,0,0]. b) A CENTRED MODAL (gemstones). 1394 x 634 at x=167, y=303 -- exactly centred on both axes: (1728-1394)/2 = 167 and (1240-634)/2 = 303. All three dim the page with a `black mask` that is 1728 x 1260 -- 20px taller than the artboard, an overscan so the scrim has no seam -- filled #000000 at paint opacity 0.699999988079071. The three STONE frames carry the same node at node-opacity 0. Same 0.70 as the mobile file. RESPONSIVE MODEL ---------------- Fluid, matching _stone-desktop.css: the 1728 numbers are expressed as proportions of the 1576px column band (764 left + 60 gap + 752 right) so they land on the exact designed pixels at 1728 and hold the ratio down to 992, where the mobile sheet (max-width:991px) takes over. Type sizes stay fixed -- the board gives one ramp. OPEN-STATE HOOKS -- unchanged from the mobile file, re-verified this pass: metal / shape NO state class. simple-select.js:985 / :1011 write an INLINE `display`. Nothing here sets `display` on .metal_dropdown_ssq_options / .shape_dropdown_ssq_options. gemstone .popup-modal-container.gemstone_selection_modal gated on :has(.modal-gemstone-selection) -- Modal is a singleton that never clears its classes (simple-select.js:2583). HARD RULE 1: nothing simple-select.js reads is display:none'd here. In particular .metal_current_option / .shape_current_option are not touched at all -- simple-select.js:989 / :1016 test `$(this).parent('.metal_current_option').length === 0`, so flattening or hiding either makes every metal and shape click a no-op. SPECIFICITY: _stone-desktop.css owns the pill row (`.select_metal_shape`, position:static; `.metal_dropdown_ssq`, overflow:hidden). The two rules below that have to win match its selectors and rely on load order -- da-general.php:4355 enqueues _drawers-desktop after _stone-desktop -- rather than on !important (brief rule 4). ============================================================================= */ @media (min-width: 992px) { /* =========================================================================== 0. TOKENS simple-select-redesign.css declares --rb-* inside its own max-width:991px block, so none of them exist up here; _stone-desktop.css re-declares them on #simple-select-quiz. The gemstone modal is appended to (assets/js/main.js:614) and so inherits neither. They are re-declared on both roots with byte-identical values, which also means this file works if _stone-desktop.css is ever dropped from the enqueue loop. Counts are the desktop TOKENS.md occurrence counts. ------------------------------------------------------------------------ */ .popup-modal-container, #simple-select-quiz { --rb-text-primary: #0F0E0D; /* 419 uses */ --rb-text-secondary: #3E3C39; /* 433 */ --rb-border-subtle: #E4DED8; /* 193 */ --rb-surface-card: #FFFFFF; /* 52 */ --rb-surface-page: #FAF3ED; /* 75 */ --rb-brand-green: #27423B; /* 120 */ --rb-grey-disabled: #D0D0D0; /* 55 */ --rb-border-subtle-40: rgba(228, 222, 216, 0.4000000059604645); --rb-border-subtle-60: rgba(228, 222, 216, 0.6000000238418579); --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-stroke: 1px; --rb-stroke-thick: 2px; /* `black mask` 14465:38955 / 14465:39237 / 14465:39528 */ --rb-scrim: rgba(0, 0, 0, 0.699999988079071); /* Picker panel box, identical on metal and shape: 754 x 194, pad t0 r21 b0 l21, itemSpacing 10, rectangleCornerRadii [0,0,8,8], fill #FFFFFF, clipsContent -- `Select metal popup` 14468:42509 and its shape twin 14468:42788. */ --rb-d-pop-pad-top: 0px; --rb-d-pop-pad-x: 21px; --rb-d-pop-pad-bottom: 0px; --rb-d-pop-h: 194px; /* `Container` 14468:42771 is 754 x 724 and the 594 x 495 photo ends at container-relative y518, so the card carries 206px under the photo: 50 to the pill row, the 44 row itself, then 112 of clear card. All three as a share of the card's WIDTH (754), because that is what a percentage margin or padding resolves against. */ --rb-d-card-photo-gap: 6.631299734748011%; /* 50 / 754 */ /* 92, NOT the board's 112. Owner: *"also padding bottom can be reduced"*, quoting this exact declaration through `.quiz-image`. This slack is not decoration -- it is the room the metal/shape panel opens into. MEASURED at 1728 with the metal sheet open: `.metal_dropdown_ssq_options` is [70,795,754,194] with `bottom: 0`, and the photo `.sss-metal-image` ends at y=769, so the board's 112 leaves 26px of clearance between the open panel and the ring. 20 of those 26 are given back here and 6 are kept, which is the most that can be returned without the sheet starting to cover the photo. Anything below 92 needs the panel re-anchored, not this number re-tuned. */ --rb-d-card-slack: 12.201591511936340%; /* 92 / 754 */ /* `Settings` 14468:42774 -- 460 x 44, two 220 pills, 20 between them. 460 / 754, and the gap as a share of the ROW (20 / 460) so the two measurements stay in their own coordinate systems. */ --rb-d-pills-w: 61.007957559681698%; --rb-d-pills-gap: 4.347826086956522%; --rb-d-pills-h: 44px; /* 754 (Container) / 764 (the live column band's left column) -- see the WIDTH rule in section 1 for why the frame's 754 is kept and the 10px is taken off the right. */ --rb-d-pop-w: 98.6910994764398%; /* 754 - 21 - 21 = 712: the content box every row inside the panel is measured against (swatch run, tile run, footer). */ --rb-d-pop-content: 712px; /* SPACE_BETWEEN resolves the declared itemSpacing away on both rows, so the RESOLVED gaps are what is built: metal `Frame 38492` 712 x 72 -- 8 swatches x 48 = 384 over 7 gaps (712 - 384) / 7 = 46.857142857142854, pitch 94.857142857142854, landing the dots on the frame's 101 / 195.86 / ... / 765 shape `Frame 38498` 712 x 55 -- 10 tiles x 55 = 550 over 9 gaps (712 - 550) / 9 = 18 exactly, pitch 73, landing the tiles on the frame's 91 / 164 / ... / 748 The declared itemSpacings (42 on metal, 16 on shape) are auto-layout minima and are NOT the drawn gaps. Both are then expressed as a PERCENTAGE OF THE 712 CONTENT BOX rather than as a frozen pixel gap, which is what makes SPACE_BETWEEN survive the fluid grid: a percentage margin resolves against the containing block's width, so the gap shrinks with the panel exactly as an auto-layout SPACE_BETWEEN row would. metal 46.857142857142854 / 712 = 328/4984 = 41/623 = 6.58105939004815% shape 18 / 712 = 2.528089887640449% clamp()ed the same way _stone-desktop.css:775 clamps the carat row's own SPACE_BETWEEN gap: an 8px floor so the run never closes up when it wraps at 992-1280, and the 1728 figure as the ceiling so the gap cannot grow past the drawn one on a viewport wider than the board. */ --rb-d-pop-swatch-gap: clamp(8px, 6.58105939004815%, 46.857142857142854px); --rb-d-pop-tile-gap: clamp(8px, 2.528089887640449%, 18px); /* `Frame 1171276721` itemSpacing 18 -- the gap between the option row and the footer, on both panels. */ --rb-d-pop-stack-gap: 18px; /* The metal/shape drawers overlay the left preview column, whose own stack ends well above the footer; z just has to clear the sticky CTA block. */ --rb-d-drawer-z: 1000; } /* =========================================================================== 1. THE PICKER PANEL -- `Select metal popup` 14468:42509 (in [Popup] Select Metal 14468:42267) and its shape twin 14468:42788 (in [Popup] Select Shape 14468:42546). BOTH ARE 754 x 194. THIS SECTION WAS REBUILT AGAINST THE 14468:4xxxx POPUP FRAMES. It previously described section 14465:38712's `Select metal` / `Select Shape` frames, where the picker was a 764 x 218 / 764 x 201 card pinned to the TOP of the pill row with cornerRadius 8 on all four corners. The 14468 popup frames draw a different thing and they are the ones the client signed off, so every number below moved: was (14465) now (14468) ----------------------------- -------------------------------------- 764 wide (352+60+352) 754 wide (Container width) top of the pill row BOTTOM of the card, covering the pills height HUG (218 / 201) 194 radius 8 8 8 8 0 0 8 8 (`rectangleCornerRadii`) padding 19 / 21 / 21 / 21 0 / 21 / 0 / 21 swatch pitch 96 94.857142857142854 (SPACE_BETWEEN) tile pitch 74.11 73 (SPACE_BETWEEN) THE POPUP IS A MODAL OVER THE PAGE, NOT AN IN-PLACE COLUMN SWAP. In both frames `black mask` (1728 x 1240, #000000 a=0.70) is child index 4 of 5 -- above `Customization`, `Footer`, `Setting details` and `Header`, so all four are dimmed -- and `Container` is the LAST child, the only node rendered above the scrim at full brightness. Nothing is removed or moved: `Customization` stays at x894 y194 and `Setting details` at y194. So the scrim moved off the panel and onto the CARD (see the scrim rule below): an outer box-shadow paints outside its own border box and underneath its own background, which dims the page and leaves the card bright in one declaration. On the old build the shadow sat on the panel, whose z-index put it above `.sss-metal-image`, and the ring photo was dimmed with the page -- the opposite of what the frames draw. ANCHORING. `Container` is 754 x 724 and the panel is its child at container-relative x0 y525, i.e. flush with the card's left edge and glued to its bottom. The live card is `.quiz-image` (764 at x70, owned by _stone-desktop.css:492), which already holds the same three things the Figma `Container` holds: the ring photo (`.sss-metal-image`), the two summary pills (`.select_metal_shape`) and this panel. So the panel needs no page coordinates -- `.quiz-image` is made the containing block and the panel is `left:0; bottom:0` inside it, which is exactly the design's parent/child relationship and is proportional by construction. THE 5px SLIVER IS NOT BUILT. In the source the panel ends at container-rel 719 and the Container at 724, leaving a 5px white sliver of card below the panel's rounded bottom corners. That is Container bleed, not a designed gap: [0,0,8,8] only reads as the card's own bottom radius when the two bottom edges coincide, and on the live card (which has no 112px tail below the pills, unlike the 724-tall Figma Container) a 5px inset would leave the bottom 5px of the pill row poking out from under the white panel. `bottom: 0` is used and the 5px drift recorded, the same way the old section recorded the 0.33px pill-row drift. x80 vs x70 -- NOT AVERAGED, AND NOT BUILT AS EITHER. `Container` and `Setting details` are at x80 in the metal frame and x70 in the shape frame, while `Header`, `Footer` and `Customization` (x894) are identical in both. DRAWERS.md Q4 reads the 70 as a slip and says build 80. Neither number is hard-coded here: the panel is pinned to the live card's own left edge, and the card is placed by _stone-desktop.css's column band (764 at x70), so the screens agree with each other whatever the board says. The consequence is recorded on the width declaration below. ------------------------------------------------------------------------ */ /* _stone-desktop.css:527 sets position:static on the pill row to undo the base sheet's absolute. relative + no offsets keeps it exactly where it is. */ #simple-select-quiz .select_metal_shape { /* STATIC, and it matters now. This row used to be `relative` here, which made IT the nearest positioned ancestor of the two absolutely positioned panels -- harmless only for as long as the row was the full width of the card, because then the panel's `width: 98.69%` resolved against 764 and landed on 754 by coincidence. The moment the row became the source's 460 (below), the same 98.69% resolved against 460 and the panel came out 460 wide: its 712 content box collapsed to 418, the eight metal swatches wrapped two-up, and the panel grew from 194 to 256. Static hands the containing block back to `.quiz-image`, which is the card the panel is measured against. */ position: static; /* INSIDE THE CARD, not under it. _stone-desktop.css:529 builds this row from the older 14465 frames: full card width (764) with a 60px gap, two 352 pills, welded to the card's bottom edge. `Settings` 14468:42774 on the current board is 460 x 44 centred in the 754 Container with 112px of card beneath it -- two buttons sitting IN the card, which is what the full-bleed row stopped reading as once the white moved to the card. Same selector, later sheet (da-general.php:4355 enqueues this after _stone-desktop), so no !important is needed. */ width: var(--rb-d-pills-w); margin: var(--rb-d-card-photo-gap) auto 0; gap: var(--rb-d-pills-gap); } #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq, #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq { /* 220 of the row's 460, i.e. half of what the 20px gap leaves. Written as a resolved percentage rather than `flex: 1` for the reason _stone-desktop.css:545 records: Chrome split two flexible items 353 / 351 rather than evenly. */ flex: 0 0 calc((100% - var(--rb-d-pills-gap)) / 2); height: var(--rb-d-pills-h); } /* THE CARD. `Container` 754 x 724 -- the only node above the scrim. _stone-desktop.css:503 sets `position: static` on this element (to undo the base sheet's relative, which the base sheet used to park the pills; the pills are static there too, so relative is inert for them). Restoring relative makes `.quiz-image` the containing block for the panel below. Matching selector + load order, not !important: da-general.php:4355 enqueues _drawers-desktop AFTER _stone-desktop. */ #simple-select-quiz .quiz-image { position: relative; /* THE CARD IS THE WHITE, and the pills live INSIDE it. `Container` 14468:42771 is 754 x 724 and holds BOTH the 594 x 495 photo and the 460 x 44 `Settings` pill pair, which sits at container-relative y568 with 112px of card under it. The build had the white on `.sss-metal-image` (the photo panel) only, so the pill row -- full-bleed 764 and welded to the card's bottom edge -- was drawn on the page ground BELOW the white, reading as two buttons under the card rather than two buttons in it. So the ground moves up to the card and the card carries the source's slack. `.sss-metal-image` keeps its own white; same colour, so the two are indistinguishable where they overlap. */ background: var(--rb-surface-card); border-radius: var(--rb-radius-md); /* Padding is what moves the PANEL off the photo, and it is the only thing that can: the panel is absolutely positioned at `bottom: 0`, and an absolutely positioned box resolves its offsets against the padding BOX, whose bottom edge is the card's bottom edge whatever the padding is. So the panel stays welded to the card's bottom while the card grows downwards under the photo -- the one direction that clears the photo without resizing or moving it. Before this the panel was drawn straight over the ring: 134px of overlap measured at 1728/1920/2560, 174px at 1440 where the tile run wrapped and made the panel 234 tall. 112 / 754 of the card's width -- percentage padding resolves against the containing block's WIDTH, which is what keeps the slack fluid with the column band instead of freezing at a 1728-only pixel figure. --rb-d-pop-reserve is the open-drawer top-up, normally 0: this slack alone clears the 194px panel at every width where its rows do not wrap (503 photo + 51 + 44 + 113 = 711 card, panel top 517 vs photo bottom 503), and JS adds the difference on the narrow viewports where the metal run still wraps and the panel grows past it. */ padding-bottom: calc(var(--rb-d-card-slack) + var(--rb-d-pop-reserve, 0px)); } /* simple-select.css:719 / :755 make each pill position:relative so the base sheet's 150px dropdown box could hang off it. Static here so the panel's containing block resolves past the 352px pill and out to the 754-wide card. The only absolutely-positioned descendant of either pill is the visually hidden "Metal" / "Shape" lead-in span (_stone-desktop.css:562), and it declares no offsets -- an absolutely positioned box with all-auto offsets stays at its static position -- so re-parenting its containing block moves nothing. */ #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq, #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq { position: static; } /* _stone-desktop.css:551 clips each pill (overflow:hidden) so the 34px pill radius holds. An absolutely positioned box is still clipped by an ancestor with overflow:hidden when that ancestor sits between it and its containing block, which the pill does, so the clip has to be lifted or the panel is cropped to 48px. Unclipped ONLY while the panel is actually open: jQuery .show() writes `display: block` inline (simple-select.js:990/:1016), which is a real, reachable hook -- and the clip is restored the moment it closes. */ #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq:has(.metal_dropdown_ssq_options[style*="display: block"]), #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq:has(.shape_dropdown_ssq_options[style*="display: block"]) { overflow: visible; } /* ...AND THE PILL ITSELF STOPS PEEKING OUT OF THE TOP OF IT. Owner, circling a pale rounded strip directly above SELECT YOUR METAL: *"this should not be visible"*. It is the CLOSED pill, still painted behind the open panel -- MEASURED at 1440: `.metal_dropdown_ssq` is [621..665] with `background: rgba(228,222,216,0.4)` and `border-radius: 34px`, while the panel starts at 628, so the pill's top 7px and its corner radius show above the panel's square top edge. The pill's CONTENT is already covered by the panel and its click target has to stay -- tapping the pill is how a picker closes (simple-select.js:986) -- so only the ground is dropped, and only while the panel is open. */ #simple-select-quiz .select_metal_shape > .metal_dropdown_ssq:has(.metal_dropdown_ssq_options[style*="display: block"]), #simple-select-quiz .select_metal_shape > .shape_dropdown_ssq:has(.shape_dropdown_ssq_options[style*="display: block"]) { background: transparent; border-radius: 0; } /* THE SCRIM HAS TO REACH THE BOTTOM BAR TOO. Owner, with an arrow drawn from the dimmed page to the undimmed bar: *"it kinda puts everything else into the background, right, but does not put the bottom bar in background -- this also needs to be in the background, not highlighted"*. The scrim is not an element: it is `box-shadow: 0 0 0 1440px` on `.sss-metal-image` (THE SCRIM, above), which paints outward from the photo and dims whatever is beneath it. `.ssq_bottom_nav` is `position: fixed` and does not end up beneath it -- MEASURED while the picker is open: scrim z-index 1000, bar z-index 99, and the bar still painted at full brightness. Lowering the bar's z-index does dim it, but it also drops the bar under the thumbnail strip, which then bleeds through it -- tried, screenshotted, rejected. So the bar is dimmed IN PLACE instead, with the same colour the shadow uses. It keeps its own stacking, nothing moves, and it is painted only while a picker is actually open -- the same inline-display hook the scrim and the clip-lift above both key off. `pointer-events: none` so the bar's controls are still reachable: the shopper can press CONTINUE straight from here, exactly as they could before. */ /* ...AND ONLY ON THE STEP WHERE THE BAR ESCAPES THE SCRIM. Owner, with the picker open on RING SIZE: *"the background is black for the bottom bar in this -- make it like the others, rest opacity."* It was: the scrim DOES reach the bar on that step, so this overlay was a second 0.698 on top of it. MEASURED, same build, sampling the rendered pixels: stone step bar rgb(76,74,72) dimmed page rgb(72,70,68) -- matched size step bar rgb(23,22,21) dimmed page rgb(76,74,72) -- doubled 0.698 over 0.698 is 0.909, and 0.091 of the bar's #FAF3ED is (23,22,21) -- exactly what was measured. So the overlay is scoped to the stone step, which is the one state where the bar paints above the shadow. */ #simple-select-quiz:has(#ssq_select_stone.active):has(.metal_dropdown_ssq_options[style*="display: block"]) .ssq_bottom_nav::after, #simple-select-quiz:has(#ssq_select_stone.active):has(.shape_dropdown_ssq_options[style*="display: block"]) .ssq_bottom_nav::after { content: ""; position: absolute; /* THE BORDER IS OUTSIDE `inset: 0`. Owner, after the first pass: *"this line is still bright, not same like the rest, below the popup."* An absolutely positioned child resolves its offsets against the PADDING box, so `inset: 0` stops at the inside edge of the bar's 1px top rule and left it lit across the full width -- the one bright line in a dimmed page. Pulled up by the stroke's own width so the overlay covers it. */ inset: calc(-1 * var(--rb-stroke)) 0 0; z-index: 3; background: var(--rb-scrim); pointer-events: none; } /* THE SCRIM. `black mask` 14468:42268 / 14468:42547 -- 1728 x 1240, #000000 at paint opacity 0.699999988079071, clip=true. No DOM counterpart, and a real hit-tested scrim element would swallow the click on the pill, which is how a picker with no DONE control gets closed (simple-select.js:986). An outer box-shadow is not hit-tested, paints outside the border box only, and paints beneath the element's own background -- so one declaration on the CARD dims the whole page and leaves the card, the ring photo, the pills and the panel all at full brightness, which is the z-order the frames draw. Gated on the same inline-display hook, so the page is only dimmed while a picker is actually open. */ #simple-select-quiz .quiz-image:has(.metal_dropdown_ssq_options[style*="display: block"]), #simple-select-quiz .quiz-image:has(.shape_dropdown_ssq_options[style*="display: block"]) { z-index: var(--rb-d-drawer-z); box-shadow: 0 0 0 100vmax var(--rb-scrim); /* The card carries the white ground and the full radius in every state now (see THE CARD IS THE WHITE above), and the slack it reserves under the photo is what the panel drops into, so the open state adds only the scrim and -- on the narrow viewports where the panel's rows still wrap -- the JS top-up below. */ } #simple-select-quiz .quiz-image .metal_dropdown_ssq_options, #simple-select-quiz .quiz-image .shape_dropdown_ssq_options { /* Resets simple-select.css:691 / :726 (top:28; left:45-46; width:150; 1px border) and _stone-desktop.css's inherited box. */ position: absolute; /* Glued to the card's bottom edge -- see THE 5px SLIVER in the section header for why the source's 5px inset is recorded and not built. */ top: auto; bottom: 0; z-index: var(--rb-d-drawer-z); box-sizing: border-box; /* `display` is DELIBERATELY ABSENT -- jQuery owns it (file header). */ /* padding t0 r21 b0 l21 on both panels. The 21s are what turn the 754 box into the 712 content box that the swatch row, the tile row and the footer are all measured against. */ padding: var(--rb-d-pop-pad-top) var(--rb-d-pop-pad-x) var(--rb-d-pop-pad-bottom); background: var(--rb-surface-card); border: 0; /* `rectangleCornerRadii` [0, 0, 8, 8] -- the inverse of the mobile sheet. The panel is glued to the bottom of the card, so only its bottom corners are round and they are the card's own bottom corners. */ border-radius: 0 0 var(--rb-radius-md) var(--rb-radius-md); /* clipsContent: true on both panels. Nothing is expected to overflow -- every row is inside the 21px inset and `min-height` below lets the box grow rather than crop when the rows wrap -- so this only guarantees the bottom radius clips its corners. */ overflow: hidden; /* 194 on BOTH panels, even though the shape panel's inner stack is 115 and the metal panel's is 132: the source fixes the frame and top-aligns (primaryAxisAlignItems MIN), so the slack sits at the bottom -- 16px on metal (36 + 10 + 132 = 178), 33px on shape (36 + 10 + 115 = 161). min-height, NOT height. 194 is a design-space number that only holds at 1728 (CHECKLIST assertion 87 is tagged @1728). Below roughly 1280 the 712 content box is narrower than the 8 x 48 swatch run and the 10 x 55 tile run, both rows wrap, and a rigid 194 with overflow:hidden would crop the wrapped rows off the bottom of the card. Growing downwards is impossible (bottom is pinned), so the panel grows UPWARDS over the ring photo, which is the same direction the design's own panel grew when it was given more rows. */ min-height: var(--rb-d-pop-h); height: auto; font-family: var(--rb-font-body); /* The container's `display` cannot be changed to flex or grid, so the grids below are inline-block; font-size:0 removes the whitespace between them. Every descendant sets its own size. */ font-size: 0; color: var(--rb-text-primary); text-align: left; } /* WIDTH -- 754 of the card's 764, flush with the card's left edge. The 10px is the ONLY place the x80/x70 question shows up in the build. The popup frames draw a 754-wide Container; _stone-desktop.css's column band draws the live card at 764 (LAYOUT 764 + 60 + 752 = 1576). The panel is built to the FRAME's 754 -- CHECKLIST assertions 88 and 99 pin 754 and its 712 content box -- but positioned against the LIVE card's left edge, so the 10px falls on the right where the card's own white ground shows through, rather than on the left where it would break the alignment with the ring photo and the pills directly above it. Proportional, not absolute: 754 / 764 = 98.6910994764398%, resolved against the card, which is itself 48.477157360406% of the 1576 column band. So the panel is 754.00 at 1728, 539.66 at 1280 and 401.87 at 992 -- the same percentage-of-an-exact-1728-figure model _stone-desktop.css uses for the columns, which is what keeps the two screens in agreement. */ #simple-select-quiz .quiz-image .metal_dropdown_ssq_options, #simple-select-quiz .quiz-image .shape_dropdown_ssq_options { left: 0; right: auto; width: var(--rb-d-pop-w); } /* --- drawer title --------------------------------------------------------- `Title` 14465:38959 "SELECT YOUR METAL" (206 x 30) and 14465:39243 "SELECT YOUR SHAPE" (202 x 30) -- Canela 300, 21px / 30px, ls -0.21, #0F0E0D, in a 722 x 36 SPACE_BETWEEN header row. Note 21px here where the mobile sheet is 20. Generated content, not markup, for the same reason as on mobile: the containers hold nothing but the generated option divs, and nothing in simple-select.js reads text out of them (it reads [name] and .data('friendly') at :989, :1016, :2047, :2061). A ::before cannot be reached by a selector, by .html()/.text(), or by the click delegation. */ #simple-select-quiz .quiz-image .metal_dropdown_ssq_options::before, #simple-select-quiz .quiz-image .shape_dropdown_ssq_options::before { display: block; /* The title is 21/30; the header row it sits in is 36. Padding carries the 3px of air on each side rather than an inflated line-height, so the declared 30 survives (a 36px line-height reads back as the title's own leading and loses the 30 the design records). 3 + 30 + 3 = 36. */ box-sizing: border-box; height: 36px; padding-top: 3px; line-height: 30px; font-family: var(--rb-font-display); font-weight: 300; font-size: 21px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); /* drawer itemSpacing 10 (header -> body) */ margin: 0 0 10px; } #simple-select-quiz .quiz-image .metal_dropdown_ssq_options::before { content: "SELECT YOUR METAL"; /* The metal swatch row is 722 x 72 with its 48px dots vertically CENTRED (cross=CENTER), i.e. 12px of air above them. Added to the drawer's own 10px header gap here rather than as a margin on the dots, so every dot in the row still shares one baseline: 10 + 12 = 22. */ margin-bottom: 22px; } #simple-select-quiz .quiz-image .shape_dropdown_ssq_options::before { content: "SELECT YOUR SHAPE"; /* The shape row is 722 x 55 -- exactly one tile tall, no centring air -- so the drawer's plain 10px header gap stands. */ } /* --- picker close, `exit button` 14468:42511 / 14468:42790 ---------------- 36 x 36 at the header row's right edge -- frame x777 on metal (panel x80, so panel-relative 697; 697 + 36 = 733 = 754 - 21, flush with the panel's right padding edge) and frame x767 on shape (panel x70, same panel-relative 697). Panel-relative y is 0: the header row starts at the panel's top edge, which now carries no top padding. THE SOURCE DRAWS THIS NODE AT OPACITY 0 AND IT IS BUILT VISIBLE ANYWAY. In the frames the live dismiss is a Container-level 12 x 12 VECTOR at container-rel x718 y24 -- the card's top-right, over the ring photo -- and this panel-level button is the same control switched off. That card-level node cannot be reached from here: `.rb_drawer_close` is created as a child of the PANEL (simple-select-redesign.js:1646), and an absolutely positioned box is clipped by an ancestor with overflow:hidden that sits between it and its containing block, which the panel does (`clipsContent: true`). Hoisting it would mean either dropping the panel's clip -- which the wrapped rows below 1280 need, see min-height above -- or adding a second close node to simple-select-quiz.php plus a handler for it. Neither is worth it for a control that, in the live build, has nothing to dismiss: there is no popup to close, only this panel, and closing the panel is exactly what the existing handler does. So the design's own 36 x 36 exit button is used, at its own coordinates, with the card-level vector's 12 x 12 glyph inside it (which is also the glyph simple-select-redesign.js:1501 emits). Recorded for review rather than silently reinterpreted. Sizes below: the 36 x 36 is the hit target, the 12 x 12 SVG is the drawn glyph, matching both nodes at once. WHY THIS IS ALSO THE FIX FOR THE SWATCH ROW. simple-select-redesign.js:1558 PREPENDS this node as a direct child of the sheet, and the sheet's payload is a run of inline-blocks in one inline formatting context (the container's `display` belongs to jQuery -- see the container rule above, and the row rule below). An in-flow inline span therefore consumes the first 12px of the first line box: measured at 1728 it pushed every dot right by exactly 12 (91 -> 103) and spilled the row past the 722 box onto three lines (x 103..583, then 679, then 91). Taking it out of flow is BOTH the design position and the repair -- the eight dots go back onto one line at the panel's own 91 / 185.86 / ... / 755. GEOMETRY. The panel's padding box is the anchor, so no page coordinate is needed: 754 - 21 (--rb-d-pop-pad-x) - 36 = 697 from the panel's left edge, which is the frame's x777 on metal (panel x80) and x767 on shape (panel x70) -- the same panel-relative 697 in both. Top is 0, the panel's own top edge, now that the top padding is 0. The node is a role=button , deliberately NOT a