:root{
    --color-vintage-dark: #E2D3AB;
    --color-vintage: #F4EFDB;
    --bg-vintage: #DED6BB;
    --bg-vintage-light: #E0DBD0;
    --bg-vintage-exlight: #DED6C9;
    --color-vintage-rgb: rgb(144,148,138);
    --color-vintage-text: rgb(208,205,187);
    --color-vintage-text-hover: rgb(234, 233, 225);
    --color-vintage-form: #f4efdb;
}

@font-face {
    font-family: 'Nunito';
    src:  url('../../assets/vintage/nunito.ttf') format('truetype')
}

@font-face {
    font-family: 'Jost';
    src:  url('../../assets/vintage/jost.ttf') format('truetype')
}

.promo-option{
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
}

.promo-option:hover{
    background: var(--color-vintage-dark);
    transition: ease 0.3s;
}

.bg-gray{
    background: var(--bg-vintage-light);
}

.bg-vintage{
    background: var(--color-vintage);
}

.bg-vintage-dark{
    background: var(--color-vintage-dark);
}

.bg-vintage-light{
    background: var(--bg-vintage-exlight);
}

#vintage-page{
    font-family: "Nunito",sans-serif;
}

.btn-vintage{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    border-radius: 5px;
    padding: 0 16px;

    font-size: 14px;
}

.btn-vintage{
    background: var(--color-vintage-text);
    color: var(--color-black);
    min-height: 45px;
    border: 1px solid var(--color-vintage-text-hover);
}

.btn-vintage:hover,
.btn-vintage:active,
.btn-vintage:focus{
    border: 1px solid var(--color-vintage-text-hover);
    background: var(--color-vintage-text-hover);
    color: var(--color-black)!important;
}


/*overall theme style*/
#vintage-page b, strong{
    font-family: "Nunito", sans-serif;
}

#vintage-page .flash-sales,
#vintage-page footer{
    background: var(--color-vintage-dark);
}

#vintage-page header,
#vintage-page .sticky-promo-content{
    background: var(--color-black);
}

#vintage-page .sticky-promo-text{
    color: var(--color-vintage-text);
}

#vintage-page .page-title a{
    color: var(--color-black);
}

#vintage-page a:hover{
    color: var(--color-black);
}

#vintage-page .faber-card .btn-theme{
    padding: 0.375rem 1.875rem;
    border-radius: 25px;
    display: inline-block;
}

#vintage-page .btn-theme{
    color: var(--color-white);
    background: var(--color-black);
    border: 1px solid var(--color-black);
}

#vintage-page .btn-theme:hover,
#vintage-page .btn-theme:active,
#vintage-page .btn-theme:focus{
    background: var(--color-black);
    color: var(--color-white);
    border: 1px solid var(--color-black);
}

#vintage-page .btn-theme-2{
    background: var(--color-vintage-text);
    color: var(--color-black);
    border: 1px solid var(--color-vintage-text);
}

#vintage-page .btn-theme-2:hover,
#vintage-page .btn-theme-2:active,
#vintage-page .btn-theme-2:focus {
    border: 1px solid var(--color-vintage-text);
    background: var(--color-vintage-text);
    color: var(--theme-dark);
    box-shadow: 5px 5px 5px -3px var(--color-vintage-rgb);
    -webkit-box-shadow: 5px 5px 5px -3px var(--color-vintage-rgb);
    -moz-box-shadow: 5px 5px 5px -3px var(--color-vintage-rgb);
}

#vintage-page .theme-select:hover,
#vintage-page .theme-select:active,
#vintage-page .theme-select:focus,
#vintage-page .theme-input:hover,
#vintage-page .theme-input:active,
#vintage-page .theme-input:focus {
    border: 1px solid var(--color-vintage-dark);
    box-shadow: 5px 5px 5px -3px var(--color-vintage-dark);
    -webkit-box-shadow: 5px 5px 5px -3px var(--color-vintage-dark);
    -moz-box-shadow: 5px 5px 5px -3px var(--color-vintage-dark);
}


.registration{
    background: var(--bg-vintage);
    font-family: "Nunito",sans-serif;
    font-weight: lighter;
    padding: 16px 0;
}

.registration .text{
    font-size: 16px;
    color: black;
}

/*product section*/
.vintage-product{
    position: relative;
    padding: 32px 16px;
    background: var(--bg-vintage-light);
}

.vintage-product .sku{
    background: var(--bg-vintage-light);
    color: var(--color-black);
    border-radius: 12px;
    margin-bottom: 16px;
    padding: 0.375rem 0.875rem;
    box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
    -moz-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
}

