:root {
    --primary-color: #18D9C8;
    --color-border: #E4EBEE;
    --color-heading-dark: #14202A;
    --color-accent-text: #0B6A60;
    --color-text-muted: #7A8B93;
    --color-text-secondary: #6C808A;
    --color-navy: #2C4A5A;
    --color-text-primary: #211F20;
    --color-bg-light: #F7FAFB;
}

/* Offset for the fixed header lives on <main>, not on the sticky topbar inside it */
.product-new {
    padding-top: var(--pn-header-h, 112px);
}

.product-new {
    .request {
        padding: 20px 0;

        .container {
            padding: 0 50px;
        }

        .description {
            font-size: 14px;
        }

        .formsDesc_desc {
            margin-top: 4px;
            font-size: 12px;
        }

        .label {
            font-size: 12px;
        }

        .request-steps__label {
            font-size: 14px;
        }

        .file-upload,
        .input__wrapper input,
        .input__wrapper textarea,
        .select-input.--dropdown .--dropdown__value {
            height: 36px;
        }

        .optoguide__window {
            height: 520px;
        }
    }

    .request-form {
        .form-wrapper {
            padding: 16px;
        }

        .cf7mls-btns {
            margin: 0;
            min-height: auto;
        }
    }

    .container {
        padding: 0 35px;
    }
}

/* Bioz widget styling is left to Bioz; see .product-new-research below. */

.request-form .form-wrapper {
    .button.submit,
    .action-button {
        font-size: 12px !important;
        padding: 14px 32px !important;
        max-height: 42px;
    }
}

.request__intro > .title.title-3,
.request__intro > .title.title-3 span {
    font-size: 34px;
}

/* Sticks directly under the fixed header; --pn-header-h is measured in product-new.js */
.product-new-topbar {
    position: sticky;
    top: var(--pn-header-h, 112px);
    z-index: 90;
    background: #fff;
    border-top: 1px solid #D4DEE3;
}

/* styles.css offsets main's first child for the fixed header; that offset now
   lives on .product-new and must not sit inside the sticky bar */
.product-new > .product-new-topbar {
    padding-top: 0;
}

/* .product-new narrows .container to 35px; the blocks drawn from the mockup
   keep its 80px gutter, but only at the width the mockup was made for */
@media (min-width: 1024px) {
    .product-new .product-new-topbar > .container,
    .product-new .product-new-hero > .container,
    .product-new .product-new-performance > .container,
    .product-new .product-new-stock > .container,
    .product-new .product-new-research > .container,
    .product-new .product-new-hub > .container,
    .product-new .product-new-substrates > .container,
    .product-new .product-new-related > .container {
        padding: 0 80px;
    }
}

.product-new-topbar__wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    height: 52px;
    /* optical centering: the design sits the text 2px above the true middle */
    padding-bottom: 4px;

    .product-new-breadcrumbs a,
    .product-new-breadcrumbs span {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
        letter-spacing: 0;
    }

    .product-new-anchors a {
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        transition: color 0.2s;
    }

    .product-new-anchors a:hover,
    .product-new-anchors a.is-active {
        color: var(--primary-color);
    }
}

.product-new-breadcrumbs,
.product-new-anchors {
    display: flex;
    align-items: center;
    min-width: 0;
}

.product-new-breadcrumbs {
    gap: 10px;
}

.product-new-anchors {
    gap: 32px;
}

