.checkout-profiler-results {
    display: grid;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    column-gap: 26px;
    font-family: Degular, sans-serif;
}

.checkout-profiler-results.single-column {
    justify-content: center;
    grid-auto-columns: calc((100% - 3 * 26px) / 4);
}

/* Séparateur vertical après les colonnes ECO - Desktop */
@media (min-width: 769px) {
    /* Colonne ECO : décalée vers la gauche (sans changer la largeur) */
    .checkout-profiler-results > section[data-diet^="ECO-"] {
        position: relative;
        left: -26px;
    }

    /* Le trait de séparation */
    .checkout-profiler-results > section[data-diet^="ECO-"]::after {
        content: "";
        position: absolute;
        right: -26px; /* Positionné au milieu de l'espace créé */
        top: 0;
        bottom: 0;
        width: 1px;
        background: #ccc;
        pointer-events: none;
    }

    /* Ajuster pour la première section avec border-radius */
    .checkout-profiler-results > section.first-section[data-diet^="ECO-"]::after {
        top: 20px;
    }

    /* Ajuster pour la dernière section (recap) avec border-radius */
    .checkout-profiler-results > section.recap[data-diet^="ECO-"]::after {
        bottom: 20px;
    }

    /* ============================================ */
    /* Séparateur vertical AVANT la colonne QD-SN  */
    /* ============================================ */

    /* Colonne QD-SN : décalée vers la droite */
    .checkout-profiler-results > section[data-diet="QD-SN"] {
        position: relative;
        left: 26px;
    }

    /* Le trait de séparation AVANT QD-SN (côté gauche) */
    .checkout-profiler-results > section[data-diet="QD-SN"]::before {
        content: "";
        position: absolute;
        left: -26px;
        top: 0;
        bottom: 0;
        width: 1px;
        background: #ccc;
        pointer-events: none;
    }

    /* Ajuster pour la première section QD-SN avec border-radius */
    .checkout-profiler-results > section.first-section[data-diet="QD-SN"]::before {
        top: 20px;
    }

    /* Ajuster pour la dernière section QD-SN (recap) avec border-radius */
    .checkout-profiler-results > section.recap[data-diet="QD-SN"]::before {
        bottom: 20px;
    }
}



.checkout-profiler {
    background: #fff !important;
    margin-top: -3% !important;
    margin-bottom: -5% !important;
    padding-top: 3%;
    margin: 0 auto;
}

.checkout-profiler>div {
    padding-inline: calc((100vw - 1140px) / 2);
    margin: 0 auto;
}



.checkout-profiler>div.checkout-profiler-results {
    background: #f0f0f0 !important;
    padding-block: 20px;
}

@media (max-width: 768px) {
    .checkout-profiler>div.checkout-profiler-results {
        padding-left: 20px;
        padding-right: 0;
        /* Remove right padding to allow scroll preview */
    }
}

.checkout-profiler-results>section {
    background: #fff !important;
    padding: 0px;
    display: none;
}







