/* MecanUSA "Engineering Catalog" v2 stylesheet (design source; Phase 4B-2 prototype + 4D + 4E-2A).
   Isolated: loaded only by the prototype pages. No external resources, no !important.
   Class prefix mu- keeps it apart from the legacy classes. */

@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    /* color */
    --mu-brand-900: #0f1f4d;
    --mu-brand-700: #1b3a9a;
    --mu-brand-600: #2347c2;          /* restrained MecanUSA blue */
    --mu-brand-100: #e3e9fa;
    --mu-brand-50:  #f1f4fd;
    --mu-accent-600: #c2410c;         /* one accent: quote / primary conversion */
    --mu-accent-700: #9a3412;
    --mu-ink:   #1a2230;
    --mu-ink-2: #3d4757;
    --mu-ink-3: #5b6577;              /* >= 4.5:1 on white */
    --mu-line:  #d9dee7;
    --mu-line-2: #e9edf3;
    --mu-bg:    #ffffff;
    --mu-bg-2:  #f6f8fb;
    --mu-panel: #f6f8fb;              /* light grey panel behind a product's specs and prices */
    --mu-panel-line: #e1e7f0;
    --mu-ok:    #166534;
    /* type */
    --mu-font: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
    --mu-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
    --mu-fs-12: .75rem; --mu-fs-14: .875rem; --mu-fs-16: 1rem; --mu-fs-18: 1.125rem;
    --mu-fs-22: 1.375rem; --mu-fs-28: 1.75rem; --mu-fs-36: 2.25rem;
    --mu-lh: 1.6;
    /* space (4px scale) */
    --mu-s1: 4px; --mu-s2: 8px; --mu-s3: 12px; --mu-s4: 16px; --mu-s5: 24px; --mu-s6: 32px; --mu-s7: 48px; --mu-s8: 64px;
    /* shape */
    --mu-r1: 4px; --mu-r2: 8px;
    --mu-shadow-1: 0 1px 2px rgb(15 31 77 / .06), 0 1px 1px rgb(15 31 77 / .04);
    --mu-shadow-2: 0 8px 24px rgb(15 31 77 / .12);
    /* layout */
    --mu-max: 1200px;
    --mu-gutter: 16px;
    --mu-header-h: 64px;
    --mu-side-w: 248px;
    --mu-focus: 0 0 0 3px #ffffff, 0 0 0 5px var(--mu-brand-600);
  }
  @media (min-width: 640px) { :root { --mu-gutter: 24px; } }
}

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--mu-header-h) + 16px); }
  body { margin: 0; background: var(--mu-bg); color: var(--mu-ink); font: var(--mu-fs-16)/var(--mu-lh) var(--mu-font); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--mu-brand-700); text-underline-offset: 2px; }
  a:hover { color: var(--mu-brand-900); }
  :focus-visible { outline: none; box-shadow: var(--mu-focus); border-radius: var(--mu-r1); }
  h1, h2, h3 { line-height: 1.25; color: var(--mu-ink); }
  h1 { font-size: var(--mu-fs-28); margin: 0 0 var(--mu-s3); }
  p { margin: 0 0 var(--mu-s4); }
  ul, ol { padding-left: 1.25em; }
  table { border-collapse: collapse; }
  [hidden] { display: none; }
  @media (min-width: 960px) { h1 { font-size: var(--mu-fs-36); } }
  @media (prefers-reduced-motion: reduce) { * { transition: none; scroll-behavior: auto; } }
  /* in-page links (series cards, on-page nav, footnotes) glide to their section; the target still clears the
     sticky header (scroll-padding-top) and focus moves as with a normal anchor. Off under reduced motion. */
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
}

@layer layout {
  .mu-container { width: 100%; max-width: var(--mu-max); margin-inline: auto; padding-inline: var(--mu-gutter); }
  .mu-layout { display: block; padding-bottom: var(--mu-s7); }
  .mu-layout__main { min-width: 0; }
  .mu-layout__main:focus { outline: none; }
  @media (min-width: 960px) {
    .mu-layout { display: grid; grid-template-columns: var(--mu-side-w) minmax(0, 1fr); gap: var(--mu-s6); align-items: start; }
    .mu-layout__side { position: sticky; top: calc(var(--mu-header-h) + var(--mu-s4)); max-height: calc(100vh - var(--mu-header-h) - 32px); overflow: auto; }
  }
  .mu-section { margin-block: var(--mu-s7); }
  .mu-cols-2 { display: grid; gap: var(--mu-s4) var(--mu-s6); }
  @media (min-width: 760px) { .mu-cols-2 { grid-template-columns: 1fr 1fr; } }
}