.product-new-breadcrumbs span.product-new-breadcrumbs__current {
    opacity: 0.5;
    /* truncates instead of overflowing the bar on narrow screens */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-new-breadcrumbs a,
.product-new-breadcrumbs__separator {
    flex: 0 0 auto;
}

.product-new-anchors__link {
    white-space: nowrap;
}

/* Added in product-new.js to the sections the topbar links to */
.product-new-anchor-target {
    scroll-margin-top: calc(var(--pn-header-h, 112px) + var(--pn-bar-h, 53px));
}

/* Hero block, measured from the 1440px mockup: a 520px card, a 60px gutter
   and a 700px content column inside the 80px page margins. */
.product-new-hero {
    background: #F3F6F7;
    padding: 60px 0;
}

.product-new-hero__wrapper {
    display: flex;
    margin: 0;
    gap: 60px;
}

/* The left column is the product card with the two actions beneath it. */
.product-new-hero__media {
    flex: 0 0 520px;
    width: 520px;
    align-self: flex-start;
}

.product-new-hero__image {
    width: 100%;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #365463;
    border-radius: 4px;
    overflow: hidden;
}

.product-new-hero__image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.product-new-hero__content {
    flex: 1 1 auto;
    min-width: 0;
}

.product-new-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding:6px 13px;
    margin-bottom: 7px;
    border-radius: 20px;
    background: #E6FBF8;
    color: var(--color-accent-text);
    font-weight: 700;
    font-size: 12px;
}

.product-new-hero__badge::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--primary-color);
    transform: rotate(45deg);
}

.product-new-hero__heading {
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    color: #365463;
    margin: 0;
}

.product-new-hero__description p,
.product-new-performance__description,
.product-new-stock__description {
    font-weight: 400;
    letter-spacing: 0;
}

.product-new-performance__description,
.product-new-stock__description {
    font-size: 13px;
    line-height: 18.85px;
    color: var(--color-text-secondary);
}

.product-new-hero__description {
    color: #5C7481;
    margin-top: 17px;

    p {
        font-size: 16px;
        line-height: 22px;
    }
}

.product-new-hero__link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-top: 17px;
    margin-bottom: 0;
    color: #365463;
    font-weight: 600;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
}

/* The site's button chevron, redrawn in the link's own colour. */
.product-new-hero__link::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M5.33203 13.334L10.6654 8.00065L5.33203 2.66732' stroke='%23365463' stroke-width='2'/%3E%3C/svg%3E") no-repeat center / 100%;
}

.product-new-capabilities {
    margin-top: 26px;
    margin-bottom: 0;
}

/* The mockup runs the rows straight down the column: no frame, no caption */
.product-new-hero .product-new-capabilities {
    border: none;
    border-radius: 0;
    overflow: visible;
}

.product-new-hero .product-new-capabilities__heading {
    display: none;
}

.product-new-capabilities__heading {
    margin: 0;
    padding: 9px 14px;
    background: var(--color-bg-light);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-new-capabilities__table {
    width: 100%;
    border-collapse: collapse;

    tr {
        border-top: none;
        border-bottom: 1px solid #D4DEE3;
    }

    th, td {
        /* 33 + 6 + 5 + the 1px rule = the mockup's 45px row pitch */
        padding: 6px 0 5px;
        font-weight: 400;
        font-size: 18px;
        line-height: 33px;
        letter-spacing: 0;
        color: #365463;
        text-align: left;
    }

    td {
        position: relative;
        padding-right: 35px;
        font-size: 16px;
        font-weight: 400;
        color: #365463;
        text-align: right;
        white-space: nowrap;
    }

    sup {
        font-size: 0.68em;
        line-height: 0;
        vertical-align: super;
    }
}

.product-new-capabilities__footnote {
    margin: 20px 0 0;
    font-size: 14px;
    line-height: 19px;
    color: #5C7481;
}

.product-new-capabilities__note {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    vertical-align: middle;
    border: 1.5px solid #B8C4C9;
    border-radius: 3px;
    cursor: pointer;
}

.product-new-capabilities__note::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 12px;
    height: 12px;
    border: 1.5px solid #B8C4C9;
    border-radius: 3px;
    background: #fff;
}

.product-new-capabilities__note:hover::after,
.product-new-capabilities__copy.is-copied::after {
    position: absolute;
    right: 0;
    border-radius: 6px;
    background: var(--color-heading-dark);
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    white-space: nowrap;
    z-index: 10;
}

