/* ==========================================================================
   Music Man instrument page (mm/pages/instruments/show)
   --------------------------------------------------------------------------
   The legacy www.music-man.com instrument page, section for section
   (docs/plans/2026-11-03-mm-www-migration.md §2.1): hero, buy box, dealers,
   highlights, videos, the story (pdp-story.css), specs, related, factory,
   close. Uses the --pdp-* tokens (pdp-tokens.css) so the story and the video
   partials sit on the same scale as every other product page.

   Gold never carries text: links and outline buttons use --brand-link /
   --brand-accent-text, fills use --brand-primary-fill with --brand-on-primary.
   ========================================================================== */

.mm-instrument {
    --mm-maxw: var(--pdp-maxw, 1180px);
    --mm-gutter: 18px;
    --mm-ink: var(--pdp-ink, #17171c);
    --mm-ink-2: var(--pdp-ink-2, #4e4e58);
    --mm-line: #dcdce0;
    /* One gray for every panel and band (the buy box and specs were #f4f4f4,
       the rest #f4f4f5), so adjacent surfaces never read as two tints. */
    --mm-alt: #f4f4f4;
    /* The vertical rhythm every full-width band shares. */
    --mm-section-y: clamp(2.75rem, 5.5vw, 4.5rem);
    /* Outline of an unselected control (model/neck choices, tabs, the more-
       stores toggle): 3.2:1 on the #f4f4f4 panels, 3.5:1 on white. */
    --mm-control-edge: #88888e;

    color: var(--mm-ink);
    overflow-x: clip;
}

.mm-instrument__preview {
    margin: 0;
    padding: 0.5rem var(--mm-gutter);
    background: #1a1a1a;
    color: #ffffff;
    font-size: 0.875rem;
    text-align: center;
}

/* One step down from 36px (30px desktop, 22px phone): the band headings were
   the loudest type on the page after the price. Ink on white, 18:1. */
.mm-instrument__section-heading {
    margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
    font-size: clamp(1.375rem, 1.05rem + 1.1vw, 1.875rem);
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

/* -- Hero ------------------------------------------------------------------ */

.mm-instrument__hero {
    position: relative;
    background: #111111;
}

.mm-instrument__hero-image {
    display: block;
    width: 100%;
    height: auto;
}

.mm-instrument__hero-heading {
    position: absolute;
    inset: auto 0 5.5rem;
    margin: 0;
    padding: 0 var(--mm-gutter);
    color: #ffffff;
    font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}

.mm-instrument__hero-actions {
    position: absolute;
    inset: auto 0 1.5rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 var(--mm-gutter);
}

/* Legacy's outlined hero buttons, on a solid plate so they read over any photo. */
.mm-instrument__hero-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 1.5rem;
    border: 2px solid #ffffff;
    background: rgba(17, 17, 17, 0.8);
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-decoration: none;
    text-transform: uppercase;
}

.mm-instrument__hero-button:hover,
.mm-instrument__hero-button:focus-visible {
    background: #ffffff;
    color: #111111;
}

.mm-instrument__hero-button:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* On phones the photo is short: the buttons go under it. */
@media (max-width: 767.98px) {
    .mm-instrument__hero-heading {
        position: static;
        padding: 1rem var(--mm-gutter) 0;
        text-shadow: none;
    }

    .mm-instrument__hero-actions {
        position: static;
        padding: 1rem var(--mm-gutter) 1.25rem;
    }
}

/* -- Buy box ----------------------------------------------------------------- */

.mm-instrument__buy {
    max-width: var(--mm-maxw);
    margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) var(--mm-gutter) 2rem;
}

.mm-instrument__intro {
    max-width: 52rem;
    margin: 0 auto 1.5rem;
    text-align: center;
}

/* 20% under the old 48–72px: the logo is a signature, not a second hero. */
.mm-instrument__logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(38.4px, 4.8vw, 57.6px);
    margin: 0 auto 1.25rem;
    object-fit: contain;
}

.mm-instrument__title {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-weight: 700;
}

/* Body size, and a measure short enough (about 85 characters) that the
   centered lines don't run the width of the photo below. */
.mm-instrument__description {
    max-width: 42rem;
    margin-inline: auto;
    color: var(--mm-ink-2);
    font-size: 1rem;
    line-height: 1.65;
}

/* A dozen centered lines on a phone have no edge to return to; ragged-right
   reads faster there. */