@layer components {
  /* prototype banner + skip link */
  .mu-proto-banner { background: #fff7e6; color: #6b4300; border-bottom: 1px solid #f2d79b; font-size: var(--mu-fs-12); padding: 6px var(--mu-gutter); text-align: center; }
  .mu-skip { position: absolute; left: 8px; top: -60px; background: var(--mu-brand-700); color: #fff; padding: 8px 12px; z-index: 100; border-radius: var(--mu-r1); }
  .mu-skip:focus { top: 8px; color: #fff; }

  /* buttons */
  .mu-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mu-s2); min-height: 44px; padding: 0 var(--mu-s5);
    border-radius: var(--mu-r1); border: 1px solid transparent; font-weight: 600; font-size: var(--mu-fs-16); line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer; }
  .mu-header__cta { white-space: nowrap; }
  .mu-btn--primary { background: var(--mu-brand-600); color: #fff; }
  .mu-btn--primary:hover { background: var(--mu-brand-700); color: #fff; }
  .mu-btn--secondary { background: #fff; color: var(--mu-brand-700); border-color: var(--mu-brand-600); }
  .mu-btn--secondary:hover { background: var(--mu-brand-50); }
  .mu-btn--accent { background: var(--mu-accent-600); color: #fff; }
  .mu-btn--accent:hover { background: var(--mu-accent-700); color: #fff; }
  .mu-btn--block { display: flex; width: 100%; }
  .mu-actions { display: flex; flex-wrap: wrap; gap: var(--mu-s3); margin: var(--mu-s5) 0 var(--mu-s4); }
  .mu-iconbtn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 1px solid var(--mu-line); background: #fff; border-radius: var(--mu-r1); cursor: pointer; color: var(--mu-ink); }
  .mu-iconbtn::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
  .mu-header__menubtn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z'/%3E%3C/svg%3E"); }
  .mu-header__searchbtn, .mu-search__btn { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 3a7 7 0 0 1 5.6 11.2l5.1 5.1-1.4 1.4-5.1-5.1A7 7 0 1 1 10 3zm0 2a5 5 0 1 0 0 10 5 5 0 0 0 0-10z'/%3E%3C/svg%3E"); }
  .mu-drawer__close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4z'/%3E%3C/svg%3E"); }

  /* header */
  .mu-header { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--mu-line); }
  .mu-header__bar { display: flex; align-items: center; gap: var(--mu-s3); min-height: var(--mu-header-h); }
  .mu-logo img { width: auto; height: 32px; }            /* MeCanW200.png (200 x 48): the logo without the e-mail line */
  .mu-gnav { display: none; }
  .mu-search { display: none; }
  .mu-lang { display: none; font-size: var(--mu-fs-14); color: var(--mu-ink-2); text-decoration: none; }
  .mu-header__cta { display: none; }
  .mu-header__searchbtn { margin-left: auto; }
  .mu-search.is-open { display: flex; position: absolute; left: 0; right: 0; top: 100%; padding: var(--mu-s3) var(--mu-gutter); background: #fff; border-bottom: 1px solid var(--mu-line); box-shadow: var(--mu-shadow-2); }
  .mu-search input[type=search] { flex: 1; min-width: 0; height: 40px; border: 1px solid var(--mu-line); border-radius: var(--mu-r1) 0 0 var(--mu-r1); padding: 0 var(--mu-s3); font: inherit; font-size: var(--mu-fs-14); }
  .mu-search__btn { width: 44px; height: 40px; border: 1px solid var(--mu-brand-600); background: var(--mu-brand-600); color: #fff; border-radius: 0 var(--mu-r1) var(--mu-r1) 0; display: grid; place-items: center; cursor: pointer; }
  .mu-search__btn::before { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
  @media (min-width: 960px) {
    .mu-header__bar { gap: var(--mu-s5); }
    .mu-gnav { display: block; }
    .mu-search { display: flex; width: 220px; margin-left: auto; }
    .mu-search.is-open { position: static; padding: 0; border: 0; box-shadow: none; }
    .mu-lang, .mu-header__cta { display: inline-flex; }
    .mu-header__searchbtn, .mu-header__menubtn { display: none; }
  }
  @media (min-width: 1100px) { .mu-search { width: 260px; } }
  .mu-gnav__list { list-style: none; display: flex; gap: var(--mu-s1); margin: 0; padding: 0; }
  .mu-gnav__btn, .mu-gnav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--mu-s3); border: 0; background: none;
    font: inherit; font-weight: 600; font-size: var(--mu-fs-16); color: var(--mu-ink); text-decoration: none; border-radius: var(--mu-r1); cursor: pointer; }
  .mu-gnav__btn::after { content: ""; width: 8px; height: 8px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
  .mu-gnav__btn[aria-expanded=true]::after { transform: translateY(2px) rotate(-135deg); }
  .mu-gnav__btn:hover, .mu-gnav__link:hover, .mu-gnav__btn[aria-expanded=true] { background: var(--mu-brand-50); color: var(--mu-brand-700); }
  .mu-mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--mu-line); box-shadow: var(--mu-shadow-2); padding-block: var(--mu-s5);
    max-height: calc(100vh - var(--mu-header-h)); overflow-y: auto; overscroll-behavior: contain; }
  /* the category list in the first column; each category's panel (one per category with groups) in the second, one above the other */
  .mu-mega__grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); column-gap: var(--mu-s6); }
  .mu-mega__cats { grid-row: span 6; }
  .mu-mega__panel { grid-column: 2; }
  .mu-mega__panel + .mu-mega__panel { margin-top: var(--mu-s4); padding-top: var(--mu-s4); border-top: 1px solid var(--mu-line-2); }
  /* (A, 2026-11-02) a page whose place is in a category's panel (aria-current, rendered per page) shows that panel only;
     the category list stays the way to the others. With no panel marked (or without :has) every panel shows as before */
  .mu-mega__grid:has(> .mu-mega__panel a[aria-current]) > .mu-mega__panel:not(:has(a[aria-current])) { display: none; }
  .mu-mega__grid:has(> .mu-mega__panel a[aria-current]) > .mu-mega__panel { margin-top: 0; padding-top: 0; border-top: 0; }
  .mu-mega__label { margin: 0 0 var(--mu-s2); font-size: var(--mu-fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mu-ink-3); }
  .mu-mega ul { list-style: none; margin: 0; padding: 0; font-size: var(--mu-fs-14); }
  .mu-mega__cats { border-right: 1px solid var(--mu-line-2); padding-right: var(--mu-s5); }
  .mu-mega__cat { display: block; padding: 8px 10px; border-radius: var(--mu-r1); font-weight: 600; font-size: var(--mu-fs-16); color: var(--mu-ink); text-decoration: none; }
  .mu-mega__cat:hover { background: var(--mu-brand-50); color: var(--mu-brand-700); }
  .mu-mega__all { margin: var(--mu-s3) 0 0; padding-left: 10px; font-size: var(--mu-fs-14); }
  .mu-mega__h { margin: 0 0 var(--mu-s3); font-size: var(--mu-fs-18); }
  .mu-mega__h a { color: var(--mu-ink); text-decoration: none; }
  .mu-mega__h a:hover { color: var(--mu-brand-700); text-decoration: underline; }
  .mu-mega__groups { columns: 3 200px; column-gap: var(--mu-s6); }
  .mu-mega__group { break-inside: avoid; margin-bottom: var(--mu-s4); }
  .mu-mega__glink { display: block; font-weight: 700; color: var(--mu-ink); text-decoration: none; padding-bottom: 4px; margin-bottom: 4px; border-bottom: 2px solid var(--mu-brand-100); }
  .mu-mega__group li a { display: block; padding: 3px 0; color: var(--mu-ink-2); text-decoration: none; }
  .mu-mega a:hover { color: var(--mu-brand-700); text-decoration: underline; }
  .mu-mega a[aria-current] { color: var(--mu-brand-700); font-weight: 700; }
  /* the page's place, rendered per page (v2-header-current): its category and group aria-current="true", its own
     links aria-current="page" - a tint for the category, the group rule in brand blue, tint + left line for the page */
  .mu-mega__cat[aria-current] { background: var(--mu-brand-50); }
  .mu-mega__glink[aria-current] { border-bottom-color: var(--mu-brand-600); }
  .mu-mega__cat[aria-current="page"], .mu-mega__glink[aria-current="page"], .mu-mega__link[aria-current="page"] { background: var(--mu-brand-50); box-shadow: inset 3px 0 0 var(--mu-brand-600); }
  .mu-mega__glink[aria-current="page"], .mu-mega__link[aria-current="page"] { margin-left: -10px; padding-left: 10px; }
  .mu-mega__link[aria-current="page"] { padding-right: 6px; border-radius: 0 var(--mu-r1) var(--mu-r1) 0; }

  /* live-site marker */
  main a[data-live]:not(.mu-btn):not(.mu-card__link)::after, .mu-side a[data-live]::after, .mu-footer a[data-live]::after { content: " \2197"; font-size: .8em; color: var(--mu-ink-3); }

  /* drawer (mobile menu) */
  .mu-drawer { position: fixed; inset: 0; z-index: 50; background: rgb(15 31 77 / .45); }
  .mu-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); background: #fff; overflow: auto; padding: var(--mu-s4); display: flex; flex-direction: column; gap: var(--mu-s4); }
  .mu-drawer__head { display: flex; align-items: center; justify-content: space-between; }
  .mu-drawer__title { font-weight: 700; }
  .mu-drawer__label { margin: 0 0 var(--mu-s2); font-size: var(--mu-fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mu-ink-3); }
  .mu-drawer__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--mu-line-2); }
  .mu-drawer__list > li { border-bottom: 1px solid var(--mu-line-2); }
  .mu-drawer__row { display: flex; align-items: center; }
  .mu-drawer__link { flex: 1; display: block; padding: 12px 4px; color: var(--mu-ink); font-weight: 600; text-decoration: none; }
  .mu-drawer__link[aria-current] { color: var(--mu-brand-700); margin-left: -6px; padding-left: 10px; background: var(--mu-brand-50); }
  .mu-drawer__link[aria-current] + .mu-drawer__toggle { align-self: stretch; height: auto; border-radius: 0; background: var(--mu-brand-50); }
  .mu-drawer__toggle, .mu-side__toggle { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; border-radius: var(--mu-r1); color: var(--mu-ink-2); }
  .mu-drawer__toggle::before, .mu-side__toggle::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s; }
  .mu-drawer__toggle[aria-expanded=true]::before, .mu-side__toggle[aria-expanded=true]::before { transform: rotate(-135deg); }
  .mu-drawer__sub { list-style: none; margin: 0 0 var(--mu-s2); padding: 0 0 0 var(--mu-s4); }
  .mu-drawer__sub a { display: block; padding: 10px 4px; color: var(--mu-ink-2); text-decoration: none; }
  .mu-drawer__sub a[aria-current] { color: var(--mu-brand-700); font-weight: 600; }
  .mu-drawer__link[aria-current="page"], .mu-drawer__sub a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--mu-brand-600); font-weight: 700; }
  .mu-drawer__sub a[aria-current="page"] { margin-left: -6px; padding-left: 10px; background: var(--mu-brand-50); }
  .mu-mega a[aria-current="page"]:focus-visible, .mu-drawer a[aria-current="page"]:focus-visible { box-shadow: inset 3px 0 0 var(--mu-brand-600), var(--mu-focus); }
  @media (forced-colors: active) {               /* no tint or shadow there: underline the place, outline the focus */
    .mu-mega a[aria-current], .mu-drawer a[aria-current] { text-decoration: underline; }
    .mu-mega a[aria-current="page"], .mu-drawer a[aria-current="page"] { text-decoration-thickness: 3px; }
    .mu-mega a:focus-visible, .mu-drawer a:focus-visible { outline: 2px solid; outline-offset: 2px; }
  }

  /* breadcrumb */
  .mu-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mu-s1) var(--mu-s2); margin: var(--mu-s4) 0 var(--mu-s5); padding: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-3); }
  .mu-breadcrumb li + li::before { content: "/"; margin-right: var(--mu-s2); color: var(--mu-line); }
  .mu-breadcrumb a { color: var(--mu-ink-2); }
  .mu-breadcrumb [aria-current] { color: var(--mu-ink); font-weight: 600; }
  /* UI A-3 (A7): below 960 px the side navigation bar right under the trail names the page, so the trail's last item is
     kept for screen readers only and the two read as one block (the trail, its links and the JSON-LD are unchanged) */
  @media (max-width: 959px) {
    .mu-breadcrumb ol { margin-bottom: var(--mu-s2); }
    .mu-breadcrumb li:last-child:not(:first-child) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }

  /* category side navigation */
  .mu-side { font-size: var(--mu-fs-14); border: 1px solid var(--mu-line); border-radius: var(--mu-r2); background: #fff; margin-bottom: var(--mu-s5); }
  .mu-side__title { margin: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--mu-line-2); }
  .mu-side__title a { display: block; flex: 1; padding: 12px var(--mu-s4); font-weight: 700; color: var(--mu-ink); text-decoration: none; }
  .mu-side__title a[aria-current] { color: var(--mu-brand-700); }
  /* mobile: one compact bar that says where you are; opens the category list */
  .mu-side__mobile { display: flex; align-items: center; gap: var(--mu-s2); width: 100%; min-height: 48px; padding: 6px 44px 6px var(--mu-s3); position: relative;
    border: 0; background: none; font: inherit; text-align: left; cursor: pointer; border-radius: var(--mu-r2); }
  .mu-side__mobile::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border: solid var(--mu-ink-2); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); }
  .mu-side__mobile[aria-expanded=true]::after { transform: translateY(-20%) rotate(-135deg); }
  .mu-side__where { flex: none; font-size: var(--mu-fs-12); font-weight: 700; color: var(--mu-ink-3); text-transform: uppercase; letter-spacing: .04em; }
  .mu-side__where::after { content: " \203A"; }
  .mu-side__here { min-width: 0; font-weight: 700; color: var(--mu-brand-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mu-side__list { list-style: none; margin: 0; padding: var(--mu-s2) 0; }
  .mu-side__row { display: flex; align-items: center; }
  .mu-side__link--group { flex: 1; display: block; padding: 8px var(--mu-s4); color: var(--mu-ink); font-weight: 600; text-decoration: none; }
  .mu-side__sub { list-style: none; margin: 0 0 var(--mu-s2); padding: 0; }
  .mu-side__sub a { display: block; padding: 6px var(--mu-s4) 6px calc(var(--mu-s4) + 12px); color: var(--mu-ink-2); text-decoration: none; border-left: 3px solid transparent; }
  .mu-side a:hover { color: var(--mu-brand-700); background: var(--mu-brand-50); }
  .mu-side a[aria-current] { color: var(--mu-brand-700); background: var(--mu-brand-50); font-weight: 700; border-left-color: var(--mu-brand-600); }
  .mu-side__link--group[aria-current] { border-left: 3px solid var(--mu-brand-600); }
  /* UI A-3 (A13): the current group's band runs on under its toggle, at the row's full height */
  .mu-side__link--group[aria-current] { align-self: stretch; display: flex; align-items: center; }
  .mu-side__link--group[aria-current] + .mu-side__toggle { background: var(--mu-brand-50); border-radius: 0; }
  .mu-side__divider { height: 1px; background: var(--mu-line-2); margin: 6px var(--mu-s4); }
  @media (max-width: 959px) {
    .mu-side { margin-bottom: var(--mu-s4); }
    .js .mu-side:not(.is-open) .mu-side__panel { display: none; }
    .mu-side.is-open .mu-side__mobile { border-bottom: 1px solid var(--mu-line-2); border-radius: var(--mu-r2) var(--mu-r2) 0 0; }
    .mu-side__title a { padding-block: 10px; }
    .mu-side__link--group { padding-block: 10px; }
    .mu-side__sub a { padding-block: 9px; }
    .mu-side__list { padding-block: 4px; }
  }
  html:not(.js) .mu-side__mobile { display: none; }
  @media (min-width: 960px) { .mu-side__mobile { display: none; } }

  /* hero / headings / chips */
  .mu-eyebrow { margin: 0 0 var(--mu-s2); font-size: var(--mu-fs-12); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mu-brand-700); }
  .mu-lead { font-size: var(--mu-fs-18); color: var(--mu-ink-2); }
  .mu-hero { display: grid; gap: var(--mu-s5); padding-bottom: var(--mu-s5); border-bottom: 1px solid var(--mu-line-2); }
  /* UI A-3 (A9): a hero without an image column: the title block ends without its last margin and sits closer to the text */
  .mu-hero:not(.mu-hero--feature) { gap: var(--mu-s4); }
  .mu-hero:not(.mu-hero--feature) .mu-hero__head > :last-child { margin-bottom: 0; }
  .mu-hero__media img { border-radius: var(--mu-r2); border: 1px solid var(--mu-line-2); background: var(--mu-bg-2); }
  @media (min-width: 1100px) { .mu-hero--category { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
  .mu-h2 { font-size: var(--mu-fs-22); margin: 0 0 var(--mu-s4); padding-bottom: var(--mu-s2); border-bottom: 2px solid var(--mu-brand-100); }
  .mu-h3 { font-size: var(--mu-fs-16); margin: var(--mu-s5) 0 var(--mu-s2); }
  .mu-h3__note { font-weight: 400; color: var(--mu-ink-3); font-size: var(--mu-fs-14); }
  .mu-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mu-s2); margin: var(--mu-s4) 0 0; padding: 0; }
  .mu-chips li { font-size: var(--mu-fs-12); font-weight: 600; color: var(--mu-brand-700); background: var(--mu-brand-50); border: 1px solid var(--mu-brand-100); border-radius: 999px; padding: 3px 10px; }
  .mu-badge { display: inline-block; vertical-align: middle; font-size: var(--mu-fs-12); font-weight: 700; color: #fff; background: var(--mu-ok); border-radius: var(--mu-r1); padding: 1px 6px; }
  .mu-note { background: var(--mu-brand-50); border: 1px solid var(--mu-brand-100); border-left: 3px solid var(--mu-brand-600); border-radius: 0 var(--mu-r1) var(--mu-r1) 0; padding: var(--mu-s3) var(--mu-s4); font-size: var(--mu-fs-14); margin-top: var(--mu-s4); }
  .mu-small { font-size: var(--mu-fs-14); color: var(--mu-ink-3); }
  .mu-mock { border: 1px dashed #d4a72c; background: #fffbea; color: #6b4300; padding: 4px 8px; border-radius: var(--mu-r1); }

  /* cards */
  .mu-cards { list-style: none; display: grid; gap: var(--mu-s4); margin: 0; padding: 0; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .mu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .mu-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .mu-cards + .mu-video { margin-top: var(--mu-s5); }   /* a video right after product cards */
  .mu-card { border: 1px solid var(--mu-line); border-radius: var(--mu-r2); background: #fff; box-shadow: var(--mu-shadow-1); }
  .mu-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border-radius: var(--mu-r2); }
  .mu-card__link:hover { border-color: var(--mu-brand-600); }
  .mu-card__link:hover .mu-card__title { color: var(--mu-brand-700); text-decoration: underline; }
  .mu-card__img { width: 100%; aspect-ratio: 16 / 10; object-fit: scale-down; background: var(--mu-brand-50); border-bottom: 1px solid var(--mu-line-2); border-radius: var(--mu-r2) var(--mu-r2) 0 0; padding: var(--mu-s3); }
  .mu-card__body { display: flex; flex-direction: column; gap: var(--mu-s2); padding: var(--mu-s4); flex: 1; }
  .mu-card__tag { font-size: var(--mu-fs-12); font-weight: 700; letter-spacing: .04em; color: var(--mu-ink-3); }
  .mu-card__title { font-size: var(--mu-fs-18); font-weight: 700; color: var(--mu-ink); }
  .mu-card__text { font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
  .mu-card__more { margin-top: auto; font-size: var(--mu-fs-14); font-weight: 600; color: var(--mu-brand-700); }
  .mu-card__more::after { content: " \2192"; }

  /* on-page nav */
  .mu-onpage { margin: var(--mu-s5) 0; }
  .mu-onpage ul { list-style: none; display: flex; gap: var(--mu-s2); margin: 0; padding: 0; overflow-x: auto; scrollbar-width: thin; }
  .mu-onpage a { display: inline-block; white-space: nowrap; padding: 8px 14px; border: 1px solid var(--mu-line); border-radius: 999px; font-size: var(--mu-fs-14); color: var(--mu-ink-2); text-decoration: none; background: #fff; }
  .mu-onpage a:hover { border-color: var(--mu-brand-600); color: var(--mu-brand-700); }
  .mu-onpage--sticky { position: sticky; top: var(--mu-header-h); z-index: 10; background: #fff; padding-block: var(--mu-s2); border-bottom: 1px solid var(--mu-line-2); }
  /* UI A-3 (A8): on narrower screens the on-page strip fades out at its right edge, so it reads as scrollable; the end
     padding lets the last item scroll clear of the fade */
  @media (max-width: 959px) {
    .mu-onpage ul { padding-right: var(--mu-s6); -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--mu-s6)), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - var(--mu-s6)), transparent); }
  }

  /* tables */
  .mu-table-wrap { overflow-x: auto; border: 1px solid var(--mu-line); border-radius: var(--mu-r2); background: #fff; }
  .mu-table-wrap:focus-visible { box-shadow: var(--mu-focus); }
  .mu-table { width: 100%; font-size: var(--mu-fs-14); }
  .mu-table th, .mu-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mu-line-2); }
  .mu-table thead th { background: var(--mu-brand-50); color: var(--mu-brand-900); font-weight: 700; font-size: var(--mu-fs-12); letter-spacing: .03em; white-space: nowrap; }
  .mu-table tbody tr:last-child > * { border-bottom: 0; }
  .mu-table tbody th { font-weight: 700; color: var(--mu-ink); white-space: nowrap; position: sticky; left: 0; background: #fff; }
  .mu-table tbody tr:hover > * { background: var(--mu-brand-50); }
  .mu-table--compare { min-width: 760px; }
  .mu-table--compare tbody th { white-space: normal; min-width: 120px; }
  .mu-table--compare thead th { white-space: normal; }
  .mu-table--price { min-width: 520px; }
  .mu-table--price tbody th { font-family: var(--mu-mono); font-size: .8125rem; }
  /* price tables (D13): the whole width of their column, so tables in one section share both edges; in a three-column
     table the item code takes 40% (phones keep their own spread); the price is always the last column: it and its
     heading align right */
  .mu-table-wrap:has(> .mu-table--price) { width: 100%; }
  @media (min-width: 560px) {
    .mu-table--price:not(:has(thead th:nth-child(4))) thead th:first-child { width: 40%; }
  }
  .mu-table--price :is(th, td):last-child { text-align: right; }
  .mu-table--price thead th:last-child { width: 1%; }          /* the price column only as wide as its content */
  .mu-table--price td:last-child { white-space: nowrap; }
  /* phones: the columns wrap instead of the table scrolling sideways (rows, rowspans and order unchanged) */
  @media (max-width: 559px) {
    .mu-table--price { min-width: 0; font-size: .8125rem; }
    .mu-table--price :is(th, td) { padding: 8px 6px; }
    .mu-table--price thead th { white-space: normal; letter-spacing: 0; }
    .mu-table--price tbody th { white-space: normal; position: static; }
    .mu-table--price td:last-child .mu-small { white-space: normal; }   /* a note under the price may wrap; a price never */
  }
  /* Stage Micrometer (C, 2026-11-02): its three scale tables share the column widths of the XY scale table (Code, Length,
     Division, Pitch, Price, Note, as that table lays them out at 1280 px); phones keep the automatic layout */
  @media (min-width: 560px) {
    .mu-table--scale { table-layout: fixed; }
    .mu-table--scale thead th:nth-child(1) { width: 16.5%; }
    .mu-table--scale thead th:nth-child(2) { width: 16.8%; }
    .mu-table--scale thead th:nth-child(3) { width: 18.6%; }
    .mu-table--scale thead th:nth-child(4) { width: 14.5%; }
    .mu-table--scale thead th:nth-child(5) { width: 14.5%; }
    .mu-table--scale thead th:nth-child(6) { width: 19.1%; }
  }
  .mu-num { text-align: right; font-variant-numeric: tabular-nums; }
  .mu-table .mu-num { text-align: right; }
  .mu-price { font-weight: 700; color: var(--mu-ink); white-space: nowrap; }
  .mu-fn { font-size: .75em; vertical-align: super; color: var(--mu-brand-700); }
  .mu-footnotes { list-style: none; padding: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
  .mu-footnotes li { margin-bottom: var(--mu-s2); }
  .mu-checklist { list-style: none; padding: 0; margin: 0; }
  .mu-checklist li { position: relative; padding-left: 26px; margin-bottom: var(--mu-s2); }
  .mu-checklist li::before { content: ""; position: absolute; left: 4px; top: .45em; width: 10px; height: 6px; border: solid var(--mu-brand-600); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

  /* product detail */
  /* first screen: title, then image + short summary side by side, then the long description */
  .mu-product-hero { display: grid; gap: var(--mu-s3) var(--mu-s4); padding-bottom: var(--mu-s5); border-bottom: 1px solid var(--mu-line-2);
    grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    grid-template-areas: "head head" "media summary" "desc desc"; align-items: start; }
  .mu-product-hero__head { grid-area: head; }
  .mu-product-hero__head .mu-lead { margin-bottom: 0; }
  .mu-product-hero__media { grid-area: media; margin: 0; }
  .mu-product-hero__summary { grid-area: summary; min-width: 0; }
  .mu-product-hero__desc { grid-area: desc; }
  .mu-product-hero__media img { width: 100%; border: 1px solid var(--mu-line-2); border-radius: var(--mu-r2); background: #fff; }
  @media (min-width: 760px) {
    .mu-product-hero { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--mu-s4) var(--mu-s6);
      grid-template-areas: "head media" "summary media" "desc desc"; }
  }
  .mu-summary { margin: 0; display: grid; gap: 6px; font-size: var(--mu-fs-14); }
  .mu-summary > div { display: grid; grid-template-columns: 1fr; }
  .mu-summary dt { font-size: var(--mu-fs-12); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mu-ink-3); }
  .mu-summary dd { margin: 0; font-weight: 600; color: var(--mu-ink); }
  @media (min-width: 760px) {
    .mu-summary > div { grid-template-columns: 110px 1fr; gap: var(--mu-s3); }
    .mu-summary dt { font-size: var(--mu-fs-14); text-transform: none; letter-spacing: 0; font-weight: 600; }
  }
  .mu-product-hero__summary .mu-actions { margin-bottom: 0; }
  /* UI A-2 (A10): below 760 px the hero is one column - title, the image at its own size (centred, never enlarged), the
     summary with the buttons, the description; (A4) on phones two buttons share their row equally, three or more stack */
  @media (max-width: 759px) {
    .mu-product-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "media" "summary" "desc"; }
    .mu-product-hero__media { justify-self: center; max-width: 100%; }
    .mu-product-hero__media img { width: auto; max-width: 100%; }
  }
  @media (max-width: 559px) {
    .mu-actions > .mu-btn { flex: 1 1 0; }
    .mu-actions > .mu-btn:first-child:nth-last-child(n+3),           /* a row of three or more: each a full-width row */
    .mu-actions > .mu-btn:first-child:nth-last-child(n+3) ~ .mu-btn { flex-basis: 100%; }
  }
  .mu-facts { list-style: none; padding: 0; margin: 0; font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
  .mu-facts li { padding-left: 22px; position: relative; }
  .mu-facts li::before { content: ""; position: absolute; left: 4px; top: .5em; width: 8px; height: 5px; border: solid var(--mu-ok); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
  .mu-series { list-style: none; display: grid; gap: var(--mu-s3); padding: 0; margin: 0; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .mu-series { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .mu-series { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .mu-series a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: var(--mu-s4); border: 1px solid var(--mu-line); border-top: 3px solid var(--mu-brand-600); border-radius: var(--mu-r2);
    text-decoration: none; color: inherit; background: var(--mu-panel); box-shadow: var(--mu-shadow-1); transition: border-color .15s, background-color .15s, transform .15s; }
  .mu-series a:hover, .mu-series a:focus-visible { border-color: var(--mu-brand-600); background: var(--mu-brand-50); transform: translateY(-1px); }
  .mu-series__name { font-family: var(--mu-mono); font-weight: 700; color: var(--mu-brand-700); }
  .mu-series__text { font-size: var(--mu-fs-14); color: var(--mu-ink-2); }
  .mu-series__go { margin-top: auto; padding-top: var(--mu-s2); font-size: var(--mu-fs-14); font-weight: 600; color: var(--mu-brand-700); }
  .mu-series__go::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); }
  /* anchor targets: html scroll-padding clears the sticky header; this clears the sticky on-page nav */
  .mu-product, .mu-section[id], main [id] { scroll-margin-top: 64px; }
  .mu-product { margin-block: var(--mu-s7); padding: var(--mu-s4); background: var(--mu-panel); border: 1px solid var(--mu-panel-line); border-radius: var(--mu-r2); }
  @media (min-width: 760px) { .mu-product { padding: var(--mu-s5); } }
  .mu-product:target .mu-product__title { background: linear-gradient(var(--mu-brand-50), var(--mu-brand-50)) no-repeat; border-bottom-color: var(--mu-brand-600); }
  .mu-onpage a[aria-current] { background: var(--mu-brand-600); border-color: var(--mu-brand-600); color: #fff; }

  /* gallery */
  .mu-gal { display: flex; flex-direction: column; gap: var(--mu-s2); }
  .mu-gal__main { position: relative; display: block; border: 1px solid var(--mu-line-2); border-radius: var(--mu-r2); background: #fff; overflow: hidden; }
  .mu-gal__main img { width: 100%; }
  .mu-gal__zoom { position: absolute; right: 8px; bottom: 8px; font-size: var(--mu-fs-12); font-weight: 600; color: #fff; background: rgb(15 31 77 / .75); border-radius: var(--mu-r1); padding: 2px 8px; }
  .mu-gal__thumbs { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mu-s2); margin: 0; padding: 0; }
  .mu-gal__thumb { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--mu-line-2); border-radius: var(--mu-r1); padding: 4px; text-decoration: none; background: #fff; }
  .mu-gal__thumb:focus-visible { border-color: var(--mu-brand-600); }   /* hover: in the review-2 block, for hover devices only */
  .mu-gal__thumb img { width: 100%; aspect-ratio: 243 / 136; object-fit: contain; }
  .mu-gal__cap { font-size: var(--mu-fs-12); color: var(--mu-ink-2); line-height: 1.3; }
  .mu-lightbox { border: 0; border-radius: var(--mu-r2); padding: var(--mu-s4); max-width: min(92vw, 900px); width: 100%; box-shadow: var(--mu-shadow-2); }
  .mu-lightbox::backdrop { background: rgb(15 31 77 / .7); }
  .mu-lightbox__fig { margin: 0 0 var(--mu-s3); }
  .mu-lightbox__fig img { margin-inline: auto; max-height: 70vh; width: auto; }
  .mu-lightbox__fig figcaption { margin-top: var(--mu-s2); text-align: center; font-weight: 600; }
  .mu-lightbox__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--mu-s2); }
  .mu-lightbox__count { min-width: 4em; text-align: center; font-size: var(--mu-fs-14); color: var(--mu-ink-3); }
  .mu-product__title { font-size: var(--mu-fs-22); margin: 0 0 var(--mu-s4); padding-bottom: var(--mu-s2); border-bottom: 2px solid var(--mu-brand-100); font-family: var(--mu-font); }
  .mu-product__sub { display: block; font-size: var(--mu-fs-16); font-weight: 400; color: var(--mu-ink-2); margin-top: 2px; }
  .mu-product__grid { display: grid; gap: var(--mu-s5); }
  @media (min-width: 760px) { .mu-product__grid { grid-template-columns: minmax(0, 1fr) 280px; } }
  .mu-product__media img { border: 1px solid var(--mu-line-2); border-radius: var(--mu-r2); background: #fff; }
  .mu-spec { display: grid; gap: 0; margin: 0 0 var(--mu-s4); border: 1px solid var(--mu-line); border-radius: var(--mu-r2); overflow: hidden; background: #fff; }
  .mu-spec > div { display: grid; grid-template-columns: minmax(130px, 40%) 1fr; border-bottom: 1px solid var(--mu-line-2); }
  .mu-spec > div:last-child { border-bottom: 0; }
  .mu-spec dt { padding: 8px 12px; background: var(--mu-brand-50); font-size: var(--mu-fs-14); color: var(--mu-ink-2); font-weight: 600; }
  .mu-spec dd { margin: 0; padding: 8px 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .mu-docs { list-style: none; display: flex; flex-wrap: wrap; gap: var(--mu-s2); padding: 0; margin: 0; }
  .mu-doc { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--mu-line); border-radius: var(--mu-r1); font-size: var(--mu-fs-14); text-decoration: none; color: var(--mu-ink); background: #fff; }
  .mu-doc:hover { border-color: var(--mu-brand-600); color: var(--mu-brand-700); }
  .mu-doc__meta { font-size: var(--mu-fs-12); font-weight: 700; color: #fff; background: #b91c1c; border-radius: 3px; padding: 0 4px; }
  .mu-faq details { border: 1px solid var(--mu-line); border-radius: var(--mu-r2); margin-bottom: var(--mu-s2); background: #fff; overflow: hidden; }
  .mu-faq summary { cursor: pointer; padding: 12px var(--mu-s4); font-weight: 600; list-style-position: inside; background: var(--mu-panel); }
  .mu-faq details[open] summary { border-bottom: 1px solid var(--mu-line-2); background: var(--mu-brand-50); }
  .mu-faq details p { padding: 12px var(--mu-s4); margin: 0; color: var(--mu-ink-2); }

  /* help / conversion block */
  .mu-help { margin-block: var(--mu-s7) 0; padding: var(--mu-s5); border-radius: var(--mu-r2); background: var(--mu-brand-50); border: 1px solid var(--mu-brand-100); }
  .mu-help__title { font-size: var(--mu-fs-22); margin: 0 0 var(--mu-s2); }
  .mu-help .mu-actions { margin-bottom: 0; }

  /* footer */
  .mu-footer { background: var(--mu-brand-900); color: #d6dcef; font-size: var(--mu-fs-14); }
  .mu-footer a { color: #ffffff; text-decoration: none; }
  .mu-footer a:hover { text-decoration: underline; color: #fff; }
  .mu-footer a[data-live]::after { color: #9fb0e0; }
  .mu-footer__grid { display: grid; gap: var(--mu-s5); padding-block: var(--mu-s7) var(--mu-s5); grid-template-columns: 1fr; }
  @media (min-width: 640px) { .mu-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 960px) { .mu-footer__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }   /* one equal column per section */
  .mu-footer__h { font-size: var(--mu-fs-14); text-transform: uppercase; letter-spacing: .06em; color: #fff; margin: 0 0 var(--mu-s3); }
  .mu-footer ul { list-style: none; padding: 0; margin: 0; }
  .mu-footer li { margin-bottom: 6px; }
  @media (max-width: 959px) {
    /* Enlarge only the footer form links; leave desktop and the fixed dock unchanged. */
    .mu-footer a[href$="/inquiry.html"], .mu-footer a[href$="/order.html"] {
      display: inline-flex; align-items: center; min-width: 44px; min-height: 44px;
    }
  }
  .mu-footer address { font-style: normal; margin-bottom: var(--mu-s3); line-height: 1.7; }
  .mu-footer__bottom { border-top: 1px solid rgb(255 255 255 / .15); padding-block: var(--mu-s4); }
  .mu-footer__bottom p { margin: 0; color: #aab5d6; font-size: var(--mu-fs-12); }

  /* mobile CTA bar */
  .mu-ctabar { display: none; }
  @media (max-width: 959px) {
    .has-ctabar { padding-bottom: 72px; }
    .has-ctabar .mu-product-hero .mu-actions { display: none; }      /* the fixed bar already offers both */
    .mu-ctabar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mu-s2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
      padding: var(--mu-s2) var(--mu-gutter) calc(var(--mu-s2) + env(safe-area-inset-bottom)); background: rgb(255 255 255 / .97); border-top: 1px solid var(--mu-line); box-shadow: 0 -4px 16px rgb(15 31 77 / .08); }
    .mu-ctabar .mu-btn { min-height: 48px; }
  }
}

@layer utilities {
  .mu-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  body.mu-noscroll { overflow: hidden; }
}

/* ===== Phase 4D additions (appended to the Phase 4B-2 stylesheet to form mu-v2.css) ===== */
@layer components {
  /* Category hero: the original category image at full content width, never upscaled.
     --mu-natural-w is the image's own width (set per image by the generator), so a smaller
     image stays at its natural size and the aspect ratio always comes from width/height. */
  .mu-hero--feature { display: block; }
  .mu-hero--feature .mu-hero__head { max-width: 760px; }
  .mu-hero--feature .mu-hero__media { margin: var(--mu-s4) 0 var(--mu-s5); }
  .mu-hero--feature .mu-hero__media img { display: block; width: 100%; max-width: var(--mu-natural-w, 100%); height: auto;
    border: 1px solid var(--mu-line-2); border-radius: var(--mu-r2); background: var(--mu-bg-2); }
  .mu-hero--feature .mu-hero__body { max-width: 880px; }
  @media (max-width: 639px) {
    .mu-hero--feature .mu-hero__media { margin-inline: calc(-1 * var(--mu-gutter)); }
    .mu-hero--feature .mu-hero__media img { border-radius: 0; border-inline: 0; }
  }

  /* Persistent Inquiry / Order access on every page, kept clear of the LiveChat widget.
     LiveChat sits at the bottom LEFT (set in the LiveChat dashboard, not in the page), on the bottom edge, 2 px from the side.
     Its real size, measured on 2026-11-05 (the whole box takes taps, its transparent margin too):
       phones   bar 281 x 63, greeting card 295 x 112 (133 high for a moment while it appears)
       others   button 84 x 84, input 320 x 116, sample questions 320 x 254, greeting card 293 x 175
     So the dock is a compact box at the bottom right: one row from 640 px, two rows on phones. 375 px is the
     narrowest phone with room beside the card; narrower, the dock stands above it.
     If LiveChat moves or changes shape in the dashboard, measure again. */
  :root { --mu-dock-h: 82px; }
  /* z-index 25: above page content and the sticky on-page nav (10), below the header and its Products menu (30),
     the mobile drawer (50) and the image viewer (top layer) */
  .mu-dock { position: fixed; z-index: 25; display: flex; gap: var(--mu-s2); right: calc(var(--mu-s2) + env(safe-area-inset-right)); bottom: calc(var(--mu-s2) + env(safe-area-inset-bottom));
    padding: 6px; background: rgb(255 255 255 / .97); border: 1px solid var(--mu-line); border-radius: var(--mu-r2); box-shadow: var(--mu-shadow-2); }
  .mu-dock .mu-btn { min-height: 44px; padding-inline: var(--mu-s4); }
  /* the footer's last line clears the dock */
  .has-dock .mu-footer__bottom { padding-bottom: calc(var(--mu-dock-h) + 24px); }
  @media (min-width: 960px) {
    .mu-dock { right: var(--mu-s5); bottom: var(--mu-s5); }
    /* the sticky side navigation never reaches down to the dock */
    .has-dock .mu-layout__side { max-height: calc(100vh - var(--mu-header-h) - 32px - var(--mu-dock-h) - 24px); }
    /* when the footer scrolls in, the dock rises to just above it; the layout's bottom space keeps the
       end of the sticky side navigation clear of that raised dock */
    .has-dock .mu-layout { padding-bottom: calc(var(--mu-dock-h) + 48px); }
  }
  @media (max-width: 639px) {
    :root { --mu-dock-h: 96px; }
    .mu-dock { flex-direction: column; gap: 6px; right: calc(var(--mu-s1) + env(safe-area-inset-right)); padding: var(--mu-s1); }
    .mu-dock .mu-btn { width: 62px; padding-inline: 0; font-size: var(--mu-fs-14); }
  }
  @media (max-width: 374px) {
    .mu-dock { bottom: calc(140px + env(safe-area-inset-bottom)); }
  }
  /* the widget stays above everything and would cover the end of the open phone menu: it steps aside until the menu closes */
  body.mu-noscroll #chat-widget-container { opacity: 0 !important; pointer-events: none !important; }
}

/* ===== Phase 4E-2A: generator-managed shared blocks ===== */
@layer components {
  /* the <div id> wrappers that mecangen manages must not create boxes (the header stays sticky) */
  #mu-header, #mu-side, #mu-footer, #mu-dock { display: contents; }
  /* side navigation: the partial is the same for every page of the category; the group holding the
     page marked aria-current="page" is open (JS adds .is-open; without JS :has() does the same) */
  .mu-side__sub { display: none; }
  .mu-side__group.is-open > .mu-side__sub { display: block; }
  html:not(.js) .mu-side__group:has([aria-current]) > .mu-side__sub { display: block; }
  /* the source heading text keeps its " - " separator; it is read, not shown, between model and title */
  .mu-product__sep { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* section labels that are not headings (the source page had no heading there) */
  .mu-label { font-size: var(--mu-fs-16); font-weight: 700; margin: var(--mu-s5) 0 var(--mu-s2); color: var(--mu-ink); }
  .mu-label--h2 { font-size: var(--mu-fs-22); padding-bottom: var(--mu-s2); border-bottom: 2px solid var(--mu-brand-100); margin-top: 0; }
  /* UI A-2 (A6): a label is a quiet caption below the h3 level: smaller, lighter and grey; the --h2 form stays a heading */
  .mu-label:not(.mu-label--h2) { font-size: var(--mu-fs-14); font-weight: 600; color: var(--mu-ink-2); }
  .mu-label:not(.mu-label--h2) + :is(h3, .mu-h3) { margin-top: var(--mu-s1); }   /* a label sits on the heading it introduces */
  .mu-series__name { font-size: inherit; margin: 0; }
}
@layer components {
  .mu-series .mu-badge { align-self: flex-start; }
  .mu-series__go { white-space: nowrap; }
}

/* ===== Phase 3 design review 1: three-item grid, shrinkable grid items, phone spec lists, centred figures ===== */
@layer layout {
  /* grid items may shrink below their content's width: a wide table or image never widens the grid */
  .mu-cols-2 > *, .mu-cols-3 > * { min-width: 0; }
  /* three items side by side on wide screens (one column on phones) */
  .mu-cols-3 { display: grid; gap: var(--mu-s4) var(--mu-s6); }
  @media (min-width: 760px) { .mu-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
@layer components {
  /* phones: each spec label above its value, full width */
  @media (max-width: 559px) {
    .mu-spec > div { grid-template-columns: 1fr; }
    .mu-spec dt { padding-bottom: 2px; }
    .mu-spec dd { padding-top: 2px; }
  }
  /* figures: an image (or an enlargeable image) centred in the text column, with its caption under it;
     .mu-figures puts two side by side from 640 px; --row lines up several small images in one figure */
  .mu-figure { margin: var(--mu-s5) 0; text-align: center; }
  .mu-figure img { margin-inline: auto; }
  .mu-figure .mu-gal__main { display: inline-block; max-width: 100%; vertical-align: top; }   /* its width cap: inline, as the image's */
  .mu-figure > figcaption { margin-top: var(--mu-s2); font-size: var(--mu-fs-14); color: var(--mu-ink-3); }
  .mu-figure--row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--mu-s4); }
  .mu-figure--row > figcaption { flex-basis: 100%; }
  .mu-figures { display: grid; gap: var(--mu-s5); align-items: start; justify-items: center; margin: var(--mu-s5) 0; }
  @media (min-width: 640px) { .mu-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mu-figures > .mu-figure { margin: 0; }
  /* a section heading directly over a product panel: the panel follows it closely */
  .mu-h2 + .mu-product { margin-top: var(--mu-s4); }
}

/* ===== Phase 3 design review 2: related product cards, hover and focus on linked images ===== */
@layer components {
  .mu-related__title { margin-top: var(--mu-s6); font-weight: 600; text-align: center; }
  .mu-related { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mu-s4); max-width: 600px; margin: var(--mu-s3) auto 0; }
  @media (min-width: 560px) { .mu-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .mu-related__item { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--mu-s4); background: var(--mu-panel); border: 1px solid var(--mu-panel-line); border-radius: var(--mu-r2); }
  .mu-related__item > * { margin: 0; }
  .mu-related__item > * + * { margin-top: var(--mu-s2); }
  .mu-related__item > p:has(> a > img) { line-height: 0; }   /* no line gap under the image */

  /* linked images: the Enlarge frames, gallery thumbnails, cards and plain image links (images without a link are untouched) */
  .mu-card__link { overflow: hidden; }                     /* clips the card image's zoom to the card's corners */
  @media (prefers-reduced-motion: no-preference) {
    .mu-gal__main, .mu-gal__thumb, .mu-card { transition: border-color .18s ease, box-shadow .18s ease; }
    .mu-gal__main img, .mu-gal__thumb img, .mu-card__img,
    .mu-layout__main a:not(.mu-gal__main):not(.mu-gal__thumb):not(.mu-card__link) > img { transition: transform .18s ease, box-shadow .18s ease; }
  }
  @media (hover: hover) {                                  /* no hover state is left behind by a tap */
    .mu-gal__main:hover, .mu-gal__thumb:hover { border-color: var(--mu-brand-600); box-shadow: 0 4px 12px rgb(15 31 77 / .16); }
    .mu-card:has(> .mu-card__link:hover) { border-color: var(--mu-brand-600); box-shadow: var(--mu-shadow-2); }
    .mu-layout__main a:not(.mu-gal__main):not(.mu-gal__thumb):not(.mu-card__link):hover > img { box-shadow: 0 0 0 1px var(--mu-brand-600), 0 4px 12px rgb(15 31 77 / .16); }
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .mu-gal__main:hover img, .mu-gal__thumb:hover img, .mu-card__link:hover .mu-card__img,
    .mu-layout__main a:not(.mu-gal__main):not(.mu-gal__thumb):not(.mu-card__link):hover > img { transform: scale(1.02); }
  }
  .mu-gal__main:focus-visible, .mu-gal__thumb:focus-visible { border-color: var(--mu-brand-600); box-shadow: var(--mu-focus); }
  .mu-card:has(> .mu-card__link:focus-visible) { border-color: var(--mu-brand-600); }
  .mu-layout__main a:not(.mu-gal__main):not(.mu-gal__thumb):not(.mu-card__link):focus-visible:has(> img) { box-shadow: none; }
  .mu-layout__main a:not(.mu-gal__main):not(.mu-gal__thumb):not(.mu-card__link):focus-visible > img { box-shadow: var(--mu-focus); }
}

/* ===== Phase 3 design review 2: the side navigation's top link (the category's top page), for every category ===== */
@layer components {
  .mu-side a.mu-side__link--title { display: flex; align-items: center; justify-content: space-between; gap: var(--mu-s2);
    background: #e6edff; color: #173b9b; transition: background-color .15s ease; }
  .mu-side a.mu-side__link--title::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 4px;
    border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); opacity: .7; }   /* a quiet "go to" chevron */
  @media (hover: hover) { .mu-side a.mu-side__link--title:hover { background: #d3defd; color: #173b9b; } }
  .mu-side a.mu-side__link--title[aria-current] { color: #173b9b; box-shadow: inset 3px 0 0 var(--mu-brand-600); }
  .mu-side a.mu-side__link--title:focus-visible { box-shadow: var(--mu-focus); position: relative; z-index: 1; }
  .mu-side a.mu-side__link--title[aria-current]:focus-visible { box-shadow: inset 3px 0 0 var(--mu-brand-600), var(--mu-focus); }
  @media (min-width: 960px) { .mu-side a.mu-side__link--title { border-radius: calc(var(--mu-r2) - 1px) calc(var(--mu-r2) - 1px) 0 0; } }
  @media (prefers-reduced-motion: reduce) { .mu-side a.mu-side__link--title { transition: none; } }
}

/* ===== Phase 3 design review 2: product hero, the image sits lower beside the title-and-summary group ===== */
/* Side by side only (760 px and up). The image area takes the full height of the left group; two empty spacers share
   the free height above and below the image, each up to --mu-hero-media-shift: the image moves down by the smaller of
   that cap and the distance that centres it on the left group. The text, the image's size and the hero's height stay. */
@layer components {
  @media (min-width: 760px) {
    .mu-product-hero { --mu-hero-media-shift: 40px; --mu-hero-media-nudge: 18px; }
    .mu-product-hero__media { align-self: stretch; display: flex; flex-direction: column; row-gap: 0; }
    .mu-product-hero__media::before, .mu-product-hero__media::after { content: ""; flex: 1 1 0; max-height: var(--mu-hero-media-shift); }
    .mu-product-hero__media > * { flex: none; }
    .mu-product-hero__media > * + * { margin-top: var(--mu-s2); }
  }
  /* PC only: a further move down that leaves the layout alone (relative offset: the text and the hero's height stay) */
  @media (min-width: 960px) { .mu-product-hero__media { position: relative; top: var(--mu-hero-media-nudge); } }
}

/* ===== Phase 3 OCA: compact cards for small product images (no upscaling; the image area keeps a modest height) ===== */
@layer components {
  .mu-cards--compact .mu-card__img { aspect-ratio: auto; height: 170px; object-fit: scale-down; }
}

/* ===== Phase 3 OCA review: heading lines, caution notes, out-of-stock labels (reusable) ===== */
@layer components {
  /* a second line inside a heading: the item code first, the product name below it (the heading text is unchanged) */
  .mu-title-line { display: block; }
  /* caution note: availability or safety information that needs attention (calm red, not an alarm) */
  .mu-note--alert { background: #fdf3f3; border-color: #f2cccc; border-left-color: #c53030; }
  .mu-note--alert > strong:first-child { color: #9b1c1c; }
  /* a stock status that stops an order (out of stock, discontinued) */
  .mu-stock-out { color: #b91c1c; font-weight: 700; }
}

/* ===== Phase 3 OCA review: an out-of-stock chip (the other chips stay blue) ===== */
@layer components {
  .mu-chips li.mu-chip--alert { color: #9b1c1c; background: #fdf3f3; border-color: #f2cccc; }
}

/* ===== Phase 3 UI: a compact Enlarge link for small images (the label is read, not drawn over the image) ===== */
@layer components {
  .mu-gal__main--compact .mu-gal__zoom { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .mu-gal__main--compact { cursor: zoom-in; }

  /* ---- Final design D-2 (D2-D6, D8, D10; D1 replaced by D13) and later (D7, D14, D17-D19, D20, D22, D23, D25; C2, B) ---- */
  /* D2: running text broken into even lines (no lone last word); no width limit */
  .mu-layout__main p, .mu-layout__main li { text-wrap: pretty; }
  /* D3: section headings (the on-page navigation's targets) carry a short brand accent on their line; sections a little closer */
  .mu-h2, .mu-label--h2 { position: relative; }   /* D18: a heading-styled label carries the same accent */
  :is(.mu-h2, .mu-label--h2)::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 48px; height: 2px; background: var(--mu-brand-600); }
  .mu-section { margin-block: 40px; }
  /* D4: in a three-column group, a label (an item code link) is centred over the image under it */
  .mu-cols-3 > * > .mu-label { text-align: center; }
  /* D5: in a two-column block, a column ending with document links stretches so the links line up at the bottom */
  .mu-cols-2 > :has(> .mu-docs:last-child) { display: flex; flex-direction: column; }
  .mu-cols-2 > * > .mu-docs:last-child { margin-top: auto; }
  /* D6: side-by-side figures centred on each other vertically */
  .mu-figures { align-items: center; }
  /* D8: a very long current page in the trail is cut with an ellipsis on wide screens (the full name stays in the page) */
  @media (min-width: 960px) {
    .mu-breadcrumb [aria-current] { display: inline-block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  }
  /* D10: key words in running text in a restrained dark brand blue (not links: no underline; not notes, tables, headings, buttons) */
  .mu-layout__main :is(.mu-section, .mu-product, .mu-hero__body) > p:not([class]) > strong { color: var(--mu-brand-900); }
  /* D7: a title part kept on one line (marked in the page), so a long title breaks between its parts */
  .mu-nobr { white-space: nowrap; }
  /* the same on desktop only (960 px and up, where the part fits); narrower screens wrap it freely */
  @media (min-width: 960px) { .mu-nobr-wide { white-space: nowrap; } }
  /* D14: price-table rows alternate white / pale blue-grey; not where a cell spans rows (the grouping stays clear) */
  .mu-table--price:not(:has([rowspan])) tbody tr:nth-child(even):not(:hover) > * { background: #f5f7fb; }
  /* D19: the subtitle under the page title set apart from running text: a little larger, light blue-grey */
  .mu-lead { font-size: 1.1875rem; font-weight: 400; color: #44537a; }
  /* D22: a subtitle kept inside the H1 (marked in the page) looks like the subtitle under a title */
  .mu-h1-sub { margin-top: var(--mu-s3); font-size: 1.1875rem; font-weight: 400; line-height: 1.5; color: #44537a; }
  /* D17: a procedure's steps as numbered cards (ol.mu-steps); the number is the list's own order */
  .mu-steps { list-style: none; counter-reset: mu-step; padding: 0; margin: var(--mu-s4) 0; display: grid; gap: var(--mu-s3); }
  .mu-steps > li { counter-increment: mu-step; position: relative; margin: 0; padding: 12px 16px 12px 56px; border: 1px solid var(--mu-line-2); border-radius: var(--mu-r2); background: #fff; }
  .mu-steps > li::before { content: counter(mu-step); position: absolute; left: 16px; top: 11px; width: 28px; height: 28px; border-radius: 50%;
    background: var(--mu-brand-600); color: #fff; font-weight: 700; font-size: var(--mu-fs-14); display: grid; place-items: center; }
  /* D23: in a three-column group, a heading directly over a figure is centred over it; where one column has a bold
     line under its figure, the columns share their rows (side by side only), so every description starts level */
  .mu-cols-3 > * > .mu-h3:has(+ .mu-figure) { text-align: center; }
  @media (min-width: 760px) {
    .mu-cols-3:has(> * > .mu-figure + p > strong:only-child) > * { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .mu-cols-3:has(> * > .mu-figure + p > strong:only-child) > * > .mu-figure { margin-top: var(--mu-s4); }
    .mu-cols-3:has(> * > .mu-figure + p > strong:only-child) > * > .mu-figure + p:not(:has(> strong:only-child)) { grid-row: 4; }
  }
  /* D25: footnotes hang: the mark in its own column, every line of the text from the same left edge */
  .mu-footnotes > li { position: relative; padding-left: 2em; }
  .mu-footnotes > li > .mu-fn:first-child { position: absolute; left: 0; top: 0; }
  /* D20: a hero image marked lower (Outdoor roll page) sits 24 px further down, side by side only (layout unchanged) */
  @media (min-width: 760px) { .mu-product-hero__media--lower > img { transform: translateY(24px); } }
  /* C2: on phones a five-column price table whose product cells span its rows (the 3D Glasses tables, one product
     each) is laid out again by CSS only - the product line (item code, frame colour, absorb axis, under their own
     headings) on top, then the quantity / price pairs under their headings; every cell is the table's own, in order */
  @media (max-width: 559px) {
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-width: 0; }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) :is(thead, tbody, tr) { display: contents; }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) :is(th, td) { order: 4; grid-column: span 3; white-space: normal; }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) thead th { width: auto; }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) thead th:nth-child(-n+3) { order: 1; grid-column: span 2; border-bottom: 0; padding-bottom: 2px; }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) tbody tr:first-child > [rowspan] { order: 2; grid-column: span 2; background: var(--mu-brand-50); padding-top: 2px; }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) thead th:nth-child(n+4) { order: 3; border-top: 1px solid var(--mu-line-2); }
    .mu-table--price:has(thead th:nth-child(5)):has(tbody [rowspan]) :is(th, td):last-child { text-align: right; }
  }
  /* B: one stock / sales status label per state - the same pill, the state in words and in a colour with a dot:
     available (green), out of stock / sold out (amber), discontinued (grey), contact us (blue). "New" is a promotion,
     not a state: its own purple badge without a dot */
  .mu-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--mu-fs-12); font-weight: 700; line-height: 1.4;
    border-radius: 999px; padding: 2px 9px; border: 1px solid; white-space: nowrap; vertical-align: middle; }
  .mu-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .mu-status--ok, .mu-chips li.mu-status--ok { color: #166534; background: #ecfdf3; border-color: #bbf7d0; }
  .mu-status--out, .mu-chips li.mu-status--out { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
  .mu-status--ended, .mu-chips li.mu-status--ended { color: #475569; background: #f1f5f9; border-color: #cbd5e1; }
  .mu-status--ask, .mu-chips li.mu-status--ask { color: var(--mu-brand-700); background: var(--mu-brand-50); border-color: var(--mu-brand-100); }
  .mu-chips li.mu-status { padding: 3px 10px; }
  .mu-price .mu-status, td > .mu-status { margin-top: 2px; }
  .mu-badge--new { color: #5b21b6; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 999px; padding: 1px 8px; }
  /* B on phones: in a table cell the label may wrap and is a little tighter, so it never widens a price table (the dot
     stays with the first line) */
  @media (max-width: 559px) {
    .mu-table .mu-status { white-space: normal; align-items: flex-start; gap: 4px; padding: 1px 6px; font-size: 11px; text-align: left; }
    .mu-table .mu-status::before { margin-top: calc((1.4em - 7px) / 2); }
  }
}

/* ===== MA design round 1 (2026-11-06): Microscope & Accessories pages only ===== */
/* Scoped by the page's side navigation (body:has(.mu-side[aria-label="Microscope & Accessories"]) = body:has(.mu-side[aria-label="Microscope & Accessories"])), so the
   Film V2 pages and every other page keep their look. Text, prices, images and links are unchanged; only spacing,
   colour, borders and arrangement. Without :has() support the pages look as before. */
@layer components {
  /* 1. running text: the introduction reads in even lines of a comfortable length */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-hero__body > p, body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section > p:not([class]) { max-width: 46rem; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-lead { text-wrap: balance; }
  /* density: sections and their headings a little closer, as on the legacy pages */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section { margin-block: 36px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-h2 { margin-bottom: 14px; }

  /* 2. cards: compact inside - no heading or figure margins on top of the card padding, height from the content */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body { padding: 14px 16px; gap: 8px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > * { margin-top: 0; margin-bottom: 0; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-figure { margin-block: 2px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-label + .mu-h3 { margin-top: -4px; }

  /* 3. independent blocks keep apart: 20 px between cards, tables and figure groups; 32 px before a new heading */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section > :is(.mu-cols-2, .mu-cols-3, .mu-cards, .mu-card, .mu-table-wrap, .mu-product__grid, .mu-figures, .mu-faq, p)
    + :is(.mu-cols-2, .mu-cols-3, .mu-cards, .mu-card, .mu-table-wrap, .mu-product__grid, .mu-figures, .mu-video) { margin-top: 20px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section > * + :is(.mu-h2, .mu-label--h2) { margin-top: 32px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section > :is(.mu-cols-2, .mu-cols-3, .mu-cards, .mu-card, .mu-table-wrap) + :is(.mu-h3, .mu-label) { margin-top: 28px; }

  /* 4-5. pale blue for information cards (no product photo area), card headings in a calm dark blue */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card, body:has(.mu-side[aria-label="Microscope & Accessories"]) li.mu-card:not(:has(.mu-card__img)) { background: #f5f8fe; border-color: #dfe6f5; box-shadow: none; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card .mu-figure img { background: #fff; border-radius: var(--mu-r1); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card .mu-h3, body:has(.mu-side[aria-label="Microscope & Accessories"]) li.mu-card:not(:has(.mu-card__img)) .mu-card__title { color: var(--mu-brand-700); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > p > strong:first-child { color: var(--mu-brand-900); }

  /* 6. specimen contents (SP51): each organ group a small card - name in dark blue, its numbered list below;
     groups alternate pale blue / white; the slide image beside them in a white frame */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid { align-items: start; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid + .mu-product__grid { margin-top: 20px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid > div > .mu-h3 { margin: 0; padding: 10px 14px 2px; font-size: var(--mu-fs-16); color: var(--mu-brand-700);
    background: #f5f8fe; border: 1px solid #dfe6f5; border-bottom: 0; border-radius: var(--mu-r2) var(--mu-r2) 0 0; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid > div > .mu-h3 + p { margin: 0 0 10px; padding: 2px 14px 10px; font-size: var(--mu-fs-14); color: var(--mu-ink-2);
    background: #f5f8fe; border: 1px solid #dfe6f5; border-top: 0; border-radius: 0 0 var(--mu-r2) var(--mu-r2); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid > div > .mu-h3:nth-of-type(even), body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid > div > .mu-h3:nth-of-type(even) + p { background: #fff; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid > .mu-figure { margin: 0; padding: 10px; background: #fff; border: 1px solid #dfe6f5; border-radius: var(--mu-r2); }

  /* 7. product list cards (a linked product name, a small photo, one line): 4 across on PC, 3 on tablets, 2 on phones */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) :is(.mu-cols-2, .mu-cols-3):has(> .mu-card > .mu-card__body > .mu-h3:first-child > a) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  @media (min-width: 760px) { body:has(.mu-side[aria-label="Microscope & Accessories"]) :is(.mu-cols-2, .mu-cols-3):has(> .mu-card > .mu-card__body > .mu-h3:first-child > a) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { body:has(.mu-side[aria-label="Microscope & Accessories"]) :is(.mu-cols-2, .mu-cols-3):has(> .mu-card > .mu-card__body > .mu-h3:first-child > a) { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body:has(> .mu-h3:first-child > a) { padding: 10px 12px 12px; gap: 6px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-h3:first-child:has(> a) { font-size: var(--mu-fs-16); text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-h3:first-child > a { color: var(--mu-brand-700); text-decoration: none; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-h3:first-child > a:hover { text-decoration: underline; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body:has(> .mu-h3:first-child > a) > p { font-size: .8125rem; line-height: 1.5; color: var(--mu-ink-2); }

  /* 8. product introduction cards two across: the photo larger in a lower image area (up to about 1.4x, centred) */
  @media (min-width: 560px) {
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-cards:not(.mu-cards--3, .mu-cards--compact) .mu-card__img { aspect-ratio: auto; height: 230px; padding: 16px; object-fit: contain; }
  }

  /* 9. tables: a thin line between columns */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table :is(th, td):not(:last-child) { border-right: 1px solid #e6ebf3; }

  /* 10. the product's own price table (right under the Price heading): taller rows, larger name and price, pale blue */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #price > .mu-h2 + .mu-table-wrap { border-color: #c9d6f5; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #price > .mu-h2 + .mu-table-wrap .mu-table thead th { background: var(--mu-brand-100); font-size: .8125rem; padding: 12px 14px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #price > .mu-h2 + .mu-table-wrap .mu-table tbody :is(th, td) { padding: 14px; font-size: var(--mu-fs-16); background: #f9fbff; vertical-align: middle; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #price > .mu-h2 + .mu-table-wrap .mu-price { font-size: 1.125rem; color: var(--mu-brand-900); }

  /* 11. system composition tables (a heading over several item columns): fixed columns, the item columns equal and
     alternating white / pale blue, the heading centred over them, photos centred, set codes readable */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) { table-layout: fixed; min-width: 640px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) thead th:first-child { width: 20%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) thead th:nth-child(2) { width: 14%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) thead th[colspan] { text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) :is(td, th) { vertical-align: middle; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody td:nth-child(n+3), body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) + tr > td:nth-child(n+2) { text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) td img { margin-inline: auto; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr > td:is(:nth-child(4), :nth-child(6), :nth-child(8)) { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) + tr > td:is(:nth-child(4), :nth-child(6), :nth-child(8)) { background: transparent; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) + tr > td:is(:nth-child(3), :nth-child(5), :nth-child(7)) { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody td:first-child > strong { font-size: .9375rem; white-space: nowrap; }

  /* 12. specification comparison: product columns of equal width, alternating white / pale blue, codes centred */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #comparison .mu-table { table-layout: fixed; min-width: 720px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #comparison .mu-table thead th:first-child { width: 16%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #comparison .mu-table thead th:not(:first-child), body:has(.mu-side[aria-label="Microscope & Accessories"]) #comparison .mu-table tbody td:not(:first-child) { text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #comparison .mu-table :is(th, td):nth-child(even) { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #comparison .mu-table thead th:nth-child(even) { background: var(--mu-brand-100); }

  /* 13. product list tables (a photo in each row; not a specification table with row headings): rows of even
     height, alternating white / pale blue, photos centred at one size, every cell centred vertically */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody img):not(:has([colspan], [rowspan], > tbody > tr > th[scope="row"])) tbody tr:nth-child(even) > * { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody img):not(:has([colspan], [rowspan], > tbody > tr > th[scope="row"])) :is(th, td) { vertical-align: middle; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody img):not(:has([colspan], [rowspan], > tbody > tr > th[scope="row"])) tbody td { height: 64px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody img):not(:has([colspan], [rowspan], > tbody > tr > th[scope="row"])) td:has(> img, > a > img) { width: 112px; text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody img):not(:has([colspan], [rowspan], > tbody > tr > th[scope="row"])) td img { max-height: 64px; width: auto; margin-inline: auto; }

  /* 14. series price tables (ocular micrometers: a series name over a Model row and a Price row): series bands
     alternate, size columns of equal width, model numbers in dark blue, prices bold */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) { table-layout: fixed; min-width: 640px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) thead th:first-child { width: 11%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) thead th:nth-child(2) { width: 9%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) :is(thead th:nth-child(n+3), td + td) { text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) tbody tr:is(:nth-child(4n+3), :nth-child(4n+4)) > * { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) tbody th[rowspan] { vertical-align: middle; color: var(--mu-brand-900); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) tbody tr:nth-child(odd) > td + td { color: var(--mu-brand-700); font-weight: 600; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> tbody > tr > th[rowspan="2"]):not(:has(img)) tbody tr:nth-child(even) > td + td { font-weight: 700; color: var(--mu-ink); }

  /* 15. a large explanatory figure followed by its text: side by side from 760 px (figure left, text right) */
  @media (min-width: 760px) {
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-figure + .mu-h3) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--mu-s5); align-content: start; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-figure + .mu-h3) > * { grid-column: 2; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-figure + .mu-h3) > .mu-h2 { grid-column: 1 / -1; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-figure + .mu-h3) > .mu-figure { grid-column: 1; grid-row: 2 / span 8; margin: 0; align-self: start; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-figure + .mu-h3) > .mu-h3 { margin-top: 0; }
    /* the same inside a card that opens with its figure and a heading (installation steps) */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body:has(> .mu-figure:first-child + .mu-h3) { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 20px; row-gap: 8px; align-items: start; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body:has(> .mu-figure:first-child + .mu-h3) > * { grid-column: 2; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body:has(> .mu-figure:first-child + .mu-h3) > .mu-figure { grid-column: 1; grid-row: 1 / span 8; }
  }

  /* 17. side navigation: the divider between product pages and guide pages, a little clearer */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-side__divider { background: var(--mu-line); margin: 6px var(--mu-s4) 6px calc(var(--mu-s4) + 12px); }
}

/* 16. a large diagram shown smaller in the page (at most 480 px, centred); a click opens it in the image viewer, where a
   link marked data-full shows the image at its own size, scrolled inside the viewer (round 2) */
@layer components {
  .mu-figure--fit .mu-gal__main { width: min(100%, 480px); cursor: zoom-in; }
  .mu-figure--fit .mu-gal__main img { width: 100%; height: auto; }
  .mu-lightbox--full { max-width: min(96vw, 1120px); }
  .mu-lightbox--full .mu-lightbox__fig { max-height: calc(100vh - 150px); overflow: auto; overscroll-behavior: contain; }
  .mu-lightbox--full .mu-lightbox__fig img { max-height: none; max-width: none; width: auto; }
}

/* ===== MA design round 2 (2026-11-06): Microscope & Accessories pages only, on top of round 1 ===== */
/* Same scope (body:has(.mu-side[aria-label="Microscope & Accessories"]) = body:has(.mu-side[aria-label="Microscope & Accessories"])). Text, prices, images and links unchanged;
   arrangement, colour, borders and click areas only. Without :has() support the pages look as before. */
@layer components {
  /* titles: lines of similar length (a chosen break: the existing .mu-title-line) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-hero__head h1 { text-wrap: balance; }

  /* 1-1. system composition tables: larger centred column headings, set prices centred, the Product Code / Price rows
     at the foot set apart in a darker band; borders a little firmer */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) thead th { font-size: var(--mu-fs-14); text-align: center; padding: 12px 10px; letter-spacing: .02em;
    background: var(--mu-brand-100); color: var(--mu-brand-900); border-bottom: 1px solid #c9d6f5; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) :is(th, td) { border-bottom-color: #dfe6f2; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) :is(th, td):not(:last-child) { border-right-color: #dfe6f2; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:not(:has(> td[rowspan])) > td:nth-child(2) { text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:not(:has(> td[rowspan])) > td:nth-child(2) .mu-price { font-size: var(--mu-fs-16); }
  /* (round 3: light as on the legacy page - the Product Code row white-blue with blue codes, the Price row cream with red prices) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) > td:nth-child(n) { background: #f7faff; font-size: .8125rem; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) + tr > td:nth-child(n) { background: #fffbea; font-size: .8125rem; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) > td { border-top: 2px solid #dfe6f2; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) > td[rowspan] { background: #fff; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) > td:nth-child(2),
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) + tr > td:first-child { font-weight: 700; color: var(--mu-ink-2); text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) > td a { color: var(--mu-brand-700); font-weight: 600; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead th[colspan]) tbody tr:has(> td[rowspan]) + tr .mu-price { color: #c62828; font-weight: 700; }

  /* 1-2. option tables (Item / Price / Image / Description): the same column widths in every table */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(.mu-table--price):has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > td:nth-child(3) > a > img) { table-layout: fixed; min-width: 640px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(.mu-table--price):has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > td:nth-child(3) > a > img) thead th:nth-child(1) { width: 19%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(.mu-table--price):has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > td:nth-child(3) > a > img) thead th:nth-child(2) { width: 13%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(.mu-table--price):has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > td:nth-child(3) > a > img) thead th:nth-child(3) { width: 17%; text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(.mu-table--price):has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > td:nth-child(3) > a > img) td:nth-child(2) { white-space: nowrap; }

  /* 1-3. specification tables (row headings, no column headings): the label column pale blue, value rows alternating,
     thin lines both ways */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(:has(> thead)):has(> tbody > tr > th[scope="row"]:first-child) tbody th { width: 30%; white-space: normal;
    background: #f1f5fc; color: var(--mu-brand-900); font-weight: 600; border-right: 1px solid #dfe6f2; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(:has(> thead)):has(> tbody > tr > th[scope="row"]:first-child) :is(th, td) { border-bottom-color: #e3e9f3; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(:has(> thead)):has(> tbody > tr > th[scope="row"]:first-child) tbody tr:nth-child(even) > td { background: #f8faff; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(:has(> thead)):has(> tbody > tr > th[scope="row"]:first-child) tbody tr:hover > :is(th, td) { background: var(--mu-brand-50); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:not(:has(> thead)):has(> tbody > tr > th[scope="row"]:first-child) td img { margin: 0; }
  /* two-column lists with column headings (compatible sizes, pitch per magnification): alternating rows, a line
     between the columns, two columns of equal width in a narrower table */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table-wrap:has(> .mu-table > thead > tr > th:nth-child(2):last-child):has(> .mu-table > tbody > tr > th[scope="row"]) { max-width: 680px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead > tr > th:nth-child(2):last-child):has(> tbody > tr > th[scope="row"]) { table-layout: fixed; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead > tr > th:nth-child(2):last-child):has(> tbody > tr > th[scope="row"]) thead th { width: 50%; white-space: normal; background: var(--mu-brand-100); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead > tr > th:nth-child(2):last-child):has(> tbody > tr > th[scope="row"]) tbody th { white-space: normal; position: static; border-right: 1px solid #dfe6f2; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead > tr > th:nth-child(2):last-child):has(> tbody > tr > th[scope="row"]) tbody tr:nth-child(even) > * { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table:has(> thead > tr > th:nth-child(2):last-child):has(> tbody > tr > th[scope="row"]) tbody tr:hover > * { background: var(--mu-brand-50); }

  /* 2-2. pictures beside their text instead of alone in a wide empty row (from 760 px; one below the other on phones) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-hero__body > .mu-figure img:not([width]) { width: auto; max-width: min(100%, 600px); max-height: 700px; }   /* round 3 (was 460 px) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section > .mu-figure img:not([width]) { max-width: min(100%, 600px); }
  @media (min-width: 760px) {
    /* an overview list followed by its product photo: the list left, the photo right */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-h3 + .mu-checklist + .mu-figure:last-child) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 28px; align-items: center; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-h3 + .mu-checklist + .mu-figure:last-child) > .mu-h2 { grid-column: 1 / -1; align-self: start; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-h3 + .mu-checklist + .mu-figure:last-child) > :is(.mu-h3, .mu-checklist) { grid-column: 1; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-h3 + .mu-checklist + .mu-figure:last-child) > .mu-h3 { margin-top: 0; align-self: end; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-h3 + .mu-checklist + .mu-figure:last-child) > .mu-checklist { align-self: start; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-h3 + .mu-checklist + .mu-figure:last-child) > .mu-figure { grid-column: 2; grid-row: 2 / span 2; margin: 0; }
    /* feature cards followed by one figure: the cards one under another on the left, the figure beside them */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-cols-2 + .mu-figure:last-child) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 24px; align-items: center; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-cols-2 + .mu-figure:last-child) > .mu-h2 { grid-column: 1 / -1; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-cols-2 + .mu-figure:last-child) > .mu-cols-2 { grid-column: 1; grid-template-columns: minmax(0, 1fr); gap: 12px; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-h2 + .mu-cols-2 + .mu-figure:last-child) > .mu-figure { grid-column: 2; margin: 0; }
    /* a card that opens with its photo and goes on with one note (standard package): the photo left, the note right */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body:has(> .mu-figure:first-child + p:last-child) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center; }
  }
  /* text beside its figure, arranged in the page (.mu-split): two columns from 760 px */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split { display: grid; gap: 16px 28px; align-items: center; margin: 12px 0 8px; }
  @media (min-width: 760px) { body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split--top { align-items: start; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split > .mu-figure, body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split > div > .mu-figure { margin: 0; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split > div > * + * { margin-top: 12px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split > div > :first-child { margin-top: 0; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split .mu-figure img { max-width: 100%; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-figures .mu-gal__main img, body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-split .mu-gal__main img { cursor: zoom-in; }

  /* 3. product cards with a linked name: the whole card opens the product page (the name's link covers the card),
     with a hover and keyboard focus state; any other link in the card stays clickable above it */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card:has(> .mu-card__body > .mu-h3:first-child > a[href]) { position: relative; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-h3:first-child > a[href]::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--mu-r2); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card:has(> .mu-card__body > .mu-h3:first-child > a[href]) .mu-card__body a:not(.mu-h3 > a) { position: relative; z-index: 2; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card:has(> .mu-card__body > .mu-h3:first-child > a[href]):hover { background: #fff; border-color: var(--mu-brand-600); box-shadow: 0 4px 14px rgb(15 31 77 / .14); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card:has(> .mu-card__body > .mu-h3:first-child > a[href]):hover .mu-h3 > a { text-decoration: underline; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card:has(> .mu-card__body > .mu-h3:first-child > a[href]:focus-visible) { border-color: var(--mu-brand-600); box-shadow: var(--mu-focus); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card > .mu-card__body > .mu-h3:first-child > a[href]:focus-visible { outline: none; box-shadow: none; }

  /* 5-2. a question and its short answer in one card, each beside its illustration (calibration guide) */
  /* (round 3: brighter, as wide as its content, each picture close to its text, the question larger and darker) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card.mu-qa { width: fit-content; max-width: 100%; background: #fcfdff; border-color: #dfe6f5; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) div.mu-card.mu-qa > .mu-card__body { padding: 0; gap: 0; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__row { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__row + .mu-qa__row { border-top: 1px dashed #d6e0f3; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__row > img { flex: none; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__row > :not(img) { flex: 0 1 auto; min-width: 0; max-width: 40rem; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__q { margin: 0; color: var(--mu-brand-900); font-weight: 700; font-size: 1.0625rem; line-height: 1.55; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__q + p { margin-top: 6px; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa__a { margin: 0 0 6px; font-weight: 700; color: var(--mu-brand-900); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-qa .mu-checklist { margin: 0; }
}

/* ===== MA design round 3 (2026-11-06): Microscope & Accessories pages only, on top of rounds 1 and 2 ===== */
/* Same scope (the MA scope). Spacing, colour, arrangement only; text, prices, codes and links unchanged. */
@layer components {
  /* 16. headings break at balanced points */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) :is(.mu-h2, .mu-h3, .mu-label--h2) { text-wrap: balance; }

  /* 2. model lineup (Stereo Microscope Specification): five cards in one row on PC, equal height, image / name / link
     aligned; 3 across on tablets, 2 on phones; the whole card is the link (lifted a little on hover) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-cards { gap: 12px; }
  @media (min-width: 1100px) { body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-cards:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (min-width: 640px) and (max-width: 1099px) { body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 639px) { body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-card__img { aspect-ratio: auto; height: 120px; width: 100%; object-fit: contain; padding: 10px 8px 0; background: #fff; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-card__body { padding: 8px 10px 12px; text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-card__title { font-size: var(--mu-fs-16); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #models .mu-card:has(> .mu-card__link:hover) { transform: translateY(-2px); }

  /* 4. feature labels in a light orange-gold band (WE-PLUS Key Features, as on the legacy page) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-label--band { margin: 28px 0 12px; padding: 8px 14px; border-radius: var(--mu-r1); font-size: var(--mu-fs-16); font-weight: 700;
    color: #4a2c00; background: linear-gradient(90deg, #f7c160 0%, #fbdc9c 70%, #fdebc4 100%); }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-label--band + .mu-split { margin-top: 0; }
  /* 5. option labels over price tables: cream with an amber edge (the palette of the Film pages' notices) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-label--warm { margin: 24px 0 10px; padding: 7px 12px; border-radius: var(--mu-r1); font-size: .9375rem; font-weight: 700;
    color: #7c3a00; background: #fffbeb; border: 1px solid #fde68a; border-left: 4px solid #f59e0b; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-label--warm + .mu-table-wrap { margin-top: 0; }

  /* 6. stage micrometer scale tables (and the other code / price lists with row headings): alternating rows, centred
     headings and numbers, prices right, a merged Note cell centred both ways */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--scale tbody tr:nth-child(even) > :is(th, td) { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--scale thead th { text-align: center; white-space: normal; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--scale thead th.mu-num { text-align: right; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--scale tbody td:is(:nth-child(2), :nth-child(3), :nth-child(4)) { text-align: center; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--scale tbody td[rowspan] { text-align: center; vertical-align: middle; background: #fff; border-left: 1px solid #e6ebf3; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--scale tbody tr:hover > :is(th, td) { background: var(--mu-brand-50); }

  /* 11. prepared slide lists (Code / Item / Representative Specimens / Price): fitted columns, the count on its own line,
     alternating rows */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-cell-line { display: block; }
  @media (min-width: 560px) {   /* fitted columns from tablets up; phones keep the automatic layout */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) { table-layout: fixed; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) thead th:nth-child(1) { width: 10%; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) thead th:nth-child(2) { width: 24%; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) thead th:nth-child(4) { width: 12%; }
  }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) tbody tr:nth-child(even) > * { background: #f5f8fe; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) :is(th, td) { vertical-align: middle; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-table--price:has(> thead > tr > th:nth-child(4):last-child):has(> tbody > tr > th[scope="row"]) td:nth-child(3) { overflow-wrap: anywhere; }

  /* 12. specimen groups: the slide picture centred against its group cards */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) #contents .mu-product__grid { align-items: center; }

  /* 8. front / back of an ocular micrometer: one card per step (the first wide, the next two side by side) */
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-steps .mu-card__body { align-items: start; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-steps .mu-figure { margin: 0; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-steps .mu-figure img { background: #fff; }
  body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-steps .mu-card__body > p { font-size: var(--mu-fs-14); }

  @media (min-width: 760px) {
    /* 13. a product picture with its price table (SP51): picture and caption left, table right, centred on each other */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-label + .mu-figure + .mu-table-wrap:last-child) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: center; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-label + .mu-figure + .mu-table-wrap:last-child) > .mu-label { grid-column: 1 / -1; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-label + .mu-figure + .mu-table-wrap:last-child) > .mu-figure { margin: 0; padding: 10px 14px; border: 1px solid #dfe6f5; border-radius: var(--mu-r2); background: #fff; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-label + .mu-figure + .mu-table-wrap:last-child) > .mu-table-wrap { margin: 0; }
    /* 14. a drawing set beside the specification it belongs to (.mu-figure--aside, the section's last block) */
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-figure--aside:last-child) { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: 24px; align-items: start; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-figure--aside:last-child) > * { grid-column: 1; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-figure--aside:last-child) > .mu-h2 { grid-column: 1 / -1; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-section:has(> .mu-figure--aside:last-child) > .mu-figure--aside { grid-column: 2; grid-row: 2 / span 2; margin: 0; }   /* beside the next two blocks (a longer span adds empty rows) */
  }

  /* 15. ocular micrometer pattern cards on phones: two across from 360 px, compact; one column below that */
  @media (min-width: 360px) and (max-width: 759px) {
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-cols-3:has(> .mu-card > .mu-card__body > .mu-h3:first-child + .mu-figure > .mu-gal__main) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-cols-3:has(> .mu-card > .mu-card__body > .mu-h3:first-child + .mu-figure > .mu-gal__main) .mu-card__body { padding: 10px; gap: 6px; }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-cols-3:has(> .mu-card > .mu-card__body > .mu-h3:first-child + .mu-figure > .mu-gal__main) .mu-h3 { font-size: var(--mu-fs-16); }
    body:has(.mu-side[aria-label="Microscope & Accessories"]) .mu-cols-3:has(> .mu-card > .mu-card__body > .mu-h3:first-child + .mu-figure > .mu-gal__main) .mu-card__body > p { font-size: .8125rem; line-height: 1.45; }
  }
}