/* ==========================================================
   FORGED WHEELS PAGES (/Wheels, Price List, Carbon Wheels, SN Series, Other, Gallery, Examination)
   Loaded only by Views/Wheels/*.cshtml via ~/bundles/wheels-css, after pages/product.css
   (photo lists, pager, link buttons, back button and title shared by every product category).
   Examination also loads ~/bundles/factory-css for the production steps.
   ========================================================== */

/* ---- /Wheels: "Before purchasing" notes ---- */
.wheels-intro {
    margin: 0 auto;
    color: #333;
    line-height: 1.7;
}

.wheels-intro__title {
    margin: 0 0 16px;
    color: #111;
    font-size: 20px;
    font-weight: 500;
}

.wheels-intro__list {
    margin: 0;
    padding-left: 1.4em;
}

.wheels-intro__list > li + li {
    margin-top: 10px;
}

/* The three tests, in red as on the old site. */
.wheels-intro__tests {
    margin: 6px 0 0;
    padding-left: 1.4em;
    color: #d10000;
    list-style: circle;
}

.wheels-tests {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 16px 0 6px;
}

.wheels-test {
    margin: 0;
}

.wheels-test__title {
    margin-bottom: 6px;
    color: #d10000;
    font-size: 17px;
    font-weight: 500;
}

/* Lazy test clips (fun.js data-lazy-video): the poster under the video, a play button when it does not autoplay. */
.wheels-video {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #ddd;
}