.vintage-product .title{
    font-size: 18px;
    margin-bottom: 8px;
}

.vintage-product .price{
    font-size: 24px;
    margin-bottom: 16px;
    font-family: 'Jost',sans-serif;
}

.vintage-product .type,
.vintage-product .location{
    display: inline-block;
    background: transparent;
    color: var(--color-black);

    padding: 4px 16px;

    box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
    -moz-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);

}

.vintage-product .type,
.vintage-product .location,
.add-to-cart{
    border-radius: 12px!important;
}

.vintage-product p{
    font-size: 14px;
}

.vintage-product .type select,
.vintage-product .location select{
    width: 100%;
    background: transparent;
    color: var(--color-black);
    border: 0;
    font-size: 12px;
    cursor: pointer;
}

.add-to-cart{
    font-size: 12px;
    background: transparent!important;
    color: var(--color-black)!important;
}

.vintage-product .type select:focus-visible,
.vintage-product .location select:focus-visible{
    outline: transparent auto 0;
}

.type-select{
    cursor: pointer;
}

.vintage-product .offer-list{
    font-family: "Nunito",sans-serif;
    list-style: none;

    box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);
    -moz-box-shadow: 5px 5px 15px -3px rgba(0,0,0,0.35);

    padding: 8px;
    border-radius: 12px;

    position: absolute;
    top: 15%;

    background: #fff;
    z-index: 99;
}

.vintage-product .offer-list p{
    font-weight: lighter;
}

#vintage-page .terms{
    background: var(--color-vintage-dark);
}

#vintage-page .faber-card{
    border: 1px solid var(--color-vintage-dark);
}

#vintage-page .faber-card:hover {
    box-shadow: 5px 5px 5px -3px var(--color-vintage-dark);
    -webkit-box-shadow: 5px 5px 5px -3px var(--color-vintage-dark);
    -moz-box-shadow: 5px 5px 5px -3px var(--color-vintage-dark);
    transition: ease .3s;
}

#vintage-page .account-panel a:hover{
    color: var(--color-vintage-text);
}

.text-shadow{
    text-shadow: 2px 2px 4px rgba(0,0,0,0.30);
}

.vintage-btn a{
    background: var(--color-black);
    color: var(--color-white);
    border-radius: 25px;
    padding: 0.375rem 0.875rem;

    box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.35);
    -webkit-box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.35);
    -moz-box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.35);
}

#vintage-page .vintage-btn a:hover{
    color: var(--color-white);
}

#vintage-page .faber-card .form-control{
    background: var(--color-vintage-form);
    border: 1px solid var(--color-vintage-form);

    box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.22);
    -webkit-box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.22);
    -moz-box-shadow: 5px 5px 5px -3px rgba(0,0,0,0.22);

    text-align: center;
}

#vintage-page .faber-card .form-control:active,
#vintage-page .faber-card .form-control:focus,
#vintage-page .faber-card .form-control:focus-within{
    background : #dcd2b1;
}

#vintage-page .text-justify-last{
    text-align: justify;
    text-align-last: center;

    font-size: 14px;
}

.action-separator{
    height: 100%;
    width: 1px;
    background: rgba(0,0,0,.3);

    margin-top: 5px;
}

.promo{
    position: relative;
}

.vintage-product .image{
    position: relative;
}

.coming-soon{
    position: absolute;
    max-width: 200px;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

@media screen and (min-width: 768px) {
    .registration{
        padding: 24px 0;
    }

    .registration .text{
        font-size: 20px;
    }

    .vintage-product .price{
        font-size: 36px;
    }
}

@media screen and (min-width: 1024px) {
    .vintage-product .title{
        font-size: 22px;
    }

    .vintage-product .image{
        width: 90%;
        margin: auto;
    }

    .vintage-product .type select,
    .vintage-product .location select{
        font-size: 14px;
    }

    .add-to-cart{
        font-size: 14px;
    }
}


@media screen and (min-width: 1200px) {
    .vintage-product .title{
        font-size: 26px;
    }

    .vintage-product .price{
        font-size: 40px;
    }

    .vintage-product .sku{
        font-size: 16px;
    }

    .vintage-product .image{
        width: 85%;
        margin: auto;
    }

    .promo{
        position: relative;
    }

    .vintage-product sup{
        font-size: 0.55em;
    }
}

@media screen and (min-width: 1400px) {

    .vintage-product .price{
        font-size: 48px;
    }

    .vintage-product{
        padding: 64px 16px;
    }

    #vintage-page .text-justify-last{
        font-size: 16px;
    }

}