/* MecanUSA Engineering Catalog v2 - the root pages (2026-11-11)
   Home, product list, company profile, contact and order information, and the look of the inquiry / order forms.
   Loaded only by those pages, after css/v2/mu-v2.css, whose design tokens it uses; no category page loads it, so
   nothing here can change one. No !important. */

/* ---------------------------------------------------------------- layout without side navigation */
.mu-layout { display: block; }
.mu-layout__side { display: none; }
.mu-root { padding-top: var(--mu-s5); }
.mu-root > section, .mu-root > .mu-section { margin-block: 0 var(--mu-s8); }
.mu-root h2 { font-size: var(--mu-fs-28); margin: 0 0 var(--mu-s3); line-height: 1.25; }
.mu-root h3 { font-size: var(--mu-fs-18); margin: 0 0 var(--mu-s2); }
.mu-eyebrow { display: block; margin: 0 0 var(--mu-s2); font-size: var(--mu-fs-12); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mu-brand-600); }
.mu-lead { font-size: var(--mu-fs-18); color: var(--mu-ink-2); max-width: 68ch; }
.mu-section-head { margin-bottom: var(--mu-s5); }
.mu-section-head .mu-lead { margin-bottom: 0; }

/* page title band (product list, company, contact, order information) */
.mu-pagehead { padding: var(--mu-s6) var(--mu-s6) var(--mu-s5); margin-bottom: var(--mu-s6); border-radius: var(--mu-r2);
  background: linear-gradient(120deg, var(--mu-brand-50) 0%, #ffffff 70%); border: 1px solid var(--mu-brand-100); }
.mu-pagehead h1 { font-size: var(--mu-fs-36); margin: 0 0 var(--mu-s3); color: var(--mu-brand-900); }
.mu-pagehead .mu-lead:last-child { margin-bottom: 0; }
@media (max-width: 599px) {
  .mu-pagehead { padding: var(--mu-s5) var(--mu-s4); }
  .mu-pagehead h1 { font-size: var(--mu-fs-28); }
  .mu-root h2 { font-size: var(--mu-fs-22); }
  .mu-lead { font-size: var(--mu-fs-16); }
}

/* a panel: a titled block of a root page (the legacy pages' cards) */
.mu-panel { border: 1px solid var(--mu-line); border-radius: var(--mu-r2); background: #fff; box-shadow: var(--mu-shadow-1); padding: var(--mu-s5); margin-bottom: var(--mu-s6); }
.mu-panel > .mu-label--h2 { margin-bottom: var(--mu-s4); }
.mu-panel > :last-child { margin-bottom: 0; }
@media (max-width: 599px) { .mu-panel { padding: var(--mu-s4); } }

/* ---------------------------------------------------------------- home: hero with the intro video
   States (js/v2/mu-root.js): none - the normal hero (no script, reduced motion, autoplay refused, no MP4, a load error
   or a slow start); is-playing - the video over the hero; is-ended - the video fades out, the normal hero comes back.
   The stage keeps its size in every state, so nothing below moves when the video ends. */
.mu-hero-v { position: relative; margin: 0 0 var(--mu-s8); border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--mu-brand-100); }
.mu-hero-v__media { position: relative; background: #fbfbfd url("../../image/home/mecan-intro-end.jpg") center / cover no-repeat; }
.mu-hero-v__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; pointer-events: none; background: transparent; }
.mu-hero-v__content { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--mu-s3); padding: var(--mu-s6) var(--mu-s5);
  background:
    radial-gradient(circle at 84% 46%, rgb(86 80 245 / .16) 0 150px, rgb(86 80 245 / .08) 151px 230px, transparent 231px),
    linear-gradient(120deg, #f4f6ff 0%, #ffffff 58%, #eef2ff 100%);
  transition: opacity .8s ease; }
.mu-hero-v__content h1 { font-size: var(--mu-fs-36); line-height: 1.15; margin: 0; color: var(--mu-brand-900); max-width: 21ch; text-wrap: balance; }
.mu-hero-v__lead { font-size: var(--mu-fs-18); color: var(--mu-ink-2); margin: 0; max-width: 46ch; }
.mu-hero-v__actions { display: flex; flex-wrap: wrap; gap: var(--mu-s3); margin-top: var(--mu-s2); }
.mu-hero-v__actions .mu-btn { min-height: 48px; padding-inline: var(--mu-s6); font-weight: 700; }
.mu-hero-v__facts { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mu-s2) var(--mu-s5); margin: var(--mu-s3) 0 0; padding: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-3); }
.mu-hero-v__facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--mu-brand-600); vertical-align: middle; }
.mu-hero-v.is-playing .mu-hero-v__video { opacity: 1; }
.mu-hero-v.is-ended .mu-hero-v__video { opacity: 0; transition-duration: .9s; }

