/* scope: body:is(.LeftAndRightColumn, .CMS):has(.msi-cms), .msi-cms */
/* The Service layout (Files/Service.html): the content pages without a design of their own (Diego 2026-09-23).
   A hero with the page name over the full width, then a white sheet with three columns: the Precision Coagulation
   list, the page's own content, and the frame's right rail (35 years logo and the warranty tabs), restyled.
   Below 992 the columns stack: content, the list as a pill that opens, the rail. The frame's left rail holds only
   a promo banner (IMAGELOGO3066) and its toggle; it stays in the DOM, hidden. */

/* ---- the grid: the frame's columns flattened into one track set ---------------------------------------------- */
/* LeftAndRightColumns puts the rails and the content straight in the container; LeftColumnOnly (the store's fallback
   when the layout record has no template id) wraps them in a .row, flattened here */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container > .row { display: contents; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container > .row::before,
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container > .row::after { display: none; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container {
  width: 100%;
  max-width: none;
  padding: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(var(--msi-gutter), 1fr) 296px 32px minmax(0, 624px) 32px 296px minmax(var(--msi-gutter), 1fr);
  margin: 0;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container::after { display: none; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutContent,
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutContentInner { display: contents; }
/* the store's Live Design preview wraps the layout's blocks in div.ac-content-page; the public page does not */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutContentInner > .ac-content-page { display: contents; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutLeftColumn { display: none; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :where(.LayoutContentInner, .ac-content-page) > * { grid-column: 4; grid-row: 3; position: relative; z-index: 1; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > div[style*="clear"],
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > div:empty { display: none; }

/* the white sheet: rounded top over the hero's last 80, down to the footer */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container::before {
  content: "";
  display: block;
  position: absolute;
  inset: -80px 0 0;
  grid-column: 1 / -1;
  grid-row: 2 / 5;
  background: var(--msi-white);
  border-radius: 80px 80px 0 0;
}

/* ---- hero: the gradient band of the designed content pages, the page name centred -------------------------- */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-cms-hero {
  grid-column: 1 / -1;
  grid-row: 1;
  /* under the sheet, which overlaps its last 80; the container isolates, so -1 stays above the page */
  z-index: -1;
  padding: 72px var(--msi-gutter) 128px;
  background: #fff url("../images/catalog-request/hero-1440.svg") center top / cover no-repeat;
  text-align: center;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .msi-cms-hero__title {
  max-width: 800px;
  margin: 0 auto;
  font-family: var(--msi-font);
  font-size: 56px;
  font-weight: 500;
  line-height: 67px;
  color: #000;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .msi-cms-hero__title:empty { display: none; }

/* ---- the three columns, 48 under the sheet's top edge ------------------------------------------------------- */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-w-coag {
  display: block;
  grid-column: 2;
  grid-row: 3;
  margin-top: -32px;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-cms { margin-top: -32px; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn {
  grid-column: 6;
  grid-row: 3;
  position: relative;
  z-index: 1;
  width: auto;
  float: none;
  margin: -32px 0 0;
  padding: 0;
}
/* the page's widget areas and snap-ins, under the content */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > :not(.msi-cms-hero, .msi-w-coag, .msi-cms) { grid-row: 4; }
/* the sheet ends 120 over the footer plate (the footer keeps its own 80) */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container > :last-child { margin-bottom: 40px; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-cms { padding-bottom: 40px; }

/* ---- right rail: the 35 years logo and the warranty tabs in the design language ------------------------------ */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumnInner { display: flex; flex-direction: column; gap: 32px; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .xwell { margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .Control.ImageLogo { margin: 0 0 32px; text-align: center; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .Control.ImageLogo img { width: 160px; max-width: 100%; height: auto; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .Control.Tabs { margin: 0; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--msi-font);
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav::before,
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav::after { display: none; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li {
  float: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--msi-hairline);
  border-radius: 999px;
  background: var(--msi-white);
  white-space: normal;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li a {
  float: none;
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--msi-ink);
  text-decoration: none;
  cursor: pointer;
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li.ui-tabs-active {
  border-color: var(--msi-blue);
  background: var(--msi-blue);
}
/* style.css:64 .ui-state-active a { color: #fff } already whitens the active label; this keeps it for every jQuery UI theme */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li.ui-tabs-active a { color: var(--msi-white); }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li:not(.ui-tabs-active):hover { border-color: var(--msi-blue); }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li a:focus:not(:focus-visible) { outline: none; }
/* jQuery UI focuses the tab's li (role="tab"), not its link */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li:focus:not(:focus-visible) { outline: none; }
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-nav li:focus-visible { outline: 2px solid var(--msi-blue); outline-offset: 2px; }
/* the panel: a card. style.css:63 gives it padding 20px 10px, a 2px #3D90EE border and z-index 10 */
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-panel {
  z-index: auto;
  padding: 24px;
  border: 1px solid var(--msi-hairline);
  border-radius: 24px;
  background: var(--msi-white);
  font-family: var(--msi-font);
  font-size: 16px;
  line-height: 26px;
  color: var(--msi-ink-2);
}
body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn .ui-tabs .ui-tabs-panel p { margin: 0; }

/* ---- content: the old bodies on the design's type scale ------------------------------------------------------ */
.msi-cms {
  font-family: var(--msi-font);
  font-size: 16px;
  line-height: 26px;
  color: var(--msi-ink-2);
  overflow-wrap: break-word;
}
.msi-cms h1, .msi-cms h2, .msi-cms h3, .msi-cms h4, .msi-cms h5, .msi-cms h6 {
  margin: 40px 0 16px;
  font-family: var(--msi-font);
  font-weight: 500;
  color: #000;
}
.msi-cms h1 { font-size: 40px; line-height: 48px; }
.msi-cms h2 { font-size: 32px; line-height: 40px; }
.msi-cms h3 { font-size: 24px; line-height: 32px; }
.msi-cms h4 { font-size: 20px; line-height: 28px; font-weight: 600; }
.msi-cms h5, .msi-cms h6 { font-size: 16px; line-height: 26px; font-weight: 600; }
.msi-cms > :first-child,
.msi-cms > :first-child > :first-child { margin-top: 0; }
.msi-cms p { margin: 0 0 16px; font-size: inherit; line-height: inherit; }
.msi-cms ul, .msi-cms ol { margin: 0 0 16px; padding-left: 24px; }
.msi-cms li + li { margin-top: 8px; }
.msi-cms b, .msi-cms strong { font-weight: 600; color: #000; }
.msi-cms a { color: var(--msi-blue); text-decoration: underline; }
.msi-cms a:hover, .msi-cms a:focus-visible { color: var(--msi-blue-dark); }
.msi-cms img { max-width: 100%; height: auto; }
.msi-cms hr { margin: 32px 0; border: 0; border-top: 1px solid var(--msi-hairline); }
.msi-cms table { width: 100%; margin: 0 0 16px; border-collapse: collapse; }
.msi-cms th, .msi-cms td { padding: 12px 16px; border-bottom: 1px solid var(--msi-hairline); text-align: left; vertical-align: top; }
.msi-cms th { font-weight: 600; color: #000; }
/* inline style="" from the old editor is the one thing that beats a stylesheet: its fonts, sizes and brand colours
   give way to the scale above. Layout properties (widths, floats, alignment) are left alone. */
.msi-cms [style*="font-family"] { font-family: inherit !important; }
.msi-cms [style*="font-size"] { font-size: inherit !important; line-height: inherit !important; }
.msi-cms [style*="color"]:not([style*="background"]) { color: inherit !important; }
/* the old editor's <font> tags, the same way: size, face and colour give way; one standing alone is a title */
.msi-cms font { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.msi-cms > font[size] { display: block; margin: 0 0 16px; font-size: 24px; line-height: 32px; font-weight: 500; color: #000; }
/* the body's opening heading when it only repeats the page name the hero already shows (js/msi-menu.js) */
.msi-cms .msi-cms__dup { display: none; }
.msi-cms .msi-cms__dup + * { margin-top: 0; }
/* forms in old bodies: the form idiom's fields and pills */
.msi-cms input[type="text"], .msi-cms input[type="email"], .msi-cms input[type="tel"], .msi-cms select, .msi-cms textarea {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 12px 20px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  background: var(--msi-white);
  font-family: var(--msi-font);
  font-size: 16px;
  line-height: 1.4;
  color: var(--msi-ink-2);
}
/* border colour and shadow only when not focused: the text-field focus rule (msi-refresh.css) draws focus */
.msi-cms input[type="text"]:not(:focus),
.msi-cms input[type="email"]:not(:focus),
.msi-cms input[type="tel"]:not(:focus),
.msi-cms select:not(:focus),
.msi-cms textarea:not(:focus) { border-color: rgba(38, 45, 49, .2); }
.msi-cms textarea { border-radius: 24px; }
/* the store's ContactForm widget in an old body: the Catalog Request form's spacing, one column */
.msi-cms .Control.ContactForm > div:has(> label.contact-form-question) { margin-bottom: 12px; }
.msi-cms .Control.ContactForm > div:has(> label.contact-form-question) + div { margin-bottom: 24px; }
.msi-cms .Control.ContactForm > br { display: none; }
.msi-cms .Control.ContactForm label.contact-form-question {
  display: block;
  max-width: none;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  color: #000;
}
.msi-cms .Control.ContactForm .RequiredField { padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; }
.msi-cms .Control.ContactForm input[type="text"], .msi-cms .Control.ContactForm input[type="email"],
.msi-cms .Control.ContactForm input[type="tel"], .msi-cms .Control.ContactForm select {
  display: block;
  height: 56px;
  min-height: 0;
  margin: 0;
  padding: 16px 24px;
}
.msi-cms .Control.ContactForm textarea { display: block; height: 150px; margin: 0; padding: 16px 24px; border-radius: 28px; resize: vertical; }
.msi-cms .Control.ContactForm .text-danger.small { margin-top: 8px; padding: 0 24px; font-size: 14px; line-height: 1.4; }
/* radios and checkboxes keep their native size in the brand blue; the file picker's button is the secondary pill */
/* width: auto beats the old theme's 20px radio rule for this form (keyed on a widget id the import renumbers) */
.msi-cms input[type="radio"], .msi-cms input[type="checkbox"] { width: auto; height: auto; accent-color: var(--msi-blue); }
.msi-cms input[type="file"] { font-family: var(--msi-font); font-size: 14px; color: var(--msi-ink-2); }
.msi-cms input[type="file"]::file-selector-button {
  margin-right: 16px;
  padding: 12px 24px;
  border: 1px solid var(--msi-hairline);
  border-radius: var(--msi-r-pill);
  background: transparent;
  font-family: var(--msi-font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--msi-ink);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.msi-cms input[type="file"]::file-selector-button:hover { background: var(--msi-nav-tint); border-color: var(--msi-blue); }
/* phone and email links take the link blue so they read as clickable (Diego 2026-09-23) */
.msi-cms a:is([href^="tel:"], [href^="mailto:"]):not([class*="btn"]) { font: inherit; color: var(--msi-blue); text-decoration: none; }
.msi-cms a:is([href^="tel:"], [href^="mailto:"]):not([class*="btn"]):is(:hover, :focus) { color: var(--msi-blue-bright); }
.msi-cms a:is([href^="tel:"], [href^="mailto:"]):not([class*="btn"]):focus-visible { text-decoration: underline; }

/* ---- 992 and down: one column. Content, then the list as a pill that opens, then the rail -------------------- */
@media (max-width: 991px) {
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container {
    grid-template-columns: var(--msi-gutter) minmax(0, 1fr) var(--msi-gutter);
  }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutMiddle.container::before { grid-row: 2 / 7; inset: -56px 0 0; border-radius: 56px 56px 0 0; }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-cms-hero {
    padding: 65px var(--msi-gutter) 96px;
    background-image: url("../images/catalog-request/hero-834.svg");
  }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :where(.LayoutContentInner, .ac-content-page) > * { grid-column: 2; }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-cms { grid-row: 3; margin-top: -16px; }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > :not(.msi-cms-hero, .msi-w-coag, .msi-cms) { grid-row: 4; }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-w-coag { grid-column: 2; grid-row: 5; margin-top: 16px; }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .LayoutRightColumn { grid-column: 2; grid-row: 6; margin: 48px 0 0; }
}
@media (max-width: 767px) {
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) :is(.LayoutContentInner, .ac-content-page) > .msi-cms-hero {
    padding: 56px var(--msi-gutter) 96px;
    background-image: url("../images/catalog-request/hero-440.svg");
  }
  body:is(.LeftAndRightColumn, .CMS):has(.msi-cms) .msi-cms-hero__title { font-size: 40px; line-height: 42px; }
  .msi-cms { font-size: 14px; line-height: 22px; }
  .msi-cms h1 { font-size: 32px; line-height: 38px; }
  .msi-cms h2 { font-size: 26px; line-height: 32px; }
  .msi-cms h3 { font-size: 20px; line-height: 28px; }
}