.page-product-page {
    background-color: var(--primary);
    color: var(--secondary);
}

.page-product-page--head {
    padding-top: 7rem;
}

.page-product-page--title {
    text-align: center;
    padding: var(--padding-y) var(--padding-x);
}

.page-product-page--description {
    padding: var(--padding-y) var(--padding-x);

    color: var(--primary);
    background-color: var(--secondary);
}

.page-product-page--description p {
    color: var(--primary-800);
    line-height: 1.3;
}

.page-product-page--informations-sizes {
    margin-bottom: 0.94rem;
    padding: 0 .62rem;

    font-size: 1.25rem;
    font-weight: 700;
}

.page-product-page--format {
    display: flex;
    justify-content: start;
    gap: 1.88rem;
}

.product-format--title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 2.56rem;
}

.product-format--subtitle {
    font-size: 1rem;
    color: var(--white);
    font-weight: 500;
}

.product-format--description,
.product-format--description p {
    font-size: 1rem;
    color: var(--white);
    font-weight: 500;
}

.page-product-page--informations {
    padding: var(--padding-y) var(--padding-x);
}

.page-product-page--format {
    padding: 0 .62rem var(--padding-y);
}

.page-product-page--format,
.page-product-page--information {
    border-bottom: .063rem solid var(--white);
}

.page-product-page--information {
    padding: .64rem .62rem;
}

.page-product-page--information.plus {
    --primaryColor: var(--secondary);
    --secondaryColor: var(--secondary);
}

.page-product-page--information-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    margin-bottom: 0;
    padding: 0.3rem 0;

    font-size: 1.25rem;
    font-weight: 700;
}

.page-product-page--information.plus svg {
    width: 2rem;
    height: 2rem;
}

.page-product-page--information.plus rect {
    stroke-width: 2;
}

.page-product-page--information.plus path {
    stroke-width: 2;
    transform: scale(1.15);
    transform-origin: center;
}

.page-product-page--information.plus .rotating-bar {
    transform: scale(1.15) rotate(270deg);
}

.page-product-page--information.plus:has( > .accordion-content.hidden) .rotating-bar {
    transform: scale(1.15) rotate(0deg);
}

.page-product-page--information-content ,
.page-product-page--information-content * {
    font-size: 1rem;
    color: var(--white);
    line-height: 1.3;
    font-weight: 500;
}

.page-product-page--information-content strong {
    font-weight: 700;
}

.page-product-page--nutrition-content .component-accordion--inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .63rem 
}

.page-product-page--topic-nutritional-values__ProductPage {
    list-style: none;
}

.page-product-page--topic-nutritional-values__ProductPage:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .63rem;
    grid-column-start: 1;
    grid-column-end: 3;
}

.page-product-page--topic-nutritional-values__ProductPage:not(:first-child):last-of-type:nth-of-type(even),
.page-product-page--nutrition-content .component-accordion--inner p {
    grid-column-start: 1;
    grid-column-end: 3;
}

