/* ==========================================================
   PRODUCT PAGES (shared by every product category: Suspension, Brake System, Air Suspension…)
   Series page content blocks, version tabs and the model / price / spec tables (AllModelList).
   Loaded with the category's own stylesheet, e.g. ~/bundles/suspension-css.
   ========================================================== */

/* ---- Page head ---- */
/* Unpublished page opened from the back office (Views/Shared/_ProductPreview.cshtml): visitors never see it. */
.product-preview {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 24px;
    padding: 10px 16px;
    border-left: 4px solid #ffed00;
    background: #111;
    color: #fff;
    font-size: 14px;
}

.product-back {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 5px 15px;
    border: 1px solid #111;
    color: #111;
    font-size: 14px;
    text-decoration: none;
}

.product-back:hover,
.product-back:focus-visible {
    color: #111;
    background-color: #d8d8d8;
}

.product-title {
    margin-top: 24px;
    margin-bottom: 40px;
    text-align: center;
}

/* Group name above a series title (e.g. HOLLOW above "286 x 26mm"). */
.product-eyebrow {
    margin: 24px 0 0;
    color: #555;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
    text-align: center;
}

.product-title--under-eyebrow {
    margin-top: 4px;
}

/* ---- Warranty notice ---- */
.product-warranty {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 1.2em;
    color: #111;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    list-style: square;
}

/* "2 year" / "5 year" in brand yellow, as a highlighter stroke (yellow text would not be readable on white). */
.product-warranty mark {
    padding: 0 2px;
    color: inherit;
    background: linear-gradient(transparent 55%, #ffed00 55%);
}

/* ---- Slanted link buttons under the warranty (e.g. Brake FRONT / REAR MODEL LIST): two across, --wide ones across
   the whole width ---- */
.product-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 32px;
    max-width: 760px;
    margin: 48px auto 0;
}

/*
   The outline of the designer's button frames (ImageSources/product/brake/brake-button.png, -light.png; the old Air Suspension
   buttons have the same shape): the top-left
   and bottom-right corners cut at 45 degrees, about 60% of the height. Drawn as a black shape with a white one inset
   by the line width (clip-path cuts real borders off), so it stays sharp at any size and can fill on hover.
   The inner cut is shorter by stroke x (2 - sqrt 2), which keeps the diagonal line as thick as the straight ones.
*/
.product-link {
    --cut: 30px;
    --stroke: 1px;
    --inner-cut: calc(var(--cut) - var(--stroke) * 0.586);
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 8px 40px;
    color: #111;
    font-size: 18px;
    letter-spacing: 0.3px;
    text-align: center;
    text-decoration: none;
    background-color: #111;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    transition: color 0.2s;
}

.product-link::before {
    position: absolute;
    inset: var(--stroke);
    z-index: -1;
    background-color: #fff;
    clip-path: polygon(var(--inner-cut) 0, 100% 0, 100% calc(100% - var(--inner-cut)), calc(100% - var(--inner-cut)) 100%,
        0 100%, 0 var(--inner-cut));
    content: "";
    transition: background-color 0.2s;
}

.product-link--wide {
    grid-column: 1 / -1;
}

/* Three across (Forged Wheels: OTHER / GALLERY / WHEEL EXAMINATION), full width, the columns lined up with the
   three cards above (.wheels-specials, gap 24px). */
.product-links--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 24px;
    max-width: none;
}

.product-link:hover,
.product-link:focus-visible {
    color: #ffed00;
}

.product-link:hover::before,
.product-link:focus-visible::before {
    background-color: #111;
}

.product-link:focus-visible {
    outline: none;
}

/* ---- RELATED PRODUCTS carousel on series pages (Swiper) ---- */
.product-related {
    margin-top: 72px;
}

.product-related__title {
    margin: 0 0 20px;
    color: #111;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.product-related__carousel {
    position: relative;
}

.product-related .swiper-slide {
    height: auto;
}

.product-related__btn {
    position: absolute;
    top: 40%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    background-color: rgba(17, 17, 17, 0.75);
    transform: translateY(-50%);
    cursor: pointer;
}

.product-related__btn--prev {
    left: -22px;
}

.product-related__btn--next {
    right: -22px;
}

.product-related__btn:hover,
.product-related__btn:focus-visible {
    color: #111;
    background-color: #ffed00;
}

.product-related__btn:focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
}

.product-related__btn.swiper-button-disabled {
    opacity: 0;
    pointer-events: none;
}

.product-related .swiper-pagination {
    position: static;
    margin-top: 16px;
}

.product-related .swiper-pagination-bullet-active {
    background-color: #111;
}