.product-new-capabilities__note:hover::after {
    content: attr(data-note);
    bottom: calc(100% + 8px);
    padding: 6px 10px;
    font-weight: 400;
}

.product-new-capabilities__copy {
    position: absolute;
    right: 3px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 16px;
    height: 17px;
    padding: 0;
    border: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cpath d='M-3.51258e-05 6.61099V-1.46031e-05H6.61096V2.70599H9.31697V9.31699H2.70597V6.61099H-3.51258e-05ZM0.714965 5.89599H2.70597V2.70599H5.89596V0.714985H0.714965V5.89599ZM3.42097 3.42099V5.89599H5.89596V3.42099H3.42097ZM3.42097 8.60199H8.60197V3.42099H6.61096V6.61099H3.42097V8.60199Z' fill='%23A9D0E1'/%3E%3C/svg%3E") no-repeat center / 10px 10px;
    cursor: pointer;
    vertical-align: middle;
    opacity: 1;
    transition: opacity .15s ease;
}

.product-new-capabilities__copy:hover {
    opacity: 0.7;
}

.product-new-capabilities__copy.is-copied {
    opacity: 0.7;
}

.product-new-capabilities__copy.is-copied::after {
    content: "Copied";
    bottom: calc(100% + 6px);
    padding: 4px 8px;
    font-weight: 600;
}

/* Both actions come from the site's .button; they only split the card's
   width evenly here. */
.product-new-hero__buttons {
    display: flex;
    gap: 16px;
    margin-top: 16px;

    .product-new-hero__button {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 16px;
    }
}

.product-new-performance,
.product-new-stock,
.product-new-hub {
    padding: 34px;
    margin: 80px 0;
    border-top: 1px solid var(--color-border);
}

/* The widget supplies its own panel; this only gives it the page gutter and
   the background the design puts behind it. */
.product-new-research {
    padding: 80px 0;
    border-top: none;
    background: #F3F6F7;
}

.product-new-performance__heading,
.product-new-stock__heading,
.product-new-related__heading,
.product-new-faq__heading,
.product-new-hub__heading {
    font-weight: 700;
    font-size: 22px;
    line-height: 32px;
    letter-spacing: -0.2px;
    text-transform: none;
    color: #334F5C;
}

/* ---- Measured performance, measured from the 1440px mockups ---------------
   A 305px filter rail and a 955px chart area, 20px apart. One design example
   is shown at a time; its ticked graph types fill the area as one wide card or
   a two-column grid. */

.product-new-performance {
    padding: 0;
    border-top: none;
}

.product-new-performance__heading {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    font-weight: 700;
    color: #365463;
    margin: 0;
}

.product-new-performance__description {
    max-width: 660px;
    margin: 21px 0 0;
    font-size: 20px;
    line-height: 26px;
    color: #5E7682;
}

.product-new-performance__panel {
    margin-top: 60px;
    border: 1px solid #D4DEE3;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}

.product-new-performance__panel-title {
    margin: 0;
    padding: 33px 20px 29px;
    border-bottom: 1px solid #D4DEE3;
    background: #F3F6F7;
    font-weight: 600;
    font-size: 24px;
    line-height: 24px;
    color: #1B2429;
}

.product-new-performance__panel-body {
    padding: 19px 20px 24px;
}

/* Label on the left, controls filling the rest of the row. */
.product-new-performance__row {
    display: flex;
    align-items: flex-start;
    gap: 17px;
}

.product-new-performance__row + .product-new-performance__row {
    margin-top: 22px;
}

.product-new-performance__row-label {
    flex: 0 0 144px;
    margin: 0;
    padding-top: 11px;
    font-weight: 400;
    font-size: 20px;
    line-height: 20px;
    color: #495054;
}

.product-new-performance__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 13px;
    margin-bottom: 0;
}

