/* MYPROT Cart Gifts v0.1.8 */
.myprot-cg{
    width:100%;
    margin:22px 0 30px;
    padding:0 18px 22px;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #e2e6eb;
    border-radius:4px;
    direction:ltr;
    text-align:left;
    overflow:hidden;
}
.myprot-cg__headline{
    min-height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:12px 10px;
    box-sizing:border-box;
    border-bottom:1px solid #e8ebef;
    font-size:13px;
    font-weight:600;
    color:#171717;
}
.myprot-cg__headline strong{
    font-weight:600;
}
.myprot-cg__progress{
    position:relative;
    margin:22px 0 24px;
    width:100%;
    box-sizing:border-box;
}
.myprot-cg__progress-line{
    height:5px;
    background:#dfe3e8;
    border-radius:99px;
    position:absolute;
    left:7%;
    right:7%;
    top:23px;
    overflow:hidden;
}
.myprot-cg__progress-line span{
    display:block;
    height:100%;
    width:0;
    background:#df0101;
    border-radius:99px;
    transition:width .3s ease;
}
.myprot-cg__levels{
    display:flex;
    flex-wrap:nowrap;
    align-items:flex-start;
    justify-content:space-between;
    position:relative;
    z-index:2;
    gap:8px;
    width:100%;
}
.myprot-cg__level{
    flex:1 1 0;
    min-width:72px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:#9097a1;
    font-size:13px;
    font-weight:600;
    text-align:center;
}
.myprot-cg__level.is-unlocked{
    color:#171717;
}
.myprot-cg__gift-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid #cfd4da;
    background:#fff;
    border-radius:50%;
    font-size:20px;
    font-weight:600;
    color:#9ca3ab;
    box-sizing:border-box;
}
.myprot-cg__level.is-unlocked .myprot-cg__gift-icon{
    border-color:#df0101;
    color:#df0101;
}
.myprot-cg__level > span:last-child{
    line-height:1.25;
    white-space:nowrap;
}
.myprot-cg__all-levels{
    display:flex;
    flex-wrap:nowrap;
    gap:0;
    width:100%;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:auto;
    scrollbar-color:#df0101 #e7e9ed;
    box-sizing:border-box;
    background:#fff;
    cursor:grab;
    padding-bottom:8px;
}
.myprot-cg__all-levels::-webkit-scrollbar{
    height:11px;
}
.myprot-cg__all-levels::-webkit-scrollbar-track{
    background:#e7e9ed;
    border-radius:20px;
}
.myprot-cg__all-levels::-webkit-scrollbar-thumb{
    background:#df0101;
    border-radius:20px;
    border:2px solid #e7e9ed;
}
.myprot-cg__all-levels::-webkit-scrollbar-thumb:hover{
    background:#b90000;
}
.myprot-cg__all-levels.is-dragging{
    cursor:grabbing;
    scroll-behavior:auto;
    user-select:none;
}
.myprot-cg__level-column{
    flex:0 0 29%;
    margin-right: 10px;
    min-width:0;
    border:1px solid #e7e7e7;
    border-radius: 10px;
    background:#fff;
    box-sizing:border-box;
}
.myprot-cg__level-column:last-child{
    border-right:0;
}
.myprot-cg__level-column.is-locked{
    background:#fafafa;
}
.myprot-cg__level-header{
    padding:12px 8px 11px;
    min-height:62px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#7e858e;
    font-size:13px;
    box-sizing:border-box;
}
.myprot-cg__level-column.is-unlocked .myprot-cg__level-header{
    color:#000;
}
.myprot-cg__level-header strong{
    display:block;
    margin-bottom:5px;
    font-size:14px;
    font-weight:600;
}
.myprot-cg__level-header span{
    font-size:11px;
    font-weight:500;
    white-space:nowrap;
}
.myprot-cg__products{
    display:flex;
    flex-direction:column;
}
.myprot-cg__gift{
    appearance:none;
    width:99%;
    height:92px;
    min-height:92px;
    border:0;
    background:#fff;
    padding:9px 6px;
    display:flex;
    align-items:center;
    text-align:left;
    cursor:pointer;
    box-sizing:border-box;
    transition:background .15s ease, box-shadow .15s ease;
}
.myprot-cg__gift:last-child{
    border-bottom:0;
}
.myprot-cg__gift:hover:not(:disabled){
    background:#fff;
}
.myprot-cg__gift.is-selected{
    box-shadow:inset 0 0 0 2px #75df01;
    background:#fff;
}
.myprot-cg__gift:disabled{
    cursor:not-allowed;
    opacity:.46;
    filter:grayscale(.15);
    background: #fff !important;
}
.myprot-cg__radio{
    flex:0 0 18px;
    width:18px;
    height:18px;
    border:1.5px solid #858b93;
    border-radius:50%;
    position:relative;
    box-sizing:border-box;
}
.myprot-cg__gift.is-selected .myprot-cg__radio{
    border-color:#75df01;
}
.myprot-cg__gift.is-selected .myprot-cg__radio:after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#75df01;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.myprot-cg__image{
    width:72px;
    min-width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.myprot-cg__image img{
    width:72px;
    height:72px;
    object-fit:contain;
}
.myprot-cg__info{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
}
.myprot-cg__product-name{
    display:block;
    width:100%;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:11px;
    line-height:1.25;
    font-weight:600;
    color:#222;
}
.myprot-cg__info del{
    font-size:13px;
    line-height:1.2;
    color:#555;
}
.myprot-cg__info em{
    display:inline-block;
    width:max-content;
    font-size:11px;
    line-height:1.2;
    font-style:normal;
    color:#55a936;
    border:1px solid #7dcc5b;
    border-radius:5px;
    padding:4px 9px;
    background:#fff;
}
.myprot-cg__level-column.is-locked .myprot-cg__info em{
    color:#8d939a;
    border-color:#d5d8dc;
}
.myprot-cg__empty{
    padding:25px 10px;
    text-align:center;
    color:#999;
    font-size:12px;
}
.myprot-gift-cart-label small{
    display:inline-block;
    margin-left:7px;
    font-size:11px;
    color:#55a936;
}
@media(max-width:767px){
    .myprot-cg{
        padding:0 10px 18px;
    }
    .myprot-cg__headline{
        min-height:58px;
        font-size:14px;
    }
    .myprot-cg__progress{
        margin:18px 0 21px;
    }
    .myprot-cg__progress-line{
        top:21px;
        left:9%;
        right:9%;
    }
    .myprot-cg__gift-icon{
        width:44px;
        height:44px;
        font-size:18px;
    }
    .myprot-cg__level{
        min-width:62px;
        font-size:12px;
    }
    .myprot-cg__level-column{
        flex:0 0 80%;
    }
    .myprot-cg__all-levels{
        scrollbar-width:thin;
        padding-bottom:5px;
    }
    .myprot-cg__all-levels::-webkit-scrollbar{
        height:7px;
    }
    .myprot-cg__gift{
        height:88px;
        min-height:88px;
        padding:8px 8px;
    }
    .myprot-cg__image{
        width:64px;
        min-width:64px;
        height:64px;
    }
    .myprot-cg__image img{
        width:64px;
        height:64px;
    }
    .myprot-cg__product-name{
        font-size:12px;
    }
}

