/* ==========================================================================
   Allianz — Product pages
   Shared by every product category page (Rubber Mat, Conveyor Belt, Tyres,
   Rubber Sheet, Custom Products).

   Every selector is prefixed `prod-` (page content) or `prel` (the shared
   Related Products section), so nothing here can collide with main.css,
   bootstrap.min.css or any theme stylesheet.

   Structure a product page like this:

       <main class="prod-page prod-page--conveyor-belt">   <- slug modifier
           ... sections using .prod-group / .prod-card / .prod-split ...
           @include('products.related-products')
       </main>

   The slug modifier on <main> is what hides that page's own card in the
   Related Products grid — see the bottom of this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Section band
   -------------------------------------------------------------------------- */
.prod-group {
    padding-top: 100px;
    padding-bottom: 100px;
    overflow: hidden;
}

@media only screen and (min-width: 1200px) {
    .prod-group .container-fluid {
        padding-left: 5%;
        padding-right: 5%;
    }
}

.prod-group--alt {
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
}

.prod-group__head {
    margin-bottom: 45px;
}

.prod-group__lead {
    font-size: 16px;
}


/* --------------------------------------------------------------------------
   Product card (grid layout — used where a category has several products)
   -------------------------------------------------------------------------- */
.prod-card__thumb {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 30px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.prod-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease-in-out;
}

.prod-card:hover .prod-card__thumb img {
    transform: scale(1.06);
}

.prod-card__title {
    font-size: 28px;
    margin-top: 22px;
    margin-bottom: 0px;
}

.prod-card__text {
    margin-bottom: 15px;
    /* font-size: 15px;
    line-height: 1.4; */
    color: #626262;
}
.prod-card__text b {
    font-weight: 600;
    color: #1e1e1e;
}


/* --------------------------------------------------------------------------
   Round finish tiles — circular thumb inside a dashed ring, name underneath.
   Used where a category is a set of options rather than distinct products.
   -------------------------------------------------------------------------- */
.prod-round__group+.prod-round__group {
    margin-top: 55px;
}

.prod-round__label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 16px;
    margin-bottom: 30px;
    border-radius: 500px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--rr-theme-primary-2, #0078bf);
    border: 1px solid rgba(0, 120, 191, 0.35);
}

.prod-round__row {
    row-gap: 40px;
}

.prod-round {
    text-align: center;
}

.prod-round__thumb {
    width: 100%;
    max-width: 225px;
    margin: 0 auto;
    padding: 10px;
    overflow: hidden;
    position: relative;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    border: 2px dashed rgba(25, 41, 41, 0.28);
    transition: all 0.35s ease-in-out;
}

.prod-round__thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    transition: all 0.5s ease-in-out;
}