.product-new-performance__example {
    height: 42px;
    padding: 0 17px;
    border: 1px solid #D4DEE3;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #1B2429;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.product-new-performance__example:hover {
    border-color: var(--primary-color);
}

.product-new-performance__example.is-active {
    border-color: var(--primary-color);
    background: var(--primary-color);
}

.product-new-performance__graphs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 33px;
    padding-top: 11px;
}

.product-new-performance__graph {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 20px;
    line-height: 20px;
    color: #1B2429;
    cursor: pointer;
}

.product-new-performance__graph input {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1px solid #D4DEE3;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.product-new-performance__graph input:checked {
    border-color: var(--primary-color);
    background: var(--primary-color) no-repeat center / 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}

.product-new-performance__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.product-new-performance__filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border: 1.5px solid var(--color-border);
    border-radius: 24px;
    color: var(--color-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease;

    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        position: relative;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        margin: 0;
        border: 1.5px solid var(--color-border);
        border-radius: 4px;
        background: #fff;
        cursor: pointer;
        transition: border-color .15s ease, background-color .15s ease;
    }

    input[type="checkbox"]:checked {
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

    input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        left: 4px;
        top: 1px;
        width: 4px;
        height: 8px;
        border: solid #000;
        border-width: 0 1.5px 1.5px 0;
        transform: rotate(45deg);
    }

    &.is-active {
        border-color: var(--primary-color);
        background: #F0FDFB;

        span {
            color: var(--color-accent-text);
        }
    }

    span {
        font-size: 12px;
        font-weight: 700;
        color: var(--color-text-secondary);
    }
}

.product-new-performance__charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 21px 0 0;
    align-content: start;
}

/* One ticked graph type fills the whole area; from two on they pair up. */
.product-new-performance__charts.is-single {
    grid-template-columns: minmax(0, 1fr);
}

.product-new-chart {
    display: flex;
    flex-direction: column;
    border: 1px solid #D4DEE3;
    border-radius: 8px;
    padding: 0;
    min-height: 0;
    overflow: hidden;
    background: #fff;
}

.product-new-chart[hidden] {
    display: none;
}

/* Filtering replays this on every card still on screen, staggered by
   --pn-chart-delay, so a change of selection reads as one movement. */
@keyframes product-new-chart-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.product-new-chart.is-entering {
    animation: product-new-chart-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--pn-chart-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    .product-new-chart.is-entering {
        animation: none;
    }
}

.product-new-chart__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 31px 24px;
    background: #F3F6F7;
    border-bottom: 1px solid #D4DEE3;
}

.product-new-chart__heading {
    margin: 0;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    text-transform: none;
    color: #1B2429;
}

.product-new-chart__subtitle {
    margin: 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    color: #1B2429;
}

.product-new-chart__canvas {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    line-height: 0;
}

.product-new-chart__canvas img {
    max-width: 100%;
    height: auto;
}

.product-new-chart__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px 24px;
}

.product-new-chart__enlarge,
.product-new-chart__download {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px;
    height: 44px;
    border: 1px solid #D4DEE3;
    border-radius: 6px;
    background: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    text-transform: uppercase;
    color: #1B2429;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.2s;
}

.product-new-chart__enlarge:hover,
.product-new-chart__download:hover {
    border-color: var(--primary-color);
}

.product-new-chart__enlarge::before {
    content: "\2197";
    font-size: 16px;
    transform: scaleX(-1);
}

.product-new-chart__canvas img {
    display: block;
    width: 100%;
    height: auto;
}

.product-new-performance__download {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 38px;
    padding: 9px 15px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: var(--color-bg-light);

    a {
        color: var(--color-accent-text);
        text-decoration: none;
        font-weight: 700;
        font-size: 11px;
        line-height: 16px;
        letter-spacing: 0;
    }

    a::before {
        content: "\2193\00a0";
    }
}

.product-new-stock {
    padding: 0;
    border-top: none;
}