@media (min-width: 768px) {
    .checkout-profiler-results>section.first-section {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
}


.checkout-profiler-results>section>img {
    height: 175px !important;
    width: 100%;
    object-fit: cover;
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}



.checkout-profiler-results>section>*:not(img, hr, h3, h4, .box-infos .main-container) {
    padding: 20px;
}




.checkout-profiler-results-footer-price {
    text-align: center;
}

 .box-infos .prices .profiler-price,
.box-infos .prices .profiler-price {
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
}

.box-infos .prices {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    font-family: Degular, sans-serif !important;
    padding: 15px;

}

.box-infos .prices>svg {
    position: absolute;
    top: -9px;
    right: 4%;
    object-fit: contain;
    width: 65px;
    height: 63px;
}

.box-infos .reassurance-container {
    padding-inline: 15px;
    padding-bottom: 15px;
    padding-top: 10px;
}

.box-infos .reassurance {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.box-infos .reassurance>div {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;

}




 .box-infos .reassurance>div>span {
    font-size: 24px;
    font-weight: 700;
    font-family: Degular, sans-serif;
 }

 .box-infos .reassurance>div>svg, .box-infos .reassurance>div>img {
    min-width: 42px;
    min-height: 42px;
 }


 .box-infos .reassurance>div>div>p, .checkout-profiler-results>section .notes>p {
    font-size: 12px;
    margin-top: -1px;
    line-height: 1;
 }

 .box-infos .reassurance>div>div>strong {
    font-size: 24px;
    font-weight: 700;
    font-family: Degular, sans-serif;
 }

 .box-infos .reassurance>div>div {
    text-align: left;
    width: 100%;
 }

 .box-infos .reassurance>p, .checkout-profiler-results>section .notes>p {
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    line-height: 1;
 }

 .checkout-profiler-results>section .notes{
    margin-top: -30px;
 }

/* Styles pour le reassurance container QD */
.box-infos .reassurance-container-qd {
    padding-inline: 15px;
    padding-bottom: 15px;
    padding-top: 10px;
}

.box-infos .reassurance-qd {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}

.box-infos .reassurance-qd>div {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.box-infos .reassurance-qd>div>img, .box-infos .reassurance-qd>div>svg {
    min-width: 42px;
    min-height: 42px;
}

.box-infos .reassurance-qd>div>div>p {
    font-size: 12px;
    margin-top: -1px;
    line-height: 1;
}

.box-infos .reassurance-qd>div>div>strong {
    font-size: 24px;
    font-weight: 700;
    font-family: Degular, sans-serif;
}

.box-infos .reassurance-qd>div>div {
    text-align: left;
}

.box-infos .reassurance-qd>p {
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    line-height: 1;
}






.checkout-profiler-results>section h3 {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    font-family: decoy, sans-serif;
    padding-top: 30px;
    padding-bottom: 10px;
    padding-inline: 6px;

}

.checkout-profiler-results>section hr {
    width: 55%;
    margin: 0 auto;
    margin-bottom: 4px;
    margin-top: 0px;
}

.checkout-profiler-results>section ul:not(.notes) {
    list-style: none;
    padding-inline: 24px;
    padding-left: 0;
    font-size: 16px;
}

.checkout-profiler-results>section ul:not(.notes) li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 6px;
}

.checkout-profiler-results>section ul:not(.notes) li:last-child {
    margin-bottom: 0 !important;
}



.checkout-profiler-results>section ul:not(.notes) li::before {
    content: "";
    position: absolute;
    left: 0em;
    top: 0.1em;
    width: 20px;
    height: 20px;

    background-image: url("../img/profiler/check.png");
    background-size: contain;
    background-repeat: no-repeat;
}



/* ==========================================
   UTILITY CLASSES FOR DIET COLORS
   ========================================== */

/* Color utilities */
.color-EQ, .hover-EQ:hover, .color-ECO-EQ, .hover-ECO-EQ:hover {
    color: #FF7B00 !important;
}

.color-QD-CL, .hover-QD-CL:hover {
    color: #FC7B5A !important;
}

.color-QD-VG, .hover-QD-VG:hover {
    color: #009245 !important;
}

.color-QD-PT, .hover-QD-PT:hover {
    color: #ED1C24 !important;
}

.color-QD-SN, .hover-QD-SN:hover {
    color: #191919 !important;
}

.color-EP, .hover-EP:hover, .color-ECO-EP, .hover-ECO-EP:hover {
    color: #c4580e !important;
}

.color-AC, .hover-AC:hover, .color-ECO-AC, .hover-ECO-AC:hover {
    color: #ffbc00 !important;
}


.color-CL, .hover-CL:hover, .color-ECO-CL, .hover-ECO-CL:hover {
    color: #e52c9a !important;
}

.color-LP, .hover-LP:hover, .color-ECO-LP, .hover-ECO-LP:hover {
    color: #f91c1c !important;
}

.color-MN, .hover-MN:hover, .color-ECO-MN, .hover-ECO-MN:hover {
    color: #852de2 !important;
}

.color-QD-SN, .hover-QD-SN:hover {
    color: #e2a52b !important;
}

.color-FB, .hover-FB:hover, .color-ECO-FB, .hover-ECO-FB:hover {
    color: #009245 !important;
}

.color-LF, .hover-LF:hover, .color-ECO-LF, .hover-ECO-LF:hover {
    color: #52AF32 !important;
}

.color-FB-1f1m:hover, .color-FB-1f1m {
    color: rgba(49, 194, 165, 1) !important;
}

.fbm-img {
    padding: 0 !important;
    margin: auto;
    display: flex;
    margin-bottom: 15px;
}

.checkout-profiler-results>section>img.eco-fb-img {
    width: 50px;
    height: 50px !important;
    object-fit: contain;
    margin: auto;
    margin-bottom: 15px;
    display: flex;
}

.list-plus {
    font-weight: 600;
    padding-left: 25px;
    font-size: 20px;
}

.list-measure {
    font-weight: 600;

    margin-bottom: 10px;

}




/* Background utilities */
.bg-EQ, .bg-ECO-EQ {
    background-color: #FF7B00 !important;
}

.bg-QD-CL, .bg-QD-VG, .bg-QD-PT {
    background-color: #FC7B5A !important;
}

.bg-QD-SN {
    background-color: #e2a52b !important;
}

.bg-QD-VG, .bg-ECO-QD-VG {
    background-color: #009245 !important;
}

.bg-QD-PT, .bg-ECO-QD-PT {
    background-color: #ED1C24 !important;
}

.bg-LF, .bg-ECO-LF {
    background-color: #52AF32 !important;
}



.bg-EP, .bg-ECO-EP {
    background-color: #c4580e !important;
}

.bg-AC, .bg-ECO-AC {
    background-color: #ffbc00 !important;
}


.bg-CL, .bg-ECO-CL {
    background-color: #e52c9a !important;
}

.bg-LP, .bg-ECO-LP {
    background-color: #f91c1c !important;
}

.bg-MN, .bg-ECO-MN {
    background-color: #852de2 !important;
}



.bg-FB, .bg-ECO-FB {
    background-color: #009245 !important;
}


.bg-FB-1f1m {
    background-color: rgba(49, 194, 165, 1) !important;
}

.bg-EQ-pale, .bg-ECO-EQ-pale {
    background-color: #FF7B000D !important;
}

.bg-LF-pale, .bg-ECO-LF-pale {
    background-color: #52AF320D !important;
}

.bg-EP-pale, .bg-ECO-EP-pale {
    background-color: #C4580E0D !important;
}

.bg-AC-pale, .bg-ECO-AC-pale {
    background-color: #FFBC000D !important;
}


.bg-CL-pale, .bg-ECO-CL-pale {
    background-color: #E52C9A0D !important;
}

.bg-LP-pale, .bg-ECO-LP-pale {
    background-color: #F91C1C0D !important;
}


.bg-MN-pale, .bg-ECO-MN-pale {
    background-color: #852DE20D !important;
}

.bg-QD-SN-pale {
    background-color: #fcf3ea !important;
}

.bg-FB-pale, .bg-ECO-FB-pale{
    background-color: #0092450D !important;
}

.bg-FB-1f1m-pale {
    background-color: rgba(49, 194, 165, 0.05) !important;
}

.bg-QD-CL-pale {
    background-color: #FC7B5A0D !important;
}

.bg-QD-VG-pale {
    background-color: #0092450D !important;
}

.bg-QD-PT-pale {
    background-color: #ED1C240D !important;
}



/* Fill utilities */
.fill-EQ, .fill-ECO-EQ {
    fill: #FF7B00 !important;
}

.fill-QD-CL, .fill-QD-VG, .fill-QD-PT {
    fill: #FC7B5A !important;
}

.fill-LF, .fill-ECO-LF {
    fill: #52AF32 !important;
}

.fill-QD-SN {
    fill: #e2a52b !important;
}

.fill-QD-VG, .fill-ECO-QD-VG {
    fill: #009245 !important;
}

.fill-QD-PT, .fill-ECO-QD-PT {
    fill: #ED1C24 !important;
}



.fill-EP, .fill-ECO-EP {
    fill: #c4580e !important;
}

.fill-AC, .fill-ECO-AC {
    fill: #ffbc00 !important;
}


.fill-CL, .fill-ECO-CL {
    fill: #e52c9a !important;
}

.fill-QD-CL, .fill-QD-VG, .fill-QD-PT {
    fill: #FC7B5A !important;
}

.fill-QD-VG, .fill-ECO-QD-VG {
    fill: #009245 !important;
}

.fill-QD-PT, .fill-ECO-QD-PT {
    fill: #ED1C24 !important;
}



.fill-LP, .fill-ECO-LP {
    fill: #f91c1c !important;
}

.fill-MN, .fill-ECO-MN {
    fill: #852de2 !important;
}

.fill-FB, .fill-ECO-FB{
    fill: #009245 !important;
}

.fill-FB-1f1m {
    fill: rgba(49, 194, 165, 1) !important;
}

.fill-EQ-pale, .fill-ECO-EQ-pale {
    fill: #FFEAD6 !important;
}

.fill-EP-pale, .fill-ECO-EP-pale {
    fill: #FEE5D7 !important;
}

.fill-LF-pale, .fill-ECO-LF-pale {
    fill: #52AF320D !important;
}

.fill-AC-pale, .fill-ECO-AC-pale {
    fill: #FFF3E0 !important;
}

.fill-CL-pale, .fill-ECO-CL-pale {
    fill: #FFD6EE !important;
}

.fill-LP-pale, .fill-ECO-LP-pale {
    fill: #FEE5D7 !important;
}

    .fill-MN-pale, .fill-ECO-MN-pale {
    fill: #EAD6FF !important;
}

.fill-QD-SN-pale {
    fill: #f6d0ad !important;
}

.fill-FB-pale, .fill-ECO-FB-pale {
    fill: #D6FFE9 !important;
}

.fill-FB-1f1m-pale {
    fill: rgba(49, 194, 165, 0.05) !important;
}






/* border */
.border-EQ, .border-ECO-EQ {
    border-color: #FF7B00 !important;
}

.border-QD-CL {
    border-color: #FC7B5A !important;
}

.border-LF, .border-ECO-LF {
    border-color: #52AF32 !important;
}

.border-QD-VG {
    border-color: #009245 !important;
}

.border-QD-PT {
    border-color: #ED1C24 !important;
}

.border-QD-SN {
    border-color: #e2a52b !important;
}


.border-EP, .border-ECO-EP {
    border-color: #c4580e !important;
}

.border-AC, .border-ECO-AC {
    border-color: #ffbc00 !important;
}


.border-CL, .border-ECO-CL {
    border-color: #e52c9a !important;
}

.border-LP, .border-ECO-LP {
    border-color: #f91c1c !important;
}

.border-MN, .border-ECO-MN {
    border-color: #852de2 !important;
}

.border-FB, .border-ECO-FB {
    border-color: #009245 !important;
}

.border-FB-1f1m {
    border-color: rgba(49, 194, 165, 1) !important;
}



.checkout-profiler-results-footer-button {
    width: 90%;
    display: flex;
    margin: 0 auto;
    padding-block: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    border-radius: 5px;
    padding: 15px !important;
}

.profiler-fullprice {
    color: #C6C6C6;
    font-weight: 500;
    font-size: 21px;
    position: relative;
    text-align: center;
    font-family: Degular, sans-serif;
    line-height: 1.1;
    min-height: 50px;
    display: flex;
    align-items: flex-end;
    margin-top: -20px;
}

.profiler-fullprice.hidden {
    opacity: 0 !important;
    height: 21px !important;
}



.profiler-fullprice:not(.hidden)::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(100% - 12px);
    width: 98%;
    height: 1px;
    background: #EA2424;
    transform: rotate(-9deg);
}



.checkout-profiler-results-footer-other .checkout-profiler-results-footer-title {
    font-family: inherit;
    font-weight: 700;
    font-size: 14px;
    font-family: Degular, sans-serif;
    padding: 0px !important;
    margin-bottom: 8px;

}

.checkout-profiler-results-footer-other {
    padding: 15px !important;
}

.checkout-profiler-results-footer-other .checkout-profiler-results-footer-price {
    line-height: 1.1;
}

.box-infos {
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    padding-bottom: 20px !important;
}

.box-infos  {
    padding: 7px !important;
    border-radius: 0 !important; padding-bottom: 30px !important;

}

.box-infos .main-container {
    border: 3px solid;
    border-radius: 12px;
    text-align: center;
}

.box-infos .main-container .buttons {
    margin-bottom: 20px;
}

.box-infos[data-type="eco"] {
    position: relative;
}

.box-infos[data-type="eco"] > .eco-img {
    position: absolute;
    top: -20px;
    right: 16px;
    width: 55px;
    height: 55px !important;
    transform: rotate(20deg);
}

/* Wrapper avec background pale pour les formules QD- */
.box-infos .qd-top-block {
    position: relative;
    padding-top: 19px;
    padding-bottom: 0px;
    padding-inline: 15px;
    margin-bottom: 0px;
    border-radius: 12px;
    border: 5px solid white;
    overflow: hidden;
}

/* Retirer le padding des éléments à l'intérieur du qd-top-block */
.box-infos .qd-top-block .subtitle,
.box-infos .qd-top-block .description,
.box-infos .qd-top-block .prices {
    padding-inline: 0 !important;
}

.box-infos .qd-top-block .description {
    padding-inline: 0 !important;
}

/* Badge LE + CHOISI pour les formules QD- */
.box-infos .qd-badge {
    position: absolute;
    top: 14px;
    left: -49px;
    color: white;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0px 10px;
    z-index: 2;
    text-transform: uppercase;
    font-family: Degular, sans-serif;
    transform: rotate(-45deg);
    width: 150px;
}

/* Alternative price pour les formules QD- */
.box-infos .alternative-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 15px;
    gap: 8px;
    width: 100%;
    max-width: 241.5px;
    min-height: 93.72px;
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-top: 10px;
    margin-inline: auto;
}

