/* Page Base - Start */
.single-products{
    background-color: #F4F6FA;
}

.single-products section:not(.flex, .sticky-cta-bar, .contact-overlay, #subscribe-form, .recommended-products__section){
    padding-top: var(--spacing-sections-gap-default-horizontal);
    padding-bottom: 0;
}

.single-products h1{
    margin: 0;
    font-size: var(--size-heading-h1-base);
}

.single-products h2{
    margin: 0;
    font-size: var(--size-heading-h2-base);
    padding-bottom: var(--spacing-sections-gap-default-vertical);
}

.single-products h3{
    margin: 0;
    font-size: var(--size-heading-h3-base);
}

.single-products h4{
    margin: 0;
    font-family: "CentraleSans-Bold", sans-serif;
    font-size: var(--size-heading-h4-base);
    font-weight: 700;
    line-height: 140%;
}

.single-products p:not(.h3):not(header p):not(footer p):not(.single-products__disclaimers p) {
    font-size: var(--size-body-s);
    line-height: 150%;
}

.single-products p:has(iframe){
    margin-bottom: 0;
}

.single-products p{
    margin-bottom: 16px;
}

@media (max-width: 788px) {
    .single-products section:not(.flex, .sticky-cta-bar, .contact-overlay, #subscribe-form){
        padding-left: var(--spacing-containers-page-margin);
        padding-right: var(--spacing-containers-page-margin);
    }
}
@media (min-width: 789px){
    .single-products :not(header):not(footer) > section:not(:first-child){
        margin-top: 0;
    }
}
/* Page Base - End */


/* Breadcrumbs - Start */
.single-products__breadcrumbs{
    padding-top: var(--spacing-sections-gap-s-horizontal);
}

.single-products__breadcrumbs p,
.single-products__breadcrumbs a,
.single-products__breadcrumbs span{
    color: var(--links-breadcrumbs-default) !important;
    font-size: var(--size-link-s);
    line-height: 120%;
    text-decoration: none;
    font-weight: normal;
}

@media (max-width: 418px) {
    .single-products__breadcrumbs {
        margin-top: 3rem;
    }
}

@media (min-width: 440px) and (max-width: 500px) {
    .single-products__breadcrumbs {
        margin-top: 2rem;
    }
}
/* Breadcrumbs - End */


/* Hero - Start */
.product-single__hero{
    padding-top: var(--spacing-containers-padding-xxs);
}

.product-single__hero--col--content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sections-gap-s-vertical);
    padding-bottom: var(--spacing-containers-padding-xxs);
}

.product-single__hero--col--images{
    margin-bottom: var(--spacing-sections-gap-l-vertical);
    padding-bottom: var(--spacing-containers-padding-xxs);
}

.product-single__hero--subtitle{
    margin: 0;
    font-family: "CentraleSans-Book", sans-serif;
    color: var(--typography-accent);
    font-weight: 400;
    word-wrap: break-word;
    font-size: var(--size-subheading-base) !important;
    line-height: 140% !important;
}

.product-single__hero--info{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sections-gap-s-vertical);
}

.product-single__hero--info div:first-child{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.product-single__hero--variation--title{
    margin-bottom: var(--spacing-cards-gap-xs-vertical);
    color: var(--typography-headings);
}

.product-single__hero--variation--buttons{
    display: flex;
    gap: var(--spacing-cards-gap-s-horizontal);
}

.product-single__hero--action-buttons{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-cards-gap-s-vertical);
}

.product-single__hero--action-buttons a{
    width: 100%;
}

.product-single__hero--list{
    margin-bottom: var(--spacing-20);
    padding: var(--spacing-cards-padding-default);
    border-radius: var(--spacing-24);
}

.product-single__hero--list p{
    margin-bottom: var(--spacing-cards-gap-xs-vertical);
}

.product-single__hero--list ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-single__hero--list li{
    position: relative;
    padding-left: 36px;
    margin-bottom: var(--spacing-cards-gap-xs-vertical);
    font-size: var(--size-body-s);
}

