@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
	/*GRID*/
	--grid-width: 1200px !important;
	--grid-gutter: 20px;
	
	/*TEXT*/
	--text-family: 'Montserrat', sans-serif;
	
    --text-fsize: 16px;
	--text-md-fsize: 17px;
	--text-sm-fsize: 14px;

	--text-lheight: 1.2rem;
	--text-md-lheight: 1.69rem;
	--text-sm-lheight: 1.49rem;

	/*BASE BUTTON*/
	--btn-text-family: 'Montserrat', sans-serif;
	--btn-padding: 0.9rem 1.9rem;
	--btn-fsize: 0.92rem;
	--btn-lheight: 1.2rem;

	/*COLORS*/
	--color-primary: #1D1D1B;
	--color-secondary: #CC6DE3;
	--color-black: #21211f;
	--color-white: #fff;
	--color-gray: #f1f1f1;
	--color-light-gray: #f5f5f5;
    --color-gray-dark: #383838;
    --color-border: #afafaf;
    --color-alert: #FAFF00;


    /*CUSTOM VARS*/
    --gallery-img-height: 1;
}

@keyframes animatedBackground {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -10000px -10000px;
    }
}

[data-ae-animation]{
    transition-property: opacity;
    transition-duration: 0.8s;
    opacity: 0;
}
[data-ae-animation].animated {
    opacity: 1;
}


:target:before {
	content:"";
	display:block;
	height:100px; /* fixed header height*/
	margin:-100px 0 0; /* negative fixed header height */
}

html, body{
    font-family: var(--text-family);
    font-size: var(--text-fsize);
    line-height: var(--text-lheight);
    color: var(--color-black);
	scroll-behavior: smooth;
}

ul:not(.menu):not(.slides):not(.accordion):not(.tabs):not(.tabs-content), ol:not(.menu):not(.slides):not(.accordion):not(.tabs):not(.tabs-content) {
    line-height: var(--text-lheight);
}
    
body{overflow-x: hidden;}
  
.row{ max-width: var(--grid-width); margin: auto;}
.row.plus{ max-width: 65% }
.row.wide{ max-width: 85% }
.row.fullwidth{ max-width: 100% }

a{
    text-decoration: none;
    color: var(--color-gray-dark);
    transition: 0.25s;
}

a:hover{
    color: var(--color-secondary);
}

a.c-primary:hover{color: var(--color-gray-dark) !important;}

a img{transition: 0.25s;}
a:hover img{opacity: 0.7;}

h1, h2, h3, h4, h5, h6{
    font-family: var(--text-family);
    margin-bottom: 10px;
    color: var(--color-primary)
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    font-weight: 500;
    line-height: 1.2;
}

h1, .h1{font-size: 3rem;margin-top:30px;}
h2 strong{font-size: 2.57rem;}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong{
    font-family: var(--text-family);
    font-weight: 700;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    color: var(--color-primary)
}
h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a{
    color: var(--color-secondary)
}

.h2, h2 {
    font-size: 2rem;
    text-transform: none;
}

.h3, h3 {
    font-size: 1.75rem;
}

.h5, h5 {
    font-size: 1.19rem;
    color: var(--color-black)
}

.menu > li {
    position: relative;
    float: none;
    display: inline;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0px;
    line-height: 1.5rem;
  }

.menu > li:hover > a {
    background: none;
    opacity: 0.8;
}


