/* ========================================================================== MSI Precision - 2026 refresh Loaded last (see Files/HeadTags.html) so it wins the cascade over Bootstrap 3.2.0, style.css, deputy.css, response.css and gradient.css. Values are taken from Figma file 1IokR3sIQwovpbr6dZ3Mni, board 516:159. ========================================================================== */ :root { /* colour */ --msi-orange: #ff9a00; --msi-orange-dark: #e08800; /* the wire's one red (catalog request, #FF0505): the out-of-stock dot */ --msi-red: #ff0505; /* Revision 652:375 changed the brand blue. Verified on the new nav bar (652:565 bg #0032a0) and the recoloured footer plate SVGs. The dark step is derived from it (x0.8), not carried over from the old #004372, which was a darker step of a different hue. */ --msi-blue: #0032a0; --msi-blue-dark: #002880; --msi-blue-bright: #3d90ee; /* hero and trust-bar body copy in revision 652:375 (652:714, 652:462/470/477/484) */ --msi-ink-2: #262d31; --msi-nav-tint: #edf5fe; --msi-ink: #2c3a43; --msi-muted: #788893; --msi-hairline: rgba(120, 136, 147, 0.2); --msi-surface: #f8f9fb; --msi-surface-2: #fcfcfc; --msi-white: #fff; /* type */ --msi-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* spacing scale observed in the wires */ --msi-s1: 4px; --msi-s2: 8px; --msi-s3: 12px; --msi-s4: 16px; --msi-s5: 24px; --msi-s6: 32px; --msi-s7: 48px; --msi-s8: 64px; --msi-s9: 80px; /* radii */ --msi-r-sm: 8px; --msi-r-md: 16px; --msi-r-lg: 24px; --msi-r-pill: 999px; --msi-gutter: 80px; --msi-content: 1280px; } /* --- legacy resets ------------------------------------------------------- style.css italicises the whole of the chrome. Nothing in the wires is italic, so every one of these is reset explicitly. The winning legacy selector is `.MenuBar .navbar ul.nav > li > a` (0-3-3); each reset below matches it or beats it, and this file loads later, so no !important is needed. Verified with getComputedStyle, not assumed. ------------------------------------------------------------------------- */ body .LayoutTop a, body .LayoutBottom a, body .LayoutBottom h2, body .LayoutBottom h3, body .LayoutBottom h4, body .LayoutBottom p, body .LayoutBottom li, body .LayoutBottom i, body .MenuBar .navbar ul.nav > li > a, body .MenuBar .navbar ul.nav > li > a:hover, body .MenuBar .navbar ul.nav > li > a:focus, body div.HorizontalNavItem a, body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a, body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4, body .h5, body .h6, body .LayoutTop h1, body .LayoutTop h2, body .LayoutTop h3, body .msi-band, body .msi-band * { font-style: normal; } /* --- base ---------------------------------------------------------------- */ body, body.Default { font-family: var(--msi-font); font-size: 16px; line-height: 1.4; color: var(--msi-ink); background: var(--msi-white); -webkit-font-smoothing: antialiased; } body p, .LayoutContentInner p { font-family: var(--msi-font); font-size: 16px; line-height: 1.6; color: var(--msi-ink); } body h1, body h2, body h3, body h4, body h5, body h6, body .h1, body .h2, body .h3, body .h4, body .h5, body .h6 { font-family: var(--msi-font); color: var(--msi-ink); font-weight: 600; letter-spacing: -0.01em; } body h1, body .h1 { font-size: 48px; line-height: 1.15; } body h2, body .h2 { font-size: 36px; line-height: 1.2; } body h3, body .h3 { font-size: 28px; line-height: 1.25; } body h4, body .h4 { font-size: 20px; line-height: 1.3; } body h5, body .h5 { font-size: 18px; line-height: 1.3; } body h6, body .h6 { font-size: 16px; line-height: 1.4; } body a { color: var(--msi-blue); transition: color .15s ease; } body a:hover, body a:focus { color: var(--msi-blue-bright); text-decoration: none; } /* --- layout -------------------------------------------------------------- */ body .container { width: 100%; max-width: calc(var(--msi-content) + (var(--msi-gutter) * 2)); padding-left: var(--msi-gutter); padding-right: var(--msi-gutter); margin-left: auto; margin-right: auto; } /* Inter loads with its optical-size axis for the footer tagline (Inter Display, opsz 32); everything else keeps the opsz 14 it had with the static font. Set as an inherited value on the root: a `font:` shorthand resets font-optical-sizing but not font-variation-settings. */ html { font-variation-settings: "opsz" 14; } /* --- buttons ------------------------------------------------------------- */ body .btn, body .btn-default, body input[type="submit"], body input[type="button"], body button.btn { font-family: var(--msi-font); font-weight: 500; font-size: 16px; line-height: 1.4; border-radius: var(--msi-r-pill); border: 1px solid transparent; padding: 12px 24px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; box-shadow: none; text-shadow: none; } body .btn-primary, body input[type="submit"], body .msi-btn--primary { background: var(--msi-orange); border-color: var(--msi-orange); color: var(--msi-ink); transition: background-color .15s ease, border-color .15s ease, color .15s ease; } body .btn-primary:hover, body .btn-primary:focus, body input[type="submit"]:hover, body .msi-btn--primary:hover { background: var(--msi-orange-dark); border-color: var(--msi-orange-dark); color: var(--msi-ink); } body .msi-btn--secondary { background: transparent; border-color: var(--msi-hairline); color: var(--msi-ink); } body .msi-btn--secondary:hover { background: var(--msi-nav-tint); border-color: var(--msi-blue); } /* The export's leftover Slideshow widgets (ShippingAddressPage's "Repair Widget", CMSPage, Repairs): predefined repair photos in no wire. Hidden by type class; the markup stays (Diego 2026-09-23, rule 8). */ body .Control.Slideshow { display: none; } /* --- form controls ------------------------------------------------------- */ body input[type="text"], body input[type="password"], body input[type="email"], body input[type="tel"], body input[type="number"], body select, body textarea, body .form-control { font-family: var(--msi-font); font-size: 16px; line-height: 1.4; color: var(--msi-ink); background: var(--msi-white); border: 1px solid var(--msi-hairline); border-radius: var(--msi-r-sm); padding: 12px 16px; min-height: 48px; box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } body input:where(:not([type="radio"], [type="checkbox"])):focus, body select:focus, body textarea:focus, body .form-control:focus { border-color: var(--msi-blue-bright); box-shadow: 0 0 0 3px rgba(61, 144, 238, 0.15); outline: 0; } /* radios and checkboxes: the halo draws square round a round control, so a ring on keyboard focus instead. Beats the theme's input[type="radio"]:focus { outline: 5px auto } on mouse focus. */ body input[type="radio"]:focus, body input[type="checkbox"]:focus { box-shadow: none; outline: 0; } body input[type="radio"]:focus-visible, body input[type="checkbox"]:focus-visible { outline: 2px solid var(--msi-blue); outline-offset: 2px; } /* links and buttons ring on keyboard focus only (Diego 2026-09-23, staging): Bootstrap 3.2's a:focus and .btn:focus { outline: 5px auto } drew Chrome's ring after a mouse click too. 0-3-2 outranks .btn.active:focus (0-3-0) */ body :is(a, button, summary, [role="button"], [role="tab"], [tabindex], input:is([type="submit"], [type="button"], [type="reset"], [type="image"])):focus:not(:focus-visible) { outline: none; } /* text fields: 0-2-2, so it outranks style.css:113's Bootstrap glow (0-2-1) and Bootstrap's .form-control:focus. Buttons stay on the rule above. Our own field rules set their border colour and shadow only :not(:focus). */ body :is(input:not([type="radio"], [type="checkbox"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="file"], [type="range"], [type="color"]), select, textarea):focus { border-color: var(--msi-blue-bright); box-shadow: 0 0 0 3px rgba(61, 144, 238, 0.15); outline: 0; } body ::placeholder { color: var(--msi-muted); opacity: 1; } body label { font-family: var(--msi-font); font-size: 14px; font-weight: 500; color: var(--msi-ink); margin-bottom: var(--msi-s2); } /* --- section bands ------------------------------------------------------- */ .msi-band { padding: var(--msi-s9) 0; } .msi-band--surface { background: var(--msi-surface); } .msi-band--surface-2 { background: var(--msi-surface-2); } .msi-band--tint { background: var(--msi-nav-tint); } .msi-eyebrow { font-size: 16px; font-weight: 500; color: var(--msi-blue); text-align: center; margin-bottom: var(--msi-s2); } .msi-section-title { font-size: 36px; line-height: 1.2; text-align: center; margin: 0 0 var(--msi-s2); } .msi-section-intro { font-size: 16px; color: var(--msi-muted); text-align: center; margin: 0 0 var(--msi-s7); } /* --- cards --------------------------------------------------------------- */ .msi-card { background: var(--msi-white); border: 1px solid var(--msi-hairline); border-radius: var(--msi-r-md); overflow: hidden; } /* ========================================================================== HEADER Theme structure (Files/HeaderPage.html), which we restyle in place: .LayoutTopTop .topgrey -> orange utility bar (MENUBAR1437 + cart + account) .container -> white row (logo + search) > div -> blue nav bar (MENUBAR1433) Nothing is moved in the markup. The wire puts Account and Cart in the white row while the theme emits them inside the utility bar, so they are lifted into place with absolute positioning at >= 992px only. ========================================================================== */ body .LayoutTop { background: var(--msi-white); } body .LayoutTopTop { position: relative; } /* ---- orange utility bar ---- */ body .topgrey { background: var(--msi-orange); position: relative; z-index: 1001; /* style.css:192 adds 30px here, which pushes the whole header stack down and breaks the wire's 38 / 112 / 46 band rhythm. */ margin-bottom: 0; border-bottom: 0; } body .topgrey .Control.MenuBar .navbar, body .topgrey .navbar-default, body .LayoutTopTop .msi-w-utility .Control.MenuBar .navbar-default.navbar-static-top { background: transparent; border: 0; border-radius: 0; margin: 0; min-height: 0; } body .topgrey .navbar-collapse { padding: 0; border: 0; box-shadow: none; } body .topgrey ul.nav.navbar-nav { display: flex; align-items: center; justify-content: center; gap: var(--msi-s3); float: none; margin: 0; } body .topgrey ul.nav.navbar-nav > li { float: none; } body .topgrey ul.nav.navbar-nav > li > a, body .topgrey .navbar-default .navbar-nav > li > a { font-family: var(--msi-font); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--msi-ink); background: none; border: 0; border-right: 0; text-decoration: none; padding: var(--msi-s2) var(--msi-s3); } /* style.css:966 pins padding-left:30px on the first utility link and style.css:989 adds a border-right on hover; only this chain outranks them. Font size and line height stay OUT of it on purpose - at 0-5-3 they would also outrank msi-responsive.css and freeze the strip at its desktop height. */ body .topgrey .msi-w-utility .Control .navbar-default :where(.navbar-collapse) > .navbar-nav > li:first-child > a, body .topgrey .msi-w-utility .Control .navbar-default :where(.navbar-collapse) > .navbar-nav > li:first-child > a:hover, body .topgrey .msi-w-utility .Control .navbar-default :where(.navbar-collapse) > .navbar-nav > li:first-child > a:focus { background: none; border: 0; border-right: 0; text-decoration: none; padding: var(--msi-s2) var(--msi-s3); } body .topgrey ul.nav.navbar-nav > li > a:hover, body .topgrey ul.nav.navbar-nav > li > a:focus, body .topgrey ul.nav.navbar-nav > li.open > a, body .topgrey .navbar-default .navbar-nav > li > a:hover { color: var(--msi-ink); background: none; background-color: transparent; opacity: .75; } body .topgrey .top-social { display: none; } /* The live top link group's only top-level item is "Questions? Call us Toll Free at 800.322.4674" - exactly what the wire puts in this band. It needs the phone glyph, which the link group cannot supply. */ body .topgrey .navbar-collapse > ul.nav.navbar-nav > li:first-child > a::before { content: ""; display: inline-block; vertical-align: -4px; width: 20px; height: 20px; margin-right: var(--msi-s3); background: var(--msi-ink); -webkit-mask: url("../images/menu/phone-forwarded.svg") center / 20px no-repeat; mask: url("../images/menu/phone-forwarded.svg") center / 20px no-repeat; } /* ---- Cart and Account belong in the white row ---- The wire places them beside the search field, but the theme emits them inside MENUBAR1437, in the utility bar. Moving the markup would mean relocating a widget and its merge codes, so they are lifted visually instead. Desktop only - below 992px they stay in document flow where the collapse expects them. The offset is the white row's own padding (24px) plus half the gap between its 112px height and the 52px control, which keeps them optically centred on the search pill. */ @media (min-width: 992px) { body .topgrey { position: relative; } body .topgrey .navbar-right { position: absolute; top: 100%; /* the content column's right edge, not the full-width bar's */ right: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2)); margin: 32px 0 0; float: none; z-index: 2; } body .topgrey .navbar-right > ul.nav.navbar-nav { display: flex; align-items: center; gap: var(--msi-s5); margin: 0; float: none; } body .topgrey .navbar-right > ul.nav.navbar-nav::before, body .topgrey .navbar-right > ul.nav.navbar-nav::after { display: none; } body .topgrey .navbar-right ul.nav.navbar-nav > li { float: none; } body .topgrey .navbar-right ul.nav.navbar-nav > li, body .topgrey .navbar-right ul.nav.navbar-nav > li > a, body .topgrey .navbar-right ul.nav.navbar-nav > li > a:hover, body .topgrey .navbar-right ul.nav.navbar-nav > li > a:focus, body .topgrey .navbar-right ul.nav.navbar-nav > li.open > a { background: none; background-color: transparent; border: 0; box-shadow: none; } body .topgrey .navbar-right ul.nav.navbar-nav > li > a { display: flex; align-items: center; gap: var(--msi-s2); padding: 0; color: var(--msi-ink); background: none; font-weight: 500; } body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block, body .topgrey .navbar-right ul.nav.navbar-nav > li > a > i { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--msi-hairline); font-size: 20px; color: var(--msi-ink); } body .topgrey .navbar-right ul.nav.navbar-nav > li > a .badge { position: absolute; top: -2px; right: -2px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--msi-orange); color: var(--msi-ink); font: 600 11px/20px var(--msi-font); } body .topgrey .navbar-right ul.nav.navbar-nav > li > a { position: relative; } /* The wire's white row is one 1280 track: logo+search group 990 wide at x=80, a 32 gap, then the 258-wide account/cart group ending at x=1360. Account/cart are absolutely positioned, so the row reserves 258+32. */ body .LayoutTopTop > .container > .row { padding-right: 290px; } body .topgrey .navbar-right { width: 258px; } } /* ---- white row: logo + search ---- */ body .LayoutTopTop > .container { padding-top: var(--msi-s5); padding-bottom: var(--msi-s5); /* The markup carries Deputy's .m-b-30 utility, whose own rule is `.m-b-30 { margin-bottom: 30px !important }` - a utility class, so it can only be beaten with equal weight. That 30px breaks the wire's 38 / 112 / 46 band stack. */ margin-bottom: 0 !important; } body .LayoutTopTop > .container > .row { display: flex; align-items: center; gap: 76px; /* Bootstrap's .row carries margin: 0 -15px to cancel column padding. With the columns' padding removed above, that margin is what shifts the search pill 15px left and 30px wide of the wire. */ margin-left: 0; margin-right: 0; } /* the wire gives the logo its intrinsic width and lets search take the rest; the theme markup is col-sm-7/col-md-9 (logo) + col-sm-5/col-md-3 (search) */ body .LayoutTopTop > .container > .row > [class*="col-"]:first-child { flex: 0 0 auto; width: auto; float: none; /* Bootstrap gives every column 15px of side padding. Left in place it makes the logo track 30px wider than the wire's 143 and pushes the search pill off its x. The row's own gap is the spacing contract here. */ padding-left: 0; padding-right: 0; } body .LayoutTopTop > .container > .row > [class*="col-"]:last-child { flex: 1 1 auto; width: auto; float: none; padding-left: 0; padding-right: 0; } /* The wire's header lockup (516:339) is horizontal with the tagline, 143x64. The theme's IMAGELOGO1617 points at a 697x453 STACKED lockup, which renders 98 wide at that height. `content:` swaps the rendered image without touching the widget, its `imagepath` attribute, or any markup - so the admin still owns the source and nothing is deleted. Source is 270x120, i.e. 1.89x density at the displayed size. */ body .LayoutTopTop .Control.ImageLogo img { content: url("../images/msi-logo-header.png"); height: 64px; width: 143px; object-fit: contain; object-position: left center; } /* search field -> the wire's pill */ body .h-search { float: none; width: 100%; } /* The platform's input carries .AutocompleteSearchBox, which style.css:1014-1015 paints #F7F7F7 with a 3px black border at 0-3-0 (0-4-0 on hover). The class variant below outranks both without naming the widget. */ body .h-search input[type="text"], body .h-search input[type="search"], body .h-search input.AutocompleteSearchBox[type="text"] { width: 100%; border: 1px solid var(--msi-hairline); border-radius: var(--msi-r-pill); padding: var(--msi-s4) var(--msi-s4) var(--msi-s4) 52px; height: 58px; min-height: 58px; font-size: 16px; line-height: 1.4; color: var(--msi-ink); background: var(--msi-white) url("../images/menu/search.svg") 16px center / 24px no-repeat; box-shadow: none; } body .h-search input.AutocompleteSearchBox[type="text"]:hover { border: 1px solid var(--msi-hairline); } body .h-search input::placeholder { color: var(--msi-ink-2); } /* focus: the text-field focus look. style.css:1014-1015 paint .AutocompleteSearchBox at 0-3-0 (0-4-0 on hover), above the site-wide focus rule, so the header states it here, after the hover rule */ body .h-search input.AutocompleteSearchBox[type="text"]:focus, body .h-search input[type="text"]:focus, body .h-search input[type="search"]:focus { border-color: var(--msi-blue-bright); box-shadow: 0 0 0 3px rgba(61, 144, 238, 0.15); outline: 0; } body .h-search .btn, body .h-search input[type="submit"] { display: none; } /* ---- blue nav bar (MENUBAR1433) ---- */ body .msi-w-nav .Control.MenuBar .navbar { background: var(--msi-blue); } body .msi-w-utility .Control.MenuBar .navbar, body .topgrey .navbar { background: transparent; } body .LayoutTopTop .msi-w-nav .Control.MenuBar .navbar-default.navbar-static-top { background: var(--msi-blue); border: 0; border-radius: 0; margin: 0; min-height: 46px; } body .Control.MenuBar .navbar-collapse-bottom { position: relative; max-width: var(--msi-content); margin: 0 auto; float: none; padding: 0; border: 0; box-shadow: none; } /* below 1440 the 1280 box would run to the window edge; it keeps the logo's 80 inset instead */ @media (min-width: 992px) { body .Control.MenuBar .navbar-collapse-bottom { width: calc(100% - 2 * var(--msi-gutter)); } } /* the Instruments panel follows that box; under 1200 four columns clip the longer names ("Ophthalmology") */ @media (min-width: 992px) and (max-width: 1199px) { body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:first-child > ul.dropdown-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } } body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav { display: flex; align-items: center; gap: var(--msi-s7); float: none; margin: 0; } body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li { float: none; position: static; } /* Bootstrap 3 clearfixes .nav and .navbar-collapse with :before/:after. In a flex container those pseudo-elements become flex ITEMS, so each one consumes a 48px gap and pushes the first real link 48px right of the gutter. */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav::before, body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav::after, body .topgrey ul.nav.navbar-nav::before, body .topgrey ul.nav.navbar-nav::after, body .LayoutTopTop > .container > .row::before, body .LayoutTopTop > .container > .row::after, body .LayoutBottom .footer-row::before, body .LayoutBottom .footer-row::after { display: none; } body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li > a { display: flex; align-items: center; gap: var(--msi-s2); padding: var(--msi-s3) 0; font-family: var(--msi-font); font-weight: 700; font-size: 16px; line-height: 1.4; color: var(--msi-white); background: none; border: 0; border-right: 0; text-align: left; } body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li > a:hover, body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li > a:focus { color: var(--msi-white); background: none; } /* A focus ring belongs to keyboard users. A click now pins the panel, so the trigger keeps focus and Bootstrap's `a:focus { outline: 5px auto }` drew a ring around it for the rest of the session. `:focus-visible` is the keyboard case; `:focus:not(:focus-visible)` kills the pointer one, including Bootstrap's. Same split on the utility circles, the drawer and the socials. */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li > a:focus:not(:focus-visible), body .topgrey .navbar-right ul.nav.navbar-nav > li > a:focus:not(:focus-visible), body .LayoutBottom ul.msi-footer-social > li > a:focus:not(:focus-visible), body .LayoutBottom .msi-footer-links a:focus:not(:focus-visible) { outline: none; box-shadow: none; } body .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li > a:focus-visible, body .topgrey .navbar-right ul.nav.navbar-nav > li > a:focus-visible { outline: 2px solid var(--msi-white); outline-offset: 2px; } /* chevron on exactly the items that have a submenu - no markup, no hard-coded list */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown > a::after { content: ""; flex: 0 0 16px; width: 16px; height: 16px; background: var(--msi-white); -webkit-mask: url("../images/menu/chevron-down.svg") center / 16px no-repeat; mask: url("../images/menu/chevron-down.svg") center / 16px no-repeat; /* rotate, do not flip: scaleY(-1) reads as a snap even with a duration on it */ transition: transform .22s cubic-bezier(.4, 0, .2, 1); } /* Hover and focus own the open state on DESKTOP only. Below 992 the panel opens on tap, so rotating on hover would promise a state that has not happened - and :focus-within would leave the arrow up after the tap that closed the panel. */ @media (min-width: 992px) { body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown.msi-open > a::after, body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown.msi-open > a::after { transform: rotate(180deg); } } body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown.open > a::after { transform: rotate(180deg); } /* style.css:960-963 paints the first two utility items solid blue at 0-5-2 (.msi-w-utility .Control .navbar-default .navbar-right .navbar-nav > li:first-child > a). Matching that chain is what it takes to clear them; a shorter selector loses on specificity even though this file loads later. Applies at every width - the legacy rule is not breakpoint-scoped. */ body .msi-w-utility .Control .navbar-default .navbar-right .navbar-nav > li > a, body .msi-w-utility .Control .navbar-default .navbar-right .navbar-nav > li:first-child > a, body .msi-w-utility .Control .navbar-default .navbar-right .navbar-nav > li:nth-child(2) > a, body .msi-w-utility .Control .navbar-default .navbar-right .navbar-nav > li:first-child > a:hover, body .msi-w-utility .Control .navbar-default .navbar-right .navbar-nav > li:nth-child(2) > a:hover { background: none; color: var(--msi-ink); /* The wire's group is exactly 48 tall (516:345) and each item is icon + 8 + label with NO padding (516:346 = 120 wide = 48 + 8 + 64). Any padding here makes the group 64 tall and overflows its own 258px box. */ padding: 0; border: 0; } /* ========================================================================== MEGA MENUS The repeater emits ul.nav > li.dropdown > a + ul.dropdown-menu > li > a. Nothing about that structure changes - these rules reshape it into the wire's panels. li is position:static above, so the panel and the scrim both resolve against .navbar-collapse-bottom and can span the full 1280 column. ========================================================================== */ @media (min-width: 992px) { /* scrim, with no new element. It belongs to the page, not the viewport: absolute from the nav bar's bottom (197) to the document's end, so it scrolls with the nav and the open panel (a fixed scrim left a light strip above it when the page scrolled). js/msi-menu.js puts msi-menu-open on body while a panel with items is open. left/right 0, never 100vw: `vw` counts the vertical scrollbar, and the page grew a horizontal scrollbar every time the menu opened. The header (z 1030) keeps the nav and the panel above it. */ body.msi-menu-open { position: relative; } body.msi-menu-open::after { content: ""; position: absolute; left: 0; right: 0; top: 197px; bottom: 0; background: rgba(0, 0, 0, .2); z-index: 900; pointer-events: none; } /* THE GAP BRIDGE. The wire sets the panel 8px below the bar (top: calc(100% + 8px)). That gap is dead space: the pointer crosses it, leaves the trigger, and the menu shuts before it can be reached - worst on a diagonal move toward a far column, which exits the trigger's narrow width first. This strip hangs 10px above the panel. It is a child of the panel, which is itself a descendant of the li, so hovering it keeps `li:hover` true. Anchoring it to the PANEL matters: an earlier attempt put it on the trigger, whose `position: static` resolved it against `.navbar-collapse-bottom`, and it never landed over the gap at all. Verified with elementFromPoint at every y across the gap. */ body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; /* 10 for the gap plus 48 for the corner radius. `border-radius` clips hit testing as well as paint, so under the trigger's left edge the panel's own top-left corner is a cut-out: a pointer going straight down from the "I" of Instruments fell through it and elementFromPoint returned the page behind. The bridge has to span the corner zone, not just the gap. */ height: 58px; } /* Panel shell, shared by all three. NOTE: no `display` here. Bootstrap closes `.dropdown-menu` with `display:none`, and setting grid/flex on the base rule overrides that and pins every panel permanently open. The display type belongs on the OPEN state only, below. */ body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu { position: absolute; top: calc(100% + 8px); left: 0; right: auto; margin: 0; padding: 40px; background: var(--msi-white); border: 0; border-radius: 48px; box-shadow: none; min-width: 0; z-index: 1000; font-size: inherit; } /* Instruments - the wide one: 4 columns spanning the 1280 column. The wire draws 12 tiles in a 4x3 column-major grid. The STORE has 14 root categories, and that count changes whenever the catalogue does, so a fixed row count would either clip or leave holes. Row-major with four flexible columns flows to any count - 14 lands as 4/4/4/2. The reading order therefore differs from the wire (across, not down); recorded as a deliberate deviation in BRIEF rather than pretending the counts match. */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:first-child > ul.dropdown-menu { left: 0; /* the nav box: 1280 from 1440 up, the window less the 80 insets below */ width: 100%; padding: 40px 40px 48px; /* The wire's 128px column gap assumes its own 12 short labels. The store has 14 categories with longer names ("General Surgery", "Disposable Cannulas"), and at 128px the fourth column overflows the panel. minmax(0, 1fr) lets the tracks shrink and the gap is reduced to fit real content. Recorded as a deviation - the wire's gap is not achievable with the store's own category names. */ grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: min-content; /* 24px gaps give 282px tracks: 48 icon + 16 gap leaves 218 for the label, enough for the longest real name ("Disposable Cannulas") on one line. At 48px the tracks were 264 and labels wrapped, which doubled the row height and made the panel 760px - taller than a laptop viewport, so the lower rows could not be reached without scrolling, and scrolling moved the pointer off the menu and closed it. */ column-gap: var(--msi-s5); row-gap: var(--msi-s6); align-content: start; } /* the narrow panels centre under their own trigger */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:not(:first-child) { position: relative; } body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:not(:first-child) > ul.dropdown-menu { left: 50%; transform: translateX(-50%); flex-direction: column; gap: var(--msi-s6); width: max-content; min-width: 247px; } /* ---- OPEN STATE: the only place `display` is set ---- */ /* `.msi-open` is the single source of truth for the open state, at every width and every input. Neither `:focus-within` nor `:has(> a:focus-visible)` works here: a tap focuses the trigger, so the panel stayed open through the tap meant to close it, and after Escape the still-focused trigger became focus-visible and reopened it. Keyboard opening is handled in js/msi-menu.js, where Escape can suppress it. */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:first-child.msi-open > ul.dropdown-menu { display: grid; } body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:not(:first-child).msi-open > ul.dropdown-menu { display: flex; } /* `.msi-open` is the only state. Two other things try to own it and both show the panel as an unstyled `display: block`, 802px tall instead of 450: - Bootstrap's `.open`, put on the li by the theme's own JS on click; - the theme's `.navbar-nav .dropdown:hover > .dropdown-menu`, which fires the moment the pointer is over a trigger, so clicking to CLOSE a panel reopened it as a block because the mouse had not moved away. Both are neutralised here. The `.msi-open` rules below are the same specificity and come later, so they still win when the panel should show. */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown.open > ul.dropdown-menu, body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:hover > ul.dropdown-menu { display: none; } /* Defensive: a panel holding no list items must never open, and must not draw the scrim either (the scrim asks for a panel with items). `:empty` is not enough - the repeater leaves whitespace text nodes - so match on "has no li" instead. An empty white box plus a full-page scrim on hover reads as broken. */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown.msi-open > ul.dropdown-menu:not(:has(li)) { display: none; } /* and no chevron on an item that cannot open */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:has(> ul.dropdown-menu:not(:has(li))) > a::after { content: none; } /* a row inside any panel */ body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li { float: none; } body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a { display: flex; align-items: center; gap: var(--msi-s4); padding: 0; clear: none; white-space: nowrap; font-family: var(--msi-font); font-weight: 600; font-size: 20px; line-height: 1.2; color: #000; background: none; white-space: normal; /* long category names wrap rather than overflow */ } body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a:hover { background: none; color: var(--msi-blue); } body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a::before { content: ""; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--msi-icon-chip, #d4dfe7) center / 24px no-repeat; } /* third level: the live menu has 164 grandchildren the wire never drew. Kept in the DOM, collapsed out of the panel - never deleted. */ body .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu ul.dropdown-menu { display: none; } } :root { --msi-icon-chip: #d4dfe7; } /* Default glyph. The wire assigns an icon to each of its 12 tiles, but the store has 14 root categories and the catalogue can gain more at any time. Without a fallback those rows render an empty circle, which reads as broken rather than as "no icon yet". Any href below overrides this. */ body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a::before { background-image: url("../images/menu/package.svg"); background-size: 24px; } /* per-item glyph, keyed on the real live hrefs */ body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Ophthalmology"]::before { background-image: url("../images/menu/eye.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="ENT"]::before { background-image: url("../images/menu/ear.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="General-Surgery"]::before { background-image: url("../images/menu/scissors.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Orthopedic"]::before { background-image: url("../images/menu/bone.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Neurosurgery"]::before { background-image: url("../images/menu/brain.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Gynecological"]::before { background-image: url("../images/menu/baby.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Cardiovascular"]::before { background-image: url("../images/menu/heart-pulse.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Laparoscopic"]::before { background-image: url("../images/menu/focus.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Plastic-Surgery"]::before { background-image: url("../images/menu/scan-face.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Arthroscopic"]::before { background-image: url("../images/menu/circle-dot-dashed.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="or-accessories"]::before { background-image: url("../images/menu/package.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Service-Worldwide"]::before { background-image: url("../images/menu/globe.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Repair"]::before { background-image: url("../images/menu/wrench.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Request-Info"]::before { background-image: url("../images/menu/book-open.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Return-Authorization"]::before { background-image: url("../images/menu/rotate-ccw.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="About-Us"]::before { background-image: url("../images/menu/building-2.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="Contact"]::before { background-image: url("../images/menu/headset.svg"); } /* live categories the wire never drew - no designed icon, so these are chosen */ body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="cannulas"]::before { background-image: url("../images/menu/syringe.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="bipolar-forceps"]::before { background-image: url("../images/menu/activity.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="special-deals"]::before { background-image: url("../images/menu/badge-check.svg"); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a[href*="or-accessories"]::before { background-image: url("../images/menu/package.svg"); } /* ========================================================================== FOOTER Measured off the wire (frame 516:160, footer group 516:422): plate 0, 3990, 1440x612 content 80, 4113, 1280x413 -> 123 above, 76 below brand 80, 4113, 405x215 logo 143x51, +32 tagline, +32 social 348x48 links 554, 4113, 806x317 gap from brand 69 Shop 554 w151 | Resources 753 w186 | Company 987 w135 | Contact 1170 w190 column gap 48 throughout bottom 80, 4494, 1280x32 64 below the column row The plate's top edge is not a plain rounded rectangle: it sits 33px down, rises through a chamfer near x~1196..1256 and runs flat to the right edge. Drawn as a right-anchored 244.34x33 tab in ::before with the clip-path taken from the wire's own SVG, so the shape is the designer's, not an approximation. ========================================================================== */ body .LayoutBottom { position: relative; background: none; color: var(--msi-white); margin-top: var(--msi-s9); /* the wire's 3991 plate box to its 4113 content */ padding: 123px 0 76px; } /* The surface starts 33px into the box, rounded at the top left only... */ body .LayoutBottom::after { content: ""; position: absolute; inset: 33px 0 0 0; background: var(--msi-blue); border-radius: 32px 0 0 0; z-index: -1; } /* ...and the notch fills that first 33px at the right, on the wire's own path. */ body .LayoutBottom::before { content: ""; position: absolute; right: 0; top: 0; width: 244.34px; /* 34, not 33: the tab and the surface below it are two painted shapes that would only touch at y=33. On a footer whose top lands on a fractional pixel that join anti-aliases into a white hairline at any zoom or DPR above 1x - invisible in a 1x screenshot, plainly visible in a real browser. The extra pixel overlaps under the surface; the tab's top edge does not move. */ height: 34px; background: var(--msi-blue); clip-path: path("M0 33 C8.24 33 16.16 29.82 22.12 24.12 L38.06 8.88 C44.02 3.18 51.94 0 60.18 0 H212.34 C230.01 0 244.34 14.33 244.34 32 V34 H0 Z"); z-index: -1; } body .LayoutBottom > .container { padding-left: var(--msi-gutter); padding-right: var(--msi-gutter); } /* Homepage footer (wire 697:27842): the straight edge drops to 80.5 and a steeper tab starts at x 1157, leaving a white band for the tagline. */ body .msi-footer-band { display: none; } /* each highlight is one image behind its phrase: the phrase never splits across lines, at any width */ body .msi-hl { position: relative; z-index: 0; color: #fff; white-space: nowrap; } body .msi-hl::before { content: ""; position: absolute; z-index: -1; top: 4px; left: 50%; height: 32.26px; transform: translateX(-50%); background: center / 100% 100% no-repeat; } body .msi-hl--1::before { width: 84.87px; background-image: url("../images/footer/band-highlight-1.svg"); } body .msi-hl--2::before { width: 97.49px; background-image: url("../images/footer/band-highlight-2.svg"); } body .msi-hl--3::before { width: 141.5px; background-image: url("../images/footer/band-highlight-3.svg"); } /* 834 and 440 homepage footers are not built yet: desktop only for now */ @media (min-width: 992px) { /* Board 697:16717 (Diego 2026-09-24, the client's request, reverting board 741's band above the plate): the tab starts 120 under the CTA, the plate's straight edge 80.5 below that, and the tagline sits on the white beside the tab with its bottom 52.5 under the tab top. The content starts 160.5 under the tab top, as before. */ body:has(.msi-hero) .LayoutBottom { margin-top: 120px; padding-top: 160.5px; } body:has(.msi-hero) .LayoutBottom::before { top: 0; } body:has(.msi-hero) .LayoutBottom::after { top: 80.5px; } body:has(.msi-hero) .LayoutBottom::before { width: 283px; height: 81.5px; clip-path: path("M0 80.5 C10.12 80.5 19.55 75.81 25.6 67.83 L67.4 12.67 C73.45 4.69 82.88 0 92.9 0 H251 C268.67 0 283 14.33 283 32 V81.5 H0 Z"); } /* bottom-anchored, so a wrap grows upward and never moves the plate or the tab. Its right edge stays 262 in from the window (the tab is right-anchored): one line down to a 1425 viewport, about 10 clear of the tab's slanted edge there and 25-33 at 1440 (Diego 2026-09-24) */ body:has(.msi-hero) .msi-footer-band { display: block; position: absolute; top: auto; bottom: calc(100% - 52.5px); left: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2)); right: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2), 262px); margin: 0; font-family: var(--msi-font); font-size: 30px; font-weight: 600; line-height: 1.3; /* Inter Display SemiBold (697:27956): Inter's optical size 32, no tracking */ font-variation-settings: "opsz" 32; letter-spacing: 0; color: #000; opacity: 1; } } /* The homepage shows the tagline below 992 too, exactly as About does there (msi-page-content.css, frames 741:7557 / 741:4829, 813:6219 / 813:3973): the homepage 834 / 440 frames draw no band; Diego 2026-09-24 */ @media (max-width: 991px) { body:has(.msi-hero) .msi-footer-band { display: block; position: absolute; top: 0; left: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2)); right: max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2)); margin: 0; font-family: var(--msi-font); font-size: 30px; font-weight: 600; line-height: 1.5; letter-spacing: -0.033em; text-align: left; color: #000; opacity: 1; } /* 834: two lines of 45, broken after "afford."; the 834 plate with the taller tab: tab top 26 under the band top, straight edge 106, content 209 */ body:has(.msi-hero) .LayoutBottom { margin-top: 112px; padding-top: 209px; } body:has(.msi-hero) .LayoutBottom::before { top: 26px; height: 81px; background: url("../images/content/footer-plate-834-about.svg") right top / 1440px 679.5px no-repeat; } body:has(.msi-hero) .LayoutBottom::after { top: 106px; } body:has(.msi-hero) .msi-footer-band .msi-hl::before { top: 3px; } body:has(.msi-hero) .msi-footer-band .msi-hl--2::after { content: "\A"; white-space: pre; } } @media (max-width: 767px) { /* 440: four lines of 36, broken after "trust." and "afford."; the regular 440 plate starts 138 under the band top */ body:has(.msi-hero) .LayoutBottom { margin-top: 88px; padding-top: 228px; } body:has(.msi-hero) .LayoutBottom::before { top: 138px; height: 35px; background: url("../images/footer/plate-440.svg") right top / 1440px 611.5px no-repeat; } body:has(.msi-hero) .LayoutBottom::after { top: 172px; } body:has(.msi-hero) .msi-footer-band { line-height: 1.2; } body:has(.msi-hero) .msi-footer-band .msi-hl::before { top: 2px; } body:has(.msi-hero) .msi-footer-band .msi-hl--1::after { content: "\A"; white-space: pre; } } /* at 401 and under the fourth line ("can count on.") reaches the tab: the tagline rises 12 so its box ends 6 above the tab top (138); the plate does not move */ @media (max-width: 401px) { body:has(.msi-hero) .msi-footer-band { top: -12px; } } body .LayoutBottom .m-20 { margin: 0 !important; } body .LayoutBottom .footer-row { display: flex; flex-wrap: nowrap; /* 48 at 1440, shrinking with the viewport so the row fits down to 992 */ gap: clamp(24px, 3.334vw, 48px); margin: 0; align-items: flex-start; } body .LayoutBottom .footer-row::before, body .LayoutBottom .footer-row::after { display: none; } body .LayoutBottom .footer-column { float: none; width: auto; padding: 0; /* The wire's four link columns are 151 / 186 / 135 / 190 wide with 48 between them, sized by their own longest label rather than by an even split. An even `flex: 1 1 0` made Resources too narrow and wrapped "Lifetime Repair Program" onto two lines. Sizing to content reproduces the wire's widths. */ flex: 0 1 auto; min-width: 0; } body .LayoutBottom .footer-row > .footer-column:last-child { margin-left: auto; } /* Sizing to content left each column 3-4px narrow, because the browser sets Inter slightly tighter than Figma measures it, and the error accumulated across the row. The wire states these widths, so they are pinned. Below 1440 they may shrink, and their labels wrap. */ body .LayoutBottom .footer-column:nth-of-type(2) { flex: 0 1 151px; } body .LayoutBottom .footer-column:nth-of-type(3) { flex: 0 1 186px; } body .LayoutBottom .footer-column:nth-of-type(4) { flex: 0 1 135px; } body .LayoutBottom .footer-column:nth-of-type(5) { flex: 0 1 190px; } /* the brand column is fixed at the wire's 405, with a 69 gap to the links */ body .LayoutBottom .msi-footer-brand { flex: 0 3 405px; min-width: 180px; margin-right: 21px; /* 48 flex gap + 21 = the wire's 69 */ } body .LayoutBottom .msi-footer-logo { display: block; width: 143px; height: 51px; } /* wire 516:426 / 516:5793 / 516:3378: the brand block is 215 tall at every width - logo 51, 32, tagline 52, 32, socials 48 */ body .LayoutBottom .msi-footer-tagline { margin: var(--msi-s6) 0 0; max-width: 405px; font-size: 16px; line-height: 1.6; color: var(--msi-white); opacity: .7; } body .LayoutBottom .msi-footer-brand .Control { margin-top: var(--msi-s6); } /* --- type ---------------------------------------------------------------- */ body .LayoutBottom .h4, body .LayoutBottom h4, body .LayoutBottom .nav-header .h4 { font-family: var(--msi-font); font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--msi-white); margin: 0 0 var(--msi-s4); opacity: 1; } body .LayoutBottom p, body .LayoutBottom li, body .LayoutBottom a, body .LayoutBottom .nav-list > li > a { font-family: var(--msi-font); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--msi-white); } body .LayoutBottom p, body .LayoutBottom .nav-list > li > a { opacity: .7; } body .LayoutBottom .nav-list > li > a:hover { opacity: 1; color: var(--msi-white); } body .LayoutBottom ul.nav-list { padding: 0; margin: 0; list-style: none; } body .LayoutBottom ul.nav-list > li { margin-bottom: var(--msi-s4); float: none; } body .LayoutBottom ul.nav-list > li > a { padding: 0; background: none; display: inline; } body .LayoutBottom ul.nav-list > li:last-child { margin-bottom: 0; } /* --- social: 48px orange circles, 12 apart (wire 516:453) ---------------- */ /* The brand column's copy is the one the wire draws. HTML2364 carries the same two links in column 4 under a "Connect With Us" heading the wire has no room for; hidden, never removed - the widget and its content stay in the file. */ body .LayoutBottom .msi-w-fcol4 .Control:not(:has(.msi-footer-links)) { display: none; } body .LayoutBottom ul.msi-footer-social { display: flex; gap: var(--msi-s3); list-style: none; padding: 0; margin: var(--msi-s6) 0 0; } body .LayoutBottom ul.msi-footer-social > li { float: none; margin: 0; } body .LayoutBottom ul.msi-footer-social > li > a { line-height: 0; display: block; } /* Facebook ships as the whole wire node (orange circle + ink glyph, 48x48). LinkedIn's export is the 24px glyph alone, so its circle is drawn here. */ body .LayoutBottom ul.msi-footer-social > li > a > img { display: block; } /* Hover and focus on the social circles. The wire draws no hover state for these; added at Diego's request 2026-09-22, recorded in spec/BRIEF.md as an addition with no wire authority. Keyboard gets a visible ring, not just the pointer treatment. */ body .LayoutBottom ul.msi-footer-social > li > a, body .LayoutBottom ul.msi-footer-social > li > a > img { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; } body .LayoutBottom ul.msi-footer-social > li > a:hover, body .LayoutBottom ul.msi-footer-social > li > a:focus-visible { transform: translateY(-2px); } body .LayoutBottom ul.msi-footer-social > li.msi-social-plate > a:hover, body .LayoutBottom ul.msi-footer-social > li.msi-social-plate > a:focus-visible { background: var(--msi-orange-dark, #e08800); } body .LayoutBottom ul.msi-footer-social > li > a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } body .LayoutBottom ul.msi-footer-social > li.msi-social-plate > a { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--msi-orange); } /* --- the four wire link columns ------------------------------------------ The live Order-by-Email / Fax / Phone widgets and MENULIST1660 are superseded by the wire's Shop / Resources / Company / Contact lists. Their content is NOT removed - HTML1443's address reappears in the Contact column, and the fax and order-by copy is folded into it. The widgets stay in FooterPage.html and in Theme.xml; only their rendering is suppressed, so nothing changes which area a widget belongs to and parity is untouched. */ /* the three link columns are MenuList widgets on menus 51 / 58 / 64; the old widgets sharing their areas stay hidden */ body .LayoutBottom .msi-w-fcol2 .Control:not(:has(.msi-footer-links)), body .LayoutBottom .msi-w-fcol3 .Control:not(:has(.msi-footer-links)), body .LayoutBottom .msi-footer-brand .msi-w-fcol1 .Control { display: none; } body .LayoutBottom .msi-footer-links ul { list-style: none; padding: 0; margin: 0; } body .LayoutBottom .msi-footer-links li { float: none; margin: 0 0 var(--msi-s4); } body .LayoutBottom .msi-footer-links li:last-child { margin-bottom: 0; } body .LayoutBottom .msi-footer-links a, body .LayoutBottom .msi-footer-links span, body .LayoutBottom .msi-footer-links address { font-family: var(--msi-font); font-weight: 400; font-size: 16px; line-height: 1.6; /* Diego 2026-09-22: the 697 homepage's solid grey, on every page and width */ color: #c2c4c5; font-style: normal; margin: 0; display: inline; text-decoration: none; } body .LayoutBottom .msi-footer-links a:hover, body .LayoutBottom .msi-footer-links a:focus { opacity: 1; color: var(--msi-white); text-decoration: none; } /* the wire's address wraps to three lines and owns the row height */ body .LayoutBottom .msi-footer-links address { display: block; } @media (min-width: 1440px) { /* Chrome sets "Conditions of Use" ~2px wider than Figma measures it, so at the wire's pinned 135px column it wrapped to two lines. The labels are single lines in the design; a couple of pixels into the 48px gutter is invisible. */ body .LayoutBottom .msi-footer-links li > a, body .LayoutBottom .msi-footer-links li > span { white-space: nowrap; } } /* --- bottom row: copyright + payment logos ------------------------------- */ body .LayoutBottom .msi-footer-copyright { font-family: var(--msi-font); font-weight: 400; font-size: 14px; line-height: 1.6; color: #c2c4c5; opacity: 1; margin: 0; } body .LayoutBottom ul.msi-footer-pay { display: flex; align-items: center; /* wire 516:511: four marks 32 tall with 40 between them */ gap: 40px; list-style: none; padding: 0; margin: 0; } body .LayoutBottom ul.msi-footer-pay > li { float: none; margin: 0; line-height: 0; } body .LayoutBottom ul.msi-footer-pay img { height: 32px; width: auto; } body .LayoutBottom .footer-bottom { display: flex; align-items: center; justify-content: space-between; /* No gap: the Bottom widgetarea trails the payment row and a flex gap to it pushed the marks 48px off the 1360 content edge the wire puts them on. The two visible children space themselves with auto margins instead. */ gap: 0; margin-top: var(--msi-s8); padding-top: 0; border-top: 0; min-height: 32px; } /* The copyright and the payment marks are the row; the Bottom widgetarea also sits here and would otherwise take a third share of `space-between` and pull the marks off the right edge the wire puts them on. */ body .LayoutBottom .footer-bottom .msi-footer-copyright { margin-right: auto; } body .LayoutBottom .footer-bottom ul.msi-footer-pay { margin-left: auto; } body .LayoutBottom .footer-bottom > .ac-widgetarea, body .LayoutBottom .footer-bottom .msi-w-fbottom { flex: 0 0 0; } body .LayoutBottom .footer-bottom p { font-size: 14px; line-height: 1.6; margin: 0; } body .LayoutBottom .footer-bottom img { height: 32px; width: auto; } /* MARKETING BAR (HTML1453). The theme puts "Quality you can trust / Prices you can afford / Customer service you can count on" in a full-width band above the footer columns. The wire folds that exact line into the brand column instead, which is where it now renders. Showing both duplicates the sentence, so the band is hidden here - the widget, its area and its content all remain in the theme and in the admin, so this is reversible by deleting one rule. Recorded as an open item: if Diego wants the band kept, drop .msi-footer-tagline instead. */ /* keyed on the wrapper alone: the store can put elements ahead of the footer's first div, and the theme preview wraps the widget in .ac-drop-target > .ac-widget-wrapper until Live Design strips them */ body .LayoutBottom .msi-w-marketing .Control:not(.Control .Control) { display: none; } body .LayoutBottom h2, body .LayoutBottom .msi-w-marketing .Control h2 { font-family: var(--msi-font); font-style: normal; font-weight: 600; font-size: 28px; line-height: 1.3; color: var(--msi-white); text-align: center; margin: 0 0 var(--msi-s8); } body .LayoutBottom h2 i, body .LayoutBottom .msi-footer-tagline i { font-style: normal; } /* ========================================================================== CART + ACCOUNT LABELS The wire pairs each 48px circle with a text label. The markup already carries them, but Bootstrap's `.visible-xs` hides them above 768. Unhide inside the utility bar only - `.visible-xs` elsewhere keeps its meaning. ========================================================================== */ @media (min-width: 992px) { body .topgrey .navbar-right .msi-ctl-label { display: inline !important; font-family: var(--msi-font); font-weight: 500; font-size: 16px; line-height: 1.4; color: var(--msi-ink); white-space: nowrap; } body .topgrey .navbar-right ul.nav.navbar-nav > li > a { gap: var(--msi-s2); } /* the wire's divider between the account and cart groups */ body .topgrey .navbar-right ul.nav.navbar-nav > li + li::before { content: ""; width: 1px; height: 24px; background: var(--msi-hairline); margin-right: var(--msi-s5); align-self: center; } body .topgrey .navbar-right ul.nav.navbar-nav > li { display: flex; align-items: center; } } /* The cart count. Wire 516:358 is a 12x12 red dot at +28,+9 inside the 48px circle 516:355 - on the glyph, never beside the "Cart" label. It is a child of `.in-block` (the circle) in HeaderPage.html so the label's width cannot move it. `.in-block` sets `font-size: 0` to kill the Font Awesome glyph, so the digit has to re-declare its own size. */ body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block > .badge { position: absolute; top: 9px; left: 28px; width: 12px; height: 12px; min-width: 0; padding: 0; display: flex; align-items: center; justify-content: center; background: #e3242b; color: #fff; font-size: 8px; font-weight: 600; line-height: 1; border-radius: 999px; text-shadow: none; box-shadow: none; } /* ========================================================================== MEGA MENU HEADER ROW Every panel carries a title (582:29910 The Company, 582:30288 Support, 516:11933 Instruments). The repeater cannot emit per-panel text, so the ROW is a real element added to the panel template in HeaderPage.html and the STRING comes from CSS, keyed on what the panel actually contains rather than on position - so reordering the menu in the admin cannot mislabel a panel. Title: Inter SemiBold 600, 16px / 1.6, #2c3a43. Gap to the list: 48px. ========================================================================== */ @media (min-width: 992px) { body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li.msi-menu-head { display: flex; align-items: center; justify-content: space-between; gap: var(--msi-s4); /* The wire's title -> list gap is 48 (582:29910, 582:30288, 516:11933). The panel already contributes its own 32px flex gap / grid row-gap, so the head adds only the remaining 16. Setting 48 here stacked on top of that and produced an 80px hole. */ margin: 0 0 var(--msi-s4); padding: 0; float: none; font-family: var(--msi-font); font-weight: 600; font-size: 16px; line-height: 1.6; color: var(--msi-ink); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li.msi-menu-head::before { content: "Menu"; /* replaced per panel below */ } /* the head spans the full width of the 4-column Instruments grid */ body .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:first-child > ul.dropdown-menu > li.msi-menu-head { grid-column: 1 / -1; } /* per-panel title, keyed on the panel's own links */ body .msi-w-nav .Control.MenuBar ul.dropdown-menu:has(> li > a[href^="/c/"]) > li.msi-menu-head::before { content: "Browse by Specialty"; } body .msi-w-nav .Control.MenuBar ul.dropdown-menu:has(> li > a[href*="About-Us"]) > li.msi-menu-head::before { content: "The Company"; } body .msi-w-nav .Control.MenuBar ul.dropdown-menu:has(> li > a[href*="Service-Worldwide"]) > li.msi-menu-head::before { content: "Support"; } /* "Browse All Instruments" belongs to the Instruments panel only (Diego 2026-09-23): the first dropdown, as the Instruments grid above; never in a panel titled by its About-Us or Service-Worldwide link, whatever else it lists */ body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li.msi-menu-head > a.msi-menu-all { display: none; } body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:first-child > ul.dropdown-menu > li.msi-menu-head > a.msi-menu-all { display: inline-flex; align-items: center; gap: var(--msi-s4); padding: 0; background: none; font-family: var(--msi-font); font-weight: 500; font-size: 16px; line-height: 1.2; color: var(--msi-orange); white-space: nowrap; } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li.msi-menu-head > a.msi-menu-all::after { content: ""; width: 20px; height: 20px; background: var(--msi-orange); -webkit-mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat; mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat; transform: rotate(-90deg); } body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li.msi-menu-head > a.msi-menu-all::before { content: none; } body .msi-w-nav .Control.MenuBar ul.dropdown-menu:has(> li > a[href*="About-Us"]) > li.msi-menu-head > a.msi-menu-all, body .msi-w-nav .Control.MenuBar ul.dropdown-menu:has(> li > a[href*="Service-Worldwide"]) > li.msi-menu-head > a.msi-menu-all { display: none; } } /* ========================================================================== UTILITY CONTROLS: Account then Cart, outlined lucide glyphs The markup emits Cart first, then Account, and draws them with Font Awesome 3.2.1 (`icon-shopping-cart`, `icon-user`) which are FILLED glyphs. The wire puts Account first and uses outlined lucide icons. Both are fixed without touching the markup: flex `order` reverses them, and the font glyph is replaced by a masked SVG. Note the two are not structurally alike - the cart's circle is a wrapping `.in-block` while the account's circle IS its ``. Both are normalised to "the circle holds the glyph on ::after". ========================================================================== */ @media (min-width: 992px) { /* wire order: Account, divider, Cart */ body .topgrey .navbar-right ul.nav.navbar-nav > li:nth-child(1) { order: 2; } body .topgrey .navbar-right ul.nav.navbar-nav > li:nth-child(2) { order: 1; } /* the divider belongs after Account, so move it onto the cart item */ body .topgrey .navbar-right ul.nav.navbar-nav > li + li::before { content: none; } body .topgrey .navbar-right ul.nav.navbar-nav > li:nth-child(1)::before { content: ""; width: 1px; height: 24px; background: var(--msi-hairline); /* the wire's divider (516:352) is a zero-width line, so its 1px of paint must come out of the following gap or everything after it shifts 1px */ margin-right: calc(var(--msi-s5) - 1px); align-self: center; } } /* Replace the Font Awesome glyph with an outlined lucide mask. The two controls are NOT structurally alike and must be targeted differently: cart
account So for the cart the WRAPPER is the circle and the is the glyph; for the account the is both. Using ::after on the cart's wrapper did not paint at all, so the cart masks its real element instead - which is also less indirection. */ /* the circle */ body .topgrey .msi-w-utility .Control .navbar-right ul.nav.navbar-nav > li > a .in-block, body .topgrey .msi-w-utility .Control .navbar-right ul.nav.navbar-nav > li > a > i.icon-user, body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block, body .topgrey .navbar-right ul.nav.navbar-nav > li > a > i.icon-user { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 0; } /* drop the Font Awesome glyph everywhere in this control */ body .topgrey .navbar-right ul.nav.navbar-nav > li > a i::before, body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block::before { content: none; } /* the glyph: the cart's inner , and the account's via ::after */ body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block > i, body .topgrey .navbar-right ul.nav.navbar-nav > li > a > i.icon-user::after { content: ""; /* Centre by position, not by flex. The circle was computing `display: block` despite the rule above, which left align/justify inert and parked the 24px glyph in the top-left corner. Absolute centring holds whatever display the circle ends up with. */ position: absolute; top: 50%; left: 50%; margin: -12px 0 0 -12px; display: block; width: 24px; height: 24px; background: var(--msi-ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; border: 0; } body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block > i { -webkit-mask-image: url("../images/menu/shopping-cart.svg"); mask-image: url("../images/menu/shopping-cart.svg"); } body .topgrey .navbar-right ul.nav.navbar-nav > li > a > i.icon-user::after { -webkit-mask-image: url("../images/menu/user.svg"); mask-image: url("../images/menu/user.svg"); } /* the platform wraps the logo in its `navigateurl` anchor; keep the anchor from adding an inline-box that offsets the 143x64 image box */ body .LayoutTopTop .Control.ImageLogo a { display: inline-block; line-height: 0; } /* ========================================================================== HOMEPAGE HERO — wire 652:695, 1440x681 directly under the header. Coordinates below are the wire's, measured from the hero's own top-left. copy block 652:711 80, 80 703 wide, column gap 40 headline 652:713 Inter Display Medium 80/1.06, black; the run "your standard." is white over the marker shape sub-copy 652:714 Inter 400 16/1.6 #262d31, 624 wide button 652:715 #ff9a00 pill, 24/32 padding, gap 8, label 16/600 marker 652:710 145, 251 554x99, a hand-drawn shape, not a radius plates 652:719 890, 63 264x264 | 652:720 1152, 63 208x264 photos 652:727 809, 151 413x353 | 652:728 839, 259 313x290 stat card 652:721 1177, 87 152x80 product card 652:729 1177, 252 158x50 The background shape, its 48px bottom corners and the three masked backdrop circles are all in images/hero/hero-bg.svg, stretched with preserveAspectRatio="none" so the band can go full-bleed past 1440. ========================================================================== */ body .msi-hero { position: relative; /* the pale plate slides 87px up under this band, so the hero has to win */ z-index: 1; /* The wire masks everything in this band to the frame (652:698). Without a clip the 1440-wide art layer hangs past the viewport below 992 and the page grows a horizontal scrollbar - 1137px of document in an 834 viewport. */ overflow: clip; min-height: 681px; /* Wider than 1440 the band must reach both edges. The shape, its gradient and the three circles (697:14140/14147-9) are one SVG stretched with the viewport; only the hand (697:14150) is a fixed layer, so the photo never distorts. The hand is the wire's composed backdrop with the gradient and circles subtracted, cropped to its node: 462x333 at 697,346 of the 1440 frame. calc(50% + 208px) puts its left edge at 50% - 23px. */ background: url("../images/hero/hero-hand-1440.png") calc(50% + 208px) 346px / 462px 333px no-repeat, url("../images/hero/hero-bg-1440.svg") center top / 100% 681px no-repeat; } @supports not (overflow: clip) { body .msi-hero { overflow: hidden; } } body .msi-hero__inner { position: relative; max-width: calc(var(--msi-content) + (var(--msi-gutter) * 2)); margin: 0 auto; min-height: 681px; padding: 80px var(--msi-gutter) 0; } body .msi-hero__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 703px; max-width: 100%; } body .msi-hero__title { margin: 0; font-family: var(--msi-font); font-weight: 500; font-size: 80px; line-height: 1.06; color: #000; } /* The marker is a drawn shape, so it rides behind the text as a background rather than being faked with a border-radius. */ body .msi-hero__mark { display: block; } body .msi-hero__mark em { font-style: normal; color: var(--msi-white); background: url("../images/hero/headline-highlight.svg") left center / 100% 99px no-repeat; /* the wire's marker is 99 tall (652:710); the 80/1.06 line box is 84.8, so the difference is padding rather than a taller background */ padding: 1px 8px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } body .msi-hero__lede { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; } body .msi-hero__sub { margin: 0; width: 624px; max-width: 100%; font-size: 16px; line-height: 1.6; color: var(--msi-ink-2); } body .msi-btn--primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--msi-s2); padding: 24px 32px; border: 0; border-radius: 999px; background: var(--msi-orange); color: var(--msi-ink); font-family: var(--msi-font); font-weight: 600; font-size: 16px; line-height: 1.4; white-space: nowrap; text-decoration: none; } body .msi-btn--primary::after { content: ""; width: 20px; height: 20px; background: var(--msi-ink); -webkit-mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat; mask: url("../images/menu/chevron-down.svg") center / 20px no-repeat; transform: rotate(-90deg); } body .msi-btn--primary:hover, body .msi-btn--primary:focus { background: var(--msi-orange-dark, #e08800); color: var(--msi-ink); text-decoration: none; } /* ---- the art, all placed against the 1280 content column ---- */ body .msi-hero__art { position: absolute; top: 0; bottom: 0; left: 50%; width: 1440px; margin-left: -720px; pointer-events: none; } body .msi-hero__plate { position: absolute; top: 63px; display: block; } body .msi-hero__plate--left { left: 890px; width: 264px; height: 264px; background: rgba(255, 255, 255, .3); border: 2px solid var(--msi-white); border-radius: 32px 0 0 32px; } body .msi-hero__plate--right { left: 1152px; width: 208px; height: 264px; background: var(--msi-white); border-radius: 0 32px 32px 0; } /* All three hero images are node SCREENSHOTS, not raw fills. A raw fill is the photographer's original on opaque white; the wire only ever shows it through a Figma mask, and that mask does not survive a fill export. A node screenshot comes out composed, with alpha where nothing is painted - including the -16.63deg rotation already baked into the forceps frame. */ body .msi-hero__photo { position: absolute; display: block; } /* The forceps. The rotation is baked into the node screenshot, so it is placed at the frame's own top-left, not at the rotated bounding box's y that figma-boxes.json records (151). Measured off the composite: 809,50. */ body .msi-hero__photo--1 { left: 809px; top: 50px; width: 413px; height: 353px; } body .msi-hero__photo--2 { left: 839px; top: 259px; width: 313px; height: 290px; } /* placed against the same centred 1440 box as the art */ body .msi-hero__stat, body .msi-hero__card { position: absolute; left: calc(50% - 720px + 1177px); z-index: 2; display: flex; flex-direction: column; } body .msi-hero__stat { top: 87px; width: 152px; gap: 12px; } body .msi-hero__card { top: 252px; width: 158px; gap: 6px; } /* 71 = the third avatar's 39 offset plus its own 32; the wire boxes the group to the art, not to the column (652:722) */ body .msi-hero__avatars { display: block; position: relative; width: 70px; height: 32px; } body .msi-hero__avatars img { position: absolute; top: 0; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; outline: 1px solid #fff; outline-offset: -1px; } body .msi-hero__avatars img:nth-child(1) { left: 0; } body .msi-hero__avatars img:nth-child(2) { left: 19px; } body .msi-hero__avatars img:nth-child(3) { left: 38px; } body .msi-hero__stat-label, body .msi-hero__product { font-weight: 600; font-size: 14px; color: #000; } body .msi-hero__stat-label { line-height: 1.3; } body .msi-hero__product { line-height: 1.6; } body .msi-hero__stock { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .25); } body .msi-hero__stock::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; background: url("../images/hero/stock-dot.svg") center / 8px no-repeat; } /* The live homepage hero is a single image with an imagemap; the wire replaces it. Hidden, never removed - the widget, its and its five elements stay in Files/DefaultPage.html. */ body.Default .LayoutContent .Control.ImageLogo { display: none; } /* The homepage bands are full-bleed, but `$$PAGELAYOUT$$` renders inside `.LayoutMiddle.container`, which caps it at the content width. Rather than escape with `100vw` - which counts the scrollbar and grows a horizontal bar, the bug already fixed on the menu scrim - the wrapper itself goes full width on this page only, and each band caps its own content. Keyed on `:has(.msi-hero)` so no other page template is touched. */ body .LayoutMiddle.container:has(.msi-hero) { width: 100%; max-width: none; padding-left: 0; padding-right: 0; } body .LayoutMiddle.container:has(.msi-hero) > .row { margin-left: 0; margin-right: 0; } body .LayoutMiddle.container:has(.msi-hero) .LayoutContent { padding-left: 0; padding-right: 0; } /* the widget rows that are not yet restyled keep the content column */ /* Bootstrap columns carry 15px of padding, which put every widget band at x=95 against the wire's 80 and 30px narrow. The band owns its own gutter. */ body .LayoutMiddle.container:has(.msi-hero) .LayoutContentInner > .row > [class*="col-"] { padding-left: 0; padding-right: 0; } body .LayoutMiddle.container:has(.msi-hero) .LayoutContentInner > .row { max-width: calc(var(--msi-content) + (var(--msi-gutter) * 2)); margin: 0 auto; padding: 0 var(--msi-gutter); } /* The theme puts 30px under the header. Every wire frame starts its first band flush against the header stack (hero at y=196 = the header's exact height), so the gap is removed. */ body .LayoutTop { margin-bottom: 0; } /* The homepage CMS body is the old hero image; the wire replaces it. Hidden at every width, never removed - Diego can empty the admin field at leisure. */ body .msi-cms-home { display: none; } /* ========================================================================== HOMEPAGE BANDS — the pale plate and its content column. Pale band 652:377: 0, 791, 1440x1277, #f8f9fb, radius 0 0 80px 80px. Everything from the trust bar to the CTA sits on it. ========================================================================== */ body .msi-band { position: relative; } /* Wire 652:377: the pale plate starts at y=791, which is 86 ABOVE the hero's lower edge (877) - it slides under the hero's curved bottom rather than starting where the hero stops. */ body .msi-band--pale { margin-top: -86px; padding-top: 182px; background: #f8f9fb; z-index: 0; } /* The plate does not stop at the trust bar. Sampled on the wire PNG it is #f8f9fb in the left margin from y=900 to y=2060 and ends at 2068, so it runs behind the featured row too. The product widgets live in the next .row (HomeTabs), which carries the rest of the plate and its 80px bottom radius. Full-bleed like the band above it, with the content centred at 1280. The Spotlight row (Diego's addition) sits on the plate as well, so the plate is taller than the wire's whenever Spotlight has items. */ body .LayoutMiddle.container:has(.msi-hero) .LayoutContentInner > .msi-band--pale + .row { max-width: none; padding: 0 max(var(--msi-gutter), calc((100% - var(--msi-content)) / 2)) 128px; background: #f8f9fb; border-radius: 0 0 80px 80px; } /* Empty state (wire 697:16717): no featured product flagged, so the row holds only its heading. It collapses, the plate closes 67 under the trust bar with its own rounded foot, and the catalogs sit 96 below it instead of 128. :has() cannot nest, hence :not(:has()) rather than :has(:not(:has())). */ body .LayoutContentInner > .msi-band--pale + .row:not(:has(.msi-pd-featured .homepage-product)) { display: none; } body .LayoutContentInner > .msi-band--pale:not(:has(+ .row .msi-pd-featured .homepage-product)) { padding-bottom: 67px; border-radius: 0 0 80px 80px; } body .LayoutContentInner:has(> .msi-band--pale):not(:has(> .msi-band--pale + .row .msi-pd-featured .homepage-product)) .msi-catalogs { margin-top: 96px; } body .msi-band__inner { max-width: calc(var(--msi-content) + (var(--msi-gutter) * 2)); margin: 0 auto; padding: 0 var(--msi-gutter); } /* --- trust bar — wire 652:455, 1280x206, four equal columns, gap 32 ------ */ body .msi-trust { display: flex; gap: var(--msi-s6); align-items: flex-start; list-style: none; margin: 0; padding: 0; } body .msi-trust__item { flex: 1 0 0; min-width: 0; float: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--msi-s4); text-align: center; } body .msi-trust__icon { display: block; width: 72px; height: 72px; } body .msi-trust__text { display: flex; flex-direction: column; align-items: center; gap: var(--msi-s4); width: 100%; } /* 652:468 tightens the gap to 8 where the heading wraps to two lines */ body .msi-trust__item--tight .msi-trust__text { gap: var(--msi-s2); } body .msi-trust__head { font-family: var(--msi-font); font-weight: 500; font-size: 24px; line-height: 1.2; color: #000; } body .msi-trust__sub { font-family: var(--msi-font); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--msi-ink-2); } /* The diagonal corner ribbons the platform paints over product images ("Featured!", "New!", "Sale!", "Spotlight!"). No wire draws one, on any page type. Diego 2026-09-22: hide for now, reversible with this one rule. The flags keep working - "Featured Item" still fills PRODUCTDISPLAY1310 and "Spotlight" still fills 1311; only the ribbon graphic is suppressed. Selectors confirmed against _work/live/category.html, not the fixtures: `div.abs.product-flag` with left/top/bottom/right plus a variant class. */ body .product-flag { display: none !important; } /* --- section head — wire 652:486, title + sub left, button right ---------- */ body .msi-sectionhead { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--msi-s6); margin: 0; } body .msi-sectionhead__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--msi-s4); } body .msi-sectionhead__title { margin: 0; font-family: var(--msi-font); font-weight: 500; font-size: 40px; line-height: 1.2; color: #000; } body .msi-sectionhead__sub { font-family: var(--msi-font); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--msi-ink-2); } /* wire: the trust bar ends at 1179 and the featured band starts at 1318 */ /* padding !important: the wrapper carries `.pad-10 { padding: 10px !important }` (deputy.css:20) and `.pad-b-only` (deputy.css:1032) zeroes only the other three sides, which left 10px under the card row inside the plate. */ body .Control.ProductDisplay .pad-10 { margin-top: 60px; padding: 0 !important; } body .Control.ProductDisplay + .Control.ProductDisplay .pad-10 { margin-top: 96px; } /* The card row (wire 652:494): four equal cards, gap 32, 64 below the section head. The repeater leaves an empty $$ITEM$$ wrapper and a clearfix beside the cards; both are hidden rather than removed. */ body .Control.ProductDisplay .pad-10 > div:not(.msi-sectionhead) { display: flex; gap: var(--msi-s6); align-items: flex-start; margin-top: 64px; } body .Control.ProductDisplay .pad-10 > div:not(.msi-sectionhead) > .clear, body .Control.ProductDisplay .pad-10 > div:not(.msi-sectionhead) > div:empty { display: none; } /* The store nests the cards in the Group layoutarea's bare
, beside the repeater's hidden inputs; contents lets the cards join the row above. */ body .Control.ProductDisplay .pad-10 > div:not(.msi-sectionhead) > div:has(> .homepage-product) { display: contents; } body .msi-sectionhead__widgethead { display: none; } body .homepage-product { position: relative; flex: 1 0 0; min-width: 0; width: auto; float: none; padding: 0; margin: 0; /* !important: each card carries `.m-b-30 { margin-bottom: 30px !important }` (deputy.css:340), which added 30px under the row and made the plate 30px taller than the wire */ margin-bottom: 0 !important; /* wire 652:495 is a flex column with gap 32 between tile and caption */ display: flex; flex-direction: column; align-items: flex-start; gap: var(--msi-s6); } /* --- product card — wire 652:495 ---------------------------------------- Tile 652:496: 310 tall, white, 1px #eee, radius 40, clipped. Photo 652:497: 226x226 at 34,41 inside it. Caption 652:498: gap 10 - stock line, name 18/600, item number 16/400. The wire drops the price and the "View" link; both stay in the markup and are hidden here, along with Quick View. Nothing is deleted. */ /* style.css:93 is `.LayoutContent .homepage-product .thumbnail` with `margin-bottom: 10px` and `line-height: 180px`. Three classes, so it beat a plain `.homepage-product .thumbnail`; with the card's own 32 gap that made the tile-to-caption distance 42 against the wire's 32. Same chain to win. */ body .LayoutContent .homepage-product .thumbnail, body .LayoutContent .Control.ProductDisplay .homepage-product .thumbnail { margin-bottom: 0; min-height: 0; line-height: normal; } /* The whole card is the product link, not just the 310px photo tile - the caption and the hover price pill sat in dead space. The tile is `static` so its stretched ::after resolves against the card; the photo inside it is at the card's 0,0 either way, so its coordinates do not change. */ body .homepage-product .thumbnail { display: block; /* !important only to beat the theme's `.rel { position: relative !important }` (deputy.css:1108), which this carries and which trapped the stretched link inside the photo tile */ position: static !important; height: 310px; padding: 0; margin: 0; background: var(--msi-white); border: 1px solid #eee; border-radius: 40px; overflow: hidden; width: 100%; } /* object-fit: contain, not cover. The wire's photos are 226 wide with their own heights (226, 217, 197) and all centred on the tile's y=155 - cropping a surgical instrument to a square would cut the instrument off. */ /* The wire's 34/41 are measured inside the tile's 1px border. The tile is `static` now (so the card-wide link can escape it), which makes the CARD the positioning box - and the card has no border - so each offset is +1. */ body .homepage-product .thumbnail img { position: absolute; left: 35px; top: 42px; width: 226px; height: 226px; object-fit: contain; /* the theme caps this image at max-height: 248px, which clipped the 250px hover size by 2 */ max-height: none; transition: left .15s ease, top .15s ease, width .15s ease, height .15s ease; } body .homepage-product .thumbnail .quick-view, body .homepage-product .caption .text-muted, body .homepage-product .caption .prod_view { display: none; } body .homepage-product div.caption { margin: 0; } body .homepage-product .caption { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; } body .homepage-product .caption > p { margin: 0; } body .msi-card__stock { display: flex; align-items: center; gap: 6px; font-family: var(--msi-font); font-weight: 600; font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .25); } body .msi-card__stock::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; background: url("../images/hero/stock-dot.svg") center / 8px no-repeat; } /* Diego 2026-09-23: these cards (Featured, Recently Viewed) carry no stock data, so the fixed "In Stock" is hidden; the line keeps its height so nothing moves */ body .msi-card__stock { visibility: hidden; } body .homepage-product .caption > p { width: 100%; } body .homepage-product .caption > p > a { display: block; font-family: var(--msi-font); font-weight: 600; font-size: 18px; line-height: 1.6; color: #000; text-decoration: none; } body .msi-card__item { font-family: var(--msi-font); font-weight: 400; font-size: 16px; line-height: 1.6; color: var(--msi-ink-2); } /* The Vimeo demo block (HTML2356). Diego 2026-09-22: dropped - the wire has no slot for it at any width, in either state. Hidden, never removed: the Apollo tracking script lives in the same widget and must keep running, which it does because a