.wheels-video__poster,
.wheels-video__clip {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wheels-video__toggle {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    background-color: rgba(17, 17, 17, 0.6);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.wheels-video.is-manual .wheels-video__toggle {
    display: flex;
}

.wheels-video__toggle .bi-pause-fill,
.wheels-video.is-playing .wheels-video__toggle .bi-play-fill {
    display: none;
}

.wheels-video.is-playing .wheels-video__toggle .bi-pause-fill {
    display: inline;
}

.wheels-video.is-playing .wheels-video__toggle {
    opacity: 0;
}

.wheels-video.is-playing:hover .wheels-video__toggle,
.wheels-video__toggle:focus-visible {
    opacity: 1;
}

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

/* ---- PRICE LIST / CARBON WHEELS / SN SERIES: a wheel over a grey gradient, the name at the top left ---- */
.wheels-specials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 56px auto 0;
}

.wheels-special {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    color: #111;
    text-decoration: none;
    background: linear-gradient(135deg, #fafafa 0%, #d9d9d9 55%, #a6a6a6 100%);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
}

/* The name on the left in two lines (PRICE / LIST), the wheel on the right, not overlapping. */
.wheels-special__text {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 1;
    width: 40%;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 24px;
    font-style: italic;
    line-height: 1.15;
}

.wheels-special__img {
    position: absolute;
    right: -8%;
    bottom: -14%;
    width: 64%;
    height: auto;
    transition: transform 0.4s ease;
}

.wheels-special:hover .wheels-special__img,
.wheels-special:focus-visible .wheels-special__img {
    transform: rotate(-12deg) scale(1.04);
}

.wheels-special:hover .wheels-special__text,
.wheels-special:focus-visible .wheels-special__text {
    color: #a18f00;
}

.wheels-special:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

/* ---- Series index: a button per series, jumping to it ---- */
.wheels-index {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 40px auto 56px;
    padding: 0;
    list-style: none;
}

.wheels-index a {
    display: block;
    padding: 6px 4px;
    border: 1px solid #111;
    color: #111;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}

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

/* ---- A series: light-to-grey band, title, a page of designs with arrows at the sides and dots below ---- */
.wheels-series {
    padding: 56px 0 48px;
    background: linear-gradient(180deg, #fff 0%, #ececec 45%, #c8c8c8 100%);
    scroll-margin-top: var(--nav-h);
}

.wheels-series__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 64px;
}

.wheels-series__title {
    margin: 0 0 32px;
    color: #111;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 36px;
    font-style: italic;
    font-weight: 400;
    text-align: center;
}

.wheels-series__stage {
    position: relative;
}

.wheels-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 28px 16px;
}

.wheels-grid[hidden] {
    display: none;
}

.wheels-design__link {
    display: block;
    color: #333;
    text-align: center;
    text-decoration: none;
}

/* 1:1 transparent cut-outs; width 100% because the 1000px file is the lightbox one. */
.wheels-design__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.wheels-design__label {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    justify-content: center;
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.3;
}

.wheels-design__size {
    color: #111;
}

.wheels-design__link:hover .wheels-design__img,
.wheels-design__link:focus-visible .wheels-design__img {
    transform: scale(1.06);
}

.wheels-design__link:hover .wheels-design__no,
.wheels-design__link:focus-visible .wheels-design__no {
    color: #a18f00;
}

.wheels-design__link:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

/* The old site's thin chevrons beside the page. */
.wheels-series__arrow {
    position: absolute;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    color: #555;
    font-size: 34px;
    background: none;
    transform: translateY(-50%);
    cursor: pointer;
}

.wheels-series__arrow--prev {
    left: -60px;
}

.wheels-series__arrow--next {
    right: -60px;
}

.wheels-series__arrow:hover {
    color: #111;
}

.wheels-series__arrow:focus-visible {
    outline: 3px solid #ffed00;
}

/* ---- GALLERY pictures at the bottom of /Wheels ---- */
.wheels-ads {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 56px;
}

.wheels-ad {
    display: block;
    overflow: hidden;
}

.wheels-ad__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.4s ease;
}

.wheels-ad:hover .wheels-ad__img,
.wheels-ad:focus-visible .wheels-ad__img {
    transform: scale(1.04);
}

.wheels-ad:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

/* ---- Price list: one table, the series down, the sizes across ---- */
.wheels-price__title {
    margin: 0;
    color: #111;
    font-size: 24px;
    font-weight: 500;
    text-align: center;
}

.wheels-price__unit {
    margin: 4px 0 16px;
    color: #555;
    text-align: right;
}

.wheels-price__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wheels-price {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    color: #333;
    font-size: 15px;
    line-height: 1.35;
}

.wheels-price th,
.wheels-price td {
    padding: 8px 10px;
    border: 1px solid #111;
    text-align: center;
}

.wheels-price thead th {
    color: #fff;
    font-weight: 500;
    background-color: #2a2a2a;
}

.wheels-price tbody th {
    width: 14%;
    color: #111;
    font-weight: 700;
    background-color: #f2f2f2;
}

.wheels-price__j,
.wheels-price__amount {
    display: block;
}

.wheels-price__j {
    color: #555;
    font-size: 13px;
}

.wheels-price__amount {
    color: #111;
    font-weight: 700;
}

.wheels-price__none {
    background-color: #fafafa;
}

.wheels-price__other td {
    text-align: left;
}

.wheels-price__size {
    display: inline-block;
    margin-right: 14px;
    color: #111;
    font-weight: 700;
}

.wheels-notes {
    margin-top: 40px;
}

.wheels-notes__title {
    margin: 0 0 12px;
    color: #111;
    font-size: 20px;
    font-weight: 700;
}

.wheels-notes__list {
    margin: 0;
    padding-left: 1.6em;
    color: #333;
    line-height: 1.7;
}

/* ---- Carbon / SN articles ---- */
.wheels-article {
    max-width: 960px;
    margin: 0 auto;
    color: #333;
    line-height: 1.8;
}

.wheels-article p {
    margin: 0 0 1em;
}

.wheels-article__img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 32px;
}

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

/* TOP CUSTOM FORGED WHEELS: forging vs casting. */
.wheels-forged {
    margin-top: 56px;
}

.wheels-forged__title {
    margin: 0;
    color: #111;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-align: center;
}