.button{
    font-family: var(--btn-text-family);
    background: var(--color-primary);
    padding: var(--btn-padding); 
    font-size: var(--btn-fsize); 
    line-height: var(--btn-lheight); 
    color: var(--color-white);
    font-weight: 500;
    text-align: center;
    box-shadow: none;
    border: 1px solid var(--color-black);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.button, button{transition: 0.25s;}
.button:hover{background: var(--color-secondary);border-color: var(--color-secondary);color: var(--color-black);}
.button:disabled,
  .button[disabled]{
  border: 2px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: no-drop
}
.button[disabled]:hover {
        color: #666666;
}

.button.pill{border-radius: 500px;}

.button.transparent{
    border-color: transparent;
    background: var(--color-secondary);
    color: var(--color-primary);    
    padding: 0.6rem 1.8rem;
    font-size: 0.7rem !important;
    min-width: 50px;
}

.button.transparent:hover, .card:hover a.button.transparent{
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.outline-button{
    display: inline-block;
    background-color: transparent;
    border: 2px solid var(--color-primary); 
    border-radius: 6px; 
    padding: 0.5rem;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    color: var(--color-primary);
    text-align: center;
    transition: all 0.5s;
    font-size: 0.9rem;
    font-weight: 700;
  }
  .outline-button:hover{
    background-color: var(--color-primary);
    color: var(--color-gray);
  }
  .outline-button:disabled,
  .outline-button[disabled]{
  border: 2px solid #999999;
  background-color: #cccccc;
  color: #666666;
  cursor: no-drop
}
.outline-button[disabled]:hover {
        color: #666666;
}

.cta .button.transparent{
    font-size: 0.9rem  !important;
    padding: 1rem 2.6rem;
    border-color: var(--color-white);
    color: var(--color-white);
    background: transparent;
}
.cta .button.transparent:hover{
    background: var(--color-white);
    color: var(--color-black);
}

.card:hover a.button.transparent{
    min-width: 100%;
}

.card a.button.transparent{transition-delay: 0.25s;}
.card:hover a.button.transparent{transition: 0s;}


.btn-social{
    color: inherit;
    font-size: 1.7rem;
    margin: 0.25rem;
}



label{
    display: block;
    margin-bottom: 5px;
    color: var(--color-primary)
}
input[type], textarea, select{
    border: 1px solid var(--color-black);
    border-radius: 0px;
    transition: 0.35s;
    padding-left: 15px;
}
input:focus, textarea:focus, select:focus{
    box-shadow: 0 0 2px var(--color-secondary) !important;
    border-color: var(--color-secondary);
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-family: var(--text-family);
    font-style: normal;
    opacity: 1;
}

.input-radio-box input[type="radio"],
.input-radio-box input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float: left;
    margin: 3px 7px 0 0;
    cursor: pointer;
    bottom: 4px;
    position: relative;
}
  
.input-radio-box input[type="radio"]:checked,
.input-radio-box input[type="checkbox"]:checked {
    background: var(--color-black);
    border-color: var(--color-black);
}


[class^="flex-list-"]{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    width: calc(100% + (2 * var(--grid-gutter)));
    max-width: 100%;
}

[class^="flex-list-"] li{
    padding: 0 var(--grid-gutter) 20px;
}

.flex-list-4 li{width: 25%;}
.flex-list-5 li{width: 20%;}
.flex-list-6 li{width: 16.6666666%;}


/* ----- Bootstrap fixs ------- */

img{max-width: 100%;}
a{display: inline-block;}

ul.il-list{padding-left: 0;}

.text-left{text-align: left !important;}
.text-right{text-align: right !important;}

.align-items-center {
    display: flex;
    align-items: center !important;
}

.align-items-top {
    display: flex;
    align-items: start !important;
}

.c-primary{color: var(--color-primary) !important}
.c-secondary{color: var(--color-secondary) !important}
.c-gray{color: var(--color-gray) !important}
.c-white{color: var(--color-white) !important}
.c-black{color: var(--color-black) !important}

.bg-primary{background: var(--color-primary) !important}
.bg-secondary{background: var(--color-secondary) !important}
.bg-black{background: var(--color-black) !important;}
.bg-white{background: var(--color-white) !important;}
.bg-light-gray{background: var(--color-light-gray) !important;}
.bg-gray {background-color: var(--color-gray);}

.row .row{margin: 0 -0.75rem;}

.modal-footer {display: block;}
input, textarea, select{width: 100%;outline: 0 !important;}

.d-block{display: block !important;}
.d-flex{display: flex !important;}
.d-flex.text-left{justify-content: start;}
.d-flex.text-center{justify-content: center;}
.d-flex.text-right{justify-content: end;}

.justify-content-between {justify-content: space-between !important;}

.fw-bolder {
    font-weight: bolder !important;
  }

/* ---------------- WEBSITE STYLES --------------------- */

.logo, .nav-bar .logo{
    max-width: 80px;
    height: auto;
    margin: 0;
    max-height: initial;
    margin: auto;
    width: 100%;
    object-fit: contain;
}

header{
    padding: 10px 0;
}

nav a{color: var(--color-gray-dark);}
nav a:hover {
    color: var(--color-secondary);
  }
nav a:not(:last-of-type){margin-right: 20px;}


hr.divider {
    border-top: 1px solid var(--color-border);
    margin-left: 7.5%;
    margin-right: 7.5%;
    text-align: center;
}

.nav-bar{
    padding: 10px 0;
    background: var(--color-gray);
}
.nav-bar.nav--fixed:not(.bg--dark):not(.bg--primary):not(.bg--white) {
    background: var(--color-gray);
  }

.nav-cart-ops a.nav-function i{
    font-size: 1.2rem;
    margin: 0 5px;
}

/* ------------Animação links na nav  ------------- */
.navlink {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: var(--color-primary);
}
.navlink::before,
.navlink::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: transform 0.25s;
}
.navlink::before {
    top: -3px;
    transform-origin: left;
}
.navlink::after {
    bottom: -3px;
    transform-origin: right;
}
.navlink:hover::before,
.navlink:hover::after,
.active::before,
.active::after {
    transform: scaleX(1);
}
/* ------------END Animação links na nav  ------------- */

