`s now, never focused, and a ring * declaration for an element that can never take focus is a rule nobody can * ever see fire. Two controls JOINED it in the same pass — a review's photo * thumbnails and the panel's "See all photos", both real openers. */ .sf-pdp-rev__item-photo:focus-visible, /* The phone strip's tiles (ruling R4) — the same opener as `__item-photo`, at * the rung where the panel is not drawn. Same ring, same reason. */ .sf-pdp-rev__mphoto:focus-visible, .sf-pdp-rev__photos-all:focus-visible, .sf-pdp-rev__pin:focus-visible, /* `.sf-pdp-rev__clear` LEFT THIS ROSTER (Ryan’s DD-C, 2026-08-28) with the * link it ringed: the affordance is the X inside the search field now, whose * ring is drawn INSIDE the field, in chrome.css beside the button. */ .sf-pdp-rev__vote:focus-visible, /* `.sf-pdp-rev__page` and `.sf-pdp-ans__page` LEFT THIS ROSTER (ruling PP5, * 2026-08-28) with the pagers themselves: one pager means one ring, declared * beside the pattern in `sections.css`. */ /* `.sf-pdp-ans__pin`, `__clear` and `__reply-input` LEFT THIS ROSTER with the * controls themselves (rulings A2 and A3): the Featured pill and its Clear * button were replaced by the Filter-by dropdown, and the panel's reply field * went with the panel. `__sort` went to `__filter`'s dropdown, whose ring is * declared in chrome.css beside the control. */ /* `.sf-pdp-ans__config` LEFT THIS ROSTER (DD-A) with the button: it is * `.sf-sec-config__button` now, ringed in sections.css beside the pattern. */ /* `.sf-pdp-ans__continue` LEFT THIS ROSTER (the shared-embed-core extraction, * 2026-08-28) with the button: the answer box's hand-off is * `.sf-embed__continue` now, ringed in sections.css beside the configuration * button, together with the quiet link AI5 put on the same line. */ .sf-pdp-ans__vote:focus-visible, .sf-pdp-ans__links a:focus-visible, .sf-pdp-buybar__cta:focus-visible { outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a)); outline-offset: var(--sf-focus-ring-offset, 2px); } /* * --- drawn inside: the quantity stepper's two buttons --- * * `.sf-pdp-qty` is a drawn field — surface fill, `line-mid` border, control * radius — and its minus and plus are BARE buttons (no background, no border) * sitting flush against it on three sides each. An outward ring would be drawn * half underneath that border and half outside the field, so theirs is drawn * inside, the same call `.sf-quiet-select__item` makes in chrome.css. * * NOT the wrapper-`:has()` rule, deliberately. That rule is for a field holding * ONE bare input, where the field is the box the reader is looking at; this * field holds TWO controls, and a ring on the field could not say which of them * has focus. Each keeps its own. The ring's adjacent colour inside the field is * `surface` #FFFFFF — 4.58:1, the reading above. */ /* * --- the ring on the FIELD, not on the input inside it (below the fold) --- * * tokens §3's ONE blessed case for suppressing the UA outline: a bare input * inside a DRAWN field, where the box the reader is looking at is the field. The * two search fields and the "With photos" checkbox are all that shape — the * checkbox's real `` is transparent and 16px square, sitting exactly on * the drawn box, so the ring has to go on the label that holds both. * * The reviews field also draws a 3px accent-soft HALO when it is filtered. That * is a `box-shadow` and this is an `outline`, so the two compose rather than * replace each other — a custom treatment may exist alongside the ring and never * instead of it (Ryan's ruling, 2026-08-26). */ /* `.sf-pdp-rev__check:has(…)` LEFT THIS RULE (Ryan's MP3, 2026-08-29) with the * checkbox it ringed. The Photos filter is two ordinary buttons now, so it * takes the ORDINARY outward ring beside the section's other chips — the * `:has()` indirection existed only because a checkbox's real input is * invisible and the drawn box is not a control. */ /* THE DRILL CHECKBOX'S DRAWN BOX (Ryan's WP6, 2026-08-29) — the same blessed * shape at the other end: a transparent `` clipped exactly onto a drawn * 20/18px square, so the ring belongs to the square the reader is looking at. * It is the shape MP3's "With photos" checkbox vacated three months of rulings * ago in this same sheet, arriving back on a control that really is a * checkbox. Both compositions, one declaration. */ .sf-pdp-item__box-mark:has(> .sf-pdp-item__box:focus-visible), .sf-pdp-mitem__box-mark:has(> .sf-pdp-mitem__box:focus-visible), .sf-pdp-ans__ask:has(.sf-pdp-ans__field-input:focus-visible), .sf-pdp-rev__field:has(.sf-pdp-rev__field-input:focus-visible) { outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a)); outline-offset: var(--sf-focus-ring-offset, 2px); } /* THE PHONE STEPPER'S BUTTONS TOOK THE SAME READING (2026-08-27): it is the * same drawn field holding the same two bare buttons, at the phone's touch * sizes. One selector list, one decision. */ .sf-pdp-qty__step:focus-visible, .sf-pdp-mqty__step:focus-visible { outline: var(--sf-focus-ring, 2px solid var(--brand-color-accent, #c4530a)); outline-offset: var(--sf-focus-ring-inset, -2px); } /* * --- on the photograph: the stage's carousel arrows --- * * `.sf-pdp-stage__nav` is the pair of discs the stage fades in on hover, and * they are absolutely positioned ON `.sf-pdp-gallery__stage` — which is now a * real photograph rather than the sketched well it was when this block was * written for the spin pill it replaces. A ring at a 2px offset is therefore * drawn on the PHOTOGRAPH, which has no known adjacent colour, so it takes the * ink-ring-plus-white-halo pair (chrome.css, MEDIA) rather than the accent: * accent covers only grounds lighter than L=0.638 or darker than L=0.027, and a * product shot can be anywhere in between. * * THE FOCUS RING IS ALSO WHAT REVEALS THEM. They rest at `opacity: 0` and the * stage's `:focus-within` brings them up, so a keyboard reaching one both sees * it and gets the ring — a control that took focus while still transparent * would be a ring drawn around nothing. * * The disc draws no shadow at rest, so unlike the category hero's floaties the * halo composes with nothing and is declared alone. */ .sf-pdp-stage__nav:focus-visible { outline: var(--sf-focus-ring-on-media, 2px solid var(--brand-color-ink, #17181a)); outline-offset: var(--sf-focus-ring-offset, 2px); box-shadow: var(--sf-focus-halo, 0 0 0 4px var(--brand-color-surface, #ffffff)); } /* * --- on the photograph: the gallery's OPENERS --- * * The desktop stage and every thumbnail now open the shared media viewer, and * each opener is a transparent button covering the frame it opens. Same ground, * same reasoning, therefore the same MEDIA pair as the spin pill above: these * sit ON the photograph, not beside it. * * THE RING IS DRAWN OUTSIDE both of them, at the platform's 2px offset. There is * room: the stage's ring lands on the page's paper, and a thumbnail's lands in * the 12px flex gap between tiles, so neither can reach a neighbour. */ .sf-pdp-gallery__open:focus-visible, .sf-pdp-tile__open:focus-visible { outline: var(--sf-focus-ring-on-media, 2px solid var(--brand-color-ink, #17181a)); outline-offset: var(--sf-focus-ring-offset, 2px); box-shadow: var(--sf-focus-halo, 0 0 0 4px var(--brand-color-surface, #ffffff)); } /* * --- on the photograph, with no room outside it: the PHONE stage's opener --- * * `.sf-pdp-mstage` is FULL-BLEED — it takes the page's gutter back out with a * negative margin — so its box IS the viewport's width and a ring at a positive * offset is drawn off the left and right edges of the screen. That is exactly * the case `--sf-focus-ring-inset` is declared for (chrome.css: "a control whose * ring would otherwise land off the viewport"). * * THE HALO GOES INWARD WITH IT. The MEDIA pair only works as a pair — an ink * ring for light grounds, a white halo for dark ones, overlapping ranges — so a * ring moved inside and a halo left outside would be half a treatment. The * shadow is `inset` with the same 4px spread and the same surface white, and the * 2px outline is painted over its outer half, which is the same reading the * outward pair gives, mirrored. */ .sf-pdp-mstage__open:focus-visible { outline: var(--sf-focus-ring-on-media, 2px solid var(--brand-color-ink, #17181a)); outline-offset: var(--sf-focus-ring-inset, -2px); box-shadow: inset 0 0 0 4px var(--brand-color-surface, #ffffff); } /* * --- on the photograph, WITH room outside it: the phone stage's caption control * * The circle that reveals the frame's caption (Ryan's G2 v2, 2026-08-27) sits * ON the photograph like the stage's own arrows do, so it takes the same MEDIA * pair — an ink ring for light grounds, a white halo for dark ones, and neither * assumption made about a product shot. * * OUTWARD, unlike the full-bleed opener above it. The opener's ring is inset * because the opener IS the viewport's width and a positive offset is drawn off * the screen; this control is a 36px disc inset 12px from the stage's left * edge, so a 2px ring at a 2px offset lands 8px inside the viewport with room * to spare. It draws no shadow at rest, so the halo composes with nothing. */ .sf-pdp-mstage__cap:focus-visible { outline: var(--sf-focus-ring-on-media, 2px solid var(--brand-color-ink, #17181a)); outline-offset: var(--sf-focus-ring-offset, 2px); box-shadow: var(--sf-focus-halo, 0 0 0 4px var(--brand-color-surface, #ffffff)); } .sf-pdp { line-height: normal; /* * THE STAGE'S GROUND — one recipe, both compositions (Ryan, batch #4 G1, * 2026-08-27: "give the stage backdrop character — a slight gradient … * subtle, not a vignette cliché"). * * IT IS BOUNDED BY THE PAGE, and that bound is the whole design. The column * behind the stage is `paper` #FBFBFA; a sweep that reaches `surface` * #FFFFFF at its top edge would be LIGHTER than the page there, and the * stage's own box — which has no border and only a 4px radius — would * dissolve into the column at exactly the edge a reader uses to read it as a * box. So every stop stays at or below the flat `well` this replaced: * * 0% `well` lifted 45% toward `surface` ≈ #F7F6F4 — six levels under * paper, so the top edge still reads. * 56% `well` #F1F0EC itself, the tone the stage has always been. More * than half the box is unchanged, which is what makes this a wash * rather than a restyling. * 100% `line` #E8E7E3 — the foot, nine levels under `well`, so the * product stands on something instead of floating in a flat field. * * FIFTEEN LEVELS END TO END. That is deliberately below the pixel gates' * acceptance threshold of 24 and deliberately above nothing at all: playbook * §4's subtle-tint lesson says a wash this quiet is INVISIBLE to threshold 24 * and must be gated by computed style instead, which `tools/pdpstagegate.mjs` * now does by name. * * 170deg RATHER THAN 180. A dead-vertical wash on a 632x640 box reads as a * seam; ten degrees of tilt puts the light corner top-left and the shade * bottom-right, which is where a studio sweep puts them. It is NOT a radial * darkening of all four edges — the vignette cliché Ryan named — because a * vignette frames a photograph, and this stage's problem was already too much * frame. */ --sf-pdp-stage-ground: linear-gradient( 170deg, color-mix(in srgb, var(--brand-color-surface, #ffffff) 45%, var(--brand-color-well, #f1f0ec)) 0%, var(--brand-color-well, #f1f0ec) 56%, var(--brand-color-line, #e8e7e3) 100% ); /* * THE CAPTION BAND'S HEIGHT, and the reason it is a token rather than a * number written four times (Ryan's ruling G2 v2, 2026-08-27: the caption * moves INSIDE the photo section's drawn box). * * FOUR RULES READ IT and every one of them would be wrong on its own if the * band's floor were re-ruled: the stage's own height grows by it, the track * that carries the photographs is clipped short by it, the counter is pushed * up off the box's foot by it, and the arrows re-centre on the photo area * inside it. That is the whole point of the token — the band is a band, and * everything else on the stage is measured from the PHOTO AREA, which is the * box less this. * * ─── THE NUMBER, DERIVED FROM THE TYPE IN THE BOX ─────────────────────── * * 36px TWO 18px LINE BOXES, the floor the outside bar reserved and the * reason it existed: 53 of the gallery's 93 frames are untitled and * the longest sales point wraps to two lines at the narrow end of the * desktop composition, so a band sized to its CONTENT would move the * four rows of thumbnails under it on every swipe. 18 is an INTEGER * line box on purpose — 12.5px of mono at a 1.5 ratio is 18.75, and a * fractional band puts the strip below it on a half-pixel, where * every glyph in four rows of tiles rasterises against a different * subpixel phase than the board's. * +14 the lead-in between the photograph and the words, which is the * outside bar's own measured gap, kept. * +14 AND THE SAME AGAIN UNDER THEM, which is what is new. The old bar * ended at the column's flow and had nothing below it to clear; this * one ends at a drawn rounded edge, and text butted against that edge * reads as an overflow rather than a caption. * * 64px. The column is therefore 14px taller than it was — the whole of the * new bottom pad, nothing else — and `tools/pdpgate.mjs` carries that as * `CAPTION_BAR_DELTA`, re-derived from 50 with this ruling's attribution. */ --sf-pdp-stage-band: 64px; } /* * THE BOARD'S TWO-COLUMN GRID. * * The board draws `repeat(2, minmax(0, 1fr))` across the full 1440 and then puts * the page's 64px gutter INSIDE the outer padding of each column (left column * `48px 24px 48px 64px`, right column `72px 64px 48px 40px`). Here `.sf-container` * owns that 64 — it is the same measure the header and footer wrapped around this * page use, and duplicating it in the columns would double it — so each column * keeps only its INNER padding. At 1440 the two are the same page to the pixel: * 1440 − 128 = 1312 of measure, two 656 tracks, a 632px gallery column and a * 616px rail, exactly as the board resolves. */ .sf-pdp__grid { display: grid; /* `minmax(0, …)`, not a bare `fr`: an `fr` track's automatic minimum is its * MIN-CONTENT, and both columns hold nowrap furniture (the 250px spec buttons, * the option chip rows). A bare `1fr` is floored by them and the grid stops * being an even split well before the mobile cut. */ grid-template-columns: repeat(2, minmax(0, 1fr)); } /* The phone composition, hidden until the mobile cut. */ .sf-pdp__mobile { display: none; } /* Quiet link: muted and underlined, the same size as the text around it, never * coloured (tokens §1). It is the only link treatment on this page except the * spec-market card's one accent link, which the board draws in the default * anchor colour. */ .sf-pdp-quiet { color: var(--brand-color-muted, #6c6a62); text-decoration: underline; } .sf-pdp-quiet:hover { color: var(--brand-color-accent-strong, #9c420a); } /* * THE SAME QUIET TREATMENT ON A BUTTON (W180/W181, Ryan 2026-09-04). * * The buy card's five `Details` / learn-about controls opened `"#"` and now * open pop-ups, and a control that does not navigate is not an anchor (the * storefront's standing rule) — so they are `