.wheels-forged__subtitle {
    margin: 6px 0 32px;
    color: #b79332;
    font-style: italic;
    text-align: center;
}

.wheels-forged__question {
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #111;
    color: #111;
    font-size: 17px;
    font-weight: 700;
}

.wheels-forged__compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

.wheels-forged__compare b {
    color: #111;
    background: linear-gradient(transparent 60%, #ffed00 60%);
}

.wheels-colors__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- SN SERIES ---- */
.wheels-vehicles .swiper-pagination {
    position: static;
    margin-top: 14px;
}

.wheels-vehicles .swiper-pagination-bullet-active {
    background-color: #111;
}

/* Dynamic bullets (a few around the current one): Swiper sets their width; centred here because the pagination sits
   below the carousel, outside the .swiper box that Swiper's own centring rule expects. */
.wheels-vehicles .swiper-pagination-bullets-dynamic {
    margin-right: auto;
    margin-left: auto;
    white-space: nowrap;
}

.wheels-sn-designs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 48px 0;
}

.wheels-sn-design {
    display: block;
    cursor: zoom-in;
}

.wheels-sn-design__img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

.wheels-sn-design:hover .wheels-sn-design__img,
.wheels-sn-design:focus-visible .wheels-sn-design__img {
    transform: scale(1.05);
}

.wheels-sn-design:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

/* Anodized colour: the wheel beside two close-ups (one supplied picture on phones). */
.wheels-anodized__photos {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 8px;
}

.wheels-anodized__side {
    display: grid;
    gap: 8px;
}

.wheels-anodized__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wheels-anodized__mobile {
    display: none;
}

.wheels-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.wheels-swatch {
    width: 100px;
}

.wheels-swatch__img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- OTHER: accessories, four across ---- */
.wheels-others {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wheels-other {
    display: block;
    color: #111;
    text-align: center;
    text-decoration: none;
}

.wheels-other__name {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    transition: color 0.2s;
}

.wheels-other:hover .wheels-other__name,
.wheels-other:focus-visible .wheels-other__name {
    color: #a18f00;
}

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

.wheels-other:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: 3px;
}

/* ---- WHEEL EXAMINATION: the tests, the certification marks, the two banners ---- */
.wheels-exam {
    max-width: 900px;
    margin: 64px auto 0;
    color: #333;
    line-height: 1.8;
}

.wheels-exam p {
    margin: 0 0 1em;
}

.wheels-exam__tests {
    margin: 0 0 1em;
}

.wheels-exam__tests dt {
    color: #111;
    font-weight: 700;
}

.wheels-exam__tests dt::before {
    content: "\25CF\00a0"; /* "● " */
}

.wheels-exam__tests dd {
    margin: 0 0 12px;
}

/* White marks on transparent: shown black on the white page. */
.wheels-exam__logo {
    display: block;
    width: 220px;
    height: auto;
    margin: 24px 0 0 auto;
    filter: invert(1);
}

.wheels-exam-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wheels-exam-link {
    position: relative;
    display: block;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background-color: #111;
}