.product-new-stock__heading {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    font-weight: 700;
    color: #365463;
    margin: 0;
}

.product-new-stock__description {
    margin: 21px 0 0;
    font-size: 20px;
    line-height: 26px;
    color: #5E7682;
}

/* The slider is the one the homepage uses for .recommends: same markup, same
   arrow and dot styles, three cards across at desktop. */
.product-new-stock__slider {
    position: relative;
    margin-top: 67px;
}

.product-new-stock__swiper {
    overflow: hidden;
}

.product-new-stock__swiper .swiper-slide {
    height: auto;
}

.product-new-stock-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: none;
    border-radius: 4px;
    padding: 24px;
    background: #F3F6F7;
}

.product-new-stock-card__image {
    flex: 0 0 auto;
    width: 100%;
    height: 250px;
    margin-bottom: 0;
    border-radius: 0;
    overflow: hidden;
    background: none;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

.product-new-stock-card__body {
    flex: 1 1 auto;
    min-width: 0;
}

.product-new-stock-card__label {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 8px;
    border-radius: 20px;
    background: #A9E8DD;
    color: #0B4A44;
    font-weight: 600;
    font-size: 12px;
    line-height: 16px;
}

.product-new-stock-card__name {
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0;
    color: #365463;
    margin: 0;
}

.product-new-stock-card__sku {
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    color: #6F858F;
    margin: 15px 0 0;
}

.product-new-stock-card__specs {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 0;
    border-top: 1px solid #D4DEE3;

    th, td {
        padding: 7px 0;
        font-weight: 400;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: 0;
        color: #365463;
        text-align: left;
    }

    td {
        font-weight: 400;
        text-align: right;
        white-space: nowrap;
    }

    /* pinned so a tall glyph (diameter sign, superscripts) cannot stretch a row */
    tr {
        height: 34px;
    }

    /* the rule above the first row sits 17px clear of its text */
    tr:first-child {
        height: 51px;
    }

    tr:first-child th,
    tr:first-child td {
        padding-top: 24px;
    }

    sup {
        font-size: 0.68em;
        line-height: 0;
        vertical-align: super;
    }
}

.product-new-stock-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
}

.product-new-stock-card__price {
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    color: #365463;
}

/* Styling, chevron and hover all come from the site's .button -arrow. */
.product-new-stock-card__button {
    flex: 0 0 auto;
    width: 200px;
    padding: 0 16px;
}


.product-new-related {
    padding: 0;
    border-top: none;
    margin: 80px 0;
}

.product-new-related__heading {
    margin: 0;
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    color: #365463;
}

/* Four cards across, on the same slider as the in-stock and hub blocks. */
.product-new-related__slider {
    position: relative;
    margin-top: 64px;
}

.product-new-related__swiper {
    overflow: hidden;
}

.product-new-related__swiper .swiper-slide {
    height: auto;
}

.product-new-related-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    border: none;
    border-radius: 4px;
    overflow: hidden;
    background: #F3F6F7;
    color: inherit;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.2s;
}

.product-new-related-card:hover {
    background: #E9EFF2;
    border-color: transparent;
}

.product-new-related-card__image {
    flex: 0 0 auto;
    aspect-ratio: auto;
    height: 128px;
    margin-bottom: 20px;
    padding: 0;

    img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0;
    }
}

.product-new-related-card__name {
    margin: 0;
    font-weight: 600;
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    color: #365463;
}

.product-new-related-card__subtitle {
    margin: 8px 0 19px;
    font-weight: 400;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0;
    color: #6F858F;
}

.product-new-related-card__link {
    /* the card's mockup height is shorter than the site's default button */
    height: 46px;
    min-height: 46px;
    /* pinned to the bottom so the buttons line up however the titles wrap */
    margin-top: auto;
}

.product-new-related-card:hover .product-new-related-card__link {
    border-color: var(--primary-color);
}




.product-new-hub {
    padding: 0;
    border-top: none;
}