.product-single__hero--list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: 19px;
    height: 20px;
    background: url("/wp-content/uploads/blue-check.svg") no-repeat center center;
    background-size: contain;
}

@media (min-width: 789px){
    .product-single__hero{
        padding-top: 0;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--spacing-sections-gap-l-vertical);
    }

    .product-single__hero--col--images{
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .product-single__hero--col--content{
        padding-bottom: 0;
    }

    .product-single__hero--action-buttons{
        flex-direction: row;
    }
}
/* Hero - End */


/* Hero Gallery - Start */

.product-hero-gallery {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sections-gap-s-vertical);
}

.product-hero-gallery__main {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 40px;
    overflow: hidden;
    border: 2px solid var(--borders-light-grey);
    background:
            linear-gradient(
                    180deg,
                    #0D2463 0%,
                    rgba(29, 117, 162, .50) 16.72%,
                    rgba(149, 191, 212, 0) 33.45%,
                    rgba(255, 255, 255, 0) 47.78%
            ),
            #FFFFFF;
}

.product-hero-gallery__main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-hero-gallery__thumbs {
    display: grid;
    grid-auto-flow: column;
    /*grid-auto-columns: 1fr;*/
    grid-auto-columns: minmax(0, 106px);
    gap: var(--spacing-sections-gap-s-horizontal);
}

.product-hero-gallery__thumb {
    border-radius: var(--spacing-16);
    border: 1px solid var(--borders-light-grey);
    cursor: pointer;
    overflow: hidden;
    background-color: #FFFFFF;
}

.product-hero-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Hero Gallery - End */


/* Jump Nav - Start */
.jump-nav{
    max-width: 100%;
    font-family: inherit;
}

.jump-nav__text{
    display: none;
    color: var(--typography-headings);
    font-family: "CentraleSans-Bold", sans-serif;
    font-size: var(--size-body-s);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
}

.jump-nav__toggle{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-cards-padding-s) var(--spacing-cards-padding-default);
    border: none;
    border-radius: 24px;
    background: var(--surface-secondary);
    color: var(--typography-headings);
    font-family: "CentraleSans-Bold", sans-serif;
    font-size: var(--size-body-s);
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    cursor: pointer;
}

.jump-nav__toggle-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.jump-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 24px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 0 8px 2px rgba(13, 36, 99, 0.05);
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}

.jump-nav__list li{
    margin: 0;
    line-height: 1;
}

.jump-nav__list li + li{
    border-top: 1px solid #e3e7f0;
}

.jump-nav__link{
    display: block;
    padding: var(--spacing-cards-padding-s) var(--spacing-cards-padding-default);
    font-size: var(--size-tag-base);
    text-decoration: none;
    font-weight: 600;
    color: #163567;
}

.jump-nav__link:hover{
    background: var(--surface-tertiary);
}