.box-infos .alternative-price p {
    margin: 0;
    font-family: Degular, sans-serif;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    line-height: 1;
}

.box-infos .alternative-price p:first-child {
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.box-infos .alternative-price p:nth-child(2) {
    font-size: 20px;
    font-weight: 700;
}

.box-infos .alternative-price p:last-child {
    font-size: 14px;
    font-weight: 400;
    color: #000;
}

.box-infos[data-type="eco"] .prices .eco-img {
    margin-right: 0;
    margin-left: calc(100% - 45px);
    max-width: 50px;
}

.box-infos .title {
    color: white;
    font-size: 22px;
    padding: 14px;
}

.box-infos .title, .box-infos .subtitle {
    font-family: decoy, sans-serif;
    padding: 10px;
}

.box-infos a.button {
    width: 85%;
    display: flex;
    margin: 0 auto;
    padding-block: 10px;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 17px;
    border-radius: 5px;
    padding: 13px !important;
    border: 2px solid;
    color: white;
}

.box-infos .buttons>a {
    margin-bottom: 10px;
}

.box-infos .buttons>a:hover {
    color: white;
}

.box-infos[data-diet^="QD-"] .subtitle {
    padding: 0;
    font-size: 18px;
    margin-top: 10px;
}

.box-infos[data-diet^="QD-"] .prices {
    position: relative;
    padding: 0;

}

.box-infos[data-diet^="QD-"] .prices>svg {
    position: absolute;
    top: -5px;
    right: -10%;
    object-fit: contain;
    width: 62px;
    height: 60px;
}

.box-infos .subtitle {
    font-size: 16px;
}

.box-infos[data-type="eco"] {
    position: relative;
}



.box-infos .description {
    font-size: 13px;
    padding-inline: 20px;
    margin: auto;
}



.box-infos .description.per-week {
    padding-inline: 15%;
    line-height: 1;
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 10px;
}

.box-infos[data-diet^="QD-"] .description.per-week {

    width: 200px;
}









.checkout-profiler-results>section h4 {
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    line-height: 1.1;
    font-family: Degular, sans-serif;
    padding-top: 20px;
    padding-bottom: 24px;
    padding-inline: 20px;

}

.checkout-profiler-results section[data-diet="AC"] h4 {
    text-align: center;
}

.checkout-profiler-results > section  {
    box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.1), 10px 0 10px -10px rgba(0, 0, 0, 0.1);
}

