/* ----------------------- GÉNÉRAL ----------------------- */

#product #wrapper{
    background-color: var(--color-light-grey) !important;
    padding-bottom: 80px !important;
}

/* ----------------------- STRUCTURE ----------------------- */

#product #main > .product-container{
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 30px;
}

#product .left-column,
#product .right-column{
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 15px;
}

@media (max-width: 767px) {
    #product #main > .product-container{
        grid-template-columns: 1fr;
        gap: 20px;
        /* width: 100vw;
        max-width: none;
        transform: translate(-20px, 10px); */
    }
    #product .left-column,
    #product .right-column{
        padding: 25px;
    }
    /* #product .right-column{
        margin-inline: 20px;
    } */
}

/* ----------------------- TITRE ----------------------- */

#product .product-title{
    margin-bottom: 20px;
    font-size: 16px;
    line-height: normal;
    font-weight: bold;
    color: var(--color-black);
    text-transform: uppercase;
}

/* ----------------------- PRIX ----------------------- */

#product .product-prices{
    display: flex;
    align-items: center;
    gap: 10px;
}

#product .product-prices .product-discount{
    margin: 0;
}

#product .product-prices .product-discount .regular-price{
    margin-right: 0px;
    text-decoration: line-through;
    color: var(--color-black);
    font-size: 16px;
    line-height: normal;
    font-weight: normal;
}

#product .product-prices .product-price{
    margin: 0px;
}

#product .product-prices .product-price .current-price{
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
}

#product .product-prices .product-price .current-price .current-price-value{
    margin-right: 0px;
    color: var(--color-black);
    font-size: 22px;
    line-height: normal;
    font-weight: bold;
}

#product .product-prices .product-price .current-price .discount{
    margin: 0px !important;
    width: fit-content !important;
    font-size: 15px !important;
    line-height: normal !important;
    font-weight: bold !important;
    padding: 4px 20px !important;
    color: var(--color-white) !important;
    text-transform: none !important;
    background-color: #06A9B7 !important;
    min-height: 0px !important;
    min-width: 0px !important;
    border-radius: 8px !important;
}

@media (max-width: 767px) {
    #product .product-prices{
        margin-bottom: 30px;
    }
}

/* ----------------------- DESCRIPTION COURTE ----------------------- */

/* #product .product-description-short{
    margin-top: 30px;
} */

#product .product-description-short,
#product .product-description-short *{
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-black);
}

#product .product-description-short .desc-read-more,
#product .product-description-short .desc-read-less{
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-black);
    text-decoration: none;
    cursor: pointer;
    text-decoration: underline;
}

@media (max-width: 767px) {
    #product .product-description-short{
        margin-top: 0px;
    }
}

/* ----------------------- AJOUTER AU PANIER ----------------------- */

#product .product-add-to-cart .control-label{
    font-size: 16px;
    line-height: normal;
    color: var(--color-black);
    margin-bottom: 10px;
}

#product .product-add-to-cart .product-quantity .add{
    margin: 0px !important;
}

#product .product-add-to-cart .product-quantity .add .add-to-cart{
    width: 100% !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

#product #product-availability{
    margin-block: 15px !important;
    display: block;
}

#product #product-availability p{
    margin: 0px !important;
    font-size: 14px !important;
    line-height: normal !important;
    font-weight: bold !important;
}

#product #product-availability p.in_stock{
    color: #5FB56E !important;
}

#product #product-availability p.last_remaining_items{
    color: #EF8050 !important;
}

#product #product-availability p.out_of_stock{
    color: #EF8050 !important;
}

@media (max-width: 992px) {
    #product .btn.add-to-cart{
        padding: 13px 30px !important;
    }
}

/* ----------------------- PRODUCT TABS (NOUVEAU) ----------------------- */

#product .product-tabs {
    margin-top: 70px;
}

#product .product-tabs .product-tabs__nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 60px;
    border-bottom: none;
    margin-bottom: 16px;
    list-style: none;
    padding: 0;
}

#product .product-tabs .product-tabs__nav .nav-item{
    float: none;
    margin: 0;
}

#product .product-tabs .product-tabs__nav .nav-item .nav-link {
    display: block;
    padding: 6px 10px;
    font-size: 16px;
    line-height: normal;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--color-black);
    text-decoration: none;
    border: none;
    border-bottom: 4px solid transparent;
    background: transparent;
    position: relative;
    text-align: center;
}

#product .product-tabs .product-tabs__nav .nav-item .nav-link.active {
    border-bottom-color: var(--color-black);
}

#product .product-tabs .product-tabs__nav .nav-item .nav-link.active::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -8px;
    width: 18px;
    height: auto;
    aspect-ratio: 1;
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.988' height='17.588' viewBox='0 0 15.988 17.588'%3E%3Cpath id='Tracé_52681' data-name='Tracé 52681' d='M199.568,5.195l-5.193.745V.385a.388.388,0,0,0-.43-.382l-4.222.548a.339.339,0,0,0-.3.341V6.65l-5.024.721a.383.383,0,0,0-.331.384v4.2a.437.437,0,0,0,.491.43l4.864-.7V17.2a.388.388,0,0,0,.43.382l4.222-.548a.339.339,0,0,0,.3-.341V10.974l5.353-.768a.383.383,0,0,0,.331-.384v-4.2a.437.437,0,0,0-.491-.43' transform='translate(-184.071 0)' fill='%23ffe500'/%3E%3C/svg%3E%0A");
}

#product .product-tabs__inner {
    display: grid;
    grid-template-columns: 6fr 5fr;
    gap: 30px;
    align-items: start;
}

#product .product-tabs__left,
#product .product-tabs__right {
    background-color: var(--color-white);
    border-radius: 15px;
    padding: 40px;
}

