:root {
    --tone: #D39800;
    --tone-dark: #B6552B;
    --dark-text: #3E2E2E;
    --light-text: #4C3838;
    --pink: #EAC6C5;
  }
[v-cloak]{display: none;}
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 22px; }
.fs22 { font-size: 22px; }
.fs24 { font-size: 24px; }
.fs36 { font-size: 36px; }
.fs48 { font-size: 48px; }

.bold{font-weight: bold;}
.medium{font-weight: 500;}

.dark{color: var(--dark-text)}
.light{color: var(--light-text)}
.white{color: white;}
.tone{color: var(--tone);}
.tone-dark{color: var(--tone-dark);}

.container{
    max-width: 1100px !important;
    padding-left: 15px;
    padding-right: 15px;
}
a{
    color: var(--tone) !important;
}


/*------------COOKIES BANNER-------------*/

.cookies{
	z-index: 99; 
	position: fixed; 
	bottom: 25px; 
	right: 25px;
	width: 600px; 
	max-width: 100%; 
	padding: 25px; 
	background-color: var(--dark-text); 
	color: white;
}
@media (max-width: 600px) {
  .cookies {
    bottom: 0 !important;
    width: 100%;
    left: 0; 
    right: 0;
  }
}


header.header{
    height: 950px;
    background-size: cover;
    background-position-y: bottom;
    background-position-x: center;
    position: relative;
}
.header2{
	padding: 80px 0;
	background: linear-gradient(180deg, #CDCBD1 0%, #D2D3D8 51.56%, #DFE1E3 100%);
}

.header-logo{
	width: 500px; margin: auto; max-width: 90%;
}


@media (max-width: 768px) {
    header{
        height: 900px !important;
    }
    .shape-2{
        position: absolute;
        top: 900px !important;
        right: 0;
        width: 150px;
    }
    .container{
        padding-left: 15px;
        padding-right: 15px;
    }
    .cta-2{
        padding-top: 110px;
        height: 550px !important; 
        display: block !important; 
    }
    .shape-3{
        width: 150px !important; 
        top: 0 !important;
    }
    h2.title{
        font-size: 24px;
    }
}
@media (max-width: 1024px) {
    .cta-2{
        height: 600px !important; 
    }
}

@media (max-height: 900px) {
    header{
        height: 700px !important;
    }
    .header-logo{
		width: 300px; margin: auto; max-width: 90%;
	}
}


.btn-cm{
    font-family: 'Domine', serif !important;
    padding:25px 40px;
    transition: all 0.2s;
    font-weight: bold;
    border-radius: 50px !important;
}
.btn-cm.btn-sm{
    padding:20px 30px;
    font-size: 14px;
}
.btn-cm.btn-primary{
    background-color: var(--tone);
    border-color: var(--tone);
    color: white;
}
.btn-cm.btn-primary:hover{
    color: white;
    background-color: var(--tone-dark);
    border-color: var(--tone-dark);
}
.btn-cm.btn-dark{
    background-color: transparent;
    border-color: var(--dark-text);
    color: var(--dark-text);
}
.btn-cm.btn-dark:hover{
    color: white;
    background-color: var(--dark-text);
    border-color: var(--dark-text);
}
.btn-cm.btn-white{
    background-color: transparent;
    border-color: white;
    color: white;
}
.btn-cm.btn-white:hover{
    color: var(--dark-text);
    background-color: white;
    border-color: white;
}


html, body{
    padding: 0;
    overflow-x: hidden;
    background-color: #FAF8F1;
    font-family: 'Domine', serif !important;
    color: var(--light-text) !important;
}


.cta-2{
    background-size: cover; 
    height: 550px; 
    background-position-y: bottom; 
    display: flex; 
    align-items: center; 
    justify-content: center;
}

.main-nav{
    background-color: var(--dark-text);
    position: fixed;
    top: -80px;
    left: 0;
    width: 100%;
    z-index: 99;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    transition: all 0.3s;
}
.main-nav.active{
    top: 0;
}


.play-btn{
    transition: all 0.3s;
    width: 80px;
    position: absolute; 
    left:50%; top:50%; 
    transform: translate(-50%, -50%);
    cursor: pointer;
    transform-origin: center;
}
.play-btn:hover{
    transform: translate(-50%, -50%) scale(1.20);
}

.shape-1{
    position: absolute;
    top: 900px;
    left: 0;
    width: 400px;
}
.shape-2{
    position: absolute;
    top: 1000px;
    right: 0;
    width: 150px;
}
.shape-3{
    position: absolute; 
    top: 0; 
    width: 250px; 
    right: 0;
}
.shape-4{
    position: absolute; 
    left: 0;
    width: 400px;
}
.shape-5{
    position: absolute; 
    bottom: 0px; 
    width: 120px; 
    right: 0;
}

.swiper-next, .swiper-prev {
    position: absolute;
    top: 50%;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-swiper{
	display: flex;
	align-items: center;
	color: white;
	justify-content: center;
	border-radius: 50%;
	width: 45px;
	color: #7352b9;
}
.swiper-next{
	right: 10px;
}
.swiper-button-next, .swiper-button-prev{
	width: unset !important;
}
.swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after{
	content: '' !important;
}
.swiper-button-prev:after, .swiper-container-rtl .swiper-button-prev:after{
	content: '' !important;
}
.swiper-pagination-bullet {
    width: 13px !important;
    height: 13px !important;
}
.swiper-pagination-bullet-active {
    background: var(--dark-text) !important;
}
.swiper-pagination.yellow .swiper-pagination-bullet{
	background: white !important;
    opacity: 0.5 !important;
}
.swiper-pagination.yellow .swiper-pagination-bullet-active {
    background: var(--tone) !important;
    opacity: 1 !important;
}

footer{
    background-color: var(--dark-text);
    color: white;
}
.blog-entry img{
    width: 100%; height: 400px; object-fit: cover; border-radius: 8px;
}
@media (max-width: 768px) {
    .blog-entry img{
        height: 300px !important;
    }
    .shape-4{
        top: -20px;
        width: 300px;
    }
    .shape-5{
        position: absolute; 
        top: -100px; 
        width: 80px; 
        right: 0;
    }
}


/*-------------CHECKOUT-----------*/


.cart-content{
    max-width: 60%; margin: auto;
}
@media screen and (max-width: 1350px){
    .cart-content{
        max-width: 80%; margin: auto;
    }
}
@media screen and (max-width: 992px){

    .cart-content{
        max-width: 90%; margin: auto;
    }
}
@media screen and (max-width: 768px){
   
  
    .order-content{
        height: 100%; padding: 20px 0;
    }
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

/*--------BUEFY---------*/

.b-steps .steps .step-items .step-item.is-active .step-marker{
    background-color: var(--tone) !important;
    border-color: var(--tone) !important;
    color: white !important;
}
.b-steps .steps .step-items .step-item.is-previous .step-marker{
	background-color: #fff !important;
    border-color: var(--tone) !important;
    color: var(--tone) !important;
}
.tabs a{
	border-bottom-width: 3px !important;
}
.tabs li.is-active a{
	border-bottom-color:  var(--tone) !important;
    color:  var(--tone) !important;
}

.pagination-link.is-current {
    background-color: #ffe08a !important;
    border-color: #ffe08a !important;
    color: #fff;
}
.pagination-link[disabled], .pagination-next[disabled], .pagination-previous[disabled] {
    background-color: #dbdbdb;
    border-color: #dbdbdb;
    box-shadow: none;
    color: #7a7a7a !important;
    opacity: .5;
}





.cta-3 .product-image{
	width: 100%;
}
.cta-3 .image-left{
	position: absolute; left: 0; bottom: 0; width: 500px;
}
.cta-3 .image-right{
	position: absolute; right: 0; top: -400px; width: 300px;
}
@media screen and (max-width: 992px){
	.cta-3 .image-left{
		position: absolute; left: 0; bottom: 0; width: 250px;
	}
	.cta-3 .image-right{
		position: absolute; right: 0; top: -200px; width: 200px;
	}
}
@media screen and (max-width: 769px){
    .cta-3 .product-image{
		width: 80%;
		margin: auto;
	}
	.cta-3 .image-left{
		position: absolute; left: 0; bottom: 0; width: 200px;
	}
	.cta-3 .image-right{
		position: absolute; right: 0; top: -150px; width: 150px;
	}
}
@media screen and (max-width: 400px){

	.cta-3 .image-right{
		position: absolute; right: 0; top: -100px; width: 100px;
	}
}




/*----------BLOG------------*/
.header-entry{
    transition: all 0.5s;
}
.header-entry:hover{
    transform: translateY(-5px);
}
.header-entry img{
    border-radius: 8px;
    width: 100%; 
    object-fit: cover; 
    height: 350px
}
.header-entry .category{
    position: absolute;
    bottom: 25px;
    right: 25px;
    padding: 8px 15px;
    border-radius: 10px;
    background-color: #faca75;
    color: #4a4745;
    cursor: pointer;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    transition: all 0.3s;
}
.header-entry .category:hover{
    transform: translateY(-10px);
}
.header-entry .title{
    font-size: 40px;
}
.header-entry .left{
    width: 55%; position: relative
}
.header-entry .right{
    width: 45%; position: relative
}
@media screen and (max-width: 992px){
    .header-entry .title{
        margin-top: 5px;
        font-size: 20px;
    }	
}


.entry{
    transition: all 0.5s;
}
.entry:hover{
    transform: translateY(-5px);
}
.entry:hover .title{
    color: var(--tone);
}
.entry img{
    border-radius: 8px;
    width: 100%; 
    object-fit: cover; 
    height: 250px
}
.entry .title{
    font-size: 20px;
}
.entry-text{
    margin-top: 8px;
    color: var(--light-text);
    font-weight: normal;
}
.entry-date{
    margin-top: 8px;
    color: var(--light-text);
    font-weight: normal;
}

.promo-input input{
	height: 42px;
}


.checkout{
	overflow-x: hidden;
}
.checkout .left-column{
	background-color: white;
}
.checkout .right-column{
	position: fixed; 
	right: 0;
	height: 100%;
}
.checkout .logo-checkout img{
	width: 400px;
}
@media screen and (max-width: 769px){
    .checkout .left-column{
		background-color: white; height: auto; overflow-y: unset;
	}
	.checkout .logo-checkout{
		text-align: center;
		margin: auto;
	}
	.checkout .logo-checkout img{
		width: 300px;
	}
	.checkout .right-column{
		position: unset; 
	}
}






.header-shape-1{
	width: 350px;
}
.header-shape-2{
	width: 300px;
}

.header-slider-image{
	height: 450px; 
	object-fit: 
	cover; width: 100%; 
	border-radius: 8px;
}



@media screen and (max-width: 500px){
	.centered-mobile{
		text-align: center;
	}
	.header-slider-image{
		height: 350px; 
		object-fit: 
		cover; width: 100%; 
		border-radius: 8px;
	}
	.header-shape-1, .header-shape-2{
		display: none;
	}

}


.shape-2b{
    position: absolute;
    top: 0;
    right: 0;
    width: 150px;
}