/* ========================================================================== Mouldshop — INTEGRATION SHIM for the ported Mouldshop navbar M4 / TASK-0020. Loads immediately AFTER mouldshop-navbar.css. THE PROBLEM THIS FILE SOLVES, STATED PRECISELY. mouldshop-navbar.css was cut for a standalone page with no other stylesheet. Its section 2 ("BASE SHIM") is a substitute for Horizon's assets/base.css — nine rules on BARE ELEMENT selectors: *, body x2, img, img/picture/video/ canvas/svg, h3, h4, and the :first-child / :last-child heading-margin resets. On a standalone page those hit nothing but the navbar. Dropped into the Swift storefront they hit EVERY PAGE, and because this bundle loads after swift.css at equal specificity, they win. Measured against swift.css on this box: mouldshop rule swift.css counterpart leaks? ------------------------------------ ------------------------- ----------------- * { box-sizing: border-box } *,*::before,*::after same no (identical) img,picture,video,canvas,svg img,svg{vertical-align} YES display+max-width { display:block; max-width:100% } img { width:100%; height:auto } (swift declares neither) YES every image 100% body { display:flex; ... } body{margin;font;bg} YES flex column, 100svh body { font-family: Titillium; ... } body{--bs-body-*} YES sitewide typography h3 { 2rem/700/Titillium/... } h3,.h3{...} split-line 47 YES every h3 on the site h4 { 1.5rem/700/Titillium/... } h4,.h4{...} split-line 47 YES every h4 on the site :last-child:is(p,h1..h6) h*{margin-bottom:.5rem} YES trailing margins { margin-block-end: 0 } p{margin-bottom:1rem} :first-child:is(p,h1..h6) h1-h6 and p: margin-top:0 no (already 0) Swift declares NONE of the navbar's own classes — .header, .page-width, .svg-wrapper, .button-unstyled, .section-header, .header__nav, .header__menu, .header-wrapper and every .mouldshop-* / .mega-menu-* selector return zero hits in swift.css. Only .visually-hidden and .list-unstyled collide, and both carry the same values. So the class-level surface is clean and needs nothing. THE FIX, AND WHY IT IS SHAPED THIS WAY. The vendored file may not be edited — the export's verification (0 differences against the live theme at 8 breakpoints) holds only while its bytes do. So the leak is closed from outside, in two halves: A. restore Swift's rendering OUTSIDE #header-group; B. re-assert Mouldshop's values INSIDE it. Half A uses `revert` wherever swift.css declares nothing for the property (provably safe — `revert` then lands on the UA default, which IS what Swift renders with today), and Swift's own custom properties wherever it does. Four Bootstrap constants could not be sourced from a variable and are restated below, each annotated with the swift.css rule it came from. Those four are the only vendor values duplicated in this repository, and they are the reason this file has a read-back check in the packet. A CASCADE LAYER WAS CONSIDERED AND REJECTED. Putting the vendored bundle in @layer would make swift.css win everywhere by construction — including inside the navbar, where Bootstrap's bare a{}, button{}, ul{}, h3{} resets would then beat every layered .mouldshop-* rule. It fixes the site by breaking the port. Nothing in this file skins anything. Mouldshop identity is mouldshop-navbar.css. ========================================================================== */ /* -------------------------------------------------------------------------- A1. Images and inline SVG — outside the navbar only. THE SELECTOR SHAPE IS THE WHOLE POINT, and it took two wrong versions to get right. Both were caught by toggling the three navbar stylesheets off and on against a live content page and diffing computed styles. v1 img:not(#header-group img) -> specificity (1,0,2), because :not() takes its most specific argument and that argument carries an id. At (1,0,2) this beats not only the bundle but SWIFT'S OWN CLASS RULES. `max-width: revert` then discarded Swift's constraint as well, and a 400px demo image that had always rendered at 375 started rendering at 400 and overflowing its card. Reverting a property is only safe against declarations you have actually enumerated, and bare-element selectors are not the whole enumeration — a class rule counts too. v2 img:where(:not(#header-group img)) -> specificity (0,0,1). :where() contributes zero, so this sits at plain element specificity. It still beats the bundle's `img { width: 100% }`, because this file loads after it and equal specificity is settled by order; and it now LOSES to every Swift class rule, which is exactly right — those are the declarations that were producing the storefront's images before this packet. `revert` is still the value, and at this specificity it is safe: it applies only when nothing else in the author origin claims the property, and then it lands on the UA default — which is what the storefront rendered with. Verified by the probe that exposed v1: a 1x1 data-URI image appended to the body renders 1px wide with the bundle disabled, 1305px wide with the bundle unfixed (width:100%), and 1px wide with this rule in place. -------------------------------------------------------------------------- */ img:where(:not(#header-group img)) { display: revert; width: revert; height: revert; max-width: revert; } picture:where(:not(#header-group picture)), video:where(:not(#header-group video)), canvas:where(:not(#header-group canvas)), svg:where(:not(#header-group svg)) { display: revert; max-width: revert; } /* -------------------------------------------------------------------------- A2. — the one element the navbar cannot be scoped away from, since it is the navbar's own ancestor. Restored declaration by declaration. Layout: swift.css declares no display / flex-direction / min-height on body, so `revert` is safe and gives back UA `block` / `auto`. Typography and colour: restored from the variables Swift and mouldshop.css already own, never from literals — --ms-font-body is set by mouldshop.css, --bs-body-* and --dw-* by swift.css. -------------------------------------------------------------------------- */ body { display: revert; flex-direction: revert; min-height: revert; -webkit-font-smoothing: revert; font-family: var(--ms-font-body); /* mouldshop.css section 0 */ font-size: var(--bs-body-font-size); font-weight: var(--bs-body-font-weight); line-height: var(--bs-body-line-height); font-style: var(--dw-font-style); text-transform: var(--dw-text-transform); color: var(--bs-body-color); background-color: var(--bs-body-bg); } /* -------------------------------------------------------------------------- A3. h3 / h4 — by REDEFINING THE BUNDLE'S OWN TOKENS, not by overriding it. MEASURED FIRST, then written. Toggling the three navbar stylesheets off and on against a live content page gives the exact delta this block must close: property Swift baseline with the bundle, unfixed ------------------ ---------------- ------------------------ h3 font-size 16px (Swift wins — see below) h3 font-weight 400 (Swift wins) h3 line-height normal (Swift wins) h3 margin-bottom 17.32px (untouched) h3 color rgb(34,34,34) INHERITED — the one real delta Only the colour actually leaks, and that is worth stating plainly because the first version of this block assumed all of it leaked and restated Bootstrap reboot values to "restore" them. That made things worse: it changed h3 from 16px/400 to 28px/500 sitewide. The reason is a rule that is easy to miss — swift.css split-line 4393 carries :is(h1,.h1,.dw-h1,...,h6,.h6,.dw-h6){font-family;font-size;font-weight; font-style;line-height;letter-spacing; text-transform} and :is() takes the specificity of its most specific argument, so a CLASS (.h1) — (0,1,0). That beats the bundle's bare `h3 {}` (0,0,1) on every property it declares. Swift was never losing those; the restatement, at (1,0,1), was beating Swift. The colour is different: the bundle sets `color: var(--color, var(--font-h3-color))` and defines NEITHER variable (--color appears zero times in swift.css, checked). The declaration is therefore invalid at computed-value time, and for an inherited property that means `inherit` — so headings sitewide stop using --bs-heading-color. Defining --font-h3-color / --font-h4-color at :root makes the bundle's own declaration resolve to Swift's heading colour, with no override, no :not(), and no restated constant anywhere. Inside the navbar the export has these undefined and therefore inherits; B1 below states `color: inherit` explicitly for that reason. -------------------------------------------------------------------------- */ :root { --font-h3-color: var(--bs-heading-color); --font-h4-color: var(--bs-heading-color); } /* -------------------------------------------------------------------------- A4. Trailing margins — DELIBERATELY NOT TOUCHED. The bundle zeroes margin-block-end on any last-child p or heading, and the first version of this file "restored" Bootstrap's .5rem / 1rem for elements outside the navbar. Measured against the baseline that was wrong in the same way A3 was: a sampled last-child

on a content page computes margin-bottom 0px with the bundle DISABLED — Swift already collapses trailing margins there — and the restoration forced it to 16px. The override was the regression, not the rule it was undoing. So: nothing here. If a page is ever found where the bundle's rule does change trailing spacing, fix it with a measurement, not with Bootstrap's constants. -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- B1. Re-assert Mouldshop's base metrics INSIDE the navbar. Half A above is deliberately blunt — :not(#header-group x) already excludes the navbar, so nothing here is undoing half A. What this block does is put back the three resets the README calls load-bearing, because swift.css and mouldshop.css both still reach inside #header-group with their own bare element rules and would otherwise win on the properties they declare: - svg { display:block } keeps the logo box exactly 50px. Without it the inline SVG sits on a text baseline and the wrapper grows by the font descender (~6.4px), pushing the logo off centre in the 100px row. - the heading margin reset. The column header

is the only child of its wrapper; leave Bootstrap's margin-bottom on it and EVERY subcategory column renders 12px taller, which propagates to the whole dropdown. - the h3 / h4 line-heights. mouldshop-header.css overrides their size and weight but NOT their line-height, so without these the dropdown grows 18px (h3 13.2 -> 19.2, h4 18 -> 28.8). -------------------------------------------------------------------------- */ :where(#header-group) svg, :where(#header-group) img { display: block; max-width: 100%; } :where(#header-group) h3, :where(#header-group) h4 { font-family: var(--font-paragraph--family); font-style: normal; letter-spacing: 0; text-transform: none; color: inherit; margin-block: 0; } :where(#header-group) h3 { font-size: var(--font-h3--size); line-height: var(--font-h3--line-height); font-weight: var(--font-h3--weight); } :where(#header-group) h4 { font-size: var(--font-h4--size); line-height: var(--font-h4--line-height); font-weight: var(--font-h4--weight); } /* Body typography reaches the navbar by inheritance in the export; half A2 has just handed back to Swift, so the navbar states it for itself here. Family stays a Mouldshop token — that is identity, and it is set in mouldshop-navbar.css; only the metrics live here. */ #header-group { font-size: var(--font-paragraph--size); line-height: var(--font-paragraph--line-height); font-weight: var(--font-paragraph--weight); text-transform: none; } /* -------------------------------------------------------------------------- B2. The container width class the export takes from . index.html carries , which is what selects --page-margin and --page-content-width for every .page-width surface in the navbar. The Swift master writes and we do not override it, so the class is applied to the navbar root instead — custom properties inherit, and every .page-width element is inside #header-group. Values are the bundle's own (section 2, base.css:325-365); the responsive max-width ladder in section 3 is untouched and still applies. -------------------------------------------------------------------------- */ #header-group { --page-margin: 16px; --page-content-width: var(--narrow-page-width); --page-width: calc(var(--page-content-width) + (var(--page-margin) * 2)); } @media screen and (min-width: 750px) { #header-group { --page-margin: 40px; } } /* -------------------------------------------------------------------------- B3. Bootstrap element resets that reach inside the navbar. swift.css styles bare a / button / ul, and the export never had to contend with them. Each rule below restores the export's own value, not an invention. EVERY SELECTOR HERE IS WRAPPED IN :where(), AND THAT IS THE POINT. A bare `#header-group a` carries an id and scores (1,0,1), which beats the bundle's own `.mouldshop-universal-drawer__menu a` (0,2,1) — so a rule written to undo Bootstrap would instead have flattened the navbar's own link colours. The first build of this file did exactly that. :where() contributes zero, so these land at plain element specificity: later than swift.css in load order, therefore beating Bootstrap's bare-element resets, and below every class rule in the bundle, therefore never beating the port. line-height: normal on