/********************
	Part - Style global
********************/
#wrapper {
    background : var(--color-grey-default);
    z-index    : 1;
}

.products-section-title {
    text-align    : center;
    margin-bottom : 1.5rem;
}

/********************
	Part - Style général des sections
********************/
.section__title {
    font-family : var(--typo-secondary);
    font-size   : var(--font-size-900);
    font-weight : 400;
    margin      : 0;
    line-height : 1;
}

/********************
	Part - Style black layer background - used on image bg
********************/
.black-layer-background {
    position : relative;
    z-index  : 0;
}

.black-layer-background:after {
    content    : '';
    display    : block;
    background : var(--color-primary);
    opacity    : 0.3;
    position   : absolute;
    top        : 0;
    left       : 0;
    right      : 0;
    bottom     : 0;
    width      : 100%;
    height     : 100%;
    z-index    : -1;
}

/* SPECIFIQUE MODULE BWA CE */
#module-bwa_ce-bulkorderssession .header__banner.black-layer-background{
    flex-flow: column;
}

#module-bwa_ce-bulkorderssession .header__banner.black-layer-background span{
    width: fit-content;
    margin: 10px auto 0;
    padding: 10px 0;
    position: relative;
    font-weight: 100;
    color: #fff;
    background-color: #000;
}

#module-bwa_ce-bulkorderssession .header__banner.black-layer-background span::after,
#module-bwa_ce-bulkorderssession .header__banner.black-layer-background span::before{
    position: absolute;
    content: '';
    height: 40px;
    width: 45px;
    transform: translateX(-100%);
    border: 20px solid black;
    border-left: 20px solid transparent;
    top: 0;
    left: 0;
}

#module-bwa_ce-bulkorderssession .header__banner.black-layer-background span::after{
    position: absolute;
    transform: translateX(100%);
    border-right: 20px solid transparent;
    border-left:20px solid black;
    right: 0;
    left : unset;
}

/********************
	Part - Style général des accordéons
********************/
.js-accordion__container {
    border     : 1px solid var(--color-grey-default);
    box-shadow : 2px 2px 11px 0 rgba(0, 0, 0, 0.1);
}

.js-accordions__wrapper .accordion__title {
    background      : white;
    color           : var(--color-primary);
    padding         : 15px;
    font-weight     : 700;
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    cursor          : pointer;
}

/********************
	Part - fix taille mini d'une page à 100vh hors du checkout
********************/
body:not(#checkout) main {
    min-height     : 100vh;
    display        : flex;
    flex-direction : column;
}

body:not(#checkout) #wrapper {
    flex           : 1 0 auto;
    display        : flex;
    flex-direction : column;
}

body:not(#checkout) #wrapper .wrapper__inner {
    flex : 1 0 auto;
}

/********************
	Part - class notransition for js
********************/
.notransition,
.notransition * {
    -webkit-transition : none !important;
    -moz-transition    : none !important;
    -o-transition      : none !important;
    transition         : none !important;
}

/********************
	Part - Style all product link
********************/
.all-product-link {
    color       : var(--color-grey-font-default);
    font-weight : 700;
    padding     : 3px 7px;
    display     : inline-block;
}

.section__content .all-product-link {
    margin-top : 1.5rem;
}

.all-product-link:focus,
.all-product-link:hover {
    text-decoration : none;
}

/********************
	Part - Style dropdown
********************/
.dropdown {
    color : var(--color-grey-font-default)
}

.dropdown:hover .expand-more {
    color : #2fb5d2
}

.dropdown .expand-more {
    color               : var(--color-black-default);
    cursor              : pointer;
    -webkit-user-select : none;
    -moz-user-select    : none;
    -ms-user-select     : none;
    user-select         : none
}

.dropdown .active {
    max-height : 200px;
    overflow-y : hidden;
    visibility : visible
}

.dropdown select {
    -moz-appearance : none;
    border          : 0 none;
    outline         : 0 none;
    color           : var(--color-black-default);
    background      : #fff
}

.dropdown-item:focus, .dropdown-item:hover {
    background      : none;
    text-decoration : none;
    color           : #2fb5d2
}

/********************
	Part - landing
********************/
.landing {
    background      : url(../../../assets/img/duck-bg.jpg) no-repeat;
    background-size : cover;
    display         : flex;
    flex-direction  : column;
    justify-content : center;
}

.landing__title {
    font-family : var(--typo-secondary);
    font-weight : 400;
    color       : var(--color-white-default);
    line-height : 1.15em;
    text-align  : center;
    margin      : 0 auto;
}

.landing .landing__choice {
    margin-top : 10.5vh;
}

.landing__choice {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
}

.landing__choice {
    display : grid;
}