@media (max-width: 575.98px) {
    .mm-instrument__description {
        text-align: left;
    }
}

.mm-instrument__stage {
    position: relative;
    margin: 0 auto 2rem;
}

.mm-instrument__stage-image {
    display: block;
    width: 100%;
    height: auto;
}

/* Legacy's zoom: a dark round button that slowly pulses until it is used. */
.mm-instrument__zoom {
    position: absolute;
    right: 2%;
    bottom: 4%;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #555555;
    color: #ffffff;
    box-shadow: 0 0 0 0 rgba(85, 85, 85, 0.45);
    animation: mm-zoom-pulse 2.4s ease-out infinite;
    cursor: zoom-in;
}

.mm-instrument__zoom:hover,
.mm-instrument__zoom:focus-visible {
    background: #17171c;
    animation: none;
}

.mm-instrument__zoom:focus-visible {
    outline: 2px solid #17171c;
    outline-offset: 3px;
}

@media (max-width: 575.98px) {
    .mm-instrument__zoom {
        width: 48px;
        height: 48px;
        bottom: 0;
    }

    .mm-instrument__zoom svg {
        width: 22px;
        height: 22px;
    }
}

@keyframes mm-zoom-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(85, 85, 85, 0.45); }
    60% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(85, 85, 85, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(85, 85, 85, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mm-instrument__zoom {
        animation: none;
    }
}

.mm-instrument__notice {
    margin: 0.75rem auto 0;
    max-width: 40rem;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--brand-primary, #c8a84e);
    background: var(--mm-alt);
    font-size: 0.9375rem;
    line-height: 1.5;
    text-align: center;
}

.mm-instrument__configurator {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 992px) {
    .mm-instrument__configurator {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }
}

.mm-instrument__box {
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--mm-alt);
}

/* The three headings that open the buy box (Options, Your Custom Options,
   Street Price) share one 1.5rem line box, so their first lines sit on the
   same row across the two panels. */