.notes-blue {
    background-color:rgba(38, 221, 185, 0.1) ;
    padding: 10px;
    border-radius: 10px;
    padding: 15px 20px 1px 20px !important;
    margin-top: -26px;
    border-radius: 0;
}

.notes-blue ul {
    padding: 0 !important;
}
.notes-blue:not(.notes-plus) li {
    padding-left: 0 !important;
}

.notes-blue:not(.notes-plus) li::before {
    content: none !important;
}

.notes-blue ~ .notes {
    margin-top: 0 !important;
}

.notes-plus li::before {
    content: "+" !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    top: -6px !important;
    color: rgba(38, 221, 185, 1) !important;
    background-image: none !important;
}







.checkout-profiler-results-title {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-height: 78px;
    background: #F2F2F2;
    font-family: decoy, sans-serif;
    font-size: 19px;
}


.checkout-profiler-results>section.active {
    display: block;

}



.checkout-profiler-results .recap {
    border-bottom-right-radius: 12px !important;
    border-bottom-left-radius: 12px !important;
}


.checkout-profiler-results .recap .box-infos {
    padding-bottom: 10px !important;
}

.checkout-profiler-results .recap .checkout-profiler-results-title img {
    max-width: 51px;
}

.products-modal-profiler {
    z-index: 999;
}