/* ---- Series page: content blocks (ProductSeriesBlock) ----
   One column of full-width blocks; two half blocks in a row sit side by side (stacked on phones). */
.product-article {
    max-width: 960px;
    margin-right: auto;
    margin-left: auto;
}

.product-blocks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 48px;
    align-items: start;
}

.product-blocks + .product-blocks,
.product-blocks + .product-tabs-group,
.product-tabs-group + .product-blocks {
    margin-top: 40px;
}

.product-block {
    grid-column: 1 / -1;
    min-width: 0;
    margin: 0;
    line-height: 1.6;
}

.product-block--half {
    grid-column: auto;
}

/* Half text next to a half picture in the same row: centred against the picture. */
.product-block--middle {
    align-self: center;
}

.product-block__title {
    margin: 0 0 12px;
    color: #111;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}

.product-block p {
    margin: 0 0 1em;
}

.product-block p:last-child {
    margin-bottom: 0;
}

.product-block__list {
    margin: 0;
    padding-left: 1.2em;
    list-style: square;
}

.product-block__list li + li {
    margin-top: 6px;
}

/* Pictures open in the lightbox (labels in the artwork are small on phones). */
.product-block__zoom {
    display: block;
    cursor: zoom-in;
}

.product-block__zoom:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

/* width 100%: sources smaller than 1440px are not enlarged by the tool, so the srcset widths overstate them. */
.product-block__img {
    display: block;
    width: 100%;
    height: auto;
}

/* Caption under a picture (the block's Body): one line per photo when the picture is two photos side by side. */
.product-block__caption {
    display: flex;
    margin-top: 6px;
    color: #333;
    font-size: 14px;
    text-align: center;
}

.product-block__caption > span {
    flex: 1 1 0;
}

/* A title on its own (e.g. THIS SYSTEM INCLUDES above two half lists): as close to the blocks below as a block's
   own title (the row gap is 40px). */
.product-block--heading {
    margin-bottom: -28px;
}

/* ---- Gallery blocks: one large picture, thumbnails below switch it (fun.js data-gallery) ----
   The large pictures share one grid cell: the hidden ones stay laid out, so they load with the page and switching
   is instant. */
.product-gallery__stage {
    display: grid;
}

.product-gallery__item {
    grid-area: 1 / 1;
    align-self: center;
    visibility: hidden;
}

.product-gallery__item.is-active {
    visibility: visible;
}

/* One row of equal thumbnails. */
.product-gallery__thumbs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 8px;
    margin-top: 8px;
}

.product-gallery__thumb {
    display: block;
    padding: 0;
    border: 2px solid transparent;
    background: none;
    opacity: 0.65;
    cursor: pointer;
    transition: opacity 160ms ease, border-color 160ms ease;
}

.product-gallery__thumb:hover,
.product-gallery__thumb.is-active {
    opacity: 1;
}

.product-gallery__thumb.is-active {
    border-color: #ffed00;
}

.product-gallery__thumb:focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
}

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

/* ---- Photo lists (ProductPhoto): a grid shown one page at a time, a numbered button per page (fun.js data-pager) ---- */
.product-photos {
    scroll-margin-top: calc(var(--nav-h) + 16px);
}

.product-photos + .product-photos {
    margin-top: 72px;
}

.product-photos__title {
    margin: 0 0 24px;
    color: #111;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
}

.product-photos__page {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

/* Pages after the first wait hidden; their lazy pictures load once shown. */
.product-photos__page[hidden] {
    display: none;
}

/* Photos: cropped to 3:2 in the grid, the whole photo in the lightbox. */
.product-photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background-color: #f2f2f2;
    cursor: zoom-in;
}

.product-photo__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
}

/* The old site's magnifier, shown on hover. */
.product-photo__icon {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #111;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.85);
    opacity: 0;
    transition: opacity 0.2s;
}

.product-photo:hover .product-photo__img {
    transform: scale(1.05);
}

.product-photo:hover .product-photo__icon,
.product-photo:focus-visible .product-photo__icon {
    opacity: 1;
}

.product-photo:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 2px;
}

/* Parts: six across, the part number and name under each thumbnail. */
.product-photos--parts .product-photos__page {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 28px 16px;
}

.product-part {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}

/* At most 120px: the supplied thumbnails are only 113px. */
.product-part__img {
    display: block;
    width: 100%;
    max-width: 120px;
    height: auto;
    margin: 0 auto 8px;
}

.product-part__no {
    display: block;
    color: #111;
}

/* The old site's yellow, darkened to stay readable on white. */
.product-part__name {
    display: block;
    margin-top: 2px;
    color: #7a6c00;
}