.mm-instrument__options-heading {
    margin: 0 0 1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-instrument__models {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.mm-instrument__models-label {
    float: left;
    width: auto;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    font-weight: 700;
}

.mm-instrument__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Square, like every other MM button. The selected ring is the 1px border
   plus a 1px inset shadow, so selecting never shifts the label. */
.mm-instrument__choice {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.375rem 1.125rem;
    border: 1px solid var(--mm-control-edge);
    border-radius: 0;
    background: #ffffff;
    color: #17171c;
    font-size: 0.9375rem;
    text-decoration: none;
}

.mm-instrument__choice:hover {
    border-color: var(--mm-ink-2);
}

.mm-instrument__choice[aria-current="true"] {
    border-color: #17171c;
    box-shadow: inset 0 0 0 1px #17171c;
    font-weight: 600;
}

.mm-instrument__colors {
    margin: 0;
    padding: 1rem 1.25rem;
    border: 1px solid var(--mm-line);
    background: #ffffff;
}

/* The neck choice (when there is one) follows the swatches; spacing it from
   above leaves no dead margin at the panel's foot when it's hidden. */
.mm-instrument__necks {
    margin: 1.25rem 0 0;
}

/* 8rem columns: three across in a desktop panel and two on a phone, where
   the old 9.5rem fit two and one, and the options panel ran twice the height
   of the summary beside it. */
.mm-instrument__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
    gap: 0.5rem 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-instrument__swatch {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 52px;
    color: #17171c;
    font-size: 0.875rem;
    line-height: 1.3;
    text-decoration: none;
}

.mm-instrument__swatch-chip {
    flex: 0 0 auto;
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.mm-instrument__swatch-chip--blank {
    background: #e2e2e2;
}

.mm-instrument__swatch:hover .mm-instrument__swatch-chip {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 3px var(--mm-control-edge);
}

.mm-instrument__swatch[aria-current="true"] .mm-instrument__swatch-chip {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #17171c;
}

.mm-instrument__swatch[aria-current="true"] .mm-instrument__swatch-name {
    font-weight: 700;
}

.mm-instrument__swatch.is-discontinued .mm-instrument__swatch-chip {
    opacity: 0.55;
}

.mm-instrument__swatch:focus-visible,
.mm-instrument__choice:focus-visible {
    outline: 2px solid #17171c;
    outline-offset: 2px;
}

.mm-instrument__summary {
    display: grid;
    align-content: start;
    gap: 1.5rem 2rem;
}

@media (min-width: 576px) {
    .mm-instrument__summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.mm-instrument__summary-heading {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
}

.mm-instrument__facts {
    margin: 0 0 1.25rem;
    font-size: 1rem;
    line-height: 1.55;
}

.mm-instrument__facts dt,
.mm-instrument__facts dd {
    display: inline;
    margin: 0;
}

.mm-instrument__facts dt {
    font-weight: 700;
}

.mm-instrument__code-label {
    margin: 0;
    font-weight: 700;
}

.mm-instrument__code {
    margin: 0;
    letter-spacing: 0.02em;
}

/* #4e4e58 on the #f4f4f4 panel is 7.3:1 (the old #6b6b6b was 4.85:1). */
.mm-instrument__price-label {
    margin: 0;
    color: var(--mm-ink-2);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mm-instrument__price {
    margin: 0.375rem 0 1.25rem;
    font-size: clamp(1.75rem, 1.45rem + 0.9vw, 2.125rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.mm-instrument__actions {
    display: grid;
    gap: 0.625rem;
}

.mm-instrument__buy-button {
    width: 100%;
}

.mm-instrument__sold-out {
    margin: 0;
    padding: 0.75rem;
    border: 2px solid #c9c9c9;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
}

.mm-instrument__availability,
.mm-instrument__quantity {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.mm-instrument__wishlist {
    margin-top: 0.75rem;
}

.mm-instrument__wishlist[hidden] {
    display: none;
}

/* The shared heart is 39px tall; 44 here, like every other buy-box control. */
.mm-instrument__wishlist .wishlist-heart {
    min-height: 44px;
}

/* Buy Now's status line: "Adding…", "Added to cart", or the cart's refusal. */
.mm-instrument__cart-feedback {
    margin: 0;
    font-size: 0.9375rem;
}

.mm-instrument__cart-feedback:empty {
    display: none;
}

.mm-instrument__buy-button[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
}

.mm-instrument__callout {
    margin: 0 0 0.75rem;
    font-weight: 700;
}

.mm-instrument__callout--under {
    margin: 0.75rem 0 0;
}

.mm-instrument__affirm {
    margin-top: 1rem;
    font-size: 1rem;
}

.mm-instrument__affirm p {
    margin: 0 0 0.375rem;
}

.mm-instrument__affirm-terms {
    color: #4e4e58;
    font-size: 0.9375rem;
}

.mm-instrument__affirm a,
.mm-instrument__note a {
    color: inherit;
    text-decoration: underline;
}

/* Up from 13px: fine print, but still a sentence someone has to read. */
.mm-instrument__note {
    margin: 1rem 0 0;
    color: #4e4e58;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* -- Dealers ----------------------------------------------------------------- */

.mm-instrument__dealers {
    max-width: var(--mm-maxw);
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3rem) var(--mm-gutter) var(--mm-section-y);
}

.mm-instrument__dealer-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
    gap: 1rem;
    margin: 0 0 2rem;
    padding: 0;
    list-style: none;
}

.mm-instrument__dealer-list:last-child {
    margin-bottom: 0;
}

/* Legacy's dealer tile: logo, name, phone, and an outlined Buy Now. */
.mm-instrument__dealer {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.75rem 1.25rem 1.5rem;
    background: var(--mm-alt);
    text-align: center;
}

.mm-instrument__dealer-logo-box {
    display: grid;
    place-items: center;
    width: 100%;
    height: 4.5rem;
    margin-bottom: 1.25rem;
}

.mm-instrument__dealer-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(1);
}

.mm-instrument__dealer-name {
    margin: 0 0 0.25rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

/* #4e4e58 on the #f4f4f4 tile is 7.3:1. */
.mm-instrument__dealer-phone {
    margin: 0 0 1.25rem;
    font-size: 1rem;
}

.mm-instrument__dealer-phone a {
    color: var(--mm-ink-2);
    text-decoration: none;
}

.mm-instrument__dealer-phone a:hover {
    text-decoration: underline;
}

.mm-instrument__dealer-cta {
    width: 100%;
    margin-top: auto;
}

.mm-instrument__more-dealers {
    max-width: 34rem;
    margin: 0 auto;
}

.mm-instrument__more-dealers summary {
    min-height: 44px;
    padding: 0.625rem 1rem;
    border: 1px solid var(--mm-control-edge);
    border-radius: 0;
    font-weight: 700;
    cursor: pointer;
}

.mm-instrument__more-dealers summary:hover {
    border-color: var(--mm-ink-2);
}

.mm-instrument__more-dealers summary:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: 2px;
}

.mm-instrument__more-dealers ul {
    columns: 2 12rem;
    margin: 1rem 0 0;
    padding: 0 1rem;
    list-style: none;
}

.mm-instrument__more-dealers li {
    padding: 0.25rem 0;
    break-inside: avoid;
}

.mm-instrument__more-dealers a {
    color: var(--brand-link);
}

/* -- Highlights -------------------------------------------------------------- */

/* White, like the dealers above it: the gray band read as a box around the
   slides. */
.mm-instrument__highlights {
    padding: var(--mm-section-y) 0;
}

/* Two white bands in a row share one gap, not two. */
.mm-instrument__dealers + .mm-instrument__highlights {
    padding-top: 0;
}

.mm-instrument__highlights .mm-instrument__section-heading,
.mm-instrument__highlight-grid {
    max-width: var(--mm-maxw);
    margin-inline: auto;
    padding-inline: var(--mm-gutter);
}

.mm-instrument__slides {
    position: relative;
    max-width: 1600px;
    margin: 0 auto clamp(2rem, 4vw, 3rem);
}

.mm-instrument__slide-track {
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mm-instrument__slide-track::-webkit-scrollbar {
    display: none;
}

.mm-instrument__slide-track:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: -2px;
}

.mm-instrument__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
}

.mm-instrument__slide img {
    display: block;
    width: 100%;
    height: auto;
}

.mm-instrument__slide-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.mm-instrument__slide-button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--mm-ink);
    border-radius: 50%;
    background: #ffffff;
    color: var(--mm-ink);
    font-size: 1.5rem;
    line-height: 1;
}

.mm-instrument__slide-button:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: 2px;
}

.mm-instrument__slide-button:disabled,
.mm-instrument__slide-button.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

/* Swiper (instrument-detail.js): the wrapper stops scrolling itself. */
.mm-instrument__slides.is-swiper .mm-instrument__slide-track {
    overflow: visible;
    scroll-snap-type: none;
}

.mm-instrument__slide-dots,
.mm-instrument__slide-dots.swiper-pagination-horizontal {
    /* Swiper's stylesheet stretches a horizontal pagination full width,
       which pushed the arrows to the edges. */
    position: static;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: auto;
    transform: none;
}

.mm-instrument__slides:not(.is-swiper) .mm-instrument__slide-dots {
    display: none;
}

/* Each dot is a 24px target (WCAG 2.5.8) around a 10px mark; the resting
   mark is #767676, 4.54:1 on white, the current one ink. */
.mm-instrument__slide-dots .swiper-pagination-bullet {
    position: relative;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    opacity: 1;
    cursor: pointer;
}

.mm-instrument__slide-dots .swiper-pagination-bullet::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: #767676;
}

.mm-instrument__slide-dots .swiper-pagination-bullet-active::before {
    background: var(--mm-ink);
}

.mm-instrument__slide-dots .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: 0;
}