.checkout-profiler>h2 {
    text-align: center;
    font-size: 36px !important;
    margin-bottom: 51px !important;
}



.checkout-profiler .checkout-profiler-form {
    display: flex;
    font-size: 16px;
    padding-bottom: 25px;
    justify-content: center;
    padding-inline: calc((100vw - 1300px) / 2);
    font-family: Degular, sans-serif;
    flex-wrap: nowrap; /* Empêche les filtres de passer à la ligne */
    transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* Placeholder pour maintenir l'espace lors du passage en fixed */
.checkout-profiler-form-placeholder {
    visibility: hidden;
    pointer-events: none;
}

/* Style du formulaire en mode fixed */
.checkout-profiler .checkout-profiler-form.is-fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    z-index: 999 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
    padding: 20px !important;
    padding-inline: calc((100vw - 1300px) / 2) !important;
    box-sizing: border-box !important;
    animation: slideDownFixed 0.25s ease-out;
}

@keyframes slideDownFixed {
    from {
        transform: translateY(-100%);
        opacity: 1;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}


.checkout-profiler .checkout-profiler-form-item.age,
.checkout-profiler-form-desktop .checkout-profiler-form-item.age {
    width: 334px;
}

.checkout-profiler .checkout-profiler-form-item.goal a,
.checkout-profiler-form-desktop .checkout-profiler-form-item.goal a {
    /** all items has the same width */
    flex: 1;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 108px;
    height: 130px;
    padding-block: 10px;
    padding-inline: 10px;
}

.checkout-profiler .checkout-profiler-form-item.goal a>img,
.checkout-profiler-form-desktop .checkout-profiler-form-item.goal a>img {
    margin-bottom: 3px;
}





.checkout-profiler .checkout-profiler-form>div {
    width: fit-content;
    padding-inline: 12px;
    border-right: 1px solid #ccc;
}

.checkout-profiler .checkout-profiler-form>div>span {
    font-weight: 600;
    font-size:17px;
    margin-bottom: 3px;
}



.checkout-profiler .checkout-profiler-form>div:first-child {
    padding-left: 0;
}

.checkout-profiler .checkout-profiler-form>div:last-child {
    border-right: none;
    padding-right: 0;
    color: #000;

}

.checkout-profiler-form-buttons {
    margin-top: 2px;
    display: flex;
    flex-wrap: wrap;
    font-weight: 700;
    gap: 12px;
}

.checkout-profiler-form-buttons>a {
    display: block;
    padding: 20px 4px;;
    border-radius: 10px;
    width: fit-content;
    transition: all ease-in-out 0.3s;
    color: #000 !important;
    background: #fff;
    font-weight: 500;
    font-size: 16px;
    border: 2px solid transparent;
    padding: 10px 10px;
    margin-bottom: 6px;
}
.checkout-profiler-form-buttons>a.selected {
    background: #E8F5E9;
    color: #000 !important;
    border: 2px solid #50D659;
    font-weight: 600;
}


.checkout-profiler-form-buttons[data-field="gender"] {
    width: min-content;
}
.checkout-profiler-form-buttons[data-field="age"] {
    width: fit-content;

}

.checkout-profiler-form-buttons[data-field="age"]>a {
    padding: 10px 14px !important;
}

.checkout-profiler-form-buttons[data-field="weight"]>a {
    padding: 10px 15px !important;
}

.checkout-profiler-form-buttons[data-field="age"], .checkout-profiler-form-buttons[data-field="gender"] {
    white-space: nowrap;
}


.checkout-profiler-form-buttons>a:hover {
    font-weight: 500;
}


.checkout-profiler-form-buttons>a.selected {
    background: #E8F5E9; /* Fond vert clair */
    color: #000 !important; /* Texte noir */
    border: 2px solid #50D659; /* Bordure verte */
    font-weight: 600;
}


.checkout-profiler-form-buttons>a:not(.selected) {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}


.checkout-profiler-form.health-alone > div {
    border-color: transparent !important;
}

@media (min-width: 769px) {
    .checkout-profiler-form.health-alone > div:not(.goal) {
        display: block !important;
        visibility: hidden !important;
        pointer-events: none;
    }
}


/* SECTION CUISINE */
.checkout-profiler-form-item.cooking .checkout-profiler-form-buttons {
    gap: 10px;
}

@media (min-width: 769px) {
    .checkout-profiler-form-item.cooking .checkout-profiler-form-buttons {
        flex-direction: column;
        width: 156px;
    }
}

@media (max-width: 768px) {
    .checkout-profiler-form-item.cooking .checkout-profiler-form-buttons {
        flex-direction: row;
        width: 100%;
    }
}

.checkout-profiler-form-item.cooking .checkout-profiler-form-buttons > a {
    height: 61px;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start !important;
    padding: 14px !important;
    gap: 12px;
    text-align: left;
    background: #FFFFFF;
    box-shadow: 0px 0px 32px -10px rgba(0, 0, 0, 0.08);
    flex-grow: 1;
}

@media (min-width: 769px) {
    .checkout-profiler-form-item.cooking .checkout-profiler-form-buttons > a {
        width: 156px;
        flex-grow: 0;
    }
}

.checkout-profiler-form-item.cooking .checkout-profiler-form-buttons > a img {
    width: 46px;
    height: 33px;
    margin-bottom: 0 !important;
    flex-shrink: 0;
}

.checkout-profiler-form-item.cooking .checkout-profiler-form-buttons > a.selected {
    background: linear-gradient(0deg, rgba(80, 214, 89, 0.1), rgba(80, 214, 89, 0.1)), #FFFFFF;
    border: 2px solid #50D659;
    box-shadow: none;
}

.checkout-profiler-bottom {
    padding-top: 10px;
    padding-bottom: 30px;
    font-size: 12px;
}

/* Hide mobile elements on desktop, show desktop elements */
@media (min-width: 769px) {
    .checkout-profiler-results>section>img {
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
    }


    .checkout-profiler-fixed-bar {
        display: none !important;
    }

    .profile-modal-overlay {
        display: none !important;
    }

}

/* Hide desktop elements on mobile */
@media (max-width: 768px) {
    .checkout-profiler-fixed-bar-desktop {
        display: none !important;
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {

    .box-infos[data-diet^="QD-"] .prices>svg {
        right: -3%;
    }

    .checkout-profiler-form-buttons>a {
        padding: 10px 14px;
    }

    .checkout-profiler>h2 {
        font-size: 34px;
        text-align: left;
        padding-inline: 24px;
        line-height: 1.2;
    }

    .checkout-profiler>div.checkout-profiler-results {

        column-gap: 0;
        overflow-x: auto;
        /*scroll-snap-type: x mandatory;*/
        /*scroll-behavior: smooth;*/
        grid-auto-columns: calc(100vw - 40px);
        padding-left: 0px !important;
        padding-top: 30px !important;
        padding-bottom: 0px !important;
        -webkit-overflow-scrolling: touch;
        background: #fff !important;

    }

    .checkout-profiler-results>section {
        scroll-snap-align: center;
        scroll-snap-stop: always;
        min-width: 0;
        box-shadow: none !important;
        border-right: 1px solid #E0E0E0;
    }

    .checkout-profiler-results.single-column {
        padding-top: 0 !important;
    }

    .checkout-profiler-results.single-column > section {
        border-left: 1px solid #E0E0E0;
    }



    .checkout-profiler-results-footer {
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    /* Hide scrollbar but keep functionality */
    .checkout-profiler-results::-webkit-scrollbar {
        display: none;
    }

    .checkout-profiler-results {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }



    /* Mobile form adjustments */
    .checkout-profiler .checkout-profiler-form {
        flex-direction: column;
        gap: 24px;
        /* Space between elements */
        padding-inline: 24px;
        justify-content: flex-start;
    }

    .checkout-profiler .checkout-profiler-form>div {
        width: 100%;
        padding-inline: 0;
        padding-bottom: 24px;
        /* Space between element and border */
        border-right: none;
        border-bottom: 1px solid #ccc;
    }

    .checkout-profiler .checkout-profiler-form>div:first-child {
        padding-left: 0;
    }

    .checkout-profiler .checkout-profiler-form>div:last-child {
        border-bottom: none;
        padding-bottom: 0;
        padding-right: 0;
    }

    /* Cache les autres filtres quand "health" est sélectionné dans le formulaire mobile */
    .checkout-profiler-form.health-alone > div:not(.goal) {
        display: none !important;
        visibility: hidden !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* Retire la bordure du bas du goal quand il est seul dans le formulaire mobile */
    .checkout-profiler-form.health-alone > div.goal {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Retire le séparateur et le padding du bloc cuisine quand il est le dernier visible (mode "En partie") */
    .checkout-profiler-form.cooking-partial > div.cooking {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* START CUSTOM MOBILE LAYOUT */

    /* Espacement des titres de section */
    .checkout-profiler .checkout-profiler-form > div > span {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 15px;
        display: block;
        color: #000;
        font-family: Degular, sans-serif;
    }

    .checkout-profiler>h2 {
        font-size: 30px !important;
        margin-bottom: 30px !important;
    }

    /* SECTION OBJECTIF (Cartes larges avec icônes) */
    .checkout-profiler .checkout-profiler-form-item.goal .checkout-profiler-form-buttons {
        flex-direction: column;
        width: 100%;
        gap: 12px;

    }

    .checkout-profiler .checkout-profiler-form-item.goal .checkout-profiler-form-buttons a {
        width: 100%;
        max-width: none !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        text-align: left !important;
        padding: 12px 20px !important;
        height: auto !important;
        max-height: none !important;
        border-radius: 12px;
        font-weight: 600;
    }

    /* État par défaut (non sélectionné) pour l'objectif */
    .checkout-profiler .checkout-profiler-form-item.goal .checkout-profiler-form-buttons a:not(.selected) {
        background: #fff;
        border-color: transparent;
    }

    .checkout-profiler .checkout-profiler-form-item.goal .checkout-profiler-form-buttons a img {
        width: 55px;
        height: auto;
        margin-bottom: 0 !important;
        margin-right: 20px;
        flex-shrink: 0;
    }



    /* SECTION GENRE (2 colonnes) */
    .checkout-profiler-form-buttons[data-field="gender"] {
        display: flex;
        width: 70%;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .checkout-profiler-form-buttons[data-field="gender"] a {
        flex: 1;
        text-align: center;
        justify-content: center;
        width: auto;
        margin-bottom: 0;
        padding-inline: 5px !important;
    }

    /* SECTION AGE (Grid layout: 3 en haut, 2 en bas) */
    .checkout-profiler-form-buttons[data-field="age"] {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        width: 100%;
    }





    .checkout-profiler-form-buttons[data-field="age"]>a {
        margin-bottom: 0;
        text-align: center;
        justify-content: center;
        width: auto;
        padding: 14px 18px !important;
        white-space: nowrap;
    }

    /* Les 3 premiers âges prennent 2 colonnes chacun (33%) */
    .checkout-profiler-form-buttons[data-field="age"] a:nth-child(1),
    .checkout-profiler-form-buttons[data-field="age"] a:nth-child(2),
    .checkout-profiler-form-buttons[data-field="age"] a:nth-child(3) {
        grid-column: span 2;
    }

    /* Les 2 derniers âges prennent 3 colonnes chacun (50%) */
    .checkout-profiler-form-buttons[data-field="age"] a:nth-child(4),
    .checkout-profiler-form-buttons[data-field="age"] a:nth-child(5) {
        grid-column: span 3;
    }

    /* SECTION POIDS (3 colonnes) */
    .checkout-profiler-form-buttons[data-field="weight"] {
        display: flex;
        gap: 12px;
        width: 100%;
        flex-wrap: nowrap;
    }

    .checkout-profiler-form-buttons[data-field="weight"] a {
        flex: 1;
        margin-bottom: 0;
        text-align: center;
        justify-content: center;
        padding: 14px 2px !important;
        font-size: 15px;
        white-space: nowrap;
    }

    /* Styles généraux boutons mobile */
    .checkout-profiler-form-buttons > a {
        font-size: 16px !important;
    }

    /* END CUSTOM MOBILE LAYOUT */

    /* Mobile fixed profile bar */
    .checkout-profiler-fixed-bar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-bottom: 1px solid #E0E0E0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 100;
        transform: translateY(-100%);
        transition: transform 0.3s ease-in-out;
       /* opacity: 0 !important;*/
        /*visibility: hidden !important;*/
    }

    .checkout-profiler-fixed-bar.visible {
        transform: translateY(0);
        /*opacity: 1;*/
        /*visibility: visible !important;*/
    }

    .checkout-profiler-fixed-bar:not(.visible) {
       transform: translateY(-100%) !important;
       transition: transform 0.3s ease-in-out !important;
    }




    .checkout-profiler-fixed-content {
        padding: 12px 20px;
        font-size: 14px;
        line-height: 1.3;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        font-family: Degular, sans-serif;
    }

    .checkout-profiler-fixed-content strong {
        color: #000;
        margin-right: 6px;
    }

    .profile-summary {
        font-weight: 400;
        margin-top: 6px;
    }

    .profile-info {
        flex: 1;
        font-size: 16px;
    }

    .profile-info strong {
        display: flex;
        margin-bottom: 6px;
    }

    /* Mode health : cacher les informations supplémentaires */
    .checkout-profiler-fixed-bar.health-mode .profile-details {
        display: none !important;
    }

    .profile-modify-btn {

        background: #EA2424 !important;
        color: white !important;
        border: none;
        padding: 12px 16px;
        border-radius: 5px !important;
        font-size: 16px !important;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-left: 12px;
        flex-shrink: 0;
        opacity: 1;
        font-family: Degular, sans-serif !important;
    }

    .profile-modify-btn:hover {
        background: #d01f1f !important;
    }

    /* Profile Modal */
    .profile-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .profile-modal-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .profile-modal {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: white;

        height: 100vh;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }

    .profile-modal-overlay.active .profile-modal {
        transform: translateY(0);
    }

    .profile-modal-header {
        padding: 20px 20px 0;
        display: flex;
        justify-content: flex-end;
        flex-shrink: 0;
    }

    .profile-modal-close {
        background: none;
        border: none;
        font-size: 24px;
        color: #666;
        cursor: pointer;
        padding: 4px;
        line-height: 1;
    }

    .profile-modal-content {
        padding: 0 20px 20px;

        display: flex;
        flex-direction: column;
    }

    .profile-modal-content h2 {
        text-align: left;
        line-height: 1.1;
        font-size: 30px !important;
        margin-bottom: 30px !important;
        color: #000;
    }

    .profile-modal-form {
        display: flex;
        flex-direction: column;
        gap: 36px;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
        font-family: Degular, sans-serif;
    }

    .profile-modal-form>div {
        width: 100%;
        padding-bottom: 20px;
        border-bottom: 1px solid #ccc;
    }

    .profile-modal-form>div:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .profile-modal-form>div>span {
        font-weight: 700;
        display: block;
    }

    /* Cache les autres filtres quand "health" est sélectionné dans la modale */
    .profile-modal-form.health-alone > div:not(.goal) {
        display: none !important;
        visibility: hidden !important;
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* Retire la bordure du bas du goal quand il est seul */
    .profile-modal-form.health-alone > div.goal {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Ajuste aussi la bordure du bas de la modale elle-même */
    .profile-modal-form.health-alone {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Cache les autres filtres quand "En partie" est sélectionné dans la modale */
    .profile-modal-form.cooking-partial > div:not(.goal):not(.cooking) {
        border-bottom: none !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
    }

    /* Retire le séparateur du bloc cuisine quand il devient le dernier visible */
    .profile-modal-form.cooking-partial > div.cooking {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }

    /* Modal buttons */
    .profile-modal-buttons {
        display: flex;
        gap: 12px;
        margin-top: 36px;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .profile-modal-btn {
        width: 160.5px;
        height: 58px;
        padding: 8px 14px;
        border-radius: 5px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.3s ease;
        opacity: 1;
        font-family: Degular, sans-serif !important;
    }

    .profile-modal-cancel {
        background: #FFFFFF !important;
        color: #EA2424 !important;
        border: 2px solid #EA2424;
    }

    .profile-modal-cancel:hover {
        background: #f8f0f0 !important;
        color: #EA2424 !important;
    }

    .profile-modal-validate {
        background: #EA2424 !important;
        color: white !important;
        border: none;
    }

    .profile-modal-validate:hover {
        background: #d01f1f !important;
    }
}

/* ==========================================================================
   Mode "health" pré-sélectionné via ?filter=health
   La classe `profiler-health-mode` est posée sur <html> par un script inline
   (cf. templates/checkout-profiler.php). Elle reproduit en CSS l'état visuel
   produit par les classes JS `.health-alone` et `.health-mode` afin d'éviter
   le flash d'affichage avant l'exécution du JS, y compris sur pages cachées.
   ========================================================================== */

/* Filtres gender / age / weight masqués dans les deux formulaires */
html.profiler-health-mode .checkout-profiler-form > div:not(.goal),
html.profiler-health-mode .profile-modal-form > div:not(.goal) {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Bordures cohérentes avec .health-alone */
html.profiler-health-mode .checkout-profiler-form > div,
html.profiler-health-mode .profile-modal-form > div {
    border-color: transparent !important;
}

html.profiler-health-mode .checkout-profiler-form > div.goal,
html.profiler-health-mode .profile-modal-form > div.goal,
html.profiler-health-mode .profile-modal-form {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

/* Inverse l'état "selected" au goal : weight devient non sélectionné, health devient sélectionné */
html.profiler-health-mode .checkout-profiler-form .checkout-profiler-form-buttons[data-field="goal"] > a[data-value="weight"].selected,
html.profiler-health-mode .profile-modal-form .checkout-profiler-form-buttons[data-field="goal"] > a[data-value="weight"].selected {
    background: transparent;
    color: inherit !important;
    border: 2px solid transparent;
    font-weight: normal;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

html.profiler-health-mode .checkout-profiler-form .checkout-profiler-form-buttons[data-field="goal"] > a[data-value="health"],
html.profiler-health-mode .profile-modal-form .checkout-profiler-form-buttons[data-field="goal"] > a[data-value="health"] {
    background: #E8F5E9;
    color: #000 !important;
    border: 2px solid #50D659;
    font-weight: 600;
    box-shadow: none;
}

/* Barre de profil mobile : masque les détails (gender / age / weight)
   Le texte "Perdre du poids" → "Manger sainement au quotidien" est mis à
   jour par le JS, mais la barre n'apparaît qu'au scroll donc invisible avant. */
html.profiler-health-mode .checkout-profiler-fixed-bar .profile-details {
    display: none !important;
}