.product-new-hub__heading {
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    font-weight: 700;
    color: #365463;
    margin: 0;
}

/* Shared slider chrome for the in-stock and knowledge-hub blocks. */
.product-new-slider__viewport {
    position: relative;
}

/* The circles straddle the container edges, centred on the cards. */
.product-new-slider__arrows {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -32px;
    right: -32px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    pointer-events: none;
}

/* Swiper absolutely positions its nav buttons; put them back in the flow so
   the row above can centre them on the cards. */
.product-new-slider__arrows .slider-btn {
    position: static;
    margin: 0;
    pointer-events: auto;
}

/* At either end the arrow has nothing to do, so it steps out of the way. */
.product-new-slider__arrows .slider-btn.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.product-new-slider__dots {
    display: flex !important;
    justify-content: center;
    margin: 64px auto 0;
}

/* the theme gives .swiper-pagination its own 64px top margin */
.product-new-slider__dots .swiper-pagination {
    position: static;
    margin: 0;
}

/* Swiper locks the pagination and the arrows when every slide already fits.
   They hide themselves, but the dots row still held its 64px margin, so drop
   the whole row. :has() re-evaluates on resize, when a narrower breakpoint
   shows fewer cards and unlocks the slider again. */
.product-new-slider__dots:has(.swiper-pagination-lock),
.product-new-slider__arrows:has(.swiper-button-lock) {
    display: none !important;
}

/* Same slider as the in-stock block: three cards across, dots and arrows. */
.product-new-hub__slider {
    position: relative;
    margin-top: 71px;
}

.product-new-hub__swiper {
    overflow: hidden;
}

.product-new-hub__swiper .swiper-slide {
    height: auto;
}

.product-new-hub-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: none;
    border-radius: 4px;
    padding: 31px 24px 24px;
    background: #F3F6F7;
    color: inherit;
    text-decoration: none;
    transition: background-color 0.2s;
}

.product-new-hub-card:hover {
    background: #E9EFF2;
}

.product-new-hub-card__name {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 600;
    font-size: 24px;
    line-height: 33px;
    letter-spacing: 0;
    color: #365463;
}

.product-new-hub-card__time {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 24px 0 0;
    font-weight: 400;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    color: #5E7682;
}

.product-new-hub-card__clock {
    flex: 0 0 auto;
    color: #5E7682;
}

.product-new-faq {
    /* padding: 34px; */
}

/* ---- Available lenses and substrates --------------------------------------
   Three columns on the same 416/16 grid as the other blocks: a dark stats card
   and two content cards. */

.product-new-substrates {
    padding: 80px 0;
    border-top: none;
    background: #F3F6F7;
}

.product-new-substrates__heading {
    margin: 0;
    font-weight: 700;
    font-size: 48px;
    line-height: 52px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    color: #365463;
}

.product-new-substrates__wrapper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 16px;
    margin-top: 71px;
    padding: 0;
    background: none;
}

.product-new-substrates__highlights {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    border-radius: 4px;
    background: #365463;
}

/* A rule between the two stats, but not above the first or below the last. */
.product-new-substrates__highlight + .product-new-substrates__highlight {
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.product-new-substrates__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: #A8C4D4;
    color: #365463;
}

.product-new-substrates__value {
    margin: 0;
    font-weight: 700;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: #fff;
}

.product-new-substrates__caption {
    margin: 6px 0 0;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
}

.product-new-substrates__item {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid #D4DEE3;
    border-radius: 4px;
    background: #fff;
    color: inherit;
}

.product-new-substrates__item-title {
    margin: 0 0 15px;
    font-weight: 600;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: 0;
    color: #365463;
}

.product-new-substrates__text {
    flex: 1 1 auto;

    p {
        margin: 0;
        font-weight: 400;
        font-size: 16px;
        line-height: 25px;
        letter-spacing: 0;
        color: #5E7682;
    }

    p + p {
        margin-top: 12px;
    }
}