.banner-home .button{
    padding: 15px 65px;
    font-size: 0.9rem !important;
    background: var(--color-primary);
    color: var(--color-white);
}

.banner-home .button:hover{opacity: 0.75;}

.banner-img {
    background: var(--bg-img) no-repeat center center / cover;
    --tamanho: 120px;
    border-top-left-radius: var(--tamanho);
    border-bottom-right-radius: var(--tamanho);
    height: 500px;
    position: relative;
    margin-bottom: 4.25rem;
    transform-style: preserve-3d;
}
.banner-img::after {
    content: " ";
    display: block;
    border: 2px solid var(--color-border);
    position: absolute;
    height: 100%;
    width: 100%;
    top: 1.25rem;
    left: 1.25rem;
    border-top-left-radius: var(--tamanho);
    border-bottom-right-radius: var(--tamanho);
    z-index: -1;
    transform: translateZ(-1px);
}


.cta{
    background-color: var(--color-black);
    background-image: url(/img/bg.jpg);
    background-blend-mode: color-burn;
    background-size: 500px;
    background-repeat: repeat;
    padding: 2.5rem 2rem;
    text-align: center;
}
.cta h2{color: var(--color-white);margin-bottom: 0;}

.card{
    background: var(--color-white);
    border: 1px solid transparent;
    transition: 0.25s;
    transition-delay: 0.15s;
}

.card:hover{
    border: 1px solid var(--color-primary);
}

.card:hover img{
    content: var(--src);
}


/* ------------Card Destaques  ------------- */
.cardd_ {
    position: relative;
    width: auto;
    background-color: var(--color-primary);
    overflow: hidden;
    
  }
  
  .cardd__image {
    height: auto;
    width: 100%;
    object-fit: cover;
    scale: 1.15;
    max-height: 178px;
    transition: opacity 0.25s, scale 0.35s;
  }
  
  .cardd_:hover .cardd__image {
    opacity: 0.8;
    scale: 1;
  }
  .cardd__big_image {
    height: auto;
    width: 100%;
    object-fit: cover;
    scale: 1.15;
    transition: opacity 0.25s, scale 0.35s;
  }
  
  .cardd_:hover .cardd__big_image {
    opacity: 0.8;
    scale: 1;
  }
  
  .cardd__body {
    position: absolute;
    inset: 0;
    padding: 25px;
    padding-bottom: 5px;
    color: black;
    text-align: center;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    row-gap: 5px;
    justify-content: flex-start;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.75),
                                        rgba(255, 255, 255, 0.60),
                                        rgba(255, 255, 255, 0) ,transparent);
  }
  
  .cardd__body::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 2px solid black;
    opacity: 0;
    scale: 1.25;
    transition: opacity 0.25s, scale 0.25s;
  }
  
  .cardd_:hover .cardd__body::before {
    opacity: 1;
    scale: 1;
  }
  
  .cardd__body a{
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: end;
    padding: 2.2rem 0.25rem;
    width: 100%;
    color: var(--color-black) !important;
    transition: 0.6s;
}
.cardd__body a:hover{
      opacity: 0.7;
}

.small-title .cardd__body a{
    padding: 1.8rem 0.125rem;
}
  
  .cardd__title {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bolder;
  }
  
  .small-title .cardd__title {
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 1rem;
  }

  
  .cardd__description {
    font-size: 1rem;
    opacity: 0;
    translate: -25px;
    transition: opacity 0.25s, translate 0.25s;
  }
  
  .cardd_:hover .cardd__description {
    opacity: 1;
    translate: 0;
  }
  
  /* ------------Card Destaques  ------------- */

  /* TOGGLE FAVORITO */
.fav-box .active i::before {
    content: "\f415";
}
.fav-box i::before {
    content: "\f417";
}


/* ------------Card Produtos  ------------- */

.masonry__item{
    min-height: 280px;
}
.card-title{
    min-height: 3rem;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2;
   -webkit-box-orient: vertical;
}
.card-prod {
    position: relative;
    width: 100%;
    max-height: 230px;
    background-color: var(--color-primary);
    overflow: hidden;
    max-width: 600px;
}
  
.card-prod-img {
    height: auto;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    opacity: 0.9;
}
  
