/* ==========================================================
   YONOVA PRODUCT UI
   ========================================================== */

body.single-product
.woocommerce
div.product {
    padding-top: 16px;
}


/* ==========================================================
   GALERIE
   ========================================================== */

body.single-product
.woocommerce-product-gallery {
    overflow: hidden;

    border:
        1px solid #e7ebf1;

    border-radius: 24px;

    background: #fff;
}

body.single-product
.woocommerce-product-gallery
img {
    border-radius: 18px;
}

.ynp-image-placeholder-notice {
    margin: 12px 0 0;

    padding: 11px 14px;

    border-radius: 10px;

    background: #f5f7fa;

    color: #687385;

    font-size: 13px;

    text-align: center;
}


/* ==========================================================
   SUMMARY
   ========================================================== */

body.single-product
.woocommerce
div.product
.summary {
    padding:
        12px 6px;
}

body.single-product
.woocommerce
div.product
.product_title {
    margin-bottom: 14px;

    font-size: clamp(
        30px,
        3.2vw,
        44px
    );

    line-height: 1.08;

    color: #10182d;
}


body.single-product
.woocommerce
div.product
p.price {

    margin:
        18px 0;

    font-size: 30px;

    font-weight: 800;

    color: #0b2f73;
}


body.single-product
.woocommerce-product-details__short-description {
    color: #566173;

    font-size: 16px;

    line-height: 1.65;
}


/* ==========================================================
   BADGES
   ========================================================== */

.ynp-badges {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 12px;
}


.ynp-badge {

    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding:
        0 11px;

    border-radius: 999px;

    font-size: 12px;

    font-weight: 800;
}


.ynp-badge--trend {

    background: #d9f7ee;

    color: #08775a;
}


.ynp-badge--new {

    background: #e7efff;

    color: #174a9b;
}


.ynp-badge--price {

    background: #fff0c7;

    color: #755800;
}


/* ==========================================================
   INFORMATIONS RAPIDES
   ========================================================== */

.ynp-quick-info {

    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(135px,1fr)
        );

    gap: 10px;

    margin:
        20px 0;
}


.ynp-info-item {

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 12px;

    border:
        1px solid #e7ebf0;

    border-radius: 13px;

    background: #fafbfc;
}


.ynp-info-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    flex:
        0 0 30px;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: #e0f7f1;

    color: #08775a;

    font-weight: 800;
}


.ynp-info-item strong {

    display: block;

    margin-top: 2px;

    font-size: 13px;

    color: #172039;
}


.ynp-info-label {

    display: block;

    color: #778090;

    font-size: 11px;
}


/* ==========================================================
   PANIER
   ========================================================== */

body.single-product
.woocommerce
div.product
form.cart {

    display: flex;

    align-items: stretch;

    flex-wrap: wrap;

    gap: 10px;

    margin:
        22px 0;
}


body.single-product
.woocommerce
div.product
form.cart
.quantity
.qty {

    min-height: 50px;

    width: 72px;

    border:
        1px solid #dfe4ea;

    border-radius: 999px;

    background: #fff;
}


body.single-product
.woocommerce
div.product
.single_add_to_cart_button {

    min-height: 50px;

    padding:
        0 28px !important;

    border-radius:
        999px !important;

    background:
        linear-gradient(
            90deg,
            #ff7657,
            #ef9250
        ) !important;

    color:
        #fff !important;

    font-size:
        15px !important;

    font-weight:
        800 !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}


body.single-product
.woocommerce
div.product
.single_add_to_cart_button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(239,118,87,.22);
}


/* ==========================================================
   REASSURANCE
   ========================================================== */

.ynp-reassurance {

    display: grid;

    gap: 9px;

    margin:
        16px 0 20px;
}


.ynp-reassurance-item {

    display: flex;

    align-items: flex-start;

    gap: 11px;

    padding:
        12px 14px;

    border-radius:
        13px;

    background:
        #f7faf9;
}


