.product--header::after,
.section--main.ptj-products-archive::after
{
    content: "";
    display: block;
    position: absolute;
    height: 6vw;
    margin-top: -3vw;
    width: 100%;
    bottom: -1px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: bottom;
}
.product--header::after
{
    bottom: -2px !important;
}

.section--main .related-item-img-container
{
    background-color: var(--ptj-white);
}
.section--upsells .related-item-img-container
{
    background-color: var(--ptj-gold);
}
.product--header::after
{
    background-image: url("../img/products_toyellow.svg");
}
.section--main.ptj-products-archive::after
{
    background-image: url("../img/products_towhite.svg");
}
.section--main.ptj-products-archive .related-item-name
{
    color: var(--ptj-white);
}


.single-related-item
{
    transition: opacity 0.5s ease 0s;
}


.product--header-img
{
    object-position: top;
    /* remove me after 0.1.25 */
}
.scrim.banner 
{
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65) );
    opacity: 1;
}

@media screen and (min-width: 768px)
{
    .product-line-selector 
    {
        font-size: clamp(17px, 2vw, 24px);
    }
}

/* let the swiper work: */
.section--upsells .swiper-container
{
    max-width: none;
    width: 100%;
}
.section--upsells .swiper-wrapper
{
    flex-wrap: nowrap !important;
    max-width: none;
    justify-content: flex-start;
}
@media screen and (max-width: 767px)
{
    .section--main.ptj-products-archive .single-related-item
    {
        width: 90%;
    }
}
.swiper-button-prev::after, 
.swiper-button-next::after 
{
    content: url(../img/next_red.svg);
}
.swiper-button-next
{
    right: 24px;
}
.swiper-button-prev::after 
{
    transform: rotateZ(180deg);
    position: absolute;
    left: 10px;
}