.card-prod-img-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.5rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--color-primary);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
  
.card-prod:hover .card-prod-img-overlay {opacity: 1;}
  
.btn-card {
    font-size: 1rem;
    text-decoration: none;
    background-color: var(--color-primary);
    color: var(--color-gray);
}
  
.btn-card:hover {color: var(--color-secondary);}
  
.card-prod:hover .btn-card {background-color: var(--color-primary);}
  
  /* ------------Card Produtos  ------------- */

.masonry .masonry__container {
    overflow: visible;
}

  /* ------------Card Social  ------------- */
.social-card {position: relative;}
  
.image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.2s ease-in-out;
    position: relative;
}
  
.middle {
    transition: .5s ease;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 2rem;
}
  
.social-card:hover .image {filter: brightness(50%);}
  
.social-card:hover .middle {
    opacity: 1;
    color: var(--color-gray);
}
  
/* ------------Card Social--------------- */

/* ------------Galeria Produto--------------- */
.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    --tamanho: 5%;
    border-top-left-radius: var(--tamanho);
    border-bottom-right-radius: var(--tamanho);
    max-height: 500px;
  }
  
  .splide__slide {
    opacity: 0.6;
  }
  
  .splide__slide.is-active {
    opacity: 1;
  }
  
  .splide:not(.is-overflow) .splide__list {
    justify-content: center;
  }

  #thumbnail-carousel {
    margin-top: -3rem;
  }
  
/* ------------Zoom Galeria Produto--------------- */

figure.zoom img:hover {
    opacity: 0;
  }
  figure.zoom img {
    transition: opacity .5s;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    --tamanho: 5%;
    border-top-left-radius: var(--tamanho);
    border-bottom-right-radius: var(--tamanho);
  }
figure.zoom {
    background-position: 50% 50%;
    position: relative;
    overflow: hidden;
    cursor: zoom-in;
    --tamanho: 5%;
    border-top-left-radius: var(--tamanho);
    border-bottom-right-radius: var(--tamanho);
  }



/* ------------Alert message box------------ */
.alert {
    background-color: var(--color-alert);
    color: var(--color-primary);
    margin-top: 10px;
    margin-bottom: 10px;
    border: 2px solid var(--color-primary);
    padding: 0.5rem;
    width: 100%;
}

.valor{
    color: var(--color-secondary);
}

label{
    margin-bottom: 5px;
}

footer{
    /* background-color: var(--color-light-gray); */
    padding: 0 0 2rem;
    color: var(--color-black);
    margin-top: 40px;
}

footer *:not(h3){color: inherit;}
footer h3{margin-bottom: 30px;}

footer a {
    color: var(--color-gray-dark);
    text-decoration: none;
    margin: 0 10px;
    margin-left: 0;
}
  
footer a:hover {
    color: var(--color-secondary);
}
  
footer p {
    margin: 0 0 15px;
    line-height: normal;
}

footer .logo {
    max-height: 80px;
}


/* ----------------- RESPONSIVE -------------------- */

/* Mobile only */
@media (max-width: 575.98px) {
    :root{
        --gallery-img-height: 0.3;
    }

    html, body{
        font-size: var(--text-sm-fsize);
        line-height: var(--text-sm-lheight);
    }
    
    .row.wide{max-width: 95%;margin-left: auto;margin-right: auto;}
    
    .flex-list-4 li{width: 100%;}

    .card-details {
        text-align: start;
      }

      nav a:not(:last-of-type) {
        margin-right: 0;
      }

    .menu {
        display: flex;
        flex-direction: column;
        text-align: start;
    }

    .perfil-buttons {
        display: flex;
        gap: 2rem;
        padding: 2rem 0;
    }

    .slider-banner-image .align-items-center {
        align-items: unset !important;
        flex-direction: column;
    }
    .splide__slide img {
    max-height: 220px;
    }

    .card-title {
    min-height: 1.5rem;
    }

    .cart-details {
        display: flex;
        flex-direction: column;
        align-items: end;
    }
    .card-encomenda .card__body {
        align-items: end;
        text-align: end;
    }

    footer {text-align: center !important;}

}

/* Tablet only */
@media (min-width: 576px) and (max-width: 991.98px) { 
    html, body{
        font-size: var(--text-md-fsize);
        line-height: var(--text-md-lheight);
    }
    
    .flex-list-4 li{width: 50%;}

    .slider-banner-image .align-items-center {
        align-items: unset !important;
        flex-direction: column;
    }

    footer {text-align: center !important;}
    
}

/* Desktop only */
@media (min-width: 992px) { 

}