.mm-instrument__highlight-grid {
    display: grid;
    gap: 2rem clamp(1.5rem, 3vw, 2.5rem);
    margin-block: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .mm-instrument__highlight-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.mm-instrument__highlight img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.mm-instrument__highlight-title {
    margin: 0 0 0.375rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mm-instrument__highlight-text {
    margin: 0;
    color: var(--mm-ink-2);
    line-height: 1.6;
}

/* -- Videos and story -------------------------------------------------------- */

.mm-instrument__videos {
    padding: var(--mm-section-y) var(--mm-gutter);
}

/* The shared "Show N more videos" button, in MM's outlined square idiom and
   44px tall (the shared one is 36px). */
.mm-instrument__videos .pdp-videos__more {
    min-height: 44px;
    margin-top: 2rem;
    padding: 0.625rem 1.5rem;
    border: 2px solid var(--mm-ink);
    border-radius: 0;
    background: transparent;
    color: var(--mm-ink);
    font-size: 0.875rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
}

.mm-instrument__videos .pdp-videos__more:hover,
.mm-instrument__videos .pdp-videos__more:focus-visible {
    border-color: var(--mm-ink);
    background: var(--mm-ink);
    color: #ffffff;
}

.mm-instrument__videos .pdp-videos__more:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: 3px;
}

.mm-instrument__story {
    padding: 0 var(--mm-gutter) clamp(2rem, 5vw, 3rem);
}

/* The story's first band sits flush under the section above it. */
.mm-instrument__story .pdp-story {
    margin-top: 0;
}

/* A story that ends on a full-bleed photo band runs it flush into the next
   section (the gray specs band, usually); one that ends on cards or copy
   keeps the padding above. */
.mm-instrument__story:has(> .pdp-story > .pdp-story__band:last-child) {
    padding-bottom: 0;
}

/* -- Specs ------------------------------------------------------------------- */

.mm-instrument__specs {
    padding: var(--mm-section-y) max(var(--mm-gutter), calc((100% - var(--mm-maxw)) / 2));
    background: var(--mm-alt);
}

.mm-instrument__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

/* Square tabs, to match the page's buttons. */
.mm-instrument__tabs [role="tab"] {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border: 1px solid var(--mm-control-edge);
    border-radius: 0;
    background: #ffffff;
    color: var(--mm-ink);
    font-size: 0.9375rem;
    font-weight: 600;
}

.mm-instrument__tabs [role="tab"]:hover {
    border-color: var(--mm-ink);
}

.mm-instrument__tabs [role="tab"][aria-selected="true"] {
    border-color: var(--mm-ink);
    background: var(--mm-ink);
    color: #ffffff;
}

.mm-instrument__tabs [role="tab"]:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: 2px;
}