.ynp-reassurance-item > span {

    color:
        #159a78;

    font-weight:
        900;
}


.ynp-reassurance-item strong {

    display: block;

    color:
        #182139;

    font-size:
        13px;
}


.ynp-reassurance-item small {

    display: block;

    margin-top:
        2px;

    color:
        #6c7684;

    line-height:
        1.4;
}


/* ==========================================================
   META WOOCOMMERCE
   ========================================================== */

body.single-product
.product_meta {

    margin-top:
        18px;

    padding-top:
        15px;

    border-top:
        1px solid #edf0f4;

    color:
        #75808e;

    font-size:
        13px;
}


/* ==========================================================
   BENEFICES
   ========================================================== */

.ynp-benefits {

    clear: both;

    margin:
        55px 0 42px;

    padding:
        36px;

    border:
        1px solid #e6ebf1;

    border-radius:
        26px;

    background:
        linear-gradient(
            135deg,
            #fbfdfd,
            #f5faf8
        );
}


.ynp-kicker {

    display:
        inline-block;

    margin-bottom:
        8px;

    color:
        #159a78;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;
}


.ynp-benefits-head h2 {

    margin:
        0 0 8px;

    color:
        #10182d;

    font-size:
        30px;

    line-height:
        1.15;
}


.ynp-benefits-head p {

    margin:
        0;

    max-width:
        720px;

    color:
        #67717e;
}


.ynp-benefits-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0,1fr)
        );

    gap:
        18px;

    margin-top:
        25px;
}


.ynp-benefit {

    padding:
        21px;

    border:
        1px solid #e5ece9;

    border-radius:
        18px;

    background:
        #fff;
}


.ynp-benefit-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    margin-bottom:
        13px;

    border-radius:
        50%;

    background:
        #def6ef;

    color:
        #108164;

    font-size:
        18px;

    font-weight:
        800;
}


.ynp-benefit h3 {

    margin:
        0 0 7px;

    color:
        #162039;

    font-size:
        17px;
}


.ynp-benefit p {

    margin:
        0;

    color:
        #687482;

    line-height:
        1.55;
}


/* ==========================================================
   ONGLETS
   ========================================================== */

body.single-product
.woocommerce-tabs {

    margin-top:
        35px;
}


body.single-product
.woocommerce-tabs
ul.tabs {

    border-bottom:
        1px solid #e7ebef;
}


/* ==========================================================
   PRODUITS SIMILAIRES
   ========================================================== */

body.single-product
.related.products {

    margin-top:
        55px;
}


body.single-product
.related.products > h2 {

    margin-bottom:
        24px;

    font-size:
        30px;

    color:
        #10182d;
}


body.single-product
.related.products
ul.products {

    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        20px;
}


body.single-product
.related.products
ul.products::before,
body.single-product
.related.products
ul.products::after {

    display:
        none;
}


body.single-product
.related.products
li.product {

    float:
        none !important;

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        14px !important;

    border:
        1px solid #edf0f4;

    border-radius:
        18px;

    background:
        #fff;
}


body.single-product
.related.products
li.product
img {

    border-radius:
        13px;
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (
    max-width: 900px
) {

    .ynp-benefits-grid {

        grid-template-columns:
            1fr;
    }

    body.single-product
    .related.products
    ul.products {

        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media (
    max-width: 580px
) {

    .ynp-benefits {

        padding:
            23px;
    }

    body.single-product
    .woocommerce
    div.product
    form.cart {

        display:
            block;
    }

    body.single-product
    .woocommerce
    div.product
    form.cart
    .quantity {

        margin-bottom:
            10px !important;
    }

    body.single-product
    .woocommerce
    div.product
    .single_add_to_cart_button {

        width:
            100%;
    }

    body.single-product
    .related.products
    ul.products {

        grid-template-columns:
            1fr;
    }

}