/* ========================================================================== MOULDSHOP CATEGORY NAV + LISTING DIVIDERS — M4 / TASK-0104. Four things on the category listing, one file: 1. the category nav at the top of the sidebar (`.ms-catnav`, emitted only by Custom/MouldshopCategorySiblings.cshtml), with a rule under it; 2. a vertical divider between the sidebar and the product grid; 3. a horizontal divider above the first card row; 4. the page-title row above the listing, removed (TASK-0104a). ITEMS 1-3 ARE THE PDP'S RULE, not new values (mouldshop-pdp-top.css, TASK-0094): colour var(--ms-rule) - scheme-aware via mouldshop-colorscheme.css, so the lines follow the row (DEC-0063) weight 1px padding var(--ms-pdp-divider-inset) = 1.5rem, on the content side, and the same value as the inset at both ends of the line The vertical divider is the PDP item 3 construction verbatim: a 1px gradient on the right-hand column's leading edge, stopped short at both ends by the inset, because there is no element between the two columns to style. ORDER-INDEPENDENT. Nothing vendor targets `.ms-catnav*`, and the two divider rules set only background-image / padding, which nothing else sets on these columns. Must load after mouldshop-pdp-top.css only for readability; the token it reads resolves on :root regardless of load order. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE CATEGORY NAV. Rebuilt 2026-09-23 (operator): the context category's title, then "All" and its children as pills. TITLE. The category name, large: 1.75rem at 600 weight in the heading face. That is the facet group headings' family and weight at 1.4x their 1.25rem, so it reads as the section's heading and they read as sub-headings. PILLS, SAME BOX FOR EVERY ENTRY. Every entry, link or current, carries the same padding, line-height and radius at rest, so selecting or hovering changes colour only and the list never shifts ("we don't want to change height of this component on hover and active"). The pill's inline padding is handed back as a negative margin, so the TEXT stays on the title's left edge and only the light-blue fill of the current entry reaches out past it. This nav is hidden below 1080 (mouldshop-listbar.css), and at 1080 and up the page container leaves at least a 16px margin, so the 1rem overhang never meets the viewport edge. COLOUR. Title and links inherit the row's foreground (DEC-0063). The current pill is a BRAND FILL with its own text colour, fixed `--ms-blue` with `--ms-white`, per DEC-0063 rule 5. That is the same pair the light-blue SPECIFICATION button uses, so it stays readable on any row scheme. It is kept fixed rather than `--ms-accent-ink`, because the latter turns into the row's foreground on a coloured row and would then put white text on white. -------------------------------------------------------------------------- */ .ms-catnav { --ms-catnav-pill-x: 1rem; border-block-end: 1px solid var(--ms-rule); padding-block-end: var(--ms-pdp-divider-inset); margin-block-end: var(--ms-pdp-divider-inset); } .ms-catnav-title { font-family: var(--ms-font-head); font-size: 1.75rem; font-weight: 600; line-height: 1.2; margin: 0 0 0.75rem; } .ms-catnav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .ms-catnav-pill { display: block; padding-block: 0.25rem; padding-inline: var(--ms-catnav-pill-x); margin-inline-start: calc(-1 * var(--ms-catnav-pill-x)); border-radius: 999px; line-height: 1.5; color: inherit; text-decoration: none; } a.ms-catnav-pill:hover { text-decoration: underline; } a.ms-catnav-pill:focus-visible { outline: 2px solid currentColor; outline-offset: 0; } .ms-catnav-pill.is-current { background-color: var(--ms-blue); color: var(--ms-white); font-weight: 600; } /* The current pill as a LINK (the category's own "All …" child, 28c8e1f) lost its white to vendor swift.css on any schemed row: [data-dw-colorscheme]:not([data-dw-colorscheme=""]) a:not(.btn):not(.page-link):not(.dropdown-item) is 0,5,1 against the rule above at 0,2,0. This selector is 0,6,1 and carries the same :not() chain, so it wins on exactly the elements vendor targets and nowhere else. White on the fill, not on the row's ground, so it stays outside DEC-0063's inheritance (colorscheme.css point 5). */ [data-dw-colorscheme] .ms-catnav a.ms-catnav-pill.is-current:not(.btn):not(.page-link):not(.dropdown-item) { color: var(--ms-white); } /* -------------------------------------------------------------------------- 2. VERTICAL DIVIDER, sidebar | product grid. AT 1080, NOT 992. The packet says "below 992 (sidebar stacks)". On this listing the sidebar does not stack at 992: TASK-0045 moved the outer row's flip to 1080 (mouldshop-card-surfaces.css, the 992-1079.98 band), and between 992 and 1079 both cells are already full width. A divider keyed to 992 would draw down the left edge of a full-width grid in exactly that band. The intent - no vertical line once the sidebar stacks - is kept by using the stack point the row actually has. `.grid:has(.product-list)` is the outer listing row, the same scope TASK-0041 and TASK-0045 use; it cannot match the card grid inside `.product-list`. -------------------------------------------------------------------------- */ @media (min-width: 1080px) { .grid:has(.product-list) > [data-swift-gridcolumn][data-dw-itemtype="swift-v2_productlistcomponentselector"] { /* TASK-0104c: the line starts at the cell's top edge (no top inset), level with the first sidebar item and the toolbar. The bottom inset stays. */ background-image: linear-gradient( to bottom, var(--ms-rule) 0, var(--ms-rule) calc(100% - var(--ms-pdp-divider-inset)), transparent calc(100% - var(--ms-pdp-divider-inset)), transparent 100% ); background-repeat: no-repeat; background-size: 1px 100%; background-position: left top; /* Operator 2026-09-23 (after TASK-0104c): sidebar side back to a FULL gutter, grid side stays at half. The line sits on the cell's leading edge again, so the outer row's 24px column gap is the sidebar-side spacing; the TASK-0104b negative margin is gone. Grid side unchanged: half a gutter + the line's 1px. */ padding-inline-start: calc(var(--ms-card-gutter) / 2 + 1px); } } /* SUPERSEDED IN PART, operator 2026-09-23: the SIDEBAR side is a full gutter again (24 + 1 + 12 = 37px). The grid-side half below still holds; the sidebar-side half does not. Kept as the record of the 0104b state. TASK-0104b — HALF A GUTTER EACH SIDE, the spacing a card has from its own rule. Operator: "half of this padding 12px between sidebar and vertical divider, and between products grid and vertical divider". Before (TASK-0104): the line sat on the product cell's leading edge, so the outer row's 24px column gap lay on the sidebar side and 1.5rem of padding on the grid side: 24 + 1 + 24 = 49px from sidebar content to the first card. Now: the product cell reaches half a gutter back into the column gap (negative margin), which puts the line 12px off the sidebar; the padding is half a gutter plus the line's own 1px, so the cards start 12px after the line: 12 + 1 + 12 = 25px. Both halves are `--ms-card-gutter / 2`, so they follow the gutter if it ever moves. The line's inset top and bottom is unchanged (`--ms-pdp-divider-inset`), as are its colour and weight. */ /* -------------------------------------------------------------------------- 3. HORIZONTAL DIVIDER, under the toolbar row, above the first card row. At every width. TASK-0105 MOVED IT. TASK-0104 drew it on the item-repeater column's top edge, ahead of the toolbar. The toolbar now renders INSIDE that column (it is emitted by our repeater shadow, as a sibling before `.product-list`), so the column's top edge is above the toolbar. The line is now the toolbar's own bottom edge. It is the same line, with the same inset, the same padding on the content side (under it, before the cards) and the same padding before it. Same construction as the vertical one turned 90 degrees: inset at both ends. -------------------------------------------------------------------------- */ .ms-listbar { background-image: linear-gradient( to right, transparent 0, transparent var(--ms-pdp-divider-inset), var(--ms-rule) var(--ms-pdp-divider-inset), var(--ms-rule) calc(100% - var(--ms-pdp-divider-inset)), transparent calc(100% - var(--ms-pdp-divider-inset)), transparent 100% ); background-repeat: no-repeat; background-size: 100% 1px; background-position: left bottom; padding-block-end: var(--ms-pdp-divider-inset); margin-block-end: var(--ms-pdp-divider-inset); } /* TASK-0104c — THE TOOLBAR'S GEOMETRY, three rules, all derived. 1. ONE TOP EDGE. The toolbar's row carries `data-dw-row-space-top="1"` (0.25rem), which put the toolbar 4px below the sidebar's first item. It is cancelled by the row's own variable rather than a typed 4px, so the toolbar stays level whatever the row is set to. The row setting itself is untouched. The vertical line's top inset goes to 0 (item 2 above). 2. PILL BOTTOM -> LINE: HALF A GUTTER, the vertical line's spacing. The line is the last 1px of this padding, so the padding is half a gutter plus 1px. 3. PILLS FLUSH WITH THE LINE'S ENDS. The line is inset by `--ms-pdp-divider-inset` at both ends; the toolbar's content box takes the same inset as inline padding, so the two share one horizontal box. The line itself is unchanged: a background fills the padding box, and padding does not move it. */ .ms-listbar { margin-block-start: calc(-1 * var(--dw-row-space-top, 0px)); padding-block-end: calc(var(--ms-card-gutter) / 2 + 1px); padding-inline: var(--ms-pdp-divider-inset); } /* -------------------------------------------------------------------------- 4. THE PAGE-TITLE ROW ABOVE THE LISTING — REMOVED. TASK-0104a. Operator: "Bikes - at the top - why? We have 3x bikes - breadcrumbs, top of sidebar, and menu". The row is vendor `Swift-v2_ProductListInfo` (para 23240), alone in a 1Column row directly above the 3/9 listing row, rendering `

Bikes

`. REMOVED, NOT VISUALLY HIDDEN, because it is not the page's only

: the second info block under the grid (para 23246) renders `

` with the group name and description, so the page keeps its h1 without this one. `display: none` takes it out of layout AND the accessibility tree. The markup is still emitted: dropping it from the HTML is an admin action on para 23240, which this packet does not take. SCOPE: a row whose own column is a productlistinfo AND whose next sibling row holds the product list. That is exactly the top title row. The lower info block is nested inside the product column and cannot match. On /en-us/shop the same row renders an empty column and would otherwise leave its padding as a gap; it goes too, so the list sits level with the product area there as well. -------------------------------------------------------------------------- */ section[data-swift-gridrow]:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_productlistinfo"]):has(+ section[data-swift-gridrow] .product-list) { display: none; } /* -------------------------------------------------------------------------- 5. TOP PADDING ON THE WHOLE LISTING SECTION. Operator, 2026-09-23: "add top padding to whole section 24px". The 3/9 listing row (sidebar + product column) carries `data-dw-row-space-top="0"`. It gets one gutter of top padding, from the gutter token rather than a typed 24px. Sidebar list, toolbar and vertical line all start at the row's content top, so all three move down together and stay level (TASK-0104c). SCOPE: the row whose own container holds the facets column directly. That is the listing row and nothing else. `.grid:has(.product-list)` was not used here because the Shop app host's grid also contains the product list, deeper down, and would take the padding too. -------------------------------------------------------------------------- */ section[data-swift-gridrow]:has(> [data-swift-container] > [data-dw-itemtype="swift-v2_productlistfacets"]) { padding-block-start: var(--ms-card-gutter); } /* -------------------------------------------------------------------------- 6. BOTTOM DIVIDER, under the last card row, above the "n out of N products" count and Load more. Operator, 2026-09-23: "add bottom divider same as on top". THE TOOLBAR LINE, MIRRORED. Same colour, weight and end inset (`--ms-pdp-divider-inset` at both ends), and the same horizontal box: `#ProductListLoadMore` sits inside `.product-list`, which is the toolbar's sibling in the same repeater column, so the two lines start and end at the same x. top: pills -> 12 -> line -> 24 -> cards bottom: cards -> 24 -> line -> 12 -> count The 24 is the vendor grid's own `pb-3` (--ms-card-grid-pb, 16px) plus a top margin making up the rest, so nothing typed. The 12 is half a gutter plus the line's own 1px, as on the toolbar. Vendor's `my-3` top margin is replaced; its bottom margin is kept. ONE LINE, NOT ONE PER BATCH. Vendor's Load more removes the previous list's `#ProductListLoadMore` when it appends the next batch, so only the last list carries the block and the line. No products, no block, no line. -------------------------------------------------------------------------- */ .product-list > #ProductListLoadMore { background-image: linear-gradient( to right, transparent 0, transparent var(--ms-pdp-divider-inset), var(--ms-rule) var(--ms-pdp-divider-inset), var(--ms-rule) calc(100% - var(--ms-pdp-divider-inset)), transparent calc(100% - var(--ms-pdp-divider-inset)), transparent 100% ); background-repeat: no-repeat; background-size: 100% 1px; background-position: left top; /* `!important` because vendor's `my-3` is a Bootstrap spacing utility, and those are declared `!important` themselves (same reason as the facets flip in mouldshop-card-surfaces.css). */ margin-top: calc(var(--ms-pdp-divider-inset) - var(--ms-card-grid-pb)) !important; padding-block-start: calc(var(--ms-card-gutter) / 2 + 1px); } /* TASK-0114 - NO SUBCATEGORIES, TITLE ONLY (operator, /en-us/shop/sale: "top menu on sidebar must be off when we don't have any subcategories. Only title remains"). The partial drops the list; this drops the divider and the space above it, and KEEPS the margin below. So title-bottom -> first facet group = the same --ms-pdp-divider-inset that divider -> first facet group is on every other category, and the facets do not jump. */ /* CORRECTED the same day (operator: "restore divider between title and filter above - you have removed this with menu"). Only the LIST goes; the divider stays, exactly as on every other category. The title's own bottom margin is dropped, so title -> divider is the nav's padding (--ms-pdp-divider-inset), the same step as divider -> first facet group. */ .ms-catnav--title-only .ms-catnav-title { margin-block-end: 0; }