.mm-instrument__panel {
    margin-bottom: 2.5rem;
}

/* With the tabs running, each panel says its name in its tab instead. */
.mm-instrument__specs.has-tabs .mm-instrument__panel-heading {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.mm-instrument__panel-heading {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.mm-instrument__spec-pick {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    max-width: 30rem;
    margin: 0 0 1rem;
    font-weight: 600;
}

.mm-instrument__spec-pick .form-select {
    flex: 1;
    min-width: 12rem;
}

/* A white sheet on the gray band. The old odd-row stripe was the band's own
   gray, so it never showed; hairlines do the work instead. */
.mm-instrument__spec-table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    background: #ffffff;
    font-size: 0.9375rem;
}

.mm-instrument__spec-table caption {
    caption-side: top;
    padding: 0 0 0.75rem;
    color: var(--mm-ink);
    font-size: 1rem;
    font-weight: 700;
}

.mm-instrument__spec-table[data-spec-hidden].is-js {
    display: none;
}

.mm-instrument__spec-table th,
.mm-instrument__spec-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mm-line);
    text-align: left;
    vertical-align: top;
}

.mm-instrument__spec-table tbody tr:last-child > * {
    border-bottom: 0;
}

.mm-instrument__spec-table th[scope="row"] {
    width: 32%;
    font-weight: 600;
}

.mm-instrument__controls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-instrument__control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.mm-instrument__control img {
    max-width: 100%;
    height: auto;
}

.mm-instrument__prop65 {
    margin-top: 1rem;
}

/* -- Related, factory, join -------------------------------------------------- */

/* White, so it doesn't merge with the gray specs band above it. */
.mm-instrument__related {
    padding: var(--mm-section-y) var(--mm-gutter);
}

.mm-instrument__related-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: 2rem;
    max-width: var(--mm-maxw);
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.mm-instrument__related-item a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: var(--mm-ink);
    text-decoration: none;
}

.mm-instrument__related-item img {
    max-width: 100%;
    height: auto;
}

/* The same label as a listing tile (instruments.css .mm-instruments__tile-name). */
.mm-instrument__related-name {
    min-width: min(17.5rem, 100%);
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--mm-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.mm-instrument__related-item a:hover .mm-instrument__related-name,
.mm-instrument__related-item a:focus-visible .mm-instrument__related-name {
    background: var(--mm-ink);
    color: #ffffff;
}

.mm-instrument__related-item a:focus-visible {
    outline: 2px solid var(--mm-ink);
    outline-offset: 4px;
}

/* -- Curtain ----------------------------------------------------------------- */

.mm-instrument__curtain {
    max-width: 40rem;
    margin: 0 auto;
    padding: clamp(4rem, 12vw, 8rem) 18px;
    text-align: center;
}

.mm-instrument__curtain-heading {
    margin: 0 0 1rem;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}