.jump-nav.is-open .jump-nav__list{
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.jump-nav.is-open .jump-nav__toggle-arrow{
    transform: rotate(90deg);
}

@media (min-width: 1150px){
    .jump-nav{
        display: flex;
        align-items: center;
        gap: var(--spacing-16);
        flex-wrap: wrap;
    }

    .jump-nav__text{
        display: block;
    }

    .jump-nav__toggle{
        display: none;
    }

    .jump-nav__toggle-arrow{
        margin-left: var(--spacing-8);
    }

    .jump-nav__list{
        max-height: none !important;
        opacity: 1;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        background: transparent;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: var(--spacing-cards-gap-xs-horizontal);
        row-gap: var(--spacing-cards-gap-xs-vertical);
        overflow: visible;
    }

    .jump-nav__list li{
        border: 0;
    }

    .jump-nav__list li + li{
        border: none;
    }

    .jump-nav__link{
        display: block;
        width: 100%;
        text-align: center;
        border-radius: 999px;
        border: 1px solid #163567;
        background: var(--surface-secondary);
        padding: 12px 28px;
        white-space: nowrap;
    }
}
/* Jump Nav - End */


/* Swiper Base - Start */
.features-swiper .swiper-pagination,
.difference-swiper .swiper-pagination,
.testimonials-swiper .swiper-pagination,
.related-products-swiper .swiper-pagination,
.single-products .related-articles-swiper .swiper-pagination{
    position: static;
    margin-top: var(--spacing-sections-gap-default-vertical);
}

.swiper-pagination-bullet{
    height: 8px;
    width: 8px;
    background-color: var(--icons-grey) !important;
    opacity: 1;
}

.swiper-pagination-bullet-active{
    background-color: var(--icons-accent-a) !important;
}

.single-products .swiper-slide{
    display: flex;
    gap: var(--spacing-cards-gap-default-horizontal);
    padding: var(--spacing-cards-padding-default);
    border-radius: 24px;
}

.single-products .swiper-slide > div:first-child{
    flex: 0 0 32px;
}

.swiper-wrapper{
    cursor: pointer;
}

@media (min-width: 768px){
    .single-products .swiper-slide > div:first-child{
        flex: 0 0 56px;
    }
    .swiper-wrapper{
        cursor: default;
    }
}
/* Swiper Base - End */


/* Features - Start */
.product-single__features{
    padding-top: var(--spacing-cards-padding-l);
}

.product-single__features--content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

@media (min-width: 768px){
    .features-swiper .swiper-wrapper{
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sections-gap-s-vertical);
        transform: none !important;
    }

    .features-swiper .swiper-slide{
        width: auto !important;
        height: auto !important;
    }

    .features-swiper .swiper-pagination{
        display: none;
    }
}

@media (min-width: 789px){
    .product-single__features{
        padding-top: 0;
    }
}
/* Features - End */


/* Systems - Start */
.product-single__system{
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--spacing-sections-gap-s-vertical);
    row-gap: var(--spacing-cards-gap-default-horizontal);
}

.product-single__system--card{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-cards-gap-default-horizontal);
}

.product-single__system--card p {
    margin-bottom: 0;
}

.product-single__system--card--top{
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background-color: var(--white);
    border: 1px solid var(--borders-light-grey);
}

.product-single__system--single {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-sections-gap-default-vertical);
}