.page-product-page--topic-nutritional-values__ProductPage:first-child span {
    padding: 0.62rem;

    border: .1rem solid var(--secondary);
    border-radius: 1.25rem;
    background-color: transparent;
    color: var(--secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;

    transition: color var(--transition-time), background-color var(--transition-time);
}

.page-product-page--topic-nutritional-values__ProductPage:first-child span.is-selected {
    color: var(--primary);
    background-color: var(--secondary);
}

.page-product-page--topic-nutritional-values__ProductPage:not(:first-child) {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .31rem;

    margin-top: 0.31rem;

    text-align: center;
}

.page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:first-child {
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(2),
.page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(3) {
    margin-top: auto;

    color: var(--secondary);
    font-size: 1.8125rem;
    font-weight: 700;
    line-height: 1;
}

.page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(4) {
    color: var(--white);
    font-size: 0.875rem;
    font-weight: 400;
}

.page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(3) {
    display: none;
}

.page-product-page--topic-nutritional-values__ProductPage:first-child:has( span:last-child.is-selected) ~ .page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(2) {
    display: none;
}

.page-product-page--topic-nutritional-values__ProductPage:first-child:has( span:last-child.is-selected) ~ .page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(3) {
    display: inline;
}

.page-product-page--recipes {
    padding: 2.5rem 1.25rem 1.25rem;
}

.page-product-page--recipes-title {
    margin-bottom: 2.5rem;

    font-size: 1.56rem;
    font-weight: 700;
    text-align: center;
}

.page-product-page--recipes-wrapper {
    display: grid;
    grid-template-columns: repeat(var(--nb-cards), 1fr);
    gap: 1.25rem;
}

.page-product-page--recipes .recipe-card {
    border-radius: .75rem .75rem 0 0;
    overflow: hidden;
}

.page-product-page--recipes-wrapper .recipe-card--image {
    position: relative;
    padding-bottom: 50vw;
}

.page-product-page--recipes-wrapper img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
    border-radius: .75rem .75rem 0 0;
}

.page-product-page--recipes .recipe-card--title {
    color: var(--white);
}


.page-product-page--recipes .recipe-card--description {
    display: none;
}
.page-product-page .component-cta {
    --color: var(--white);
    --backgroundColor: var(--primary);

    position: relative;
    left: 50%;

    margin: 5.37rem 0 3.12rem;

    transform: translateX(-50%);
}

@media screen and (min-width: 64rem) {/* 1024px */

    .page-product-page--head {
        --left-cell: calc(45.5 / 107.5);
        --right-cell: calc(60 / 107.5);
        --left-cell-height: calc(100% * var(--left-cell));
        
        display: grid;
        grid-template-columns: calc(100% * var(--left-cell)) calc(100% * var(--right-cell));
        gap: 2rem;
        align-items: center;

        width: var(--content-width);
        max-width: var(--max-content-width);
        margin: 3.13rem auto;
        padding-top: 0;
    }

    .page-product-page--title {
        display: flex;
        align-items: center;
        order: 2;
    }

    .page-product-page--head > picture {
        height: 0;
        padding-bottom: 100%;
        position: relative;
    }

    .page-product-page--head > picture img {
        position: absolute;
        height: 100%;
    }

    .component-title-sliding-images-and-texts__productBannerSlider {
        order: 1;
        overflow: hidden;
        border-radius: 3.125rem;
    }
    
    .component-title-sliding-images-and-texts__productBannerSlider,
    .component-title-sliding-images-and-texts--slide__productBannerSlider {
        max-width: unset;
    }

    .page-product-page--description .topic-title-text,
    .page-product-page--informations,
    .page-product-page--recipes {
        max-width: var(--content-width-s);
        margin-left: auto;
        margin-right: auto;
    }

    .page-product-page--nutrition-content .component-accordion--inner {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 1.88rem;
    }

    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child):last-of-type:nth-of-type(even) {
        grid-column-start: initial;
        grid-column-end: initial;
    }

    .page-product-page--topic-nutritional-values__ProductPage:first-child,
    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child):last-of-type:nth-of-type(4n + 2),
    .page-product-page--nutrition-content .component-accordion--inner p {
        grid-column-start: 1;
        grid-column-end: 5;
    }
    
    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child):nth-last-of-type(2):nth-of-type(4n + 2) {
        grid-column-start: 2;
        grid-column-end: 3;
    }
    
    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child):last-of-type:nth-of-type(4n + 3) {
        grid-column-start: 3;
        grid-column-end: 4;
    }

    .page-product-page--topic-nutritional-values__ProductPage:first-child span {
        display: flex;
        align-items: center;

        padding: 1.25rem 30%;

        font-size: 1.25rem;
        text-align: center;
    }

    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:first-child {
        font-size: 1.625rem;
    }

    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(2),
    .page-product-page--topic-nutritional-values__ProductPage:not(:first-child) span:nth-child(3) {
        font-size: 2.25rem;
    }

    .page-product-page--recipes-wrapper {
        grid-template-columns: repeat(var(--nb-cards), 20rem);
        gap: 1.88rem;
        justify-content: center;
    }

    .page-product-page--recipes .recipe-card {
        display: flex;
        flex-direction: column;

        border-radius: .75rem;
        overflow: hidden;
    }

    .page-product-page--recipes .recipe-card--image {
        padding-bottom: 27.15rem;
    }

    .page-product-page--recipes .recipe-card--texts {
        flex: 1;

        margin: 0;
        padding: 1.5rem 1.25rem;

        background-color: var(--white);
    }

    .page-product-page--recipes .recipe-card--title {
        margin: auto 0;

        color: var(--primary);
    }

    .page-product-page .component-cta {
        position: static;

        transform: none;
    }
}