/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 19 oct. 2021, 17:55:43
    Author     : Charles
*/

@media screen and (max-width: 1750px) {
    #slider-products-houblons {
        & .container-flex {
            & .products {
                .swiper-button-prev {
                    display: inline-block;
                    left: 50px;
                    width: 16px;
                    height: 32px;
                    background: url('../img/svg/arrow-swiper-white-prev.svg') no-repeat center / contain;
                }
                .swiper-button-next {
                    display: inline-block;
                    right: 50px;
                    width: 16px;
                    height: 32px;
                    background: url('../img/svg/arrow-swiper-white-next.svg') no-repeat center / contain;
                }
            }
        }
    }
}

@media screen and (max-width: 1650px) {
    #bloc-recettes {
        & .bloc-recette {
            & .bloc-produits {
                width: calc(100% - 500px);
                .swiper-slide {
                    overflow: hidden;
                }
                .swiper-button-prev, .swiper-button-next {
                    display: block;
                }
            }
        }
    }
}

@media screen and (max-width: 1550px) {
    #accueil-cocktails {
        .block-visuel {
            width: 100%;
        }
        .content {
            min-width: 710px;
        }
    }

    #header-delienn {
        & .header-desktop {
            & .menu {
                & > ul {
                    & > li {
                        & > a {
                            &.classic {
                                padding: 0 5px;
                            }
                        }
                    }
                }
            }
        }
    }

    #footer, body#checkout main #footer {
        & .container-footer {
            & .menus {
                & ul {
                    & li {
                        & a {
                            &.boutique {
                                &:before {
                                    width: 170px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    #product {
        & .block-cocktails {
            .houblons {
                right: 0;
                bottom: -150px;
                max-width: 350px;
                img {
                    width: 100%;
                }
            }
            &:before {
                top: -40px;
                height: 40px;
            }
            &:after {
                bottom: -38px;
                height: 40px;
            }
        }
    }
}

@media screen and (max-width: 1450px) {
    @media screen and (max-width: 1750px) {
        #slider-products-liqueur {
            & .container-flex {
                & .products {
                    .swiper-button-prev {
                        display: inline-block;
                        left: 50px;
                        width: 16px;
                        height: 32px;
                        background: url('../img/svg/arrow-swiper-white-prev.svg') no-repeat center / contain;
                    }
                    .swiper-button-next {
                        display: inline-block;
                        right: 50px;
                        width: 16px;
                        height: 32px;
                        background: url('../img/svg/arrow-swiper-white-next.svg') no-repeat center / contain;
                    }
                }
            }
        }
    }

    #header-delienn {
        & .header-desktop {
            & .menu {
                & > ul {
                    & > li {
                        & > a {
                            &.boutique {
                                &:before {
                                    top: -11px;
                                    left: -16px;
                                    width: 150px;
                                    height: 38px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /*Panier*/
    #cart main .cart-grid .cart-grid-right,
    #checkout main #content .cart-grid-right {
        width: 100%;
        max-width: 350px;
        margin-left: 20px;
    }
}

@media screen and (max-width: 1400px) {
    #home-banner {
        .contenu {
            .logo {
                max-width: 300px;
            }
            h1 {
                font-size: 26px;
                margin: 15px 0 10px
            }
        }
    }

    #slider-products-arranges-filtres {
        .container-flex {
            gap: 40px;
            margin-bottom: 60px;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }
}

@media screen and (max-width: 1350px) {
    #header-delienn {
        & .header-desktop {
            & .menu {
                & > ul {
                    & > li {
                        &.compte-panier {
                            min-width: 0;
                            & a {
                                .text {
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1280px) {
    #home-banner {
        .contenu {
            top: 25%;
        }
    }

    #product {
        .product-container {
            gap: 25px;
            flex-direction: column;
            align-items: center;
        }
    }

    /*Panier*/
    #cart main .cart-grid,
    body#checkout main section#content {
        margin: 35px auto 70px;
        flex-direction: column;
        align-items: center;
    }

    #checkout main #content .cart-grid-body {
        width: 100%;
    }

    #cart main .cart-grid .cart-grid-right,
    #checkout main #content .cart-grid-right {
        margin-left: 0;
    }
}

@media screen and (max-width: 1200px) {
    #wrapper, #footer {
        overflow: hidden;
    }

    #product {
        .product-container {
            margin: 0 auto 80px;
        }
    }

    #header-delienn {
        height: 68px;
        .menu-mobile {
            display: block;
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            height: 100vh;
            width: 100%;
            max-width: 600px;
            background: #fff;
            padding: 80px 55px 200px;
            transform: translateX(100%);
            transition: all 300ms ease-in-out;
            background: #F3F49B;
            &.active {
                transform: translateX(0);
            }
            .close-menu-mobile {
                position: absolute;
                top: 20px;
                right: 20px;
                width: 30px;
                cursor: pointer;
                img {
                    width: 100%;
                }
            }
            > li {
                margin-bottom: 8px;
                > a {
                    display: inline-block;
                    font-size: 18px;
                    font-weight: 700;
                    color: #000;
                    padding: 8px 0;
                }
                > ul {
                    li {
                        margin-bottom: 8px;
                        padding-left: 20px;
                        a {
                            color: #1A8864;
                            font-weight: 700;
                            display: block;
                            text-align: left;
                            padding: 4px 0;
                        }
                    }
                }
                &.boutique {
                    display: flex;
                    justify-content: center;
                    margin-top: 20px;
                    a {
                        position: relative;
                        z-index: 1;
                        font-size: 18px;
                        font-weight: 700;
                        color: #1A8864;
                        text-transform: uppercase;
                        &:before {
                            content: '';
                            position: absolute;
                            z-index: -1;
                            top: -13px;
                            left: -32px;
                            width: 189px;
                            height: 50px;
                            transition: all 200ms ease-in-out;
                            background: url(../img/svg/before-btn-boutique-header.svg) no-repeat center / contain;
                        }
                    }
                }
            }
            .logo {
                display: flex;
                justify-content: center;
                margin-top: 30px;
            }
        }
        & .header-desktop {
            width: calc(100% - 20px);
            padding-right: 25px;
            .logo-mobile {
                display: block;
                max-width: 90px;
                img {
                    width: 100%;
                }
            }
            & .menu {
                &.menu-left {
                    display: none;
                }
                &.menu-right {
                    min-width: 115px;
                    max-width: 115px;
                    display: flex;
                    align-items: center;
                    li:not(.compte-panier) {
                        display: none;
                    }
                    ul {
                        margin-bottom: 0;
                    }
                    .menu-burger {
                        cursor: pointer;
                        display: block;
                        width: 45px;
                        height: 22px;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        span {
                            width: 100%;
                            height: 2px;
                            background: #000;
                        }
                    }
                }
                > ul {
                    height: 68px;
                }
            }
            .logo-header {
                display: none;
            }
        }
    }


}

@media screen and (max-width: 1050px) {
    #category {
        & #wrapper {
            .content-wrapper {
                flex-direction: column;
                align-items: center;
                #left-column {
                    position: relative;
                    max-width: none;
                    margin-right: 0;
                    top: 0;
                    & .block-categories {
                        margin-bottom: 15px;
                        & ul {
                            & li {
                                a {
                                    font-size: 20px;
                                    line-height: 46px;
                                    height: 38px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 1000px) {

    #bloc-recettes {
        & .bloc-recette {
            & .bloc-produits {
                & .product {
                    .miniature-delienn {
                        flex-direction: column;
                        .block-content {
                            align-items: center;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }

    #slider-products-arranges-filtres {
        padding: 100px 0 30px;
        & .products {
            padding-right: 30px;
            .swiper-slide {
                max-width: none;
            }
        }
        &:after {
            bottom: -58px;
            height: 60px;
            background: url(../img/interface/home-after-arranges.png) no-repeat top center / 1200px auto;
        }
    }

    #accueil-cocktails {
        flex-direction: column;
        margin-top: -30px;
        .content {
            width: 100%;
            padding-top: 0;
            padding-bottom: 0;
        }
    }

    #slider-products-houblons {
        &:before {
            top: -43px;
            height: 45px;
            background: url(../img/interface/home-before-houblons.png) no-repeat bottom center / 1200px auto;
        }
        &:after {
            bottom: -63px;
            height: 64px;
            background: url(../img/interface/home-after-houblons.png) no-repeat bottom center / 1200px auto;
        }
    }

    #slider-products-liqueur {
        &:before {
            top: -60px;
            height: 60px;
            background: url(../img/interface/home-before-liqueur.png) no-repeat bottom center / 1200px auto;
        }
        &:after {
            bottom: -72px;
            height: 74px;
            background: url(../img/interface/home-after-liqueur.png) no-repeat top center / 1200px auto;
        }
    }

    #footer {
        &:before {
            top: -63px;
            height: 65px;
            background: url(../img/interface/home-before-houblons.png) no-repeat bottom center / 1640px 100%;
        }
    }

    #home-banner {
        display: flex;
        align-items: center;
        flex-direction: column-reverse;
        .temp-logo {
            img {
                max-width: 90px;
            }
        }
        .contenu {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            left: 0;
            top: auto;
            width: calc(100% - 40px);
            max-width: 775px;
            margin: 140px auto 0;
            text-align: center;
            .logo {
                max-width: 230px;
            }
            .default-btn {
                margin-top: 0;
            }
        }
        .visuel {
            width: 100%;
            max-width: 1050px;
        }
    }

    .reassurances {
        justify-content: center;
        gap: 25px 10px;
        padding: 80px 0 30px;
        flex-wrap: wrap;
        .reassurance {
            width: calc(50% - 5px);
            & .picto {
                max-height: 50px;
                img {
                    max-height: 50px;
                }
            }
            .sous-titre {
                line-height: 20px;
                font-size: 14px;
            }
        }
    }
}

@media screen and (max-width: 900px) {

    #description-accueil {
        padding: 120px 0;
        .content {
            padding: 30px;
            border-radius: 45px;
            .logo-titre {
                gap: 20px;
                flex-direction: column;
                align-items: center;
                text-align: center;
                .logo {
                    max-width: 100px;
                }
                & .titre {
                    .part-1 {
                        font-size: 30px;
                        line-height: 32px;
                    }
                    .part-2 {
                        font-size: 30px;
                        line-height: 34px;
                        margin-top: 10px;
                    }
                }
            }
            .texte {
                margin-top: 10px;
                line-height: 24px;
            }
        }
    }


    #slider-products-houblons {
        padding: 40px 0;
        & .container-flex {
            flex-direction: column;
            .contenu {
                min-width: 0;
                align-items: flex-start;
                .picto-btn {
                    gap: 15px;
                    flex-direction: column;
                }
                h2 {
                    font-size: 32px;
                    &:before {
                        left: -26px;
                        top: -25px;
                        width: 100%;
                        height: 100px;
                    }
                    &:after {
                        right: 28px;
                        top: -20px;
                        width: 21px;
                        height: 36px;
                    }
                }
                .texte {
                    padding-right: 15px;
                    margin: 8px 0;
                    line-height: 24px;
                }
            }
            .products {
                margin-top: 20px;
                width: 100%;
                .swiper-button-prev {
                    left: 75px;
                }
                .swiper-button-next {
                    right: 75px;
                }
            }
        }
    }

    #slider-products-liqueur {
        padding: 40px 0;
        & .container-flex {
            flex-direction: column;
            transform: none;
            .contenu {
                min-width: 0;
                transform: none;
                align-items: flex-start;
                .picto-btn {
                    gap: 15px;
                    flex-direction: column;
                }
                h2 {
                    font-size: 32px;
                    max-width: 300px;
                    &:before {
                        left: -26px;
                        top: -25px;
                        width: 100%;
                        height: 100px;
                    }
                    &:after {
                        right: 28px;
                        top: -20px;
                        width: 21px;
                        height: 36px;
                    }
                }
                .texte {
                    padding-right: 15px;
                    margin: 8px 0;
                    line-height: 24px;
                }
            }
            .products {
                margin-top: 20px;
                width: 100%;
                .swiper-button-prev {
                    left: 75px;
                }
                .swiper-button-next {
                    right: 75px;
                }
            }
        }
    }

    #slider-products-arranges-filtres {
        & .products {
            .swiper-button-prev {
                left: 75px;
            }
            .swiper-button-next {
                right: 75px;
            }
        }
    }

    .product {
        display: flex;
        justify-content: center;
        .miniature-delienn {
            width: 100%;
            max-width: 350px;
            & .block-image {
                & .product-thumbnail {
                    img {
                        max-height: 350px;
                        width: auto;
                    }
                }
                .rond-bouteille {
                    max-width: 230px;
                    height: 230px;
                    min-width: 230px;
                }
            }
        }
    }
}

@media screen and (min-width: 801px) {
    #product {
        & .product-accessories {
            & .products {
                .swiper-slide {
                    max-width: 350px;
                }
            }
        }
    }
}

@media screen and (max-width: 800px) {

    #cms #main {
        .page-header {
            margin-bottom: 45px;
        }
    }

    /*Recettes*/
    #bloc-recettes {
        .bloc-recette {
            gap: 60px;
            margin-bottom: 50px;
            flex-direction: column;
            border-bottom: solid 2px #5F6B02;
            & .contenu {
                min-width: 0;
                & .inner {
                    padding: 80px 20px 40px 60px;
                    min-height: 225px;
                    .logo {
                        top: -40px;
                        left: 50%;
                        transform: translateX(-50%);
                        max-height: 120px;
                        img {
                            max-height: 120px;
                        }
                    }
                }
                .accroche {
                    p {
                        margin-bottom: 0;
                        font-size: 22px;
                        line-height: 26px;
                        text-align: center !important;
                        color: #5F6B02;
                        &:after {
                            display: none;
                        }
                    }
                }
            }
            &:nth-child(even) {
                flex-direction: column;
            }
            & .bloc-produits {
                width: 100%;
            }
        }
    }

    /*Panier*/
    #cart main .cart-grid-body .cart-overview .cart-item .product-line-grid {
        flex-direction: column;
    }

    #cart main .cart-grid-body .cart-overview .cart-item .product-line-grid .bottom-mobile {
        flex-direction: column;
        text-align: center;
    }

    #cart main .cart-grid-body .cart-overview .cart-item .product-line-grid .product-line-grid-body {
        margin: 15px 0;
    }

    #cart main .cart-grid-body .cart-overview .cart-item .product-line-grid .product-line-info.product-price {
        justify-content: center;
    }

    /*Finaliser la commande*/
    body#checkout main section.checkout-step {
        padding: 15px;
    }

    body#checkout main section.checkout-step .step-title {
        font-size: 18px;
        padding: 0 10px;
    }

    body#checkout main section.checkout-step .content {
        padding: 0 10px;
    }

    #checkout-personal-information-step .nav-inline .nav-item a {
        min-height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #product {
        & .block-cocktails {
            .btns {
                justify-content: center;
                a {
                    width: calc(50% - 8px);
                    img {
                        max-width: 100%;
                    }
                }
            }
        }
    }

    #product {
        & .product-container {
            & .block-image {
                & .product-cover {
                    & .picture {
                        img {
                            max-height: 350px;
                            width: auto;
                        }
                    }
                    & .rond-bouteille {
                        max-width: 230px;
                        height: 230px;
                        min-width: 230px;
                    }
                }
            }
            & .block-content {
                h1 {
                    font-size: 32px;
                    line-height: 38px;
                }
                .block-prix-achat {
                    margin: 15px 0;
                    gap: 15px;
                    flex-direction: column;
                    .product-add-to-cart {
                        width: 100%;
                    }
                    .product-quantity {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        &:after {
                            display: none;
                        }
                        & .add {
                            .add-to-cart {
                                width: auto;
                                font-size: 17px;
                                background: #1A8864;
                                padding: 0 20px;
                            }
                        }
                    }
                }
                .reassurance-liqueur {
                    gap: 10px;
                    padding: 15px 0;
                    margin: 35px 0;
                    flex-direction: column;
                }
                & .tabs {
                    .container-tabs-nav {
                        overflow: auto;
                        .nav-tabs {
                            gap: 20px;
                            min-width: 730px;
                        }
                    }

                }
            }
        }
        & .product-accessories {
            h2 {
                font-size: 26px;
                line-height: 28px;
                margin-bottom: 50px;
                &::before {
                    left: -26px;
                    top: -29px;
                    width: 370px;
                    height: 90px;
                }
                &::after {
                    right: 5px;
                }
            }
            & .products {
                width: 100%;
                padding-right: 30px;
                box-sizing: border-box;
                .swiper-slide {
                    box-sizing: border-box;
                }
            }
        }
    }

    #category #wrapper #content-wrapper {
        & .products {
            .product {
                max-width: none;
                margin-bottom: 30px;

            }
        }
    }

    .page-header {
        padding: 35px 0 10px;
        margin-bottom: 70px;
        text-align: center;
        h1 {
            font-size: 28px;
            line-height: 34px;
        }
        &:after {
            bottom: -38px;
            height: 40px;
        }
    }

    .page-addresses, body.page-my-account, body.page-authentication, body.page-registration, body.page-customer-account {
        #content {
            padding: 0;
            width: calc(100% - 60px);
            max-width: 1000px;
            margin: 50px auto;
            form {
                .form-group {
                    margin-bottom: 0;
                }
            }
        }
    }

    .page-addresses, body.page-my-account, body.page-authentication, body.page-registration, body.page-customer-account {
        & #content {
            form {
                width: 100%;
                max-width: none;
            }
        }
    }

    #index #footer {
        margin-top: -20px;

    }

    #footer, body#checkout main #footer {
        & .container-footer {
            padding: 0px 0 40px;
            .menus {
                margin-bottom: 30px;
                flex-wrap: wrap;
                ul {
                    width: calc(50% - 8px);
                    & li {
                        a {
                            font-size: 14px;
                            &.large {
                                font-size: 16px;
                            }
                        }
                    }
                }
            }
        }
    }

    #slider-products-arranges-filtres {
        & .container-flex {
            & .contenu {
                display: flex;
                align-items: center;
                flex-direction: column;
                h2 {
                    font-size: 34px;
                    font-weight: normal;
                }
            }
            .texte {
                line-height: 24px;
            }
            .points-forts {
                min-width: 0;
                flex-wrap: wrap;
                justify-content: center;
                gap: 25px 0;
                .point-fort {
                    width: 50%;
                    padding: 0 8px;
                    border: none !important;
                    .texte {
                        font-size: 14px;
                        line-height: 18px;
                    }
                }
            }
        }
    }

    #accueil-cocktails {
        .content {
            min-width: 0;
            & .inner {
                .titre {
                    font-size: 60px;
                    line-height: 70px;
                    &:after {
                        right: -18px;
                        top: -8px;
                        width: 22px;
                        height: 30px;
                    }
                    & .titre {
                        right: -20px;
                        top: -7px;
                        width: 26px;
                        height: 30px;
                    }
                }
                .texte {
                    line-height: 24px;
                }
                .btns {
                    /*flex-direction: column;*/
                    align-items: center;
                    a {
                        max-width: calc(50% - 8px);
                        img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}