.product-single__system--card--title{
    width: max-content;
    padding: 12px;
    font-size: var(--size-tag-xs) !important;
    background: linear-gradient(90deg, #CBE3E9 0%, rgba(203, 227, 233, 0.00) 100%);
}

.product-single__system--single--header {
    padding-bottom: var(--spacing-cards-gap-default-horizontal);
}

@media (min-width: 789px){
    .product-single__system {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-single__system--card--title{
        font-size: var(--size-body-s) !important;
    }

    .product-single__system--single {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sections-gap-s-vertical);
    }

    .product-single__system--single--col:last-child {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

}
/* Systems - End */


/* Addons - Start */
.product-single__addons{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-cards-gap-s-vertical);
    padding: var(--spacing-sections-gap-default-vertical) 0;
}

.product-single__addons--card{
    display: flex;
    gap: var(--spacing-cards-gap-default-horizontal);
    padding: var(--spacing-cards-padding-default);
    align-items: center;
    border-radius: 24px;
}

.product-single__addons--card img {
    height: 32px;
    width: 32px;
}

@media (min-width: 789px){
    .product-single__addons{
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
    .product-single__addons--card img {
        height: 56px;
        width: 56px;
    }
}
/* Addons - End */


/* How It Works - Start */
.hiw-grid{
    display: grid;
    column-gap: var(--spacing-sections-gap-s-vertical);
    row-gap: var(--spacing-cards-gap-default-horizontal);
    padding-bottom: var(--spacing-sections-gap-s-horizontal);
}

.hiw-grid--2,
.hiw-grid--3{
    grid-template-columns: 1fr;
}

.hiw-div .btn{
    margin-top: var(--spacing-sections-gap-s-horizontal);
}

.hiw-div iframe{
    width: 100% !important;
    aspect-ratio: 16 / 9;
    height: auto;
    display: block;
    border-radius: 24px;
}

.hiw-grid__item{
    border-radius: 24px;
    overflow: hidden;
}

.hiw-grid__item--content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
    padding: var(--spacing-cards-padding-default);
}

.hiw-grid__item--content p {
    margin-bottom: 8px;
}

.hiw-grid__item img {
    max-height: 270px;
    width: 100%;
    object-fit: cover;
}

@media (min-width: 789px){
    .hiw-grid--2{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hiw-grid--3{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* How It Works - End */


/* Difference - Start */
.product-single__difference{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sections-gap-s-vertical);
    padding-bottom: var(--spacing-sections-gap-s-vertical);
}

.product-single__difference--column{
    width: 100%;
}

.product-single__difference--column--image{
    border-radius: 24px;
    overflow: hidden;
}

.difference-card__content{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-10);
}

.difference-photo{
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
}

.difference-photo__img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.difference-photo::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(
            0deg,
            #003A5B 0%,
            rgba(0, 118, 186, 0.50) 52%,
            rgba(0, 118, 186, 0) 100%
    );
    pointer-events: none;
    z-index: 2;
}

.ll-badge-border{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    display: block;
    z-index: 3;
}

@media (min-width: 768px){
    .difference-swiper .swiper-wrapper{
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-sections-gap-s-vertical);
        transform: none !important;
    }

    .difference-swiper .swiper-slide{
        width: auto !important;
        height: auto !important;
    }

    .difference-swiper .swiper-pagination{
        display: none;
    }
}