.product-new-substrates__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 24px;
}

/* .button -outline -arrow supplies the frame, the chevron and the hover. */
.product-new-substrates__link {
    padding: 0 16px;
}

/* ---- Request a quote -------------------------------------------------------
   templates/request.php is shared with the front page and the standalone
   chatbot page, so everything here is scoped to the product template. The
   design moves the dark panel off the section and onto the form column only. */

.product-new #request_custom {
    margin: 80px 0;
    padding: 0;
    background: #fff;
    color: #365463;
}

.product-new #request_custom > .container {
    padding: 0 80px;
}

.product-new #request_custom .request__intro {
    margin: 0;
}

/* .title-3 * sizes every descendant, so the animation's word spans need the
   size too, not just the heading. */
.product-new #request_custom .request__intro > .title,
.product-new #request_custom .request__intro > .title * {
    font-weight: 700;
    font-size: 56px;
    line-height: 62px;
    letter-spacing: -0.7px;
    text-transform: uppercase;
    color: #365463;
}

.product-new #request_custom .request__intro > .title {
    margin: 0;
}

.product-new #request_custom .request__intro .description {
    max-width: 680px;
    margin: 15px 0 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 26px;
    color: #5E7682;
}

.product-new #request_custom .request__wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 20px;
    margin-top: 40px;
    /* the form sets the row height; the chat column stretches to match it */
    align-items: stretch;
}

/* The chatbot brings its own panel. Its height is handed down the chain so the
   column ends level with the form beside it instead of standing on its own. */
.product-new #request_custom .request-content {
    padding: 0;
    height: 100%;
}

.product-new #request_custom .request-content .optoguide {
    height: 100%;
}

.product-new #request_custom .optoguide__window {
    height: 100%;
}

.product-new #request_custom .request-form {
    padding: 32px;
    border-radius: 4px;
    background: #365463;
    color: #fff;
}

/* On the dark column the form's own translucent panel is one layer too many. */
.product-new #request_custom .request-form .form-wrapper {
    padding: 0;
    border-radius: 0;
    background: none;
}

/* The mockup drops the sub-heading the shared template passes by default. */
.product-new #request_custom .request-form .formsDesc_desc {
    display: none;
}

/* Form controls follow the mockup: 48px fields, a 56px step bar and a
   right-aligned 283px action button. */
.product-new #request_custom .file-upload,
.product-new #request_custom .input__wrapper input,
.product-new #request_custom .input__wrapper textarea,
.product-new #request_custom .select-input.--dropdown .--dropdown__value {
    height: 48px;
}

.product-new #request_custom .request-steps {
    min-height: 56px;
}

.product-new #request_custom .cf7mls-btns {
    display: flex;
    justify-content: flex-end;
}

.product-new #request_custom .cf7mls-btns .action-button {
    flex: 0 0 auto;
    width: 283px;
    min-width: 283px;
    max-width: 100%;
    height: 56px;
    min-height: 56px;
    font-size: 16px !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.product-new #request_custom .request-form .formsDesc_title,
.product-new #request_custom .request-form .title {
    font-weight: 700;
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: #fff;
}

.product-new-faq__heading {
    margin-bottom: 14px;
}

.product-new-faq__item {
    border-bottom: 1px solid var(--color-border);
}

.product-new-faq__item .--accordion__open {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}

.product-new-faq__question {
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    color: #33505E;
    margin: 0;
}

.product-new-faq__item .--accordion__arrow {
    position: relative;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.product-new-faq__item .--accordion__arrow::before,
.product-new-faq__item .--accordion__arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--primary-color);
    transform: translate(-50%, -50%);
    transition: transform .2s ease, opacity .2s ease;
}

.product-new-faq__item .--accordion__arrow::before {
    width: 14px;
    height: 1.5px;
}

.product-new-faq__item .--accordion__arrow::after {
    width: 1.5px;
    height: 14px;
}