.landing__choice .login__btn {
    grid-column  : 1/-1;
    /*grid-row     : 2;*/
    border-color : #333333;
    background   : #333333;
    color        : white;
}

.landing__btn {
    padding-left    : 2em;
    padding-right   : 2em;
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    text-align      : left;
}

.landing__btn:after {
    content       : '';
    transform     : rotate(-45deg);
    border-right  : 2px solid currentColor;
    border-bottom : 2px solid currentColor;
    width         : .8em;
    height        : .8em;
}

@media (max-width : 767px) {
    .landing {
        min-height : calc(100vh - 115px);
        padding: 20px 0;
    }

    .landing__choice {
        grid-gap : 1em;
    }
}

@media (min-width : 768px) {
    .landing {
        min-height : calc(100vh - 50px);
    }

    .landing__choice {
        grid-template-columns : repeat(auto-fit, minmax(360px, 1fr));
        grid-gap              : 2em;
    }

    .landing__choice .login__btn {
        width        : 55%;
        margin       : 0 auto;
    }
}

@media (max-width : 1023px) {
    .landing__title {
        font-size : var(--font-size-1100);
        max-width : 95%;
    }
}

@media (min-width : 1024px) {
    .landing__title {
        font-size : var(--font-size-1400);
        max-width : 48%;
    }
}

/********************
	Part - section main order
********************/
.s-main-order {
    padding             : 17vh 0 15.5vh;
    background          : url(../../../assets/img/foie-gras-banner.jpg) no-repeat;
    background-size     : cover;
    background-position : center;
}

.main-order__title {
    color      : white;
    text-align : center;
}

.s-main-order .main-order__title {
    margin-bottom : 0.75em;
}

.order-bar {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : space-between;
    align-items     : center;
    background      : var(--color-white-default);
    padding         : var(--font-size-500) var(--font-size-800);
    border-radius: 10px;
}

.order-bar .label {
    display     : flex;
    align-items : center;
    margin      : 0;
    color       : #848485;
    font-weight : 300;
}

.order-bar .value {
    color       : #323335;
    font-size   : var(--font-size-500);
    margin-left : .5em;
    text-align  : left;
}

.order-bar__validate-button {
    border-color : var(--color-primary);
    /*color        : var(--btn-primary-color);*/
}

.order-hr-vertical{
    height: 30px;
    width: 1px;
    margin: 0;
    background: #D6D6D6;
}

@media (max-width : 767px) {
    /********************
		Part - section main order
	********************/
    .order-bar {
        flex-direction : column;
    }

    .order-bar > .order-bar__input {
        width : 100%;
    }

    .order-bar > .order-bar__input span:not(.value) {
        width : 22%;
    }

    .order-bar > .order-bar__input .value {
        flex : 1 0 0;
    }
    .order-hr-vertical{
        display: none;
    }
    .order-bar__input{
        margin-top: 15px;
    }

}

@media (max-width : 1023px) {
    .main-order__title {
        font-size : var(--font-size-1200);
    }

    .order-bar {
        justify-content : space-around;
    }

     .order-bar__validate {
        margin-top : 15px
    }
}

@media (min-width : 1024px) {
    .main-order__title {
        font-size : var(--font-size-1400);
    }
}

@media (max-width: 905px) {
    .order-hr-vertical:nth-of-type(2) {
        display : none!important;
    }
    .order-bar__input:nth-of-type(3){
        margin-top: 15px;
    }
}


@media (min-width: 1000px) and (max-width: 1250px){
    .order-bar__validate{
        margin: auto;
        margin-top: 10px;
    }
}

/*
    BULK ORDER
*/
#module-bwa_ce-bulkorderssession .page-content {
    background : transparent;
}

.bulk-orders-table {
    background                   : var(--color-grey-default);
    width                        : 100%;

    --default-vertical-padding   : 7px;
    --default-horizontal-padding : 15px;
}

.bulk-orders-table thead {
    border-bottom : 1px solid var(--color-black-default);
}

.bulk-orders-table th {
    padding : calc(2.5 * var(--default-vertical-padding)) var(--default-horizontal-padding);
}

.bulk-orders-table tbody > tr:nth-child(2n + 0) {
    background : var(--color-white-default);
}

.bulk-orders-table td {
    padding : var(--default-vertical-padding) var(--default-horizontal-padding);
}

.create-order-bulk {
    display         : flex;
    align-items     : center;
    justify-content : flex-end;
    color           : var(--color-black-default);
    padding         : 15px 0 0;
}

.create-order-bulk:focus {
    text-decoration : unset;
}

/*
    BULK ORDER FORM
*/
.summary-link {
    display     : inline-flex;
    align-items : center;
    color       : var(--color-black-default);
    padding     : 15px 0;
}

.summary-link:focus {
    text-decoration : unset;
}