@media (min-width: 789px){
    .product-single__difference--column--image,
    .difference-photo{
        height: 100%;
    }

    .difference-swiper .swiper-wrapper{
        gap: var(--spacing-8);
    }

    .product-single__difference{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        gap: var(--spacing-24);
    }

    .product-single__difference--column--content{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
/* Difference - End */


/* Testimonials - Start */
.testimonials-swiper .swiper-slide{
    display: block;
    padding: var(--spacing-cards-padding-default);
    background-color: var(--white);
    border-radius: 24px;
}

.single-products__testimonials--info{
    display: flex;
    gap: var(--spacing-10);
}

.testimonials-swiper .testimonial-star-image{
    height: 18px;
    width: auto;
    margin-top: 25px;
    margin-bottom: var(--spacing-cards-gap-s-vertical);
}

.single-products__testimonials--info img{
    height: 50px;
    width: 50px;
}

.product-single__testimonials--review {
    margin-bottom: 0;
    color: var(--typography-body, #1D1D1D);
    font-family: "CentraleSans-Medium", san-serif;
    /*font-weight: 600;*/
}

.single-products__testimonials--info__name{
    margin: 0;
    color: var(--fields-label-default);
    font-family: "CentraleSans-Bold", sans-serif;
    font-size: 14px !important;
}

.single-products__testimonials--info__role{
    margin: 0;
    font-size: 14px !important;
}

@media (min-width: 768px){
    .testimonials-swiper .swiper-slide{
        height: 350px;
    }

    .product-single__testimonials--content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
    }

    .product-single__testimonials--review{
        max-height: 180px;
        overflow-y: auto;
        /*font-style: italic;*/
        color: var(--typography-body);
        /*font-family: "Centrale Sans Medium", san-serif;*/
        font-family: "CentraleSans-Medium", san-serif;
        /*font-weight: 600;*/
    }

    .testimonials-swiper .swiper-pagination{
        display: none;
    }
}
/* Testimonials - End */


/* FAQ + Disclaimers - Start */
.single-products .faq-group{
    margin-bottom: var(--spacing-sections-gap-s-vertical);
}

.single-products__disclaimers p {
    margin-bottom: var(--spacing-sections-gap-s-vertical);
    font-size: var(--size-body-xs);
}

.single-products__disclaimers p:last-child{
    margin-bottom: 0;
}
/* FAQ + Disclaimers - End */


/* Related Articles - Start */
.single-products .related-articles-swiper{
    width: 100%;
}

.single-products .related-articles-swiper .swiper-wrapper{
    cursor: pointer;
}

.single-products .related-articles-swiper .swiper-slide{
    display: block;
    padding: 0;
    height: auto;
}

.single-products .row-block{
    display: flex;
    flex-direction: column;
}

.single-products .row-block:last-child{
    margin-bottom: 0 !important;
}

.single-products .row-block > a.featured-image{
    position: relative;
    display: block;
    height: 250px;
    background: none;
    border-radius: 24px;
    overflow: hidden;
}

.single-products .row-block > a.featured-image img{
    width: 100%;
    object-fit: cover;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: block;
    text-align: center;
}

.single-products .post-items{
    margin-top: 24px;
}

.single-products .post-date{
    margin-top: 0;
    margin-bottom: 8px;
    font-weight: 700;
    color: #1D1D1D;
    font-size: 14px;
    line-height: 22.4px;
}

.single-products .post-name{
    margin-bottom: 8px;
}

.single-products .post-name a{
    line-height: 24px;
    color: #0D2463;
    font-weight: 700;
    text-decoration: none;
    font-size: 20px;
}

.single-products .post-author,
.single-products .post-aside a{
    font-size: 16px;
    line-height: 25.6px;
}

.single-products .post-author a{
    text-decoration: none;
    color: inherit;
}

@media (min-width: 768px){
    .single-products .related-articles-swiper .swiper-pagination{
        display: none;
    }
}
/* Related Articles - End */


/* Related Products - Start */

.recommended-products__section {
    margin-top: var(--spacing-containers-padding-default);
    background-color: var(--surface-secondary);
 }

.related-products-swiper .swiper-wrapper{
    align-items: stretch;
}

.related-products-swiper .swiper-slide{
    display: block;
    padding: 0;
    background-color: var(--white);
    height: auto;
    outline: 1px var(--borders-mid-grey, #838383) solid;
    outline-offset: -1px;
    overflow: hidden;
}

.related-products-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.related-products-card__image{
    height: 200px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%),
    linear-gradient(180deg, #0d2463 0%, #1d75a2 46%, #95bfd4 74%, #fff 100%),
    #fff;
}

.related-products-card__image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin-top: 30px;
}

.related-products-card__body{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: var(--spacing-64);
    padding: var(--spacing-cards-padding-default);
    height: 100%;
}

.related-products-card__body > div:last-child{
    margin-top: auto;
}

.related-products-card__title{
    color: var(--typography-headings);
    font-size: var(--font-size-20) !important;
    font-family: "CentraleSans-Bold", sans-serif;
    font-weight: 700;
    line-height: 140%;
    word-wrap: break-word;
}

.related-products-card__excerpt{
    margin-top: var(--spacing-cards-gap-s-vertical);
    margin-bottom: var(--spacing-cards-gap-default-vertical);
}

.related-products-card__body div:has(.btn){
    margin-top: var(--spacing-cards-gap-default-vertical);
}

.related-products-card__tags{
    position: absolute;
    right: 24px;
    top: 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.related-products-card__tags-icons{
    display: flex;
    gap: 2px;
}

.related-products-card__tags-icons img{
    display: block;
    margin: 0;
}

.related-products-card__tags-label{
    font-family: "CentraleSans-Bold", sans-serif;
    color: #FFFFFF;
    font-weight: bold;
    font-size: var(--size-product-card-blurb);
}

@media (max-width: 788px) {
    .recommended-products__section {
        padding: var(--spacing-24);
    }
}
@media (min-width: 789px) {
    .related-products__title {
        text-align: center;
    }
}
/* Related Products - End */