.product-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    justify-content: center;
    margin-top: 28px;
}

.product-pager__btn {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #111;
    font-size: 18px;
    line-height: 1;
    background: none;
    cursor: pointer;
}

.product-pager__btn:hover {
    color: #a18f00;
}

.product-pager__btn.is-active {
    border-bottom-color: #111;
    font-weight: 700;
}

.product-pager__btn:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 2px;
}

/* Dots instead of numbers (many pages, e.g. the Forged Wheels designs, as the old site's carousel). */
.product-pager--dots {
    gap: 2px;
}

.product-pager--dots .product-pager__btn {
    position: relative;
    min-width: 0;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
}

.product-pager--dots .product-pager__btn::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #9a9a9a;
    transform: translate(-50%, -50%);
    content: "";
}

.product-pager--dots .product-pager__btn:hover::before {
    background-color: #555;
}

.product-pager--dots .product-pager__btn.is-active::before {
    width: 10px;
    height: 10px;
    background-color: #111;
}

/* ---- Version tabs (blocks with a Tab, e.g. ED-O / ED-N / ED-X): slanted buttons as on the old site ---- */
.product-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-bottom: 40px;
}

.product-tab {
    min-width: 180px;
    padding: 8px 32px;
    border: 0;
    color: #111;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 20px;
    line-height: 1.2;
    background-color: #111;
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    cursor: pointer;
    position: relative;
    isolation: isolate;
}

/* White face inset by the 2px "border" (clip-path cuts real borders off the slanted sides). */
.product-tab::before {
    position: absolute;
    inset: 2px 3px;
    z-index: -1;
    background-color: #fff;
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    content: "";
    transition: background-color 160ms ease;
}

@media (hover: hover) {
    .product-tab:not(.is-active):hover::before {
        background-color: #e6e6e6;
    }
}

.product-tab.is-active {
    color: #fff;
}

.product-tab.is-active::before {
    background-color: #111;
}

.product-tab:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

.product-tab-panel:not(.is-active) {
    display: none;
}

/* ---- Model / price / spec tables (AllModelList) ---- */
/* Model List / Model Spec pages: the full window width, with the old site's narrow 8px margin.
   Narrower windows (phones) get the desktop layout shrunk to fit: the inline script at the top of <main> sets
   width, zoom, .is-fitted and --fit-zoom. text-size-adjust stops mobile browsers from enlarging the small text. */