.wheels-exam-link__img {
    display: block;
    width: 100%;
    height: auto;
    opacity: 0.75;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.wheels-exam-link__text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Sui Generis", Arial, sans-serif;
    font-size: 32px;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.wheels-exam-link:hover .wheels-exam-link__img,
.wheels-exam-link:focus-visible .wheels-exam-link__img {
    opacity: 1;
    transform: scale(1.04);
}

.wheels-exam-link:hover .wheels-exam-link__text,
.wheels-exam-link:focus-visible .wheels-exam-link__text {
    color: #ffed00;
}

.wheels-exam-link:focus-visible {
    outline: 3px solid #ffed00;
    outline-offset: -3px;
}

/* ==========================================================
   Forged Wheels: responsive
   ========================================================== */
@media (max-width: 1199.98px) {
    .wheels-series__arrow--prev {
        left: -52px;
    }

    .wheels-series__arrow--next {
        right: -52px;
    }
}

@media (max-width: 991.98px) {
    .wheels-index {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .wheels-special__text {
        font-size: 19px;
    }
}

@media (max-width: 767.98px) {
    .wheels-tests {
        grid-template-columns: minmax(0, 1fr);
    }

    .wheels-specials {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 40px;
    }

    .wheels-special {
        aspect-ratio: 5 / 2;
    }

    .wheels-special__img {
        right: 2%;
        bottom: -30%;
        width: 46%;
    }

    .wheels-index {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin-bottom: 40px;
    }

    .wheels-series {
        padding: 40px 0 32px;
    }

    /* Phones: three across, swipe or tap the arrows over the edges. */
    .wheels-series__inner {
        padding: 0 24px;
    }

    .wheels-series__title {
        margin-bottom: 20px;
        font-size: 26px;
    }

    .wheels-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px 10px;
    }

    .wheels-design__label {
        flex-direction: column;
        font-size: 12px;
    }

    .wheels-series__arrow {
        top: -40px;
        width: 36px;
        height: 36px;
        font-size: 24px;
        transform: none;
    }

    .wheels-series__arrow--prev {
        left: -8px;
    }

    .wheels-series__arrow--next {
        right: -8px;
    }

    .wheels-ads {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 40px;
    }

    .wheels-forged__compare {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Price list: a card per series, each size on its own line ("18 inch … 8-10 J $1430"); sizes it lacks are left out. */
    .wheels-price {
        min-width: 0;
    }

    .wheels-price thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .wheels-price tbody,
    .wheels-price tr,
    .wheels-price tbody th,
    .wheels-price td {
        display: block;
        width: auto;
    }

    .wheels-price tr {
        margin-bottom: 12px;
        border: 1px solid #111;
    }

    .wheels-price tbody th {
        border: 0;
        color: #fff;
        text-align: left;
        background-color: #2a2a2a;
    }

    .wheels-price td {
        display: flex;
        gap: 10px;
        align-items: baseline;
        border: 0;
        border-top: 1px solid #ddd;
        text-align: right;
    }

    .wheels-price td::before {
        margin-right: auto;
        color: #111;
        font-weight: 700;
        content: attr(data-label);
    }

    .wheels-price__j,
    .wheels-price__amount {
        display: inline;
    }

    .wheels-price .wheels-price__none {
        display: none;
    }

    .wheels-price__other td {
        display: block;
        text-align: left;
    }

    .wheels-price__other td::before {
        content: none;
    }

    .wheels-price__size {
        display: block;
        margin: 0 0 2px;
    }

    .wheels-sn-designs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .wheels-anodized__photos {
        display: none;
    }

    .wheels-anodized__mobile {
        display: block;
    }

    .wheels-swatch {
        width: calc((100% - 36px) / 4);
    }

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

    .wheels-exam-links {
        grid-template-columns: minmax(0, 1fr);
    }

    .wheels-exam-link__text {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wheels-special__img,
    .wheels-index a,
    .wheels-design__img,
    .wheels-ad__img,
    .wheels-sn-design__img,
    .wheels-other__name,
    .wheels-exam-link__img {
        transition: none;
    }

    .wheels-special:hover .wheels-special__img,
    .wheels-special:focus-visible .wheels-special__img,
    .wheels-design__link:hover .wheels-design__img,
    .wheels-design__link:focus-visible .wheels-design__img,
    .wheels-ad:hover .wheels-ad__img,
    .wheels-ad:focus-visible .wheels-ad__img,
    .wheels-sn-design:hover .wheels-sn-design__img,
    .wheels-sn-design:focus-visible .wheels-sn-design__img,
    .wheels-other:hover .product-photo__img,
    .wheels-exam-link:hover .wheels-exam-link__img,
    .wheels-exam-link:focus-visible .wheels-exam-link__img {
        transform: none;
    }
}