.product-new-faq__item .--accordion__open.-active .--accordion__arrow::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
}

.product-new-faq__answer p {
    padding: 0 0 20px;
    color: #33505E;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0;
}

/* Bioz ships its own layout and type. Nothing here reaches inside it; the
   rules below only touch the wrapper our own embed snippet creates and hide
   the two chrome pieces the design leaves out. */

/* The snippet pads that wrapper by 50px and repeats the background; on this
   page the container gutter and the section already do both. */
.product-new-research > .container > div {
    padding: 0 !important;
    background: none !important;
}

/* The small 90px rating badge Bioz drops in: before the full panel here, and
   again inside the quote section's intro. The design shows neither. */
.product-new [id^="w-s-"][id$="-all-mentions"],
.product-new div:has(> [id^="w-s-"][id$="-all-mentions"]) {
    display: none !important;
}

.product-new-research__mentions,
.product-new-research .bioz-w-optoman-back {
    display: none !important;
}

.request.-chatbot .form-wrapper {
    .formsDesc {
        margin-bottom: 16px;
    }
    .request-steps {
        padding: 8px 12px;
    }
}

@media (max-width: 1023px) {
    .product-new-topbar__wrapper,
    .product-new-hero__wrapper {
        flex-direction: column;
    }

    .product-new-topbar__wrapper {
        align-items: flex-start;
        justify-content: center;
        height: auto;
        min-height: 52px;
    }

    /* The hero's mockup sizes are for 1440; below that the card and the
       columns have to give way rather than overflow. */
    .product-new-hero {
        padding: 34px 0;
    }

    .product-new-hero__wrapper {
        gap: 34px;
    }

    .product-new-hero__media {
        flex: 0 0 auto;
        width: 100%;
        max-width: 520px;
        align-self: stretch;
    }

    .product-new-hero__image {
        height: auto;
        aspect-ratio: 520 / 440;
    }

    .product-new-hero__heading {
        font-size: 40px;
        line-height: 44px;
    }

    .product-new-performance__heading,
    .product-new-stock__heading,
    .product-new-hub__heading,
    .product-new-substrates__heading,
    .product-new-related__heading {
        font-size: 40px;
        line-height: 44px;
    }

    /* the quote block's two columns and 80px gutter are desktop-only */
    .product-new #request_custom > .container {
        padding: 0 35px;
    }

    .product-new #request_custom .request__intro > .title,
    .product-new #request_custom .request__intro > .title * {
        font-size: 40px;
        line-height: 44px;
    }

    .product-new #request_custom .request__wrapper {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, the chat has no neighbour to take its height from, so it gets
       its own again instead of collapsing onto the message list. */
    .product-new #request_custom .optoguide__window {
        height: 520px;
    }

    .product-new #request_custom .cf7mls-btns .action-button {
        width: 100%;
        min-width: 0;
    }

    /* three 416px columns do not fit; stack them */
    .product-new-substrates {
        padding: 34px 0;
    }

    .product-new-substrates__wrapper {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 34px;
    }

    .product-new-hub-card__name {
        font-size: 20px;
        line-height: 28px;
    }

    .product-new-performance__description,
    .product-new-stock__description {
        font-size: 18px;
        line-height: 24px;
    }

    /* a narrow card cannot hold price and a 200px button side by side */
    .product-new-stock-card__footer {
        flex-wrap: wrap;
    }

    .product-new-stock-card__button {
        flex: 1 1 auto;
        width: auto;
        min-width: 160px;
    }

    .product-new-stock-card__image {
        height: 200px;
    }

    .product-new-anchors {
        display: none;
    }
}

@media (max-width: 768px) {
    .product-new-performance__charts {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 450px) {
    .product-new-capabilities__table tr {
        display: flex;
        flex-direction: column;
    }

    .product-new-capabilities__table td {
        text-align: left;
    }

    .product-new-hero__buttons {
        flex-direction: column;
    }
}