.product-wide {
    /* Clear the logo tab that hangs below the site header, in real pixels also when shrunk. */
    padding: calc((var(--nav-tab-h) + 16px) / var(--fit-zoom, 1)) 8px 64px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.product-sheet {
    color: #333;
    font-size: 14px;
}

/* The block above the tables, framed like the old site: title bar, legend, note, search and brand index stacked
   on each other's 1px borders (margin-top: -1px). */
.product-sheet__title {
    margin: 0;
    padding: 6px 12px;
    border: 1px solid #111;
    color: #111;
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    background-color: #99ccff;
}

/* Legend table: a note on the left of each row, then code / meaning pairs (the old site's columns: 40% for the
   notes, 5% per code, the meanings share the rest). */
.product-legend {
    width: 100%;
    margin-top: -1px;
    border-collapse: collapse;
    table-layout: fixed;
    line-height: 1.25;
}

.product-legend td {
    height: 34px;
    padding: 4px 8px;
    border: 1px solid #111;
}

.product-legend__note-col {
    width: 40%;
}

.product-legend__code-col {
    width: 5%;
}

/* Legends without a notes column (code / meaning pairs, e.g. the brake lists): 10% per code. */
.product-legend__key-col {
    width: 10%;
}

.product-legend__note::before {
    content: "\25CF\00a0"; /* "● " */
}

.product-legend--red .product-legend__note {
    color: #d10000;
}

.product-legend__code {
    color: #111;
    font-weight: 700;
    text-align: center;
    background-color: #99ccff;
}

/* Colour swatches of the legend (same colours as the cells they explain). */
.product-legend__code.is-custom { background-color: #ffff99; }
.product-legend__code.is-can { background-color: #99ff99; }
.product-legend__code.is-fixed-height { background-color: #cbf8cb; }
.product-legend__code.is-camber { background-color: #cccccc; }
.product-legend__code.is-disc { background-color: #ffff66; }

/* Full-width notes in a legend (blue, red text). */
.product-legend__code.product-legend__alert {
    color: #d10000;
}

.product-legend__code.is-inverted {
    color: #ff9933;
    background-color: #111;
}

.product-note {
    margin: -1px 0 0;
    padding: 10px 14px;
    border: 1px solid #111;
    color: #111;
    line-height: 1.7;
    background-color: #ffed00;
}

.product-note ol {
    margin: 0;
    padding-left: 1.4em;
}

/* Brand index: one button per brand, jumping to its table. */
.product-brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    margin: 24px 0 0;
    padding: 1px;
    list-style: none;
    background-color: #111;
}

/* In the framed block: directly under the search strip. */
.product-brands--framed {
    margin-top: -1px;
}

.product-brands a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 6px 10px;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    background-color: #2a2a2a;
    transition: color 160ms ease, background-color 160ms ease;
}

.product-brands a:hover,
.product-brands a:focus-visible {
    color: #111;
    background-color: #ffed00;
    outline: none;
}

.product-search {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    margin: 24px 0 0;
}

/* In the framed block: a bordered strip under the legend. */
.product-search--framed {
    margin-top: -1px;
    padding: 10px 12px;
    border: 1px solid #111;
    background-color: #f2f2f2;
}

.product-search label {
    color: #111;
    font-weight: 700;
}

/* max-width: none: Content/Site.css limits inputs to 280px. */
.product-search input {
    flex: 0 1 420px;
    max-width: none;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #111;
    border-radius: 0;
    font-size: 16px;
    background-color: #fff;
}

.product-search input:focus {
    outline: 3px solid #ffed00;
    outline-offset: 0;
}

.product-search__status {
    color: #555;
}

.product-table-group {
    margin-top: 32px;
}

.product-table-group[hidden] {
    display: none;
}

.product-table-group__head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 6px 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    background-color: #111;
}

.product-table-group__head h2,
.product-table-group__head h3 {
    margin: 0;
    font: inherit;
}


/* Separate borders (right / bottom per cell): collapsed borders would not move with the sticky header.
   Fixed layout with the <colgroup> widths, so every brand's table lines up; MODEL takes the rest. */
.product-table {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #111;
    border-left: 1px solid #111;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    line-height: 1.25;
}

.product-table th,
.product-table td {
    height: 34px;
    padding: 4px 6px;
    border-right: 1px solid #111;
    border-bottom: 1px solid #111;
    text-align: center;
}

.product-table th {
    color: #111;
    font-size: 12px;
    font-weight: 700;
    background-color: #99ccff;
}

/* The header rows stay under the site header while scrolling a brand's rows (when the table fits the page).
   --fit-zoom: inside a shrunk sheet, top is in shrunk pixels. */
.product-table thead {
    position: sticky;
    top: calc(var(--nav-h) / var(--fit-zoom, 1));
    z-index: 2;
}

.product-table td {
    background-color: #fff;
}

.product-col--part { width: 96px; }
.product-col--kit { width: 120px; }
.product-col--year { width: 64px; }
.product-col--side { width: 46px; }
.product-col--price { width: 64px; }
.product-col--engine { width: 30%; }
.product-col--remark { width: 16%; }
.product-col--pcd { width: 88px; }
.product-col--caliper { width: 112px; }
.product-col--size { width: 68px; }
.product-col--disc { width: 80px; }

/* Below these widths the page is narrower than the table, which then scrolls sideways (see the responsive part).
   Each leaves the MODEL column about 200px. */
.product-table--prices {
    min-width: 1240px;
}

.product-table--spec {
    min-width: 1480px;
}

.product-table--kits {
    min-width: 760px;
}

.product-table--brake-front {
    min-width: 1384px;
}

.product-table--brake-rear {
    min-width: 1240px;
}

.product-table--brake-carbon-front {
    min-width: 904px;
}

.product-table--brake-carbon-rear {
    min-width: 768px;
}

.product-table--discs {
    min-width: 1000px;
}

/* Brake lists: the warranty note across the size columns; the caliper type of each row. */
.product-table .product-table__warranty {
    font-weight: 400;
    line-height: 1.4;
}

.product-table .product-table__caliper {
    font-weight: 700;
}

/* Rear enlarged disc kits: yellow header rows, as on the old site (the legend's "REAR ENLARGED DISC KIT FOR OPTION"). */
.product-table--discs th {
    background-color: #ffff66;
}

.product-table .product-table__model {
    text-align: left;
}

/* Part numbers (first column; in the kit tables the cell spanning the kit's rows). */
.product-table--prices td:first-child,
.product-table--spec td:first-child,
.product-table--kits td[rowspan] {
    white-space: nowrap;
}

/* Rows that come with the electronic damping cancellation kit (IsCan). */
.product-table tr.is-can > td:nth-child(-n + 3) {
    background-color: #99ff99;
}

.product-table-wrap {
    margin: 0;
}

/* Back-to-top arrow in the bottom right corner (the old site's chevron), shown once the page has scrolled down
   (fun.js data-back-to-top). The white backing keeps it visible over the black brand bars. */
.product-top {
    position: fixed;
    right: 80px;
    bottom: 80px;
    z-index: 1020;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    color: #111;
    font-size: 40px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}

.product-top i {
    -webkit-text-stroke: 2px; /* as heavy as the old site's chevron */
}

.product-top.is-visible {
    opacity: 1;
    visibility: visible;
}

.product-top:hover,
.product-top:focus-visible {
    color: #111;
    transform: scale(1.1);
}

.product-top:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 2px;
}

/* ==========================================================
   Product pages: responsive
   ========================================================== */

/* Too narrow for the whole table (its min-width plus the 8px margins): scroll it sideways, keep the model column
   in view (the sticky header is given up, as it cannot work inside a scrolling box). Only where the sheet is not
   shrunk to fit (.is-fitted): the kit tables, or Model List / Spec without JavaScript. */
@media (max-width: 1255.98px) {
    .product-sheet:not(.is-fitted) .product-table-wrap,
    .product-sheet:not(.is-fitted) .product-legend-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-sheet:not(.is-fitted) .product-table thead {
        position: static;
    }

    .product-sheet:not(.is-fitted) .product-table .product-table__model {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 2px 0 0 #111;
    }

    .product-sheet:not(.is-fitted) .product-table th.product-table__model {
        z-index: 3;
    }

    .product-sheet:not(.is-fitted) .product-legend {
        min-width: 960px;
    }
}

@media (max-width: 1495.98px) {
    .product-sheet:not(.is-fitted) .product-table-wrap--wide {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .product-sheet:not(.is-fitted) .product-table-wrap--wide .product-table thead {
        position: static;
    }

    .product-sheet:not(.is-fitted) .product-table-wrap--wide .product-table__model {
        position: sticky;
        left: 0;
        z-index: 1;
        box-shadow: 2px 0 0 #111;
    }

    .product-sheet:not(.is-fitted) .product-table-wrap--wide th.product-table__model {
        z-index: 3;
    }
}

@media (max-width: 1299.98px) {
    .product-related__btn--prev {
        left: 4px;
    }

    .product-related__btn--next {
        right: 4px;
    }
}

@media (max-width: 767.98px) {
    .product-warranty {
        font-size: 14px;
    }

    .product-links {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 36px;
    }

    .product-link {
        --cut: 26px;
        min-height: 46px;
        font-size: 15px;
    }

    .product-related {
        margin-top: 56px;
    }

    .product-related__btn {
        display: none;
    }

    .product-title {
        margin-bottom: 28px;
    }

    .product-blocks {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 28px;
    }

    .product-block--half {
        grid-column: 1 / -1;
    }

    .product-block--heading {
        margin-bottom: -16px;
    }

    /* Two half lists under one heading (e.g. THIS SYSTEM INCLUDES) read as one list when stacked. */
    .product-block--list.product-block--half + .product-block--list.product-block--half:not(:has(> .product-block__title)) {
        margin-top: -22px;
    }

    .product-photos__page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-photos--parts .product-photos__page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 12px;
    }

    .product-photos__title {
        font-size: 22px;
    }

    .product-photo__icon {
        display: none;
    }

    /* Nine pages still fit on one line. */
    .product-pager {
        gap: 4px;
    }

    .product-pager__btn {
        min-width: 30px;
        font-size: 16px;
    }

    /* 27 dots (the CS series) still fit on one line; the arrows and swiping turn the pages too. */
    .product-pager--dots {
        gap: 0;
    }

    .product-pager--dots .product-pager__btn {
        width: 11px;
    }

    .product-pager--dots .product-pager__btn::before {
        width: 6px;
        height: 6px;
    }

    .product-pager--dots .product-pager__btn.is-active::before {
        width: 8px;
        height: 8px;
    }

    .product-block__title {
        font-size: 20px;
    }

    .product-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 8px 16px;
        font-size: 16px;
    }

    .product-sheet:not(.is-fitted) .product-brands {
        grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    }

    .product-sheet:not(.is-fitted) .product-brands a {
        min-height: 44px;
        font-size: 13px;
    }

    .product-top {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .product-tab::before,
    .product-link,
    .product-link::before,
    .product-brands a,
    .product-top,
    .product-gallery__thumb,
    .product-photo__img,
    .product-photo__icon {
        transition: none;
    }

    .product-photo:hover .product-photo__img {
        transform: none;
    }

    .product-top:hover,
    .product-top:focus-visible {
        transform: none;
    }
}