/* phone and small tablet: the video's own 16:9 box above the text, which stays readable throughout */
@media (max-width: 759px) {
  .mu-hero-v__media { aspect-ratio: 16 / 9; }
  .mu-hero-v__content { padding: var(--mu-s5) var(--mu-s4) var(--mu-s5); background: linear-gradient(180deg, #f4f6ff 0%, #ffffff 100%); }
  .mu-hero-v__content h1 { font-size: var(--mu-fs-28); }
  .mu-hero-v__lead { font-size: var(--mu-fs-16); }
  .mu-hero-v__actions .mu-btn { flex: 1 1 100%; }
}
/* tablet and PC: one 16:9 stage; the normal hero fills it, the video lies over it while it plays */
@media (min-width: 760px) {
  /* 16:9 of the content width (the page's 16px gutters), at most 640px high; the full width of the cards below */
  .mu-hero-v { height: min(640px, calc((100vw - 2 * var(--mu-gutter)) * 9 / 16)); }
  .mu-hero-v__media { position: absolute; inset: 0; z-index: 2; background: none; pointer-events: none; }
  .mu-hero-v__content { position: absolute; inset: 0; z-index: 1; padding: var(--mu-s7) clamp(32px, 6vw, 72px); }
  .mu-hero-v.is-playing .mu-hero-v__content { opacity: 0; }
  .mu-hero-v.is-playing .mu-hero-v__content * { pointer-events: none; }
}
@media (min-width: 760px) and (max-width: 959px) {
  .mu-hero-v__content h1 { font-size: var(--mu-fs-28); }
  .mu-hero-v__lead { font-size: var(--mu-fs-16); }
  .mu-hero-v__content { background: linear-gradient(120deg, #f4f6ff 0%, #ffffff 60%, #eef2ff 100%); }
}
@media (min-width: 1100px) { .mu-hero-v__content h1 { font-size: 2.75rem; } }
@media (prefers-reduced-motion: reduce) {
  .mu-hero-v__video { display: none; }
  .mu-hero-v__content, .mu-hero-v__video { transition: none; }
}

/* ---------------------------------------------------------------- home: categories, strengths, how to order, links */
.mu-catgrid { list-style: none; display: grid; gap: var(--mu-s5); margin: 0; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 600px) { .mu-catgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .mu-catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mu-catgrid .mu-card__link { padding-bottom: var(--mu-s4); }
.mu-catgrid .mu-card__img { aspect-ratio: 282 / 195; object-fit: contain; padding: var(--mu-s3) var(--mu-s5); background: var(--mu-bg-2); }
.mu-catgrid .mu-card__body { padding: var(--mu-s4) var(--mu-s5) 0; display: flex; flex-direction: column; gap: var(--mu-s2); flex: 1; }
.mu-catgrid .mu-card__body > h2 { font-size: var(--mu-fs-18); margin: 0; color: var(--mu-ink); }
.mu-catgrid .mu-card__body > p { margin: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
.mu-catgrid .mu-card__more { margin-top: auto; padding-top: var(--mu-s2); }
.mu-catgrid .mu-card__link:hover h2 { color: var(--mu-brand-700); text-decoration: underline; }
.mu-catgrid .mu-card:hover { border-color: var(--mu-brand-600); }
.mu-catgrid .mu-card__link:focus-visible { box-shadow: var(--mu-focus); outline: none; }
.mu-catgrid .mu-card__body > p + p { margin-top: var(--mu-s1); }

.mu-why { list-style: none; counter-reset: why; display: grid; gap: var(--mu-s3) var(--mu-s5); margin: 0; padding: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mu-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-why > li { counter-increment: why; display: grid; grid-template-columns: 52px 1fr; gap: var(--mu-s3); align-items: start; padding: var(--mu-s4) 0; border-top: 1px solid var(--mu-line); }
.mu-why > li::before { content: counter(why, decimal-leading-zero); font-size: var(--mu-fs-22); font-weight: 800; color: var(--mu-brand-600); line-height: 1.1; }
.mu-why strong { display: block; color: var(--mu-ink); margin-bottom: 2px; }
.mu-why span { color: var(--mu-ink-2); font-size: var(--mu-fs-14); }
.mu-band { background: var(--mu-bg-2); border-radius: 12px; padding: var(--mu-s6) var(--mu-s6) var(--mu-s5); }
@media (max-width: 599px) { .mu-band { padding: var(--mu-s5) var(--mu-s4) var(--mu-s4); } }

.mu-steps4 { list-style: none; counter-reset: step; display: grid; gap: var(--mu-s4); margin: 0 0 var(--mu-s4); padding: 0; grid-template-columns: 1fr; }
@media (min-width: 760px) { .mu-steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mu-steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mu-steps4 > li { counter-increment: step; position: relative; background: #fff; border: 1px solid var(--mu-line); border-radius: var(--mu-r2); padding: var(--mu-s5) var(--mu-s4) var(--mu-s4); box-shadow: var(--mu-shadow-1); }
.mu-steps4 > li::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: var(--mu-s3); border-radius: 50%;
  background: var(--mu-brand-600); color: #fff; font-weight: 700; font-size: var(--mu-fs-14); }
.mu-steps4 strong { display: block; font-size: var(--mu-fs-16); color: var(--mu-ink); margin-bottom: var(--mu-s1); }
.mu-steps4 p { margin: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
.mu-steps4 a { font-weight: 600; }
.mu-more { font-weight: 600; }
.mu-more::after { content: " \2192"; }

.mu-linkgrid { display: grid; gap: var(--mu-s4); grid-template-columns: 1fr; margin: 0 0 var(--mu-s5); }
@media (min-width: 600px) { .mu-linkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mu-linkgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mu-linkcard { display: flex; flex-direction: column; gap: var(--mu-s2); padding: var(--mu-s5) var(--mu-s4); border: 1px solid var(--mu-line); border-radius: var(--mu-r2); background: #fff;
  color: inherit; text-decoration: none; box-shadow: var(--mu-shadow-1); }
.mu-linkcard h3 { margin: 0; font-size: var(--mu-fs-18); color: var(--mu-ink); }
.mu-linkcard p { margin: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
.mu-linkcard .mu-more { margin-top: auto; color: var(--mu-brand-700); font-size: var(--mu-fs-14); }
.mu-linkcard:hover { border-color: var(--mu-brand-600); }
.mu-linkcard:hover h3 { color: var(--mu-brand-700); text-decoration: underline; }
.mu-linkcard:focus-visible { box-shadow: var(--mu-focus); outline: none; }
.mu-contactbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mu-s3) var(--mu-s5); padding: var(--mu-s4) var(--mu-s5);
  border-radius: var(--mu-r2); background: var(--mu-brand-900); color: #e3e9fa; }
.mu-contactbar p { margin: 0; }
.mu-contactbar a:not(.mu-btn) { color: #fff; }
.mu-contactbar .mu-btn--secondary { background: transparent; color: #fff; border-color: #9fb0e0; }
.mu-contactbar .mu-btn--secondary:hover { background: rgb(255 255 255 / .1); }
.mu-contactbar__actions { display: flex; flex-wrap: wrap; gap: var(--mu-s3); }

/* ---------------------------------------------------------------- company, contact: data tables, lists, calls to action */
.mu-table--info { min-width: 0; font-size: var(--mu-fs-16); }
.mu-table--info tbody th { width: 34%; white-space: normal; background: var(--mu-bg-2); color: var(--mu-brand-900); }
.mu-table--info td span { display: block; }
.mu-table--info td span.mu-sub { font-weight: 700; color: var(--mu-ink); margin-top: var(--mu-s3); }
.mu-table--info td span.mu-sub:first-child { margin-top: 0; }
.mu-table--info tbody tr:hover > * { background: inherit; }
@media (max-width: 599px) {
  .mu-table--info, .mu-table--info tbody, .mu-table--info tr, .mu-table--info th, .mu-table--info td { display: block; width: auto; }
  .mu-table--info tbody th { position: static; border-bottom: 0; padding-bottom: 2px; }
}
.mu-deflist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--mu-s3); }
.mu-deflist > li { padding-left: var(--mu-s4); border-left: 3px solid var(--mu-brand-100); color: var(--mu-ink-2); }
.mu-deflist b { color: var(--mu-ink); }
.mu-timeline { list-style: none; margin: var(--mu-s4) 0 0; padding: 0; display: grid; gap: var(--mu-s2); }
.mu-timeline li { display: grid; grid-template-columns: 64px 1fr; gap: var(--mu-s3); }
.mu-timeline b { color: var(--mu-brand-700); }
.mu-quote { margin: 0; padding: var(--mu-s5); border-radius: var(--mu-r2); background: var(--mu-brand-50); color: var(--mu-ink-2); }
.mu-quote p:last-child { margin-bottom: 0; }
.mu-cta { text-align: center; padding: var(--mu-s6) var(--mu-s5); border-radius: var(--mu-r2); background: linear-gradient(120deg, var(--mu-brand-50) 0%, #ffffff 80%); border: 1px solid var(--mu-brand-100); }
.mu-cta h2 { font-size: var(--mu-fs-22); color: var(--mu-brand-900); }
.mu-cta p { max-width: 62ch; margin-inline: auto; color: var(--mu-ink-2); }
.mu-cta .mu-actions { justify-content: center; }
.mu-cta__small { font-size: var(--mu-fs-14); color: var(--mu-ink-3); }
.mu-methods { display: grid; gap: var(--mu-s4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .mu-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mu-method { border: 1px solid var(--mu-line); border-radius: var(--mu-r2); padding: var(--mu-s5); background: #fff; }
.mu-method h2 { font-size: var(--mu-fs-18); margin: 0 0 var(--mu-s2); }
.mu-method p { color: var(--mu-ink-2); }
.mu-method p:last-child { margin-bottom: 0; }
.mu-method__link { font-weight: 700; font-size: var(--mu-fs-18); }

/* ---------------------------------------------------------------- order information: numbered terms */
.mu-terms { list-style: none; counter-reset: term; margin: 0; padding: 0; }
.mu-terms > li { counter-increment: term; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--mu-s3); padding: var(--mu-s4) 0; border-top: 1px solid var(--mu-line-2); }
.mu-terms > li:first-child { border-top: 0; padding-top: 0; }
.mu-terms > li::before { content: counter(term); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mu-brand-50);
  border: 1px solid var(--mu-brand-100); color: var(--mu-brand-700); font-weight: 700; font-size: var(--mu-fs-14); grid-row: 1 / span 2; }
.mu-terms > li > h3 { font-size: var(--mu-fs-18); margin: 4px 0 var(--mu-s2); color: var(--mu-ink); }
.mu-terms > li > div { grid-column: 2; color: var(--mu-ink-2); }
.mu-terms > li > div > :last-child { margin-bottom: 0; }
.mu-terms .mu-note { margin-top: var(--mu-s3); }
.mu-terms ul { margin: 0 0 var(--mu-s4); }
.mu-text-alert { color: #b42318; font-weight: 600; }
.mu-paypal { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--mu-s2); padding: var(--mu-s3) var(--mu-s4); border: 1px solid var(--mu-line); border-radius: var(--mu-r2); background: #fff; }
.mu-paypal img { display: block; }
.mu-carriers img { margin-top: var(--mu-s3); }
.mu-us-tariff { margin-top: var(--mu-s4); padding: var(--mu-s4); border-radius: var(--mu-r2); background: #fff7ed; border: 1px solid #fed7aa; }
.mu-us-tariff > :last-child { margin-bottom: 0; }
.mu-us-tariff strong { display: block; margin-bottom: var(--mu-s2); color: #9a3412; }
.mu-terms > li.mu-terms__alert > div { background: #fff; }

/* ---------------------------------------------------------------- the inquiry and order forms (body.mu-formpage)
   Look only: colours, type, corners and the submit button take the v2 design. Their own stylesheet stays as it is; nothing
   here touches the fields' layout, their position, visibility or opacity (the hidden honeypot, the payment radios), the
   form, its names or its script. */
.mu-formpage { background: var(--mu-bg-2); color: var(--mu-ink); font-family: var(--mu-font); }
.mu-formpage :is(input, select, textarea) { font-family: var(--mu-font); border-color: var(--mu-line); border-radius: var(--mu-r2); }
.mu-formpage :is(input, select, textarea):focus { border-color: var(--mu-brand-600); box-shadow: 0 0 0 3px rgb(35 71 194 / .15); }
.mu-formpage .form-card { border-radius: 12px; border-color: var(--mu-line); box-shadow: var(--mu-shadow-1), 0 8px 24px rgb(15 31 77 / .06); }
.mu-formpage .hero { background: linear-gradient(120deg, var(--mu-brand-50) 0%, #ffffff 70%); border-bottom-color: var(--mu-line); }
.mu-formpage .brand-title { color: var(--mu-brand-900); letter-spacing: -.01em; }
.mu-formpage .hero-subtitle { color: var(--mu-ink-2); font-weight: 500; }
.mu-formpage .product-chips span { border-color: var(--mu-brand-100); background: #fff; color: var(--mu-brand-700); }
.mu-formpage :is(.section-title, .form-help-title, .payment-title) { color: var(--mu-brand-900); }
.mu-formpage .section { border-bottom-color: var(--mu-line-2); }
.mu-formpage .form-help { background: var(--mu-brand-50); border-color: var(--mu-brand-100); color: var(--mu-ink-2); border-radius: var(--mu-r2); }
.mu-formpage .product-table { border-color: var(--mu-line); border-radius: var(--mu-r2); }
.mu-formpage .product-table th { background: var(--mu-brand-50); color: var(--mu-brand-900); }
.mu-formpage .product-table td { border-top-color: var(--mu-line-2); }
.mu-formpage .payment-box { border-color: var(--mu-line); border-radius: var(--mu-r2); }
.mu-formpage .payment-card input:checked + .payment-box { border-color: var(--mu-brand-600); box-shadow: 0 0 0 3px rgb(35 71 194 / .18); background: var(--mu-brand-50); }
.mu-formpage .notice-box { border-radius: var(--mu-r2); }
.mu-formpage .actions button[type="submit"] { background: var(--mu-accent-600); box-shadow: none; border-radius: var(--mu-r2); min-height: 48px; }
.mu-formpage .actions button[type="submit"]:hover { background: var(--mu-accent-700); box-shadow: none; transform: none; }
.mu-formpage .actions .reset-button { border-radius: var(--mu-r2); min-height: 48px; }
.mu-formpage a:hover { color: var(--mu-brand-900); }
.mu-formpage .mu-footer { margin-top: var(--mu-s6); }
/* the forms' own stylesheet (outside the shared stylesheet's cascade layers, so it wins over them) underlines and
   colours every link: the shared header and footer keep the v2 look */
.mu-formpage :is(.mu-header, .mu-footer) a { text-decoration: none; }
.mu-formpage .mu-gnav__link { color: var(--mu-ink); }
.mu-formpage .mu-gnav__link:hover { color: var(--mu-brand-700); }
.mu-formpage .mu-lang { color: var(--mu-ink-2); }
.mu-formpage .mu-footer a, .mu-formpage .mu-footer a:hover { color: #ffffff; }
.mu-formpage .mu-footer a:hover { text-decoration: underline; }

/* the forms' header: logo and links, no search form */
.mu-header--plain { position: static; }
.mu-header--plain .mu-header__bar { flex-wrap: wrap; row-gap: 0; padding-block: var(--mu-s2); }
.mu-header--plain .mu-gnav { display: block; order: 3; width: 100%; }
.mu-header--plain .mu-gnav__list { flex-wrap: wrap; }
.mu-header--plain .mu-gnav__link { min-height: 40px; font-size: var(--mu-fs-14); }
.mu-header--plain .mu-lang { display: inline-flex; margin-left: auto; }
@media (min-width: 960px) {
  .mu-header--plain .mu-header__bar { flex-wrap: nowrap; padding-block: 0; }
  .mu-header--plain .mu-gnav { order: 0; width: auto; }
  .mu-header--plain .mu-gnav__link { font-size: var(--mu-fs-16); min-height: 44px; }
}