/* ==========================================================================
MSI Precision - 2026 refresh, responsive layer
Designed breakpoints, taken from the Figma frames: 1440, 834, 440.
Snapped to Bootstrap 3's existing boundaries so nothing fights the grid:
>= 992px desktop (matches the 1440 frames)
768-991 tablet (matches the 834 frames)
<= 767 mobile (matches the 440 frames)
========================================================================== */
/* ---- tablet: 834 frames ------------------------------------------------- */
@media (max-width: 991px) {
/* measured off the wires: 516:5570 sits at x=40 in the 834 frame */
:root { --msi-gutter: 40px; }
body .container { padding-left: var(--msi-gutter); padding-right: var(--msi-gutter); }
body h1, body .h1 { font-size: 40px; }
body h2, body .h2 { font-size: 32px; }
body h3, body .h3 { font-size: 24px; }
.msi-band { padding: var(--msi-s8) 0; }
.msi-section-title { font-size: 32px; }
}
/* ---- mobile: 440 frames ------------------------------------------------- */
@media (max-width: 767px) {
/* 516:3252 sits at x=24 in the 440 frame */
:root { --msi-gutter: 24px; }
body h1, body .h1 { font-size: 32px; }
body h2, body .h2 { font-size: 26px; }
body h3, body .h3 { font-size: 22px; }
body h4, body .h4 { font-size: 18px; }
.msi-band { padding: var(--msi-s7) 0; }
.msi-section-title { font-size: 26px; }
.msi-section-intro { margin-bottom: var(--msi-s6); }
/* touch targets stay >= 44px regardless of what the wire draws */
body .btn, body input[type="submit"], body button.btn { min-height: 48px; }
}
/* ==========================================================================
CHROME BELOW 992px
Bootstrap 3 swaps the navbars to their collapsed form here and reveals
`.navbar-header.visible-xs`, which carries a "Menu" brand link and the
three-bar toggle. The wires show a single round hamburger beside the logo
and no "Menu" wordmark at all, so the brand is hidden (not removed) and the
toggle is restyled. Neither menu bar loses a merge code or a widget area.
========================================================================== */
@media (max-width: 991px) {
/* utility bar keeps only the phone line, centred.
Bootstrap's .visible-xs carries `display:block !important`, so hiding the
duplicate "Menu" header needs the same weight. This is one of the few
places !important is the correct tool rather than a shortcut. */
body .topgrey .navbar-header,
body .topgrey .navbar-header.visible-xs,
body .topgrey .navbar-brand { display: none !important; }
/* cart + account collapse to bare icons; the wire draws neither below 1440,
so they are kept but made unobtrusive rather than removed */
body .topgrey .navbar-right { float: right; margin: 0; }
body .topgrey .navbar-right ul.nav.navbar-nav { display: flex; gap: var(--msi-s3); margin: 0; }
body .topgrey .navbar-right ul.nav.navbar-nav > li { float: none; }
body .topgrey .navbar-right ul.nav.navbar-nav > li > a { padding: var(--msi-s2); }
body .topgrey .navbar-right .visible-xs { display: none !important; }
body .topgrey .navbar-right ul.nav.navbar-nav > li > a .in-block,
body .topgrey .navbar-right ul.nav.navbar-nav > li > a > i {
width: 32px; height: 32px; font-size: 16px;
display: inline-flex; align-items: center; justify-content: center;
}
body .topgrey .navbar-collapse.collapse { display: block !important; height: auto !important; }
body .topgrey ul.nav.navbar-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--msi-s2);
}
body .topgrey ul.nav.navbar-nav > li > a { padding: var(--msi-s2); font-size: 14px; }
/* the utility link group's secondary items have no room here */
body .topgrey .navbar-collapse > ul.nav.navbar-nav > li:not(:first-child) { display: none; }
/* Bootstrap's own collapse boundary is 768px, not 992. Between 768 and 991
it force-opens .navbar-collapse with `display:block !important` and hides
.navbar-toggle, so at 834 the nav renders as an expanded list and the
header measures ~525px against the wire's 151. Both have to be reversed
with the same weight bootstrap used. */
body .msi-w-nav .Control.MenuBar .navbar-collapse.collapse:not(.in) {
display: none !important;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse.collapse.in {
display: block !important;
height: auto !important;
}
body .msi-w-nav .Control.MenuBar .navbar-header,
body .msi-w-nav .Control.MenuBar .navbar-toggle {
display: flex !important;
}
/* cart + account move into the header row beside the hamburger, so the
orange strip keeps the wire's single-line height */
/* Neither wire draws cart or account below 992 - checked against 516:3257
(440) and 516:5565 (834), which hold only the phone line. An earlier pass
parked them at the right of the orange strip; Diego called that out as not
in the design. Hidden, not removed: the markup and its merge codes stay.
NOTE: this leaves no cart entry point below 992. */
body .topgrey .navbar-right { display: none; }
/* white row: logo left, hamburger right (absolutely placed, above) */
body .LayoutTopTop { position: relative; }
/* 834 row: logo 40..183, 76 gap, search 259..714, hamburger 746..794.
So the row keeps the wire's 76 gap and reserves 80 on the right. */
body .LayoutTopTop > .container > .row {
padding-right: 80px;
gap: 76px;
align-items: center;
}
body .LayoutTopTop .Control.ImageLogo img { height: 46px; width: 102px; }
/* utility strip is one line: 8 padding + a 22px line = 38 (wire 516:5565).
The first-child chain is repeated because msi-refresh.css pins padding on
it at 0-5-3 to beat style.css:966, which this would otherwise lose to. */
body .topgrey { min-height: 0; }
body .topgrey .navbar-collapse { padding: 0; }
body .topgrey ul.nav.navbar-nav > li > a,
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 {
padding: var(--msi-s2) 0;
line-height: 1.4;
}
/* The blue bar carries only the drawer below 992; while closed it must take
no height at all or it adds 46px to the header stack (wire 516:5564 = 151).
msi-refresh.css pins min-height:46px on the same element with six classes,
so this has to match that chain to win. */
body .LayoutTopTop .msi-w-nav .Control.MenuBar .navbar-default.navbar-static-top,
body .msi-w-nav .Control.MenuBar .navbar {
min-height: 0;
border: 0;
/* Bootstrap gives .navbar `position: relative`, which makes IT the
containing block for the absolutely-positioned toggle - and it sits below
the header row, so the toggle landed 150px low. Going static hands the
job to .LayoutTopTop, which is where the wire's coordinates are measured
from. */
position: static;
}
/* Header row 113 (wire 516:5569): the wire's own padding is asymmetric -
content frame 516:5570 sits at y=62 in a band running 38..151, so 24 above
and 25 below. */
body .LayoutTopTop > .container {
padding-top: 24px;
padding-bottom: 25px;
}
body .LayoutTopTop > .container > .row { min-height: 64px; }
body .LayoutTopTop .Control.ImageLogo img { height: 64px; width: 143px; }
/* Below 992 the wires show NO blue nav bar: the header is a 38/36 utility
strip plus ONE row holding the logo and a round hamburger (834 header
516:5564 = 151 total, 440 = 36 + 80). So the blue bar collapses to nothing
while closed and the toggle is lifted into the header row. The bar itself
is never removed - it still carries the drawer when open. */
body .msi-w-nav .Control.MenuBar .navbar-default.navbar-static-top {
background: transparent;
min-height: 0;
margin: 0;
}
/* The toggle is absolutely positioned, and its nearest positioned ancestor
is .LayoutTopTop - NOT the navbar, which now sits below the header row with
min-height 0. So `top: 0; height: 100%` anchored it to the wrong box and
dropped it 24px below the row. Anchor it explicitly instead: the wire puts
the 48 circle centred in the header row, i.e. at the utility strip's height
plus half the row's spare space. 834: 38 + (113-48)/2 = 70 (wire 516:5578). */
body .msi-w-nav .Control.MenuBar .navbar-header {
position: absolute;
right: var(--msi-gutter);
top: 70px;
height: 48px;
display: flex;
align-items: center;
float: none;
margin: 0;
}
body .msi-w-nav .Control.MenuBar .navbar-brand { display: none; }
body .msi-w-nav .Control.MenuBar .navbar-toggle {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
float: none;
margin: 0;
width: 48px;
height: 48px;
padding: 0;
border: 1px solid var(--msi-hairline);
border-radius: 50%;
background: transparent;
}
/* the wire's glyph is lucide/menu at 24x24 (516:3255, 516:5579), so the bars
span 24, not Bootstrap's 22 or the 18 an earlier pass used */
body .msi-w-nav .Control.MenuBar .navbar-toggle .icon-bar {
background: var(--msi-ink);
width: 24px;
height: 2px;
margin: 4px auto;
}
/* the drawer, once open, is the blue panel */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom.in,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom.collapsing {
background: var(--msi-blue);
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom {
max-width: none;
padding: 0 var(--msi-gutter);
border-top: 1px solid rgba(255, 255, 255, .15);
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav {
display: block;
gap: 0;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav.navbar-nav > li > a {
justify-content: space-between;
padding: var(--msi-s4) 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
/* submenus stack inline in the drawer rather than floating as panels */
body .msi-w-nav .Control.MenuBar ul.dropdown-menu {
position: static;
float: none;
width: auto;
padding: 0 0 var(--msi-s4) var(--msi-s4);
background: transparent;
border-radius: 0;
}
body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a {
color: var(--msi-white);
font-size: 16px;
padding: var(--msi-s2) 0;
}
body .msi-w-nav .Control.MenuBar ul.dropdown-menu > li > a::before {
flex: 0 0 32px;
width: 32px;
height: 32px;
background-size: 18px;
}
/* FOOTER at 834 (wire 516:5788).
Brand takes its own row, centred at the wire's 405; the four link columns
then share one row 754 wide with space between them. The desktop pins on
.footer-column widths have to be released or they stay at the 1440 values. */
/* Below 992 the wire does NOT draw a plate at the viewport width: it anchors
the same 1440-wide vector to the RIGHT edge over a solid band, so the
rounded top-left corner is off-canvas and the left edge is square. The tab
therefore stays 184px from the right at every width. */
/* wire 516:5792: content top 115, and 80 below the bottom row */
body .LayoutBottom { padding: 115px 0 80px; }
body .LayoutBottom::after {
inset: 35px 0 0 0;
border-radius: 0;
}
body .LayoutBottom::before {
left: 0;
right: 0;
width: auto;
/* 35 is where the plate goes solid at 834 (wire 516:5790 top), plus the
1px overlap that stops the join anti-aliasing into a hairline. */
height: 36px;
clip-path: none;
background: url("../images/footer/plate-834.svg") right top / 1440px 611.5px no-repeat;
}
/* 834 links are 14/1.6, not the 16 the desktop columns use (wire 516:5848).
The SIZE has to go on the li as well: the li kept the 16px body size, so
its line box stayed 25.6 and the row pitch came out 41.6 against the
wire's 38 (516:5851 -> 5852). 14 x 1.6 = 22.4, plus the 16 gap. */
body .LayoutBottom .msi-footer-links li,
body .LayoutBottom .msi-footer-links a,
body .LayoutBottom .msi-footer-links span,
body .LayoutBottom .msi-footer-links address { font-size: 14px; line-height: 1.6; }
body .LayoutBottom .msi-footer-links li { margin-bottom: var(--msi-s4); }
/* wire 516:5878: 262 wide, wrapping after "Specialty" */
body .LayoutBottom .msi-footer-copyright { max-width: 262px; }
/* Resources is the one fixed column; the rest size to content (wire 516:5858) */
body .LayoutBottom .footer-column:nth-of-type(3) { width: 186px; }
/* Grid, not wrapped flex: the brand has to sit alone on the first row at the
wire's 405 centred, and a 405-wide flex item leaves 349px that Shop and
Resources fit into, so they came up beside it. `grid-column: 1 / -1` makes
the break structural instead of depending on how wide the labels happen
to set. */
body .LayoutBottom .footer-row {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: space-between;
/* the brand column takes the first row, so this is the brand-to-links gap:
48 at 834 (516:5820 bottom -> 516:5847 top), not 64 */
row-gap: var(--msi-s7);
column-gap: 0;
}
body .LayoutBottom .footer-column:nth-of-type(2),
body .LayoutBottom .footer-column:nth-of-type(3),
body .LayoutBottom .footer-column:nth-of-type(4),
body .LayoutBottom .footer-column:nth-of-type(5) { flex: 0 1 auto; margin-left: 0; }
/* 0 0 405px does not force a line break in a wrap container - the link
columns came up beside the brand. Full width, with the wire's 405 as a
max-width on the content inside it. */
/* The brand must fill the row to force a wrap; a max-width on the item itself
shrinks it back below 100% and the link columns come up beside it. So the
item is full width and the wire's 405 caps the content inside. */
body .LayoutBottom .msi-footer-brand {
grid-column: 1 / -1;
width: 405px;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
body .LayoutBottom .msi-footer-brand .msi-footer-tagline {
max-width: 405px;
margin-left: auto;
margin-right: auto;
}
body .LayoutBottom .msi-footer-brand .msi-footer-logo { margin: 0 auto; }
body .LayoutBottom ul.msi-footer-social { justify-content: center; }
/* the desktop nowrap would overflow these narrower columns */
body .LayoutBottom .msi-footer-links li > a,
body .LayoutBottom .msi-footer-links li > span { white-space: normal; }
}
/* ==========================================================================
CHROME BELOW 768px
This block must stay AFTER the 991 block: the two overlap, and the mobile
values only win on source order. Every number is read off the 440 frame.
========================================================================== */
@media (max-width: 767px) {
/* 516:3252 sits at x=24 in the 440 frame */
:root { --msi-gutter: 24px; }
/* utility strip 36 = 8 padding + Inter Medium 14/1.4 (wire 516:3257, 516:3260) */
body .topgrey ul.nav.navbar-nav > li > a,
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 {
line-height: 1.4;
font-size: 14px;
padding: var(--msi-s2) 0;
}
/* header row 80 = 17 padding around the 46-tall logo (wire 516:3251, 516:3252) */
body .LayoutTopTop > .container { padding-top: 17px; padding-bottom: 17px; }
body .LayoutTopTop > .container > .row { min-height: 46px; padding-right: 0; gap: 0; }
/* 440: 36 + (80-48)/2 = 52 (wire 516:3253) */
body .msi-w-nav .Control.MenuBar .navbar-header { top: 52px; }
/* The 440 wire draws NO search field in the header row. It is hidden here,
not removed - the input stays in the DOM and one rule brings it back.
Where mobile search should actually live is undesigned; see ROADMAP. */
body .LayoutTopTop > .container .h-search,
body .LayoutTopTop > .container > .row > [class*="col-"]:last-child { display: none; }
body .LayoutTopTop .Control.ImageLogo img { height: 46px; width: 102px; }
/* response.css:37 adds 25px under the logo below 768, which makes the header
row 105 against the wire's 80 */
body .LayoutTopTop .Control.ImageLogo { margin-bottom: 0; }
body .topgrey .navbar-right { height: 36px; }
body .msi-w-nav .Control.MenuBar .navbar-toggle { width: 48px; height: 48px; }
/* the search pill matches the logo's 46 so the row lands on the wire's 80;
at 48 it drove the row to 82 */
body .h-search input[type="text"],
body .h-search input[type="search"],
body .h-search input.AutocompleteSearchBox[type="text"] {
height: 46px;
min-height: 46px;
padding-left: 46px;
background-size: 20px;
}
}
/* ==========================================================================
DRAWER SUBMENUS BELOW 992
There is no hover on touch, and the theme emits `data-toggle=""` on the
trigger so Bootstrap's dropdown JS never binds - a tap would do nothing and
the submenu would be unreachable. The desktop open-state rules live inside
`@media (min-width: 992px)`, so below that the panels fall back to
Bootstrap's `display:none` and simply never appear.
Rather than invent a JS accordion the wire does not draw, the drawer shows
every submenu inline and always expanded. Nothing is behind an interaction
that does not exist, and each link is one tap away.
========================================================================== */
@media (max-width: 991px) {
/* Submenus stack inline and start CLOSED. `js/msi-menu.js` adds `.msi-open`
to the parent li on tap; the parent link does not navigate while it has
children, which is what a chevron promises. */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu {
display: block;
position: static;
float: none;
width: auto;
min-width: 0;
max-width: none;
transform: none;
box-shadow: none;
border: 0;
background: none;
margin: 0;
padding: 0;
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height .28s ease, opacity .2s ease;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-open > ul.dropdown-menu {
max-height: 80vh;
opacity: 1;
padding-bottom: var(--msi-s2);
}
/* The band marks the open PARENT only. Putting it on the li tinted the whole
expanded group, which reads as a separate panel rather than a section. */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-open > a {
background: rgba(255, 255, 255, .08);
/* The band needs air either side of the label, but the label must stay on
the same left edge as every closed row - so the padding is cancelled by
an equal negative margin and the band grows outward into the gutter. */
padding-left: var(--msi-s3);
padding-right: var(--msi-s3);
margin-left: calc(var(--msi-s3) * -1);
margin-right: calc(var(--msi-s3) * -1);
border-radius: 8px;
border-bottom-color: transparent;
}
/* Tapping leaves focus on the parent link, and the UA ring drew a black box
around the open band. Keyboard focus still gets a visible ring. */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li > a:focus {
outline: none;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li > a:focus-visible {
outline: 2px solid var(--msi-white);
outline-offset: -2px;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a {
padding: var(--msi-s2) 0 var(--msi-s2) var(--msi-s3);
font-weight: 400;
opacity: .7;
border: 0;
}
/* Bootstrap paints .dropdown-menu > li > a:hover #f5f5f5, which on the blue
drawer is a white bar under white text. The drawer says hover by lifting
the item out of its dimmed state, not by changing the background. */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a:hover,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a:focus,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li > a:active {
opacity: 1;
background: none;
color: var(--msi-white);
}
/* Cart and Account, moved into the drawer by js/msi-menu.js. Every glyph rule
in msi-refresh.css is scoped to `.topgrey .navbar-right`, which no longer
contains them once moved, so the mask treatment is restated here against
`.msi-drawer-util` rather than the rules being loosened at desktop. */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--msi-s3);
}
/* Both rows carry the desktop dropdown - the cart contents table and the whole
sign-in form. In the drawer they are direct links, so the panel is hidden
and no chevron is drawn; js/msi-menu.js swaps the href to the real page. */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > ul.dropdown-menu {
display: none;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a::after {
content: none;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util .msi-ctl-label {
display: inline !important;
font-size: 16px;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a i::before,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a .in-block::before {
content: none;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a .in-block,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a > i.icon-user {
position: relative;
display: inline-block;
width: 24px;
height: 24px;
font-size: 0;
border: 0;
flex: 0 0 24px;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a .in-block > i,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a > i.icon-user::after {
content: "";
position: absolute;
inset: 0;
display: block;
width: 24px;
height: 24px;
background: var(--msi-white);
-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 .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a .in-block > i {
-webkit-mask-image: url("../images/menu/shopping-cart.svg");
mask-image: url("../images/menu/shopping-cart.svg");
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util > a > i.icon-user::after {
-webkit-mask-image: url("../images/menu/user.svg");
mask-image: url("../images/menu/user.svg");
}
/* the count badge rides the cart glyph, same as it does at 1440 */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-util .in-block > .badge {
position: absolute;
top: -4px;
left: 14px;
width: 14px;
height: 14px;
min-width: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: #e3242b;
color: #fff;
font-size: 9px;
font-weight: 600;
line-height: 1;
border-radius: 999px;
text-shadow: none;
}
/* the search row js/msi-menu.js moves into the drawer below 768 */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-search {
padding: var(--msi-s4) 0;
border-bottom: 1px solid rgba(255, 255, 255, .12);
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-search .h-search {
float: none;
width: 100%;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-search .h-search input[type="text"],
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-drawer-search .h-search input[type="search"] {
width: 100%;
height: 48px;
}
/* the panel title is desktop chrome; in a drawer the parent link is the title */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom ul.dropdown-menu > li.msi-menu-head {
display: none;
}
/* the chevron rotates to say open, so it must not sit at half opacity */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown > a::after {
opacity: .7;
transition: transform .28s ease, opacity .2s ease;
}
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.msi-open > a::after {
transform: rotate(180deg);
opacity: 1;
}
/* no scrim in the drawer */
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:hover::after,
body .msi-w-nav .Control.MenuBar .navbar-collapse-bottom > ul.nav > li.dropdown:focus-within::after {
content: none;
}
}
/* ==========================================================================
FOOTER at 440 (wire 516:3358)
Gutter 24. Brand left-aligned, not centred as at 834. Link columns become a
2x2 grid, each 172 wide with 48 between (wire 516:3434/3443/3451/3457). The
bottom row stacks: payment marks first, then the copyright, both centred
(wire 516:3363 at x=45 and 516:3376 at x=66, each centred in 440).
========================================================================== */
@media (max-width: 767px) {
/* Wire offsets inside the plate (516:3358, relative to its box top):
brand 90, columns row 1 at 374, row 2 at 739, marks 1064, copyright 1120,
plate bottom 1204. So: 48 between the two column rows, 69 from the brand
(the extra 21 as its own margin, since a grid row-gap is uniform), 56 to
the bottom row and 40 below the copyright. */
/* wire 516:3377 sits at top 90, not the 834 value of 115 */
body .LayoutBottom { padding-top: 90px; padding-bottom: 40px; }
/* 34 solid-from at 440 (wire 516:3360 top) + the 1px overlap, not the 834 value */
body .LayoutBottom::before {
height: 35px;
background-image: url("../images/footer/plate-440.svg");
}
body .LayoutBottom::after { inset: 34px 0 0 0; }
body .LayoutBottom .footer-row {
/* 172 at the wire's 440; narrower phones (375, 360) shrink the pair */
grid-template-columns: repeat(2, minmax(0, 172px));
justify-content: space-between;
row-gap: var(--msi-s7);
}
body .LayoutBottom .footer-bottom { margin-top: 56px; }
/* The 21 is PADDING, not margin: the theme ships
`[class*="col-md"] { margin-bottom: inherit !important }` and the brand
column carries col-md-3, so any margin-bottom here is forced to 0. Padding
grows the grid item's height instead, which moves the next row the same way. */
body .LayoutBottom .msi-footer-brand {
width: auto;
margin: 0;
padding-bottom: 21px;
text-align: left;
}
/* Everything above the bottom block is left-aligned at 440 (wire 516:3377 is
items-start). Only the marks and the copyright are centred. The columns were
inheriting `center`, and the desktop `:last-child { margin-left: auto }`
pushed Contact 12px right of its 244 track. */
body .LayoutBottom .footer-column,
body .LayoutBottom .footer-column .msi-footer-heading,
body .LayoutBottom .msi-footer-links { text-align: left; }
/* 14px is the 834 value and it leaks down here because that block is
max-width:991. The 440 wire (516:3436-3462) is Inter 400 16/1.6. */
body .LayoutBottom .msi-footer-links li,
body .LayoutBottom .msi-footer-links a,
body .LayoutBottom .msi-footer-links span,
body .LayoutBottom .msi-footer-links address { font-size: 16px; line-height: 1.6; }
body .LayoutBottom .footer-row > .footer-column:last-child { margin-left: 0; }
body .LayoutBottom .msi-footer-links a,
body .LayoutBottom .msi-footer-links span { overflow-wrap: anywhere; }
body .LayoutBottom .footer-column:nth-of-type(3) { width: auto; }
body .LayoutBottom .msi-footer-brand .msi-footer-logo { margin: 0; }
body .LayoutBottom .msi-footer-brand .msi-footer-tagline { margin-left: 0; margin-right: 0; }
body .LayoutBottom ul.msi-footer-social { justify-content: flex-start; }
body .LayoutBottom .footer-bottom {
flex-direction: column;
align-items: center;
gap: var(--msi-s5);
}
/* the marks sit above the copyright here, so the auto margins that order
them on one row at 1440 have to be cleared */
body .LayoutBottom .footer-bottom .msi-footer-copyright {
order: 2;
/* wire 516:3376: the copyright is a 308-wide block centred in 440, wrapping
to two lines - not a full-width line with centred text */
max-width: 308px;
margin: 0 auto;
text-align: center;
}
body .LayoutBottom .footer-bottom ul.msi-footer-pay {
order: 1;
margin: 0;
/* the wire keeps the 40px gap here too: 57+49+70+54 plus 3x40 = 350,
centred in 440 at x=45 (516:3363) */
gap: 40px;
}
}
/* ---- homepage hero at 834 (wire 697:19648) ----------------------------------
The copy centres above the art. The art, the stat card and the product card
are the 1440 composition scaled by .8837 (264 -> 233.29 on the plates); with
that scale every piece lands on its 834 box, so the 1440 layout is reused
rather than re-placed. The wrist below the front hand has no 1440
counterpart, so it is its own image: the glove pixels of the wire's 834 render
with the backdrop subtracted (the node export carries the photo's white).
Below 1315 the 1440 composition's product card runs past the window, so the undesigned 992-1314 range uses this
layout too (Diego 2026-09-24). */
@media (min-width: 768px) and (max-width: 1314px) {
body .msi-hero,
body .msi-hero__inner { min-height: 862px; }
body .msi-hero {
background: url("../images/hero/hero-bg-834.svg") center top / 100% 862px no-repeat;
}
body .msi-hero__inner { padding-top: 48px; }
body .msi-hero__inner::after {
content: "";
position: absolute;
left: calc(50% - 311px);
top: 647px;
width: 304px;
height: 215px;
background: url("../images/hero/hero-wrist-834.png") 0 0 / 304px 215px no-repeat;
z-index: 1;
pointer-events: none;
}
body .msi-hero__copy {
width: 703px;
align-items: center;
gap: 32px;
text-align: center;
}
body .msi-hero__lede { align-items: center; }
/* Figma lays the headline on a whole-pixel pitch: 118 = 2 x 59 */
body .msi-hero__title { width: 100%; font-size: 56px; line-height: 59px; }
body .msi-hero__mark em {
background-size: 100% 71px;
padding: 1.5px 8px;
}
/* 22.1 not 22.4: Figma sets the two lines at 22 each; 22.1 keeps the ratio
within 1.6 +- .03 while the stack below lands on the wire */
body .msi-hero__sub { width: 533px; font-size: 14px; line-height: 22.1px; }
body .msi-hero__art,
body .msi-hero__stat,
body .msi-hero__card {
transform-origin: 0 0;
transform: scale(.8837);
}
body .msi-hero__art { left: calc(50% - 980.2px); top: 357.7px; margin-left: 0; }
body .msi-hero__stat { left: calc(50% + 59.9px); top: 434.6px; }
body .msi-hero__card { left: calc(50% + 59.9px); top: 580.4px; }
/* The designer scaled two pieces on their own: the forceps by .9082 and the
avatars by .9009. Sizes below are pre-transform, so they render at the wire's
375 x 320.6 (forceps, top-left 150,396.9) and 28.83 (avatars, 8 above the label). */
body .msi-hero__photo--1 { left: 807.1px; top: 44.4px; width: 424.5px; height: 362.8px; }
body .msi-hero__stat { gap: 9.05px; }
body .msi-hero__avatars { width: 71.36px; height: 32.62px; }
body .msi-hero__avatars img { width: 32.62px; height: 32.62px; }
body .msi-hero__avatars img:nth-child(2) { left: 19.37px; }
body .msi-hero__avatars img:nth-child(3) { left: 38.74px; }
}
/* wider than the 834 frame, the copy centres over the art (which is placed from the middle) */
@media (min-width: 992px) and (max-width: 1314px) {
body .msi-hero__copy { margin-left: auto; margin-right: auto; }
}
/* ---- homepage bands below the hero at 834 (wire 741:6291) ------------------
Trust bar 741:6366, featured 741:6401 (2 per row), catalogs 741:6457
(3 per row), CTA 741:6622 (panel 754x399 at x 25, photo overhanging 61). */
@media (min-width: 768px) and (max-width: 991px) {
/* the plate starts 222 above the hero's foot and puts the trust bar 80 below it */
body .msi-band--pale { margin-top: -222px; padding-top: 302px; }
body .msi-trust { gap: 32px; }
body .msi-trust__item:nth-child(3) { margin-left: 8px; }
body .msi-trust__icon { width: 56px; height: 56px; }
body .msi-trust__text,
body .msi-trust__item--tight .msi-trust__text { gap: 8px; }
body .msi-trust__head { font-size: 16px; }
body .msi-trust__sub { font-size: 14px; }
/* the plate's own 80 bottom padding plus this lands the head 101 under the trust bar */
body .Control.ProductDisplay .pad-10 { margin-top: 32.3px; }
body .msi-sectionhead__title { font-size: 40px; }
/* wire 813:5618: the sub wraps in a 414 column; Figma sets each 16/1.6 line at a whole 26 */
body .msi-pd-featured .msi-sectionhead__sub { max-width: 414px; line-height: 26px; }
body .Control.ProductDisplay .pad-10 > div:not(.msi-sectionhead) {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 32px;
}
body .homepage-product .thumbnail img { left: calc(50% - 113.5px); }
/* wire 813:5614: the two-line sub grows the band 26 while the catalogs stay put, so 70 under the cards */
body .LayoutMiddle.container:has(.msi-hero) .LayoutContentInner > .msi-band--pale + .row { padding-bottom: 70px; }
body .msi-catalogs { margin-top: 149.2px; }
body .msi-catalogs__body { gap: 40px; }
body .msi-catalogs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
body .msi-catalog__label { line-height: 1.28; }
body .msi-cta {
width: calc(100% - 50px);
margin-top: 120px;
padding-top: 61px;
}
body .msi-cta__panel {
min-height: 399px;
margin-right: 30px;
padding: 48px;
background-position: left 484px top -38px, left 452px top -61px, 0 0;
}
body .msi-cta__copy { width: 361px; }
body .msi-cta__title { width: 100%; line-height: 1.18; }
body .msi-cta__photo { right: auto; left: 413px; width: 371px; height: 460px; }
}
/* below the 834 frame the photo keeps its right edge on the CTA's (as at 834) and scales with the window, so it never
runs past the page (768 is iPad portrait) */
@media (min-width: 768px) and (max-width: 833px) {
body .msi-cta__photo { left: auto; right: 0; width: calc(371 / 834 * 100vw); height: calc(460 / 834 * 100vw); }
}
/* ---- homepage hero at 440 (wire 741:3713) -----------------------------------
The backdrop starts under the utility bar, behind the white header row, so it
is drawn 80 above the band. Copy stacks left-aligned over the art, which is
the 1440 composition scaled by .6178 (264 -> 163.11 on the plates). */
@media (max-width: 767px) {
body .msi-hero,
body .msi-hero__inner { min-height: 777px; }
body .msi-hero {
background: url("../images/hero/hero-bg-440.svg") center -80px / 100% 857px no-repeat;
}
body .msi-hero__inner { padding-top: 32px; }
body .msi-hero__inner::after {
content: "";
position: absolute;
left: calc(50% - 219px);
top: 582px;
width: 328px;
height: 195px;
background: url("../images/hero/hero-wrist-440.png") 0 0 / 328px 195px no-repeat;
z-index: 1;
pointer-events: none;
}
body .msi-hero__copy { width: 100%; gap: 24px; }
body .msi-hero__lede { gap: 32px; }
/* Inter sets "to your standard." 13px wider than Inter Display; the wire
fits it on one line in 392. Narrower phones (390, 375, 360) and a scrollbar
shrink the column, so the size follows it (cqw) and stays 48 at the wire's
width: 392 / 8.1 = 48.4, capped at 48. */
body .msi-hero__copy { container-type: inline-size; }
body .msi-hero__title {
width: 100%;
font-size: min(48px, calc(100cqw / 8.1));
line-height: 1.0625;
letter-spacing: -0.015em;
}
body .msi-hero__mark em {
background-size: 100% 59.33px;
padding: 0 4px;
}
body .msi-hero__sub { width: 100%; font-size: 14px; line-height: 22.1px; }
body .msi-hero .msi-btn--primary { align-self: stretch; }
body .msi-hero__art,
body .msi-hero__stat,
body .msi-hero__card {
transform-origin: 0 0;
transform: scale(.6178);
}
body .msi-hero__art { left: calc(50% - 649.36px); top: 381.23px; margin-left: 0; }
body .msi-hero__stat { left: calc(50% + 77.79px); top: 435.98px; }
body .msi-hero__card { left: calc(50% + 77.79px); top: 536.92px; }
/* the forceps scale on their own (.685): pre-transform size and top-left */
body .msi-hero__photo--1 { left: 785.6px; top: 34.3px; width: 457.9px; height: 391.4px; }
/* the avatars scale by .6316 (20.21 circles on a 12 step); pre-transform values */
body .msi-hero__stat { gap: 16.95px; }
body .msi-hero__avatars { width: 71.56px; height: 32.71px; }
body .msi-hero__avatars img { width: 32.71px; height: 32.71px; }
body .msi-hero__avatars img:nth-child(2) { left: 19.42px; }
body .msi-hero__avatars img:nth-child(3) { left: 38.85px; }
}
/* ---- homepage trust bar and featured at 440 (741:3776, 741:3710/3665/3811) --
Trust is 2x2 (gap 32, rows 40). Featured stacks one card per row; its
"View all products" drops below the grid, full width, so the head becomes
display:contents and the three parts are ordered in one column. */
@media (max-width: 767px) {
body .msi-band--pale { margin-top: -102px; padding-top: 168px; }
body .msi-trust {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 32px;
/* 40 in the wire; the first row's two-line texts round 1.8 taller here */
row-gap: 38.2px;
}
body .msi-trust__icon { width: 56px; height: 56px; }
body .msi-trust__text,
body .msi-trust__item--tight .msi-trust__text { gap: 8px; }
body .msi-trust__head { font-size: 16px; }
body .msi-trust__sub { font-size: 14px; }
body .Control.ProductDisplay .pad-10 {
display: flex;
flex-direction: column;
/* with the plate's own 80 bottom padding this is the wire's 69 under the trust bar */
margin-top: 20.4px;
}
body .Control.ProductDisplay .pad-10 > .msi-sectionhead { display: contents; }
body .msi-sectionhead__title { font-size: 40px; }
/* wire 813:3357: the sub is as wide as the title (328); Figma sets each 16/1.6 line at a whole 26 */
body .msi-pd-featured .msi-sectionhead__sub { max-width: 328px; line-height: 26px; }
body .Control.ProductDisplay .pad-10 > div:not(.msi-sectionhead) {
order: 2;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 32px;
margin-top: 40px;
}
body .Control.ProductDisplay .pad-10 > .msi-sectionhead .msi-btn--primary {
order: 3;
align-self: stretch;
margin-top: 48px;
}
body .homepage-product .thumbnail img { left: calc(50% - 113.5px); }
/* Figma sets the two name lines on a 29 pitch; at 28.8 the stacked cards drift */
body .homepage-product .caption > p.no-m,
body .homepage-product .caption > p.no-m a { line-height: 29px; }
/* wire 813:3309: the sheet grows 5 for a 29 taller band, so 24 under the button */
body .LayoutMiddle.container:has(.msi-hero) .LayoutContentInner > .msi-band--pale + .row { padding-bottom: 24px; }
}
/* ---- homepage catalogs and CTA at 440 (741:3815/3819/3852, 741:3966) -------
Catalogs become a horizontal rail of 305 cards (gap 20) that bleeds to the
right edge, with previous/next arrows under it (js/msi-menu.js scrolls it).
The CTA is one 392x787 panel: copy at the top, the photo inside at the foot. */
.msi-catalogs__nav { display: none; }
@media (max-width: 767px) {
/* wire 813:3308: 83 from the sheet's end to the catalogs head */
body .msi-catalogs { margin-top: 83px; width: calc(100% - 48px); gap: 48px; }
body .msi-catalogs__body { gap: 40px; }
body .msi-catalogs__eyebrow { font-size: 18px; }
body .msi-catalogs__sub { font-size: 14px; }
body .msi-catalogs__grid {
display: flex;
gap: 20px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding: 0 24px;
margin: 0 -24px;
padding: 0 24px;
width: auto;
scrollbar-width: none;
}
body .msi-catalogs__grid::-webkit-scrollbar { display: none; }
body .msi-catalog { flex: 0 0 305px; scroll-snap-align: start; }
body .msi-catalogs__nav {
display: flex;
justify-content: center;
gap: 8px;
}
body .msi-catalogs__arrow {
width: 56px;
height: 56px;
padding: 0;
border: 0;
border-radius: 50%;
background: center / 56px no-repeat;
cursor: pointer;
}
body .msi-catalogs__arrow--prev { background-image: url("../images/carousel/arrow-prev.svg"); }
body .msi-catalogs__arrow--next { background-image: url("../images/carousel/arrow-next.svg"); }
body .msi-catalogs__arrow:focus:not(:focus-visible) { outline: none; }
body .msi-catalogs__arrow:focus-visible { outline: 2px solid var(--msi-blue); outline-offset: 2px; }
body .msi-cta {
width: calc(100% - 48px);
margin-top: 88px;
padding-top: 0;
border-radius: 56px;
overflow: hidden;
}
body .msi-cta__panel {
display: block;
min-height: 787px;
padding: 55px 32px 0;
background-position: left 103px top 495px, left 71px top 472px, 0 0;
}
body .msi-cta__copy { width: 100%; }
/* Figma sets the three lines on a 42 pitch (1.05; the wire states 1.04) */
body .msi-cta__title { width: 100%; line-height: 42px; }
body .msi-cta .msi-btn--primary { align-self: stretch; }
/* 349 x 433 on the panel's bottom at 440 (top 354 + 433 = 787); narrower phones scale it down whole instead of
squashing the ![]()
(max-width) or running the literature past the page */
body .msi-cta__photo { left: 22px; top: auto; right: auto; bottom: 0; width: min(349px, calc(100% - 43px)); height: auto; max-width: none; aspect-ratio: 349 / 433; }
}
/* ---- homepage empty state at 440 (wire 741:5831) ----------------------------
With no featured product the plate closes 37 under the trust bar and the
catalogs sit 72 below it (1440: 67 and 96). */
@media (max-width: 767px) {
body .LayoutContentInner > .msi-band--pale:not(:has(+ .row .msi-pd-featured .homepage-product)) {
padding-bottom: 37px;
}
body .LayoutContentInner:has(> .msi-band--pale):not(:has(> .msi-band--pale + .row .msi-pd-featured .homepage-product)) .msi-catalogs {
margin-top: 72px;
}
}
/* ==========================================================================
Category family below 992 (834 wires 741:9211 product list, 741:11243
category cards, 741:11667 speciality). One column: the facet rail and the
Precision Coagulation rail each collapse to a blue pill; product cards go
two a row, category cards three. The CTA runs 96 under the section above it.
========================================================================== */
@media (max-width: 991px) {
body .LayoutMiddle.container:has(.CategoryCategoryName) > .row {
grid-template-columns: var(--msi-gutter) 0 minmax(0, 1fr) var(--msi-gutter);
grid-template-rows: repeat(8, auto);
}
body .LayoutMiddle.container:has(.CategoryCategoryName) > .row::before { grid-row: 5 / 7; inset: 40px 0 0; border-radius: 80px; }
/* 64 under the stepper on the product-list wire, whose stepper sits 1px lower than ours */
body .LayoutContentInner:where(:has(.CategoryCategoryTrail)) > .page-header { margin-top: 65px; }
/* products level (wires 813:8357, 813:7899): the specialty eyebrow sits 8 over the category title */
body .LayoutContentInner:has(.CategoryCategoryTrail b):not(:has(li.CategoryChildCategories)) > .page-header { gap: 8px; }
body .LayoutMiddle.container:has(.CategoryCategoryName) .LayoutLeftColumn { grid-column: 3; grid-row: 4; margin: 40px 0 0; }
body .LayoutContentInner > .clearfix:has(#lblProductCountTop) { grid-row: 5; margin: 96px 0 0; }
body .LayoutContentInner > .product-list {
grid-row: 6;
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 40px 0 30px;
}
/* the pager sits under the plate, not on it */
body .LayoutContentInner > .clearfix:has(ul.pagination) { grid-row: 7; margin: 18px 0 0; }
/* search results: the category grid's two cards a row (the 1440 search rule sets four) */
body.Search .LayoutContentInner > .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.Search #dlCategories tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .LayoutMiddle.container:has(.CategoryCategoryName) .LayoutContentInner > .msi-cta {
grid-column: 1 / -1;
grid-row: 8;
width: calc(100% - 50px);
margin: 96px auto 0;
}
body:has(.CategoryCategoryName) .LayoutBottom { margin-top: 94px; }
/* Refine search: the theme's collapsed left-column bar becomes the wire's pill */
body:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-header-leftcol {
position: relative;
/* !important: response.css .navbar-header-leftcol.visible-xs { display: block !important }
(768-991) and Bootstrap's .visible-xs below 768 */
display: flex !important;
align-items: center;
justify-content: space-between;
float: none;
height: 48px;
margin: 0;
padding: 12px 16px;
border: 1px solid rgba(38, 45, 49, .2);
border-radius: 999px;
background: var(--msi-blue);
}
/* the theme's navbar-header clearfix makes both pseudos display: table */
body:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-header-leftcol::before {
display: block;
content: "Refine search";
font-family: var(--msi-font);
font-weight: 500;
font-size: 16px;
line-height: 1.4;
color: var(--msi-white);
}
body:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-header-leftcol::after,
body .msi-coag__title::after {
content: "";
display: block;
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;
transition: transform .15s ease;
}
body:has(.CategoryCategoryName) .LayoutLeftColumn:has(.navbar-collapse.in) .navbar-header-leftcol::after,
body .msi-coag--open .msi-coag__title::after { transform: rotate(180deg); }
/* the theme's "Left Menu" link points at the homepage; the whole pill toggles */
body:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-header-leftcol .navbar-brand { display: none; }
body:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-header-leftcol .navbar-toggle {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
}
body:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-toggle .icon-bar { display: none; }
body .LayoutMiddle.container:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-collapse.in,
body .LayoutMiddle.container:has(.CategoryCategoryName) .LayoutLeftColumn .navbar-collapse.collapsing { margin-top: 24px; }
body .LayoutLeftColumn [class*="ControlHeader"]:first-child { display: none; }
body .LayoutLeftColumn .msi-facet-clear--rail { display: none; }
body .LayoutLeftColumn .msi-facet-clear--pill { display: block; margin-top: 12px; }
/* category cards: three a row, 56 into the plate, which starts 48 under the head */
body .LayoutContentInner:where(:has(.CategoryCategoryTrail)) ul.nav-pills { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body .LayoutContentInner:has(.CategoryCategoryTrail b):has(li.CategoryChildCategories) > div:has(> ul.nav-pills) { margin-top: 104px; }
/* the card-page wires start the stepper 1px higher and the head 65 under it */
body .LayoutContentInner:has(.CategoryCategoryTrail b):has(li.CategoryChildCategories) > .page-header { margin-top: 65px; }
body .LayoutMiddle.container:has(.CategoryCategoryTrail b):has(li.CategoryChildCategories) > .row::before { grid-row: 3 / 7; inset: 48px 0 0; }
body .LayoutContentInner:has(.CategoryCategoryTrail b):is(:not(:has(.msi-pcard)), :has(li.CategoryChildCategories)) > div:has(> ul.nav-pills) { margin-bottom: 58px; }
body:has(li.CategoryChildCategories):has(.CategoryCategoryTrail b) .LayoutBottom { margin-top: 104px; }
/* speciality: head, then the Precision Coagulation pill, then the cards */
body .LayoutContentInner:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > .msi-browse-head { margin-top: 65px; }
body .LayoutContentInner:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > .msi-w-coag { grid-column: 2 / 4; grid-row: 3; margin: 120px 0 0; }
body .LayoutContentInner:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > div:has(> ul.nav-pills) { grid-column: 2 / 4; grid-row: 4; margin: 48px 0 56px; }
body .LayoutMiddle.container:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > .row::before { grid-row: 3 / 7; inset: 64px 0 0; }
body:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) .LayoutBottom { margin-top: 136px; }
body .msi-coag__panel { gap: 0; }
body .msi-coag__title {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 12px 16px;
border: 1px solid rgba(38, 45, 49, .2);
border-radius: 999px;
background: var(--msi-blue);
font-size: 16px;
line-height: 1.4;
color: var(--msi-white);
}
body .msi-coag__title:hover,
body .msi-coag__title:focus { color: var(--msi-white); text-decoration: none; }
body .msi-coag__title:focus:not(:focus-visible) { outline: none; }
body .msi-coag__list,
body .msi-coag__note { display: none; }
/* open, the items run two a row (Diego 2026-09-23; the wire draws no open state) */
body .msi-coag--open .msi-coag__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-top: 24px;
}
body .msi-coag--open .msi-coag__note { display: block; }
body .msi-coag__more { display: none; }
body .msi-coag--open .msi-coag__more { display: block; margin-top: 24px; }
}
/* ==========================================================================
Category family at 440 (wires 741:8829 product list, 741:12364 category
cards, 741:12026 speciality). 32 between the blocks above the plate, 48
inside it on the card pages, product cards one a row and horizontal,
category cards two a row, CTA and footer 88 apart. The product-list wire
draws no Refine search at 440; the pill stays (CLAUDE.md rule 3).
========================================================================== */
@media (max-width: 767px) {
/* 32 under the stepper on the wire; 33 because the header renders 116.8 against its 117 */
body .LayoutContentInner:where(:has(.CategoryCategoryTrail)) > .page-header,
body .LayoutContentInner:has(.CategoryCategoryTrail b):has(li.CategoryChildCategories) > .page-header,
body .LayoutContentInner:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > .msi-browse-head { margin-top: 33px; }
body .LayoutMiddle.container:has(.CategoryCategoryName) .LayoutLeftColumn { margin-top: 32px; }
/* product list: the plate runs from 32 under the pill to 47 under the pager */
body .LayoutMiddle.container:has(.CategoryCategoryName) > .row::before { grid-row: 5 / 8; inset: 32px 0 0; }
body .LayoutContentInner > .clearfix:has(#lblProductCountTop) {
flex-wrap: wrap;
row-gap: 24px;
column-gap: 8px;
margin-top: 88px;
}
body .LayoutContentInner > .clearfix:has(#lblProductCountTop) > div:first-child { flex: 0 0 100%; margin-right: 0; }
body .LayoutContentInner > .product-list { grid-template-columns: minmax(0, 1fr); margin: 40px 0 0; }
body.Search .LayoutContentInner > .product-list { grid-template-columns: minmax(0, 1fr); }
body.Search #dlCategories tbody { grid-template-columns: minmax(0, 1fr); }
body.Search .msi-search { gap: 40px; margin-top: 32px; }
body.Search #ddSearchType,
body.Search #btnSearch { flex: 1 1 auto; }
body .LayoutContentInner > .clearfix:has(ul.pagination) { margin: 48px 0 47px; }
body .LayoutMiddle.container:has(.CategoryCategoryName) .LayoutContentInner > .msi-cta { width: calc(100% - 48px); margin: 88px auto 0; }
body:has(.CategoryCategoryName) .LayoutBottom,
body:has(li.CategoryChildCategories):has(.CategoryCategoryTrail b) .LayoutBottom,
body:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) .LayoutBottom { margin-top: 88px; }
/* the horizontal product card (741:8844): photo and text over a divider,
then the cart pill and the price on one row */
body .msi-pcard.category-product {
display: grid;
grid-template-columns: 129px minmax(0, 1fr);
gap: 0 24px;
min-height: 0;
padding: 16px 24px 16px 16px;
}
body .msi-pcard > .thumbnail {
grid-column: 1;
grid-row: 1 / 4;
align-self: center;
width: 129px;
height: 140px;
/* style.css .category-product .thumbnail { min-height: 180px } */
min-height: 0;
border-radius: 16.556px;
}
body .msi-pcard > .thumbnail img { max-width: 121px; max-height: 121px; }
body .msi-pcard .msi-pcard__body { display: contents; }
body .msi-pcard__meta,
body .msi-pcard .msi-pcard__body > .no-m-b,
body .msi-pcard__desc { grid-column: 2; }
body .msi-pcard.category-product { align-items: start; }
body .msi-pcard__meta { grid-row: 1; }
body .msi-pcard .msi-pcard__body > .no-m-b { grid-row: 2; margin-top: 8px; }
body .msi-pcard__desc { grid-row: 3; margin-top: 8px; }
body .msi-pcard .msi-pcard__body > .no-m-b a { font-size: 16px; line-height: 1.4; }
body .msi-pcard__desc { font-size: 14px; line-height: 1.44; -webkit-line-clamp: 3; }
body .msi-pcard__desc p,
body .msi-pcard__desc ul,
body .msi-pcard__desc li { font-size: inherit; line-height: inherit; }
body .msi-pcard__foot {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 28px;
margin-top: 24px;
padding-top: 24px;
/* a zero-height rule, as the wire's Line 2 */
box-shadow: inset 0 1px rgba(0, 0, 0, .05);
}
body .msi-pcard__price { order: 2; margin: 0; padding: 0; border: 0; }
body .msi-pcard__cart { order: 1; margin: 0; }
body .msi-pcard__cart input.AddToCartThemeButton { width: auto; }
/* category cards: two a row */
body .LayoutContentInner:where(:has(.CategoryCategoryTrail)) ul.nav-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .LayoutContentInner:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) ul.nav-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body .LayoutContentInner:has(.CategoryCategoryTrail b):has(li.CategoryChildCategories) > div:has(> ul.nav-pills) { margin-top: 80px; }
body .LayoutMiddle.container:has(.CategoryCategoryTrail b):has(li.CategoryChildCategories) > .row::before { inset: 32px 0 0; }
body .LayoutContentInner:has(.CategoryCategoryTrail b):is(:not(:has(.msi-pcard)), :has(li.CategoryChildCategories)) > div:has(> ul.nav-pills) { margin-bottom: 78px; }
body .LayoutContentInner:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > .msi-w-coag { margin-top: 80px; }
/* two a row at 440: a card is ~192 wide, so the photo well shrinks */
body .msi-coag__item { gap: 8px; height: auto; min-height: 64px; padding: 8px; }
body .msi-coag__img { flex-basis: 36px; height: 48px; background-position: 50% 6px, 0 0; background-size: 36px 36px, auto; border-radius: 12px; }
body .msi-coag__name { gap: 4px; }
body .msi-coag__name::after { flex-basis: 16px; height: 16px; -webkit-mask-size: 16px; mask-size: 16px; }
body .LayoutMiddle.container:has(.CategoryCategoryTrail):not(:has(.CategoryCategoryTrail b)) > .row::before { inset: 32px 0 0; }
}
/* products level at 834 (wire 813:8357): the eyebrow starts 31 under the stepper */
@media (min-width: 768px) and (max-width: 991px) {
body .LayoutContentInner:has(.CategoryCategoryTrail b):not(:has(li.CategoryChildCategories)) > .page-header { margin-top: 31px; }
}