/* Tous les paliers déjà débloqués restent sélectionnables. */
.myprot-cg__level-column.is-unlocked .myprot-cg__gift:disabled{
    opacity:1;
    filter:none;
    cursor:pointer;
}
.myprot-cg__level-column.is-unlocked .myprot-cg__info em{
    color:#55a936;
    border-color:#7dcc5b;
}

/* v0.1.11: progress bar scrolls together with the gift list */
.myprot-cg__reward-scroll{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;scrollbar-width:auto;scrollbar-color:#df0101 #e7e9ed;cursor:grab;padding-bottom:15px;box-sizing:border-box}
.myprot-cg__reward-scroll::-webkit-scrollbar{height:11px}.myprot-cg__reward-scroll::-webkit-scrollbar-track{background:#e7e9ed;border-radius:20px}.myprot-cg__reward-scroll::-webkit-scrollbar-thumb{background:#df0101;border-radius:20px;border:2px solid #e7e9ed}.myprot-cg__reward-scroll::-webkit-scrollbar-thumb:hover{background:#b90000}.myprot-cg__reward-scroll.is-dragging{cursor:grabbing;user-select:none;scroll-behavior:auto}
.myprot-cg__progress-wide{position:relative;width:max(100%,calc(var(--myprot-level-count) * 29%));min-width:100%;top: 15px;height:100px;box-sizing:border-box}.myprot-cg__progress-wide .myprot-cg__progress-line{left:4.8%;right:4.8%;top:23px}.myprot-cg__progress-wide .myprot-cg__levels{width:100%;height:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:0;padding:0 1%;box-sizing:border-box}.myprot-cg__progress-wide .myprot-cg__level{flex:0 0 calc(100% / var(--myprot-level-count));max-width:calc(100% / var(--myprot-level-count));min-width:0}
.myprot-cg__reward-scroll .myprot-cg__all-levels{width:max(100%,calc(var(--myprot-level-count) * 29%));min-width:100%;overflow:visible;margin:0;scrollbar-width:none}.myprot-cg__reward-scroll .myprot-cg__all-levels::-webkit-scrollbar{display:none}.myprot-cg__reward-scroll .myprot-cg__level-column{flex:0 0 calc(100% / var(--myprot-level-count))}
.myprot-cg__reward-scroll .myprot-cg__image{width:90px;min-width:90px;height:90px}.myprot-cg__reward-scroll .myprot-cg__image img{width:90px;height:90px;object-fit:contain}
@media(max-width:767px){.myprot-cg__progress-wide{width:max(125%,calc(var(--myprot-level-count) * 80%));min-width:125%;height:105px}.myprot-cg__reward-scroll .myprot-cg__all-levels{width:max(125%,calc(var(--myprot-level-count) * 80%));min-width:125%}.myprot-cg__reward-scroll .myprot-cg__image{width:80px;min-width:80px;height:80px}.myprot-cg__reward-scroll .myprot-cg__image img{width:80px;height:80px}}

.myprot-cg__gift.is-loading{
    opacity:.55;
    pointer-events:none;
}

/* v0.1.13 - product images +25% again */
.myprot-cg__reward-scroll .myprot-cg__gift{
    min-height:100px;
    height:100px;
}
@media(max-width:767px){
    .myprot-cg__reward-scroll .myprot-cg__gift{
        min-height:100px;
        height:100px;
    }
}