.prod-round:hover .prod-round__thumb {
    border-color: var(--rr-theme-primary-2, #0078bf);
    transform: translateY(-5px);
}

.prod-round:hover .prod-round__thumb img {
    transform: scale(1.07);
}

.prod-round__title {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    margin-top: 15px;
    margin-bottom: 0;
    color: var(--rr-heading-primary, #192929);
    transition: all 0.3s ease-in-out;
}

.prod-round:hover .prod-round__title {
    color: var(--rr-theme-primary-2, #0078bf);
}

@media (max-width: 575px) {
    .prod-round__thumb {
        max-width: 165px;
    }

    .prod-round__title {
        font-size: 16px;
        margin-top: 15px;
    }
}


/* --------------------------------------------------------------------------
   Inquiry form — reuses the theme's .contact-page__* field styling, these
   rules only add the pieces the theme has no markup for.
   -------------------------------------------------------------------------- */
.prod-inquiry__contact {
    margin: 0;
    padding: 0;
    list-style: none;
}

.prod-inquiry__contact li {
    gap: 12px;
    display: flex;
    font-size: 16px;
    align-items: center;
    margin-bottom: 14px;
    color: var(--rr-heading-primary, #192929);
}

.prod-inquiry__contact li i {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    display: flex;
    font-size: 16px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: var(--rr-theme-primary-2, #0078bf);
    border: 1px solid rgba(0, 120, 191, 0.3);
}

.prod-inquiry__contact li a:hover {
    color: var(--rr-theme-primary-2, #0078bf);
}

.prod-inquiry__select {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--rr-heading-primary, #192929);
    font: inherit;
}

.prod-inquiry__error {
    display: block;
    font-size: 13px;
    margin-top: 6px;
    color: #d63838;
}

.prod-inquiry__alert {
    font-size: 15px;
    padding: 14px 20px;
    margin-bottom: 25px;
    border-radius: 8px;
}

.prod-inquiry__alert--ok {
    color: #17603a;
    background: #e4f5ec;
    border: 1px solid #b7e3ca;
}

.prod-inquiry__alert--error {
    color: #8c1f1f;
    background: #fdeaea;
    border: 1px solid #f2c2c2;
}

/* honeypot — off-screen rather than display:none, which some bots detect */
.prod-inquiry__hp {
    left: -9999px;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   Tyre panes — banner image, tyre thumbnail grid, feature icons
   -------------------------------------------------------------------------- */
.prod-tyre__banner {
    overflow: hidden;
    border-radius: 30px;
    margin-bottom: 20px;
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    padding: 0 50px;
}

.prod-tyre__banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.prod-tyre__grid {
    gap: 14px;
    display: grid;
    margin-bottom: 40px;
    grid-template-columns: repeat(6, 1fr);
}

.prod-tyre__grid-item {
    padding: 10px;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 1 / 1;
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    border: 1px solid rgba(25, 41, 41, 0.08);
    transition: all 0.3s ease-in-out;
}

.prod-tyre__grid-item:hover {
    border-color: var(--rr-theme-primary-2, #0078bf);
    transform: translateY(-4px);
}

.prod-tyre__grid-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.prod-tyre__features {
    gap: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.prod-tyre__features li {
    gap: 8px;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 20px 10px 10px;
    align-items: center;
    border-radius: 500px;
    color: var(--rr-heading-primary, #192929);
    border: 1px solid rgba(25, 41, 41, 0.12);
}

.prod-tyre__features li img {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: invert(1);
}

.prod-tyre__app {
    padding: 16px 22px;
    border-radius: 10px;
    margin-bottom: 20px;
    color: var(--rr-heading-primary, #192929);
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    border-left: 3px solid var(--rr-theme-primary-2, #0078bf);
}

@media (max-width: 991px) {
    .prod-tyre__grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 767px) {
    .prod-tyre__grid {
        gap: 10px;
        grid-template-columns: repeat(3, 1fr);
    }

    .prod-tyre__banner {
        border-radius: 18px;
        padding: 0;
    }
}


/* --------------------------------------------------------------------------
   Spec chips
   -------------------------------------------------------------------------- */
.prod-specs {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
}

.prod-specs li {
    font-size: 15px;
    line-height: 1.2;
    padding: 8px 14px;
    border-radius: 500px;
    color: var(--rr-heading-primary, #192929);
    border: 1px solid rgba(25, 41, 41, 0.12);
}

.prod-specs li b {
    font-weight: 600;
}


/* --------------------------------------------------------------------------
   Split layout — image one side, content the other
   -------------------------------------------------------------------------- */
.prod-split__thumb {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: 30px;
}

.prod-split__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}

.prod-split__thumb:hover img {
    transform: scale(1.05);
}

.prod-split__content {
    padding-left: 40px;
}

.flex-row-reverse .prod-split__content {
    padding-left: 0;
    padding-right: 40px;
}

.prod-split__lead {
    margin-top: 0px;
}

.prod-split__product {
    margin-top: 28px;
    margin-bottom: 8px;
    padding-top: 24px;
    color: var(--rr-heading-primary, #192929);
    border-top: 1px solid rgba(25, 41, 41, 0.12);
}


/* --------------------------------------------------------------------------
   Related Products (shared partial: resources/views/products/related-products)
   -------------------------------------------------------------------------- */
.prel__head {
    gap: 30px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 55px;
    justify-content: space-between;
}

.prel__intro {
    max-width: 480px;
}

/* Numbering: hidden cards generate no box, so they are skipped. */
.prel__row {
    counter-reset: prel;
}

.prel__col {
    counter-increment: prel;
}

.prel__card {
    height: 100%;
    display: flex;
    overflow: hidden;
    border-radius: 30px;
    flex-direction: column;
    background-color: var(--rr-common-white, #fff);
    border: 1px solid rgba(25, 41, 41, 0.1);
    transition: all 0.35s ease-in-out;
}

.prel__card:hover {
    transform: translateY(-6px);
    border-color: rgba(25, 41, 41, 0.2);
    box-shadow: 0 18px 40px rgba(25, 41, 41, 0.1);
}

.prel__thumb {
    display: block;
    overflow: hidden;
    position: relative;
    aspect-ratio: 3 / 2.5;
}

.prel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}

.prel__card:hover .prel__thumb img {
    transform: scale(1.07);
}

.prel__num {
    top: 16px;
    left: 16px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    position: absolute;
    border-radius: 500px;
    letter-spacing: 0.04em;
    backdrop-filter: blur(6px);
    color: var(--rr-heading-primary, #192929);
    background: rgba(255, 255, 255, 0.88);
}

.prel__num::before {
    content: counter(prel, decimal-leading-zero);
}

.prel__body {
    flex: 1 1 auto;
    display: flex;
    padding: 26px 24px 24px;
    flex-direction: column;
}

.prel__title {
    display: block;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 12px;
    color: var(--rr-heading-primary, #192929);
    transition: all 0.3s ease-in-out;
}

.prel__card:hover .prel__title {
    color: var(--rr-theme-primary-2, #0078bf);
}

.prel__text {
    display: block;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 20px;
    color: rgba(25, 41, 41, 0.7);
}

.prel__link {
    gap: 8px;
    display: flex;
    font-size: 15px;
    font-weight: 500;
    margin-top: auto;
    align-items: center;
    color: var(--rr-heading-primary, #192929);
}

.prel__link i {
    transition: all 0.3s ease-in-out;
}

.prel__card:hover .prel__link i {
    transform: translateX(4px);
}


/* --------------------------------------------------------------------------
   Hide the current page's own category in the Related Products grid.
   Driven by the slug modifier on <main>, so pages need no inline CSS.
   -------------------------------------------------------------------------- */
.prod-page--rubber-mat .prel__col--rubber-mat,
.prod-page--conveyor-belt .prel__col--conveyor-belt,
.prod-page--tyres .prel__col--tyres,
.prod-page--rubber-sheet .prel__col--rubber-sheet,
.prod-page--custom-products .prel__col--custom-products {
    display: none;
}

/* Hide the current belt's own card in the Related Belts grid — same idea,
   driven by the slug modifier on <main>.
   See products/conveyor-belt/related-belts.blade.php. */
.prod-page--industrial-purpose-application .prel__col--industrial-purpose-application,
.prod-page--heat-resistance-belting .prel__col--heat-resistance-belting,
.prod-page--fire-resistance-belt .prel__col--fire-resistance-belt,
.prod-page--oil-resistance-belt .prel__col--oil-resistance-belt,
.prod-page--chevron-belt .prel__col--chevron-belt,
.prod-page--wavy-top-conveyor-belts .prel__col--wavy-top-conveyor-belts,
.prod-page--rough-top-conveyor-belts .prel__col--rough-top-conveyor-belts,
.prod-page--pulley-lagging .prel__col--pulley-lagging,
.prod-page--sidewall-belt .prel__col--sidewall-belt {
    display: none;
}

/* Hide the current tyre's own card in the Related Tyres grid — same idea,
   driven by the slug modifier on <main>.
   See products/tyres/related-tyres.blade.php. */
.prod-page--truck-tyres .prel__col--truck-tyres,
.prod-page--light-commercial-vehicle .prel__col--light-commercial-vehicle,
.prod-page--industrial-earth-movers-mining .prel__col--industrial-earth-movers-mining,
.prod-page--agriculture-tyre .prel__col--agriculture-tyre,
.prod-page--motorcycle-scooter .prel__col--motorcycle-scooter,
.prod-page--forklift-tyre .prel__col--forklift-tyre,
.prod-page--atv-tyre .prel__col--atv-tyre {
    display: none;
}

.related_products {
    background-color: #dcdcdc;
}

/* --------------------------------------------------------------------------
   Vertical tab layout — menu on the left, full product detail on the right.
   Driven by Bootstrap's pill tabs (bootstrap.bundle.min.js is already loaded),
   so no extra JavaScript is needed.
   -------------------------------------------------------------------------- */
.prod-tabs__nav {
    gap: 8px;
    padding-right: 30px;
}

/* Sticky menu. GSAP ScrollSmoother transforms #smooth-content, which disables
   native sticky, so the page pins this with ScrollTrigger instead and adds
   .is-pinned. The sticky rule below is the fallback when GSAP is unavailable. */
@media (min-width: 992px) {
    .prod-tabs__nav {
        top: 120px;
        position: sticky;
    }

    .prod-tabs__nav.is-pinned {
        top: auto;
        position: relative;
    }
}

.prod-tabs__link {
    gap: 14px;
    width: 100%;
    display: flex;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    padding: 10px 20px;
    align-items: center;
    border-radius: 10px;
    background: transparent;
    color: var(--rr-heading-primary, #192929);
    border: 1px solid rgba(25, 41, 41, 0.12);
    transition: all 0.3s ease-in-out;
}

.prod-tabs__link:hover {
    border-color: rgba(25, 41, 41, 0.3);
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
}

/* .nav-link.active is Bootstrap's own state class */
.prod-group .nav-link:focus,
.prod-group .nav-link:hover,
.prod-group .nav-pills .nav-link.active,
.prod-group .nav-pills .show>.nav-link,
.prod-tabs__link.active {
    color: #fff;
    border-color: var(--rr-theme-primary-2, #0078bf);
    background-color: var(--rr-theme-primary-2, #0078bf);
}

.prod-tabs__num {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.prod-tabs__thumb {
    overflow: hidden;
    margin-bottom: 30px;
    aspect-ratio: 16 / 7;
    border-radius: 30px;
}

.prod-tabs__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.prod-tabs__title {
    font-size: 40px;
    font-family: var(--rr-ff-heading2);
    line-height: 1.4;
    font-weight: 500;
    margin-bottom: 10px;
    color: var(--rr-heading-primary, #192929);
}

.prod-tabs__pane p {
    font-size: 16px;
    line-height: 1.7;
    color: #626262;
    margin-bottom: 18px;
}

.prod-tabs__pane p>strong {
    font-weight: 600;
}

.prod-tabs__subtitle {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 16px;
    color: var(--rr-heading-primary, #192929);
    text-transform: uppercase;
}

/* Failure modes / designation keys — emphasised inline list */
.prod-tabs__callout {
    padding: 16px 22px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-weight: 500;
    color: var(--rr-heading-primary, #192929);
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    border-left: 3px solid var(--rr-theme-primary-2, #0078bf);
}

/* Bulleted lists (applications, benefits) */
.prod-list {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 4;
    column-gap: 30px;
}

.prod-list li {
    /* font-size: 15px; */
    line-height: 1.5;
    padding-left: 20px;
    margin-bottom: 10px;
    position: relative;
    color: #626262;
    break-inside: avoid;
}

.prod-list li::before {
    content: "";
    top: 9px;
    left: 0;
    width: 7px;
    height: 7px;
    position: absolute;
    border-radius: 50%;
    background-color: var(--rr-theme-primary-2, #0078bf);
}

.prod-list--single {
    columns: 1;
}
.prod-list--two {
    columns: 2;
}
/* Nested tabs — one tab per specification table */
.prod-ttabs {
    margin-top: 40px;
}

.prod-ttabs__nav {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(25, 41, 41, 0.12);
    padding-bottom: 16px;
}

.prod-ttabs__link {
    font-size: 14px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 500px;
    background: transparent;
    color: var(--rr-heading-primary, #192929);
    border: 1px solid rgba(25, 41, 41, 0.12);
    transition: all 0.3s ease-in-out;
}

.prod-ttabs__link:hover {
    border-color: rgba(25, 41, 41, 0.3);
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
}

.prod-ttabs__link.active {
    color: #fff;
    border-color: var(--rr-theme-primary-2, #0078bf);
    background-color: var(--rr-theme-primary-2, #0078bf);
}

/* Spec tables — scroll horizontally on small screens rather than overflowing */
.prod-table-wrap {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}

.prod-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.prod-table th,
.prod-table td {
    font-size: 14px;
    line-height: 1.5;
    padding: 12px 16px;
    text-align: left;
    vertical-align: top;
    border: 1px solid rgba(25, 41, 41, 0.12);
}

.prod-table th {
    font-weight: 600;
}

.prod-table td {
    color: #626262;
}

.prod-table--narrow {
    min-width: 380px;
}

.prod-table--wide {
    min-width: 860px;
}

.prod-table--wide th,
.prod-table--wide td {
    padding: 10px 12px;
    /* white-space: nowrap; */
}

/* the description column of a wide table needs to wrap */
.prod-table--wide td:last-child {
    white-space: normal;
    min-width: 260px;
}


/* --------------------------------------------------------------------------
   Table theme — brand-blue header row and striped body rows.
   Applies to every .prod-table on the site.

   Header text is white because #0078bf is too dark for the default heading
   colour; header cell borders go translucent white so the blue block does not
   get cut up by dark rules. Grouped (two-row) headers pick this up on both
   rows, which is intended.
   -------------------------------------------------------------------------- */
.prod-table th {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.25);
    background-color: var(--rr-theme-primary-2, #0078bf);
}

.prod-table tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

.prod-table tbody tr:nth-child(even) {
    background-color: #f1f7fb;
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

    .prod-split__content,
    .flex-row-reverse .prod-split__content {
        padding-left: 0;
        padding-right: 0;
        margin-top: 35px;
    }

    .prod-tabs__nav {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .prod-tabs__title {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .prod-group {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .prod-list {
        columns: 1;
    }

    .prod-tabs__link {
        font-size: 15px;
        padding: 13px 16px;
    }
    .related_products .prel__col:not(:last-child) {
        margin-bottom: 30px;
    }
}

/* prod-list with an icon in place of the bullet */
.prod-list--icons li {
    padding-left: 0px;
}

.prod-list--icons li::before {
    content: none;
}

.prod-list--icons li i {
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
    color: var(--rr-theme-primary-2, #0078bf);
    padding-right: 10px;
}

/* applications + features row */
.prod-appfeat {
    margin-top: 40px;
}

.prod-appfeat > [class*="col-"] {
    margin-top: 20px;
}

/* .prod-feature {
    text-align: center;
} */

.prod-feature img {
    max-width: 80px;
    margin: 0 auto;
}

.prod-feature__title {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .prod-feature img {
        max-width: 50px;
    }
    .prod-appfeat {
        margin-top: 0px;
    }
}


/* --------------------------------------------------------------------------
   Tyre gallery — Swiper main slider with a synced thumbnail slider beneath.
   Swiper 8 is already loaded by include/script.blade.php; these instances are
   scoped to their own classes so they cannot collide with the theme's sliders.
   -------------------------------------------------------------------------- */
.prod-tyre__gallery {
    position: relative;
}

.prod-tyre__main {
    border-radius: 20px;
    margin-bottom: 14px;
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    border: 1px solid rgba(25, 41, 41, 0.08);
}

.prod-tyre__main .swiper-slide {
    padding: 24px;
    aspect-ratio: 1 / 1;
}

.prod-tyre__main .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

/* prev / next arrows, sat inside the main frame */
.prod-tyre__nav {
    top: 50%;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: flex;
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    color: var(--rr-heading-primary, #192929);
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(25, 41, 41, 0.12);
    transition: all 0.3s ease-in-out;
}

.prod-tyre__nav:hover {
    color: #fff;
    border-color: var(--rr-theme-primary-2, #0078bf);
    background-color: var(--rr-theme-primary-2, #0078bf);
}

.prod-tyre__nav--prev {
    left: 14px;
}

.prod-tyre__nav--next {
    right: 14px;
}

/* Swiper adds this class when a slider has nowhere left to go */
.prod-tyre__nav.swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* thumbnail strip */
.prod-tyre__thumbs .swiper-slide {
    padding: 6px;
    cursor: pointer;
    overflow: hidden;
    border-radius: 10px;
    aspect-ratio: 1 / 1;
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    border: 1px solid rgba(25, 41, 41, 0.08);
    transition: all 0.3s ease-in-out;
}

.prod-tyre__thumbs .swiper-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.prod-tyre__thumbs .swiper-slide:hover,
.prod-tyre__thumbs .swiper-slide-thumb-active {
    border-color: var(--rr-theme-primary-2, #0078bf);
}

/* single-image galleries (Forklift) keep a plain framed image */
.prod-tyre__gallery-main {
    padding: 24px;
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 1 / 1;
    background-color: var(--rr-color-white_smoke-2, #F4F4F5);
    border: 1px solid rgba(25, 41, 41, 0.08);
}

.prod-tyre__gallery-main img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

@media (max-width: 991px) {
    .prod-tyre__gallery {
        margin-bottom: 40px;
    }
}

.sheet_pro_tabimg {
    border: 5px solid #ebebeb;
    border-radius: 30px;
}
.sheet_pro_tabimg img {
    border-radius: 30px;
}

/* --------------------------------------------------------------------------
   Tyre gallery — arrows moved from the main frame to the thumbnail strip
   (2026-09-12). The strip sits inside .prod-tyre__thumbwrap, which carries
   side gutters so an arrow never covers a thumbnail. Swiper still binds the
   arrows to .prod-tyre__main; the thumbs module keeps the strip in step.
   The base .prod-tyre__nav rules above still apply — only the position and
   size are restated here for the new context.
   -------------------------------------------------------------------------- */
.prod-tyre__thumbwrap {
    position: relative;
    padding: 0 48px;
}

.prod-tyre__thumbwrap .prod-tyre__nav {
    width: 36px;
    height: 36px;
}

.prod-tyre__thumbwrap .prod-tyre__nav--prev {
    left: 0;
}

.prod-tyre__thumbwrap .prod-tyre__nav--next {
    right: 0;
}

/* Phones show three thumbs, so the gutters give back some width. */
@media (max-width: 575px) {
    .prod-tyre__thumbwrap {
        padding: 0 40px;
    }

    .prod-tyre__thumbwrap .prod-tyre__nav {
        width: 32px;
        height: 32px;
    }
}

/* Thumb strip fix (2026-09-12). The rule above says `transition: all`, and
   `all` includes width. Swiper sets width:94.8px inline on each thumb and
   then measures offsetLeft in the same tick — while the width is still
   animating from swiper.css's 100%. So it cached offsets for full-width
   slides (0, 514, 1028 …) and decided only one thumb was ever visible, and
   those cached numbers are never remeasured. Reaching the 6th image then
   asked the strip to slideTo(5), which normalised against the stale grid,
   concluded it was already there, and returned without moving — the 6th
   thumb never came into view. The strip has been like this since it was
   built; today's arrow move only made it noticeable.

   Only the properties that should animate are listed, so width applies
   instantly and Swiper measures the real layout. The ratio also moves off
   the flex item onto the image so no stretched height can feed back into
   the width Swiper set. */
.prod-tyre__thumbs .swiper-slide {
    transition-property: border-color, background-color;
    height: auto;
    min-width: 0;
    aspect-ratio: auto;
}

.prod-tyre__thumbs .swiper-slide img {
    height: auto;
    aspect-ratio: 1 / 1;
}