#product .product-tabs__right {
    padding: 22px 40px;
}

/* product-details.tpl génère une .tab-pane, on la force visible dans la colonne fixe */
#product .product-tabs__right .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 767px) {
    #product .product-tabs {
        margin-top: 40px;
    }
    #product .product-tabs__inner{
        grid-template-columns: 1fr;
        gap: 20px;
    }
    #product .product-tabs__left,
    #product .product-tabs__right {
        padding: 20px;
    }
    #product .product-tabs__right {
        padding: 2px 20px;
    }
    #product .product-tabs .product-tabs__nav {
        overflow-x: scroll;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 30px;
    }
    #product .product-tabs .product-tabs__nav .nav-item .nav-link {
        white-space: nowrap;
    }
}

/* ---- Lignes label / valeur uniformes ---- */

#product .product-tabs__right .product-detail-row {
    /* align-items: center; */
    padding: 18px 0;
    border-bottom: 1px solid var(--color-light-grey);
    display: grid;
    grid-template-columns: 5fr 10fr;
    gap: 20px;
}

#product .product-tabs__right .product-detail-row:last-child {
    border-bottom: none;
}

#product .product-tabs__right .detail-label {
    font-size: 15px;
    font-weight: bold;
    color: var(--color-black);
    flex-shrink: 0;
}

#product .product-tabs__right .detail-value {
    font-size: 15px;
    color: var(--color-black);
    text-align: right;
}

#product .product-tabs__right .detail-value a {
    color: var(--color-black);
    text-decoration: none;
    font-size: 15px;
}


/* ----------------------- DESCRIPTION LONGUE ----------------------- */

#product .product-description,
#product .product-description *,
#product .pharmagest-composition,
#product .pharmagest-composition *{
    font-size: 15px;
    line-height: normal;
    color: var(--color-black);

}

#product .product-tabs__left .title{
    font-size: 18px;
    line-height: normal;
    font-weight: bold;
    color: var(--color-black);
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
}

#product .product-tabs__left .title::before{
    content: '';
    width: 25px;
    height: auto;
    aspect-ratio: 1;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22.549' height='24.806' viewBox='0 0 22.549 24.806'%3E%3Cpath id='Tracé_52720' data-name='Tracé 52720' d='M205.928,7.326,198.6,8.377V.543A.547.547,0,0,0,198,0l-5.954.773a.479.479,0,0,0-.419.481v8.12L184.537,10.4a.54.54,0,0,0-.466.542v5.918a.617.617,0,0,0,.692.607l6.86-.984v7.786a.547.547,0,0,0,.607.538l5.954-.773a.479.479,0,0,0,.419-.481V15.476l7.55-1.083a.54.54,0,0,0,.466-.542V7.933a.617.617,0,0,0-.692-.607' transform='translate(-184.071 0)' fill='%23ffe500'/%3E%3C/svg%3E%0A");
}

/* ----------------------- NOTICE / RCP ----------------------- */

#product .product-notice-rcp {
    background-color: #C7ECFD;
    border-radius: 15px;
    padding: 20px 30px;
    display: grid;
    grid-template-columns: auto auto;
    gap: 15px 25px;
    margin-top: 20px;
    max-width: 410px;
    width: 100%;
    margin-inline: auto;
}

#product .product-notice-rcp p{
    color: var(--color-black) !important;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin: 0px;
}

#product .product-notice-rcp .product-notice {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-black);
    border-radius: 8px;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
    text-align: center;
    padding: 5px 30px;
}

#product .product-notice-rcp .product-notice-rcp__link,
#product .product-notice-rcp .product-rcp {
    color: var(--color-black) !important;
    text-decoration: underline;
    font-size: 14px;
    line-height: normal;
    font-weight: normal;
}

#product .product-notice-rcp .product-notice-rcp__link{
    grid-column: 1 / 2;
    grid-row: 3 / 4;
}

#product .product-notice-rcp .product-rcp{
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    text-align: right;
}

@media (min-width: 993px) {
    #product .product-notice-rcp .product-notice:hover {
        background-color: var(--color-black);
        color: var(--color-white);
    }
}

@media (max-width: 992px) {
    #product .product-notice-rcp {
        padding: 15px 20px;
    }
}

/* ----------------------- IMAGES----------------------- */

#product .left-column .page-content{
    max-width: none !important;
}

#product .left-column .images-container{
    position: relative;
}

#product .left-column .images-container .product-cover,
#product .left-column .images-container .product-cover picture,
#product .left-column .images-container .product-cover picture img{
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
}

#product .left-column,
#product .left-column .page-content,
#product .left-column .images-container,
#product .left-column .images-container .scroll {
    min-width: 0;
    max-width: 100%;
}

#product #main > .product-container > * {
    min-width: 0;
}

.product-images>li.thumb-container .thumb.selected, 
.product-images>li.thumb-container .thumb:hover{
    border: solid 2px var(--color-black);
}









#product .product-add-to-cart .product-quantity .anchor{
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: calc(100% - 90px);
    z-index: 2;
}

#product .product-add-to-cart .product-quantity .anchor.hide,
#product .product-add-to-cart .product-quantity .anchor:has(.btn[disabled]){
    display: none !important;
}

#product .product-add-to-cart .product-quantity .anchor .btn{
    text-transform: uppercase !important;
    font-weight: 600 !important;
}

@media (max-width: 768px) {
    #product .product-add-to-cart .product-quantity .add .add-to-cart,
    #product .product-add-to-cart .product-quantity .anchor .btn{
        width: 100% !important;
    }
    #product .product-add-to-cart .product-quantity .anchor{
        display: flex;
    }
}