/* uc-catalog.css -- the catalogue listings. F4.5, stop `S29`. * * SOURCE OF RECORD: mockups/listing-build.py EXTRA_CSS, the F3.8 artefact the * owner signed off on 2026-09-08 over six cases -- category, series, vendor, * the brand index, the empty-result state and the empty listing. ADR 0038 * decision 3: what the mockup draws is what ships. Every value here is that * file's; what changed is scoping, and the list is complete: * * * `.uc X` -> `X`. The review shell wrapped each case in a `.uc` frame at a * fixed width; the page has no such wrapper. * * `.uc[data-w="1440"]` and `[data-w="1200"]` -> `@media (min-width:1200px)`, * which is the chrome's one breakpoint (uc-chrome.css). The mockup switched * frames by attribute because it draws four widths at once, and the 1200 * and 1440 rules were always identical. * * `.uc[data-w="390"]` -> `@media (max-width:767.98px)`, the same boundary * uc-chrome.css uses for the footer's stack. * * `.ds-btn`, `.ds-btn--primary`, `.ds-btn--secondary` and the icon rule are * NOT shipped. The generator declares them because a mockup has no access * to the design system's stylesheet; uc-ds.css has owned that geometry * since F4.1, and two copies of 44/18/8/15/600 is how they drift apart. * * The review page's own furniture -- `.pg-demo`, `.case-h`, `.case-n` -- * is not shipped. It framed the cases and was never part of them. * * L16, and each of its five rules holds: * NO TOKEN IS REDECLARED. --target, --measure, the spacing scale and the * palette are uc-ds.css's. The one custom property declared here, * `--cart-w`, is local geometry: the width of the pinned cart column, which * nothing outside this file has an opinion about. * NO PRIMITIVE'S GEOMETRY IS RESTATED -- see `.ds-btn` above. * ONE BREAKPOINT, 1200px, plus the 767.98 stack. Both from uc-chrome.css. * INTRINSIC SIZING, NOT A COLUMN COUNT -- `.cl-brands` fills with as many * 180px cards as fit, against Bootstrap's three hard breakpoints. * NAMESPACE `.cl-`. `.ds-` is reserved and `.uc-` is not free: uc.css already * defines `.uc-table-products`, `.uc_filter`, `.uc_popular-image` and * `.filter-item-disabled`, which are the four uc.css rules these pages used * and which die with Bootstrap at F4.8 (`S88`). * * The lightbox the vendor route's certificates use is uc-lightbox.css -- * F4.4's, split out at this stop rather than written again (criterion 31). */ /* ADR 0046 decisions 2 and 3. This shell had NO cap -- not because anyone decided it should be full bleed, but because nobody wrote a rule. It takes the wide measure, and `--shell` is set on the shell itself so the masthead and the footer read 1440 on these pages and match the content between them. */ /* THE CAP THIS SHELL NEVER HAD. Not a new measure -- the same 1180 the chrome has always carried, and the same width Bootstrap's .container gave every page before the rewrite. Without it the content ran 1712 inside a 1180 header at a 1792 viewport. `S116`. */ .cl-page{max-width:var(--shell);margin-inline:auto;padding:18px var(--gutter) 30px} /* --- the breadcrumb ------------------------------------------------------ */ /* L15, in the product page's shape after its 2026-09-08 correction: the anchor carries the 44px because it IS the item; the separator hangs off the wrapper because it is the list's punctuation and not the link's text; the decoration is text-decoration because a border sits at the bottom of a 44px box and detaches from the text. */ .cl-crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center; font-size:12px;color:var(--mut);margin:0 0 6px} .cl-crumb>[itemprop="itemListElement"]{display:inline-flex;align-items:center;gap:6px} .cl-crumb>[itemprop="itemListElement"]:not(:last-child)::after{content:"\203A"; color:var(--mut);flex:none} .cl-crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px; color:var(--sec);text-decoration:underline;text-decoration-color:var(--rule); text-underline-offset:3px} .cl-crumb a:hover{text-decoration-color:var(--sec)} .cl-h1{font-size:21px;font-weight:600;line-height:1.25;margin:0 0 6px;letter-spacing:-.01em} .cl-lede{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--sec);max-width:88ch} /* --- L4: the filter is never above the products -------------------------- */ /* The census measured .uc_filter at 954px tall starting at y=140, so the first product began at y=1114 on a 700px viewport: push/pull apply at md and above, so below 992 the DOM order wins. 53.4% of organic sessions are mobile. §5.3 answers it with a bar plus the dialog the chrome already ships, rather than inventing a third component -- the products start immediately and the whole sidebar is one tap away. */ .cl-bar{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:8px 0; border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .cl-bar .ds-btn{flex:none} .cl-bar-n{font-size:13.5px;color:var(--mut)} .cl-bar-n b{color:var(--ink);font-variant-numeric:tabular-nums} .cl-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:0} /* Hidden below 1200 and reached through the bar. NOT moved below the products: a control nobody can find is not a differentiator. */ .cl-side-w{display:none} /* --- the sidebar --------------------------------------------------------- */ /* `overflow: visible` AND NOT `hidden`, WHICH IS WHAT MAKES THE FOOTER STICK. `overflow: hidden` makes an element a scroll container, and a sticky child pins to its nearest scrolling ancestor -- so with it the footer stuck to a panel that never scrolls, which looks exactly like sticky not working. The rule was there to clip children at the 10px radius; the only child with a background of its own is the footer, and it carries the matching corners below. */ .cl-side{border:1px solid var(--rule);border-radius:10px;overflow:visible; background:var(--surface)} .cl-side-h{padding:12px 14px;font-weight:600;font-size:14px; border-bottom:1px solid var(--rule)} /* §5.3 -- the panel INSIDE the dialog. The dialog already says «Подбор» in its own heading, and the panel's card frame inside the dialog's card frame is a box in a box. Added at the port because the artefact drew the dialog as a closed button and never showed the panel in it. */ .cl-dlg .cl-side{border:0;border-radius:0} .cl-dlg .cl-side-foot{border-radius:0} .cl-dlg .cl-side-h{display:none} /* AND IT SCROLLS. `.dlg` is a flex column with `overflow: hidden` and a measured height cap, and the callback dialog's scroller is `.dlg-form` -- which this dialog does not have, so nothing scrolled and the facets below the fold were unreachable. The owner, 2026-09-08. `min-height: 0` is what lets a flex child shrink below its content and actually overflow. */ .cl-dlg .dlg-body{padding:0;min-height:0;flex:1;overflow-y:auto; -webkit-overflow-scrolling:touch} .cl-f{padding:12px 14px;border-bottom:1px solid var(--rule)} .cl-f-h{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em; color:var(--mut);margin:0 0 4px;font-weight:600} /* L9 and ADR 0043: THE ROW IS THE TARGET. Measured on the live page, all 70 controls in this sidebar are under 44px -- 13, 18, 23 and 34 -- on the page whose filter is the site's stated differentiator. A