/* ============================================================================= Ring builder — ENGRAVING step, DESKTOP ----------------------------------------------------------------------------- Figma file Ex10uQ9OY3OuzSPi4g2hPb, SECTION 14465:38712 (named "[Mobile UI] PDP ring builder refresh" — mislabelled, it holds the 1728px DESKTOP frames). ENGRAVING 14465:40532 1728 x 1080 figma-desktop/SPEC.md L5360-5969 LAYOUT.md §1 (1080-tall artboard), §2 (12-col grid), §3 (6/6 split), §8 (`Customization` itemSpacing 60, heading 752x50 at y=194 + engraving builder 752x152 at y=304). WHAT THIS FILE OWNS ------------------- The right-hand `Customization` column on the ENGRAVING frame only — 14465:40533 and its two children: 14465:40534 heading + sub-head 752 x 50 at y 194 14465:40539 engraving builder 752 x 152 at y 304 14465:40540 text box 752 x 48 at y 304 14465:40544 icons 752 x 44 at y 412 NOT owned here, and deliberately not restyled: * The page shell, 6/6 grid, header band, step tab bar and 120px footer are identical to the STONE frames and are already built by _stone-desktop.css §1, §2, §6. The ENGRAVING footer's Primary CTA (14465:40590) is byte-identical in geometry to STONE's (282 x 48, #27423B, r=4, pad 14/0, label Founders 400 18/19 UPPER #FAF3ED, trailing 12.00016975402832px arrow stroked 1.25) — only the LABEL differs ("ADD TO BAG" vs the markup's own copy), which is a copy change, not CSS. * The left preview column (14465:40565). It is the same column STONE draws, with the `Setting details` accordion in its EXPANDED variant (Variant2, h=202) — a STATE of that accordion, not an engraving-specific layout. RESPONSIVE MODEL — matches _stone-desktop.css --------------------------------------------- The board draws 1728 only; LAYOUT.md §9 is explicit that anything else is an implementer decision. _stone-desktop.css took the layout FLUID, holding the 6/6 proportions down to 992 where the mobile sheet takes over, so this file agrees with it: the column is inherited from that grid (47.715736040609% of the 1576 band = exactly 752 at 1728), the text box fills it, and the only figure that has to be re-expressed proportionally is the 66px gap between the six symbol tiles — see §3. Type sizes stay fixed; the design gives one ramp. DESKTOP DROPS THE CARD SHADOW — with exactly one exception. There are 36 shadow uses on the mobile board and, across the whole desktop board, six: the six ENGRAVING symbol tiles (14465:40546, :40549, :40552, :40555, :40560, :40563), every one of them DROP_SHADOW offset=(-2.0,2.0) radius=1.0 spread=0 #000000 alpha=0.25 i.e. `box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.25)`. That is the only box-shadow this file emits, and the only one on desktop anywhere. CONTRACT — the same tripwires the mobile partial documents ---------------------------------------------------------- * simple-select.js:400 gates the engraving reaching the ORDER on `$('.ssq_eng_field').css('display') != "none"`. #ssq_eng_field is given display:block below and is never hidden by any rule here. If a future state must hide it: visibility:hidden / opacity:0 / zero box / off-screen — NEVER display:none. * simple-select.js:2231 dispatches on the button's SECOND class name; :2225 reads $(this).html() as a fallback. Classes are never reordered or renamed and the glyph text node is kept (font-size:0, not display:none). * #charCounter (product-single.js:1442 writes "n/27"), .engraving_symbols, .progress_label / .progress-circle, .affirm-tag, #learn-more and [data-variations] are never display:none'd here. EVERY NUMBER BELOW IS A FIGMA REST API VALUE, node ids cited inline. Where the API returns an unrounded float (23.51249885559082, 72.69332122802734, 17.08203125) it is written out, not tidied. ============================================================================= */ @media (min-width: 992px) { /* =========================================================================== 0. TOKENS simple-select-redesign.css declares the --rb-* properties inside its own `@media (max-width: 991px)` block, so they do not exist above 991px. _stone-desktop.css §0 re-declares most of them for desktop; the two this screen needs and that block does NOT carry are --rb-surface-input (the engraving field is the only #FDFAF8 surface on the board) and --rb-shadow-base (desktop has no shadow anywhere else). The rest are repeated here with byte-identical values so this partial renders correctly on its own rather than depending on another file's load order. Re-declaring a custom property with the same value is a no-op. ------------------------------------------------------------------------ */ body.ringbuilder-product #simple-select-quiz, #simple-select-quiz { --rb-text-primary: #0F0E0D; --rb-text-secondary: #3E3C39; --rb-border-subtle: #E4DED8; --rb-surface-input: #FDFAF8; /* 14465:40541 — the engraving field */ --rb-surface-page-70: rgba(250, 243, 237, 0.699999988079071); /* 14465:40535 */ --rb-shadow-base: rgba(0, 0, 0, 0.25); /* the six tiles, §4 */ --rb-font-body: 'FoundersGrotesk', sans-serif; --rb-font-display: 'Canela', serif; --rb-ls-tight: -0.21px; /* the -0.20999999344348907px the API returns */ --rb-radius-sm: 4px; --rb-stroke: 1px; } /* =========================================================================== 1. HEADING + SUB-HEAD — 14465:40534 (752 x 50 at y 194) AL:VERTICAL gap=54 primary=CENTER, one child: 14465:40535 752 x 46 at y 196 · fill #FAF3ED @ 0.7 · r=4 · 1px #E4DED8 stroke that is [paint-hidden] -> NO border 14465:40536 AL:VERTICAL gap=8 14465:40537 "Complimentary Engraving " Canela 300 24/19 UPPER #0F0E0D (mobile draws this 18) 14465:40538 "Personalize your ring with a free custom engraving on the inside of the band (optional)." Founders Grotesk 400 18/19 #0F0E0D (mobile draws 14/17) 19 + 8 + 19 = 46; centred in 50 -> 2px above and below. The column's first row starts at y=194: header band 166 (LAYOUT.md §4) plus the 28px `.container` top padding _stone-desktop.css §1 already applies. `.quiz_options > .rb-progress-bar` is absolutely positioned into the header band by _stone-desktop.css §2, so it is out of flow and this element is the first thing in the column. THE TITLE HAS NO ELEMENT IN THE DOM — same as mobile, it is drawn as the ::before of `.desktop-message.ssq-message`. See §6(b). _stone-desktop.css §9 parks that element (visibility:hidden, height:0) for the STONE screens, which have no such line. ENGRAVING does have one, so all four of those declarations are reversed below. The `:has()` selector outranks the parking rule (2 ids / 4 classes vs 1 id / 3 classes), so this does not depend on file order. `.ssq-message` is a JS WRITE target ($('.ssq-message').text(...)); nothing below touches its `display`, which simple-select.js:1492/1677 toggles. ------------------------------------------------------------------------ */ #simple-select-quiz:has(#ssq_engraving.active) .quiz_options > .desktop-message.ssq-message { /* Un-parks all four declarations _stone-desktop.css §9 applies to this element (visibility:hidden / height:0 / margin:0 / overflow:hidden). The `height: auto` matters: without it the parked `height: 0` still wins over min-height and pins the box at 50 even when the sub-head wraps. */ visibility: visible; overflow: visible; box-sizing: border-box; height: auto; /* NOTE: no `display` is set here on purpose. simple-select.js:1492/1677 drives this element with jQuery .show()/.hide(), which write an INLINE display — any display declared here would be overridden the moment the script runs. So the 2px band that centres the 46px content inside the 50px block is done with padding, which block layout honours exactly (14465:40534 primary=CENTER, (50 - 46) / 2 = 2). */ min-height: 50px; /* 14465:40534. `min-` rather than a fixed height: at 1728 the content is 46 and the box is exactly 50, as drawn. Below ~1500 the 588px-wide sub-head wraps to a second line and the block grows instead of overflowing into the 60px gap below it. */ padding: 2px 0; /* (50 - 46) / 2, 14465:40534 primary=CENTER */ margin: 0; /* base rule adds 20px top */ border-radius: var(--rb-radius-sm); /* 14465:40535 r=4 */ background: var(--rb-surface-page-70); /* 14465:40535 fill #FAF3ED @ 0.7. Painted on the 50-tall box rather than the 46-tall inner one: the design layers a 0.7-alpha #FAF3ED over the #FAF3ED page ground, so the 2px band is indistinguishable. The node's 1px #E4DED8 stroke is [paint-hidden] — there is deliberately no border. */ text-align: left; font-family: var(--rb-font-body); font-weight: 400; font-size: 18px; /* 14465:40538 */ line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); /* 14465:40538 fill #0F0E0D — not the #3E3C39 secondary ink used elsewhere */ } /* The

exists on first render and is destroyed by the first .text() call; both shapes are covered. */ #simple-select-quiz:has(#ssq_engraving.active) .quiz_options > .desktop-message.ssq-message p { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: inherit; } #simple-select-quiz:has(#ssq_engraving.active) .quiz_options > .desktop-message.ssq-message::before { content: "COMPLIMENTARY ENGRAVING"; /* 14465:40537, case=UPPER */ display: block; margin-bottom: 8px; /* 14465:40536 AL gap=8 */ font-family: var(--rb-font-display); font-weight: 300; font-size: 24px; /* desktop ramp; mobile draws 18 */ line-height: 19px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-primary); } /* =========================================================================== 2. THE SLIDE — 14465:40539 "engraving builder" (752 x 152 at y 304) `Customization` 14465:40533 is AL:VERTICAL gap=60, so the builder starts 60px below the heading block's bottom edge (244 -> 304). ------------------------------------------------------------------------ */ #ssq_engraving.simple-select-slide { margin: 60px 0 0; /* 14465:40533 AL gap=60 */ padding: 0; text-align: left; /* the slide carries .text-center; the design left-aligns the field, and text-align is inherited by */ } #ssq_engraving .simple-select-slide-content { width: 100%; margin: 0; } /* =========================================================================== 3. THE BUILDER BOX 14465:40539 AL:VERTICAL gap=60, cross=CENTER, 752 wide: 14465:40540 text box 752 x 48 at y 304 14465:40544 icons 752 x 44 at y 412 (412 - 352 = 60) 48 + 60 + 44 = 152. The DOM prints the six symbols as TWO `.engraving_symbols` rows of three; the design draws ONE row of six, in the same order (heart, cross, infinity, star, crescent, dot). `display:contents` promotes the six buttons to items of this flex container without moving a node. display:contents is NOT display:none — the element keeps a computed display of "contents" and its children keep their own boxes, and nothing in simple-select.js reads `.engraving_symbols`. THE 66px TILE GAP, EXPRESSED FLUIDLY. 14465:40544 is AL:HORIZONTAL gap=66 primary=CENTER. Tiles land on x = 973 / 1083 / 1193 / 1303 / 1413 / 1523, pitch 110 = 44 + 66; the row is 6 x 44 + 5 x 66 = 594 wide, centred in 752 -> 79px inset each side (894 + 79 = 973, 1523 + 44 + 79 = 1646). Anchored on those exact figures: 66 / 752 = 8.776595744680851% At 1728 that resolves to exactly 66px and the row centres at exactly 79px inset. Below 1728 the column narrows with the 6/6 grid and the gap narrows with it, in proportion — the same treatment _stone-desktop.css gives the column split. The second term is a hard floor, not a design value: six 44px tiles need 264px, so once the column is under ~525px the proportional gap would overflow it. `(100% - 264px) / 5` is the largest gap that still fits, and `min()` takes over there (it binds from ~1397px viewport down). At 992 the column is ~400.8px and the gap resolves to ~27.4px with the tiles exactly filling the row — never an overflow, never a wrap. ------------------------------------------------------------------------ */ #ssq_engraving .sss_swatches_engraving_container { display: flex; flex-wrap: wrap; justify-content: center; /* 14465:40544 primary=CENTER */ align-items: center; /* 14465:40544 cross=CENTER */ box-sizing: border-box; width: 100%; max-width: none; /* base rule caps it at 320px */ margin: 0; /* base rule is `20px auto` */ row-gap: 60px; /* 14465:40539 AL gap=60 */ column-gap: min(8.776595744680851%, (100% - (6 * 44px)) / 5); text-align: left; } #ssq_engraving .sss_swatches_engraving_container .engraving_symbols { display: contents; } /* The input's wrapper carries an inline `position:relative` (the anchor for #charCounter). Matched two ways so it still resolves without :has support. */ #ssq_engraving .sss_swatches_engraving_container > div:first-child, #ssq_engraving .sss_swatches_engraving_container > div:has(> .ssq_eng_field) { flex: 0 0 100%; width: 100%; } /* --- 3a. The text box — 14465:40540 / :40541 ----------------------------- 752 x 48, fill #FDFAF8, 1px INSIDE stroke #E4DED8, r=4. Value type 14465:40542: Founders Grotesk 400 16/30 #3E3C39, drawn at x=916.12 y=313 inside a box at x=894 y=304 -> padding-top 313 - 304 = 9 -> padding-left 916.12 - 894 = 22.12 (mobile draws 10.12) Right padding clears the counter: 752 - (1554.62 - 894) = 91.38 (mobile draws 41.8) The stroke is drawn as an inset shadow rather than a border, so 9 + 30 + 9 = the exact 48px height with no border-box arithmetic. THIS ELEMENT MUST NEVER COMPUTE TO display:none — simple-select.js:400 gates the whole engraving value on it. See the contract at the top. */ #ssq_engraving input#ssq_eng_field { display: block; /* never `none` — js:400 tripwire */ box-sizing: border-box; width: 100%; height: 48px; /* 14465:40541 */ margin: 0; padding: 9px 46px 9px 22.12px; /* right pad follows the counter in */ border: 0; border-radius: var(--rb-radius-sm); /* r=4 */ background: var(--rb-surface-input); /* #FDFAF8 */ box-shadow: inset 0 0 0 var(--rb-stroke) var(--rb-border-subtle); /* #E4DED8 w=1 INSIDE */ /* the symbol face is unicode-range'd to the heart alone, so only that character comes from it -- see the @font-face note in _engraving.css */ font-family: 'DAEngravingSymbols', var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 30px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); /* #3E3C39 */ caret-color: var(--rb-text-secondary); /* 14465:40542 IS the caret */ } /* MISSING FROM SPEC: the frame is drawn with an empty field showing only a caret, so the board carries no placeholder colour. Matched to the field's own text colour rather than invented. */ #ssq_engraving input#ssq_eng_field::placeholder { color: var(--rb-text-secondary); opacity: 1; } /* 14465:40543 "0/27" — same Founders 400 16/30 #3E3C39, at x=1554.62 y=313, box 72.69332122802734 wide. right = 752 - (1554.62 - 894) - 72.69332122802734 = 18.68667877197266 top = 313 - 304 = 9 product-single.js:1442 writes exactly this "n/27" string. Right-anchored so it tracks the fluid field. */ #ssq_engraving span#charCounter { position: absolute; top: 9px; /* Anchored on the RIGHT edge so it tracks the fluid field. min-width restores the design's own box and, with the node's align=LEFT, puts the glyphs back on x=1554.62 in the drawn "0/27" state: 752 - 18.68667877197266 - 72.69332122802734 = 660.62 = 1554.62 - 894. The box is much wider than the four glyphs because the designer resized it; that empty right-hand run is exactly what Figma draws. */ /* HARD RIGHT, 8px OFF THE EDGE. Owner: *"can we move 0/27 towards [the] right edge of the text field, with some padding to its right though -- but lesser, so that it does not literally touch it, maybe 6 to 10px?"* It was pinned by the board's own box: a wide `min-width` slot that the text sat at the LEFT of, so the glyphs ended far from the edge -- MEASURED at 1416, `right: 18.69px` on a 72.69px box left-aligned, which puts "0/27" about 63px in. Dropping the slot and right-aligning makes the offset mean what it says, so 8 is 8. */ right: 8px; min-width: 0; text-align: right; white-space: nowrap; font-family: var(--rb-font-body); font-weight: 400; font-size: 16px; line-height: 30px; letter-spacing: var(--rb-ls-tight); color: var(--rb-text-secondary); } /* =========================================================================== 4. THE SIX SYMBOL TILES — 14465:40545 .. :40564 Each tile: 44 x 44, fill #E4DED8, r=4, and the one surviving shadow on the desktop board: DROP_SHADOW offset=(-2.0,2.0) radius=1.0 spread=0 #000000 alpha=0.25 Figma's `radius` is the Gaussian blur radius, which maps 1:1 onto the CSS blur-radius, and there is no spread, so: box-shadow: -2px 2px 1px 0 rgba(0, 0, 0, 0.25); Identical on all six (14465:40546, :40549, :40552, :40555, :40560, :40563) and identical to the mobile board's value. Every glyph's size and its tile-relative offset are the same as mobile — only the row layout changed between breakpoints. The text node is NOT removed and NOT display:none'd — only its rendered size is zeroed, because simple-select.js:2225 reads $(this).html() as a fallback before the class switch at :2231. ------------------------------------------------------------------------ */ #ssq_engraving button.eng_symbol { width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 0; border-radius: var(--rb-radius-sm); /* r=4 */ background-color: var(--rb-border-subtle); /* #E4DED8 */ background-repeat: no-repeat; box-shadow: -2px 2px 1px 0 var(--rb-shadow-base); font-size: 0; line-height: 0; color: transparent; } /* GLYPH ASSETS RE-EXPORTED. The three raster marks were the RAW 700x700 sources placed in Figma, stretched into non-square boxes -- 23.51x19, 25.78x16, 26.56x23 -- so every one of them was distorted, which is the odd edges that got reported. The nodes are RECTANGLEs with an IMAGE fill at `scaleMode: STRETCH` and an imageTransform that CROPS the source vertically (0.808 / 0.621 / 0.866); the build ignored that transform and squashed the whole square instead. These are the nodes as FIGMA RENDERS them, exported at 4x -- crop applied, aspect correct: 95x76, 104x64, 107x92 against node ratios 1.237 / 1.611 / 1.155. They are also 433 / 1504 / 1710 bytes against the old 17.5 / 26.5 / 29.4 KB. `-v2` filenames because these assets are served `immutable, max-age=2419200` -- same name would keep the old ones for 28 days. NOT converted to SVG, and they cannot be from this source: those three are raster IN THE DESIGN. Only heart (VECTOR) and star (GROUP of two VECTORs) are vector, and both re-exported byte-for-byte identical -- they were already correct. */ #ssq_engraving button.eng_symbol.heart { /* 14465:40547 Vector 18 x 16 at (984,427); tile at (973,412) -> (11,15) */ background-image: url("../../../assets/media/ringbuilder/engraving-glyph-heart-v2.svg"); background-size: 18px 16px; background-position: 11px 15px; } #ssq_engraving button.eng_symbol.cross { /* 14465:40550 image 23.51249885559082 x 19 at (1092,424); tile at (1083,412) -> (9,12) */ background-image: url("../../../assets/media/ringbuilder/engraving-symbol-cross-v2.png"); background-size: 23.51249885559082px 19px; background-position: 9px 12px; } #ssq_engraving button.eng_symbol.infinity { /* 14465:40553 image 25.77777671813965 x 16 at (1202,427); tile at (1193,412) -> (9,15) */ background-image: url("../../../assets/media/ringbuilder/engraving-symbol-infinity-v2.png"); background-size: 25.77777671813965px 16px; background-position: 9px 15px; } #ssq_engraving button.eng_symbol.star { /* 14465:40556 star group 15.000000953674316 x 17.08203125 at (1317,427); tile at (1303,412) -> (14,15). The export (engraving-glyph-star-of-david-v2.svg) has an 18 x 21 viewBox and is scaled into the drawn box, exactly as Figma does. */ background-image: url("../../../assets/media/ringbuilder/engraving-glyph-star-of-david-v2.svg"); /* HEIGHT-LOCKED, width follows. The export's viewBox is 18x21 (ratio 0.857) because it carries the stroke bleed, while the node is drawn 15 x 17.08203125 (0.878) -- forcing both axes stretched the star 2.4% wide. Measured. Pinning the height and letting the width resolve gives 17.08203125 x 18/21 = 14.64, and x moves 0.18 to keep the mark on the same centre. */ background-size: auto 17.08203125px; background-position: 14.18px 15px; } #ssq_engraving button.eng_symbol.crescent { /* 14465:40561 image 26.56338119506836 x 23 at (1422,423); tile at (1413,412) -> (9,11) */ background-image: url("../../../assets/media/ringbuilder/engraving-symbol-crescent-star-v2.png"); background-size: 26.56338119506836px 23px; background-position: 9px 11px; } #ssq_engraving button.eng_symbol.dot { /* 14465:40564 Ellipse 7 x 7 #000000 at (1542,431); tile at (1523,412) -> offset (19,19), centre (22.5,22.5) tile-relative. No asset needed for a solid 7px disc. */ background-image: radial-gradient( circle 3.5px at 22.5px 22.5px, #000000 0 100%, transparent 100% ); } /* WARNING — assets.md:149, and confirmed again on the desktop board. engraving-symbol-cross-v2.png, -infinity.png and -crescent-star.png are 700 x 700 Noun Project rasters with a burned-in credit strip along the bottom, placed with scaleMode=STRETCH into boxes of 23.51249885559082 x 19, 25.77777671813965 x 16 and 26.56338119506836 x 23 — i.e. squashed non-uniformly, credit strip and all. The sizes above reproduce the Figma rendering EXACTLY. They are deliberately NOT cropped in CSS: cropping would move the glyph off the design's position and still leave a partial strip. FLAGGED FOR SVG REDRAW, see §6(e). */ /* =========================================================================== 4c. THE INLINE `ADD TO BAG` CTA IS MOBILE-ONLY — 14465:40538 --------------------------------------------------------------------------- The mobile frame 14463:35118 ends its Engraving block with a 346 x 44 inline CTA (14463:35169) because that frame draws no footer at all; _engraving.css §4b builds it and _stone.css §8b collapses the sticky bar to suit. The DESKTOP frame is the other way round: 14465:40533 — the whole right-hand `Customization` column — holds exactly two children, the heading 14465:40534 and the engraving builder 14465:40539, and stops. There is no third child, no CTA node anywhere inside the column, and the board's only primary is the footer band's 282 x 48 `ADD TO BAG` at x 1366 (14465:40590 / :40592), which _stone-desktop.css §6 already draws and which this frame shares byte-for-byte with STONE. The markup ships the button unconditionally (simple-select-quiz.php:312), so above 992px it has to be taken out. Untouched it is a raw UA button — measured 114.23 x 23.59, #EFEFEF, `2px outset`, r=0 — landing in the middle of the symbol row between the infinity and star tiles, because §4's tiles are laid out in the same flow. `display: none` is the correct removal here, and is checked against the two tripwires this screen carries: * simple-select.js:400 gates the engraving reaching the ORDER on `.ssq_eng_field`'s display, NOT on this button. #ssq_eng_field is untouched by this rule. * simple-select-redesign.js:1393 binds the click DELEGATED on $doc, so nothing reads the node at bind time and no handler is lost. The button only ever proxied a click onto `.ssq_bottom_nav .sss-next`, which on desktop is the visible primary the user presses directly — so removing it removes a duplicate path, not the commit path. ------------------------------------------------------------------------ */ #ssq_engraving .rb_eng_addbag { display: none; } /* =========================================================================== 5. STATES flows/STATES.md:13-19 — hover, pressed, loading and focus are not designed anywhere on the board, and the single "disabled state" annotation stamp (14463:36449) marks a region over the MOBILE 1.3 Engraving frame without any component carrying a disabled variant. No :hover / :focus-visible / [disabled] rule is invented here. MISSING FROM SPEC. ------------------------------------------------------------------------ */ /* =========================================================================== 6. FOLLOW-UPS / GAPS — recorded, not papered over --------------------------------------------------------------------------- a) FOOTER CTA LABEL. 14465:40592 reads "ADD TO BAG"; the markup's `.ssq_bottom_nav .sss-next` carries the builder's own continue copy. The geometry is already correct via _stone-desktop.css §6. A copy change in JS/markup, not CSS. b) THE STEP TITLE IS CSS-GENERATED. 14465:40537 has no element in the DOM and is drawn with `content` on ::before. A real heading element is the accessible fix. c) SUB-HEAD COPY MISMATCH. simple-select.js:1489 writes "Personalize your ring with a complimentary custom engraving of up to 27 characters. It's optional, but a beautiful way to add meaning — or skip it if you prefer to keep it classic." 14465:40538 reads "Personalize your ring with a free custom engraving on the inside of the band (optional)." At 18/19 in a 752px column the design's string is the single 588px line the frame draws; the JS string wraps to two and pushes the block past its 50px height. A copy change in JS, not CSS. d) PLACEHOLDER. The DOM's placeholder is "Type your message or symbol..."; the board draws an empty field with only a caret, so there is no designed placeholder string or colour. See §3a. e) RASTER SYMBOLS. cross / infinity / crescent-star must be redrawn as SVG. See the warning in §4. f) FONT WEIGHT 500. Not used by this screen (both type nodes are weight 300/400), so the FoundersGrotesk-Medium gap _stone-desktop.css §10 records does not bite here. g) NOT SPECIFIED BY THE DESIGN: behaviour above 1728px beyond the 1568 content cap, and any tablet frame between 992 and 1728. §3 records the fluid rule chosen and why. ========================================================================= */ }