:root{
    --text-color: #e7e7e7;
    --price-old-color: #818181;
    --highlight-color: #efb94c;
    --bg-shinny: #1b1b1b;
    --bg-light: #0e0e0e;
    --bg-solid: #050505;    
    --bg-solid-rg: rgba(5,5,5,1);
    --open-color: #00d309;
    --close-color: #fb0055;
    
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

*{
    padding: 0;
    margin: 0; 
    font-family: "Poppins", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;  
    color: var(--text-color);
    font-style: normal;
    font-size: 14px
}

::-webkit-scrollbar {
    display: none;
    width: 0.5rem;
    height: 0.5rem;    
}
   
::-webkit-scrollbar-track {
    background: var(--bg-solid);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-light);
    border-radius: 1rem;  
}

::-webkit-scrollbar-thumb:active{
}

::-webkit-scrollbar-thumb:hover {
    /*background: @brand-color-light;*/
}


a{
    text-decoration: none;    
}

.security-zone{
    width: 100%;
    background-color: var(--bg-solid);    
    /*overflow: hidden;*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
}

html, body {     
    /*scroll-behavior: smooth;    */
}

html, body, .security-zone{
    /*height: 100%;*/
    position: relative;
}

.tiktok-page{
    height: 100%;
}

body.tiktok-page .security-zone{
    height: 100%;
    overflow: hidden;
}

body{
   background-color: #000;
   /*display: flex;   */
}

body.tiktok-body .security-zone{
    /*scroll-snap-type: end;*/
}


section{
    padding: 1rem;    
    scroll-behavior: smooth;
}

#catalogue.tiktok-mode {
    scroll-snap-type:y mandatory;
    padding: 0;    
    overflow: hidden auto;  
}

#catalogue.tiktok-mode .catalogue-section{
    display: flex;
}

body header{
    background-color: var(--bg-light);    
    display:  flex;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9;
}

body header .btns{
    display: flex;
    align-items: flex-start;
    margin-top: 2.6rem;
}

body header .btns:last-child{
    margin-right: 0.5rem;
}

body header.tiktok-header{        
    /*position: absolute;*/
    /*z-index: 9;*/
    top: 0;
    background: transparent;
    /*padding-bottom: 3rem;*/
}

body header.tiktok-header .state-open{
    display: flex;
    align-items: flex-end;
}

body header.tiktok-header .state-open .backButton{
    margin-right: 1rem;
    padding: 0.5rem 0.5rem 0 0.5rem;
}

body header .h #current-section{
    padding: 0;
}

body header .h #current-section a{
    width: auto;
    padding: 0 1rem;
}


body header .logo{    
    padding-left: 1rem;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body header .logo img{
    width: 100%;
}

body header .h .state-open{
    padding: 0 1rem;    
    height: 35px;
    color: var(--close-color);
    display: flex;
    align-items: flex-end;
}

body header .h .state-open.open{
    color: var(--open-color)
}

body header .h{
    display: flex;
    flex-direction: column;
    flex: 1;
}

body header .h h1{
    flex: 1;
    padding-left: 1rem;
    line-height: 2rem;
    margin-top: 0.3rem;
}


body header .tiktok{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;        
    padding: 0.5rem 0.8rem;
    
    cursor: pointer;
}

body header .tiktok i{
    font-size: 1.4rem;
    padding-bottom: 0.1rem;
    transition: transform 0.2s;
}

body header .tiktok:hover i{
    transform: scale(1.2);
}

body header .cart{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.5rem 0.8rem;        
    cursor: pointer;
}

body header .cart .icon{
    transition: transform 0.2s;
}

body header .cart .icon i {
    font-size: 1.4rem;
}

body header .cart:hover .icon{
    transform: scale(1.2);
}

body header .cart .quantity{
    position: absolute;
    color: var(--bg-light);
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 1.2rem;
    top: 0;
    right: 0;
    background-color: var(--highlight-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    line-height: 1.2rem;
}

body header .cart .quantity.hide{
    display: none;
}

body header h1,
body header h1 a{
    font-size: 1.8rem;
    font-weight: 500;    
}

body header .search{
    padding: 0.5rem;
    background-color: var(--bg-solid);
    display: flex;    
}

body header .search input{    
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    background-color: unset;

    border: none;
    color: var(--highlight-color);
    padding-left: 1rem;
}

section#catalogue{
    flex: 1;
    /*overflow: hidden auto;*/
    padding-top: 0;
    /*padding-bottom: 180px;*/
}

section#catalogue::-webkit-scrollbar {
    display: none;
    width: 0.5rem;
    height: 0.5rem;    
}

section#catalogue.tiktok-mode{
    padding-bottom: 0;
    /*margin-top: -111px;*/
}

section#catalogue.tiktok-mode .video-mask-image {
    position: fixed;
    z-index: 8;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0 auto;

    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.8) 11%,
        rgba(0, 0, 0, 0.5) 18%,
        transparent 40%

    );
}
   
::-webkit-scrollbar-track {
    background: var(--bg-solid);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-light);
    border-radius: 1rem;  
}

::-webkit-scrollbar-thumb:active{
}

::-webkit-scrollbar-thumb:hover {
    /*background: @brand-color-light;*/
}

.noDisplay{
    height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

h3{
    padding: 1rem 0;
    font-size: 1.25rem;      
    display: flex;  
}

h3 a {
    font-weight: 500;
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
}



/***************   CATALOGUE   *************************/

#catalogue {
    position: relative;
}

#catalogue:not(.tiktok-mode){
    padding-bottom: 100%; 
}
/*
#catalogue #current-section{    
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
    background-color: var(--bg-solid);
}
*/

#catalogue .catalogue-section:last-child{
    /*padding-bottom: 100%;*/
}

#catalogue.tiktok-mode .catalogue-section:last-child{
    padding-bottom: unset;
}

#catalogue h3.toSection{
    padding: 2rem 0 2rem .5rem;
    flex-direction: column;
}

#catalogue h3.toSection a {
    font-size: 1.3rem;
    text-align: start;
}

/* #catalogue h3.toSection small {
    text-align: center;
} */

#catalogue h3.toSection small pre{
    text-wrap: auto;
    font-size: .9rem;
}

.products{
    display: flex;
    flex-direction: column;
    gap: .7rem;
}



.products .product{
    display: flex;
    padding: 0.5rem;
    gap: 1rem;
    background-color: var(--bg-light);
    border-radius: 1rem;
}

.products .product:last-child{
    margin-bottom: 0;
}

.products .product .multimedia{
    width: 110px;
    height: 110px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
}

.products .product .multimedia .image{    
    display: flex;
    align-items: center;
    justify-content: center;    
    overflow: hidden;    
    border-radius: 0.8rem;
    height: 100%;
    width: 100%;
    position: relative;
}

.products .product:hover .multimedia .image img{
    transform: scale(1.1);
}


.products .product .multimedia .image img{
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.products .product .multimedia .image img.logo{    
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
}


.products .product .information{
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.products .product.no-image{
    max-height: 110px;
    height: auto;
    
}

.products .product.no-image .information{
    flex-direction: row ;
}

.products .product.no-image .identity{
    margin-right: 0.5rem;
    margin-bottom: 0;
}

.products .product .information .identity{
    flex: 1;
    overflow: hidden;
}

.products .product .information .name{
    font-size: 1.1rem;
    font-weight: 500;
    /*margin-bottom: 0.5rem;    */
    line-height: 1.5rem;
    display: flex;
    align-items: center;
}

.products .product .information .name .logo{
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}

.products .product .information .name .logo img{
    width: 100%;
}

.products .product .information .price{
    display: flex;
    margin-bottom: .2rem;
    align-items: center;
}

.products .product .information .price span{
    color: var(--highlight-color);    
    font-weight: 700;    
    font-size: 0.9rem;
    letter-spacing: 0.2px;
}

.products .product .information .price span.offer{
    color: var(--price-old-color);
    font-style: normal;
    font-weight: 300;
    text-decoration: line-through;
    margin-left: 1rem;
    /*font-size: 0.8rem;*/
}

.products .product .information .description{
    font-size: .8rem;
    color: #eee;
    text-overflow: ellipsis;    
    overflow: hidden;
}

.products .product .information .actions{
    display: flex;
    gap: .7rem;
    justify-content: flex-end;
    align-items: end;
}

/************************ TIKTOKMODE  ***********************/

.tiktok-mode .tiktok-product{
    scroll-snap-align: start;
    padding: 0;
    height: 100%;
    position: relative;
    display: flex;
    /*height: 100vh;*/
}

.tiktok-mode .tiktok-product .videoMultimedia {
    /*height: 610px;*/
    height: 100%;
    width: 100%;
    display: flex;
    position: relative;
    /* max-height: 100vh; */
    margin: auto 0;
    align-items: center;
    justify-content: center;
}

.tiktok-mode .tiktok-product .videoMultimedia .hashblur{
    width: 100%;
    height: 100%;
    position: absolute;
    
}

.tiktok-mode .tiktok-product .videoMultimedia .hashblur canvas {
    height: 100%;
    width: 100%;
}



.tiktok-mode .tiktok-product .videoMultimedia .image{    
    background: transparent;
    width: 100%;
    height: 100%;
}

.tiktok-mode .tiktok-product .videoMultimedia .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 9 / 16;
    position: absolute;
    
    background: transparent;

}

.tiktok-mode .tiktok-product .videoMultimedia video{
    aspect-ratio: 9 / 16;
    width: 100%;
    margin: auto;
    /* position: absolute; */
    background: transparent;
    object-fit: cover;
    height: 100%;
    /* max-height: 100vh; */
    height: 100%;
}

.tiktok-mode .tiktok-product .information{
    position: absolute;
    bottom: 0;
    display: flex;
    width: 100%;
    padding: 4rem 1rem 1rem 1rem;
    background: rgba(255,255,255, 0.7);
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,0.9) 100%);    
    
}

.tiktok-mode .tiktok-product .information .identity {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.tiktok-mode .tiktok-product .information .identity .name{
    font-weight: 700;
    font-size: 1.4rem;
}

.tiktok-mode .tiktok-product .information .identity .price span{
    color: var(--highlight-color);
    font-weight: 700;
}

.tiktok-mode .tiktok-product .information .identity .price span.offer{
    color: var(--price-old-color);
    font-style: normal;
    font-weight: 300;
    text-decoration: line-through;
}

.tiktok-mode .tiktok-product .information .description{
    white-space: break-spaces;
}



.tiktok-mode .tiktok-product .information .actions{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.tiktok-mode .tiktok-product .information .actions .shareAction,
.tiktok-mode .tiktok-product .information .actions .like-it{
    margin-bottom: 0.5rem;
}

.tiktok-mode .tiktok-product .information .actions .shareAction{
    margin-right: 1px;
    margin-bottom: 0.2rem;
}
/*
#catalogue.tiktok-mode #current-section{
    position: fixed;    
    left: 0;
    top: 4.8rem;
    padding: 0;
    z-index: 10;
    background-color: transparent;
    width: auto;
}

#catalogue.tiktok-mode #current-section a{
    width: initial;
    padding-left: 1rem;
}*/

.shareAction,
.like-it{
    padding: 0.5rem;
    transition: transform 0.2s;
    /*margin-bottom: 0.5rem;*/
    cursor: pointer;
    display: flex;
    align-items: center;
}


.shareAction:hover,
.like-it:hover{
    transform: scale(1.2);
}

.shareAction i,
.like-it i{
    font-size: 1.2rem;   
}



.like-it i{
    display: none;
}

.like-it i.like-on{
    color: red;
}

.like-it i.active{
    display: inherit;
}

.add-cart{
    display: flex; 
    background-color: var(--highlight-color);
    border-radius: 4rem;
    overflow: hidden;
    height: 30px;
    width: 30px;

    transition: width 0.2s;
}

.add-cart .opt{
    padding: 0.2rem 0.6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--bg-light);
    font-size: 1rem;
}

.add-cart .opt i {
    color: var(--bg-light);
    font-size: 1rem;
}

.add-cart .opt.remove,
.add-cart .opt.add{
    transition: transform 0.2s;
    cursor: pointer;
}

.add-cart .opt.remove:hover,
.add-cart .opt.add:hover{
    transform: scale(1.3);
}

.add-cart .opt.remove,
.add-cart .opt.quantity{
    width: 0;
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;

    transition: all 0.2s;
}

.add-cart.open{
    width: auto;    
}

.add-cart.open .opt.remove,
.add-cart.open .opt.quantity{
    width: auto;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
/*******************************************************/

nav{        
    background-color: var(--bg-light);
    min-width: 100%;
    display: flex;        
    scroll-behavior: smooth;    
    overflow-y: hidden;
    overflow-x: auto;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    position: sticky;
    top: 0;
    left: 0;
    align-items: center;
    padding-top: 1rem;
    z-index: 9;
}

nav:not(.tiktok-mode) {
    border-bottom: 1px solid #414141;
}

nav::-webkit-scrollbar{
    display: none;
}

nav .after{    
    position: absolute;
    height: 2.5px;
    background-color: white;
    border-radius: 50rem;
    bottom: 0;
    transition: all 400ms ease-out;
    left: 0;
}

nav .sections{
    display: flex;
    gap: 2rem;
    background: var(--bg-light);
}

nav .section-item{    
    display: flex;
    align-items: center;
    justify-self: center;
    padding: .7rem 0 .7rem 0;
    /* margin-bottom: 2px; */

    transition: translate 300ms ease-out, box-shadow 300ms ease-out;
}

nav .section-item:last-child{    
    margin-right: 1rem;
}

nav .section-item:first-child{    
    margin-left: 1rem;
}

nav .section-item .item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: max-content;
    /* padding: 0 0.5rem; */
}

nav .section-item .item .icon{
    width: 18px;
    height: 18px;
    margin-bottom: 0.2rem;
    display: flex;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%);
    
}

nav .section-item .item .icon img{
    height: 100%;
    margin: auto;
}

/* nav .section-item.active .item .icon{
    filter: brightness(0) saturate(100%) invert(93%) sepia(73%) saturate(1653%) hue-rotate(318deg) brightness(97%) contrast(93%);
} */

/* nav .section-item.active .item .icon i, */
nav .section-item.active .item .name{
    color: white;
}

/* nav .section-item.active {
    translate: 0 -4px;
} */

/* nav .section-item:not(.active):hover {
    box-shadow: -10px 27px 0px -26px var(--highlight-color) inset;
} */

nav .section-item .item .name{
    font-size: 0.8rem;
    text-align: center;
    font-weight: 550;
    color: #bbb;

    transition: color 200ms ease-in-out;
}

nav.tiktok-mode {
    background-color: transparent;
    backdrop-filter: opacity(0.7);
}

nav.tiktok-mode > *:not(.after) {
    background-color: transparent;
}

@media only screen and (min-width: 31em) {
    .security-zone{
        max-width: 390px;
    }

    section#catalogue.tiktok-mode .video-mask-image {
        max-width: 390px;
    }

    #catalogue #current-section{        
        max-width: 390px;
    }
}

/************************ ***********************/
#modal-area,
#modal-area-product{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9;
    transition: all 0.2s;    
    transition-behavior: allow-discrete;
    display: none;
    opacity: 0;
   
}

#modal-area.show,
#modal-area-product.show{
    display: flex;
    opacity: 1;
}

#modal-cart,
#modal-product{
    width: 100%;
    max-width: 390px;
    margin: auto;
    padding: 1rem;
    max-height: 100%;
    display: flex;
    flex-direction: column;
}

#modal-cart .header,
#modal-product .header{
    padding: 0 1rem;
    background-color: var(--bg-solid);
    border-radius: 1rem 1rem 0 0;
    display: flex;    
    align-items: center;
}

#modal-cart .header .close,
#modal-product .header .close{
    cursor: pointer;
    padding: 1rem 0;

}

#modal-cart .header .close:hover,
#modal-product .header .close:hover{
    text-decoration: underline;
}

#modal-cart .header .t,
#modal-product .header .t{
    flex: 1;
    text-align: left;    
    font-size: 1.5rem;
    font-weight: 500;
}

#modal-cart .body,
#modal-product .body{
    padding: 0 1rem;
    background-color: var(--bg-solid);
    flex: 1;
    overflow:hidden auto;
}

#modal-product .body .description{
    white-space: break-spaces;
}


#modal-cart .body::-webkit-scrollbar,
#modal-product .body::-webkit-scrollbar{
    display: none;
    width: 0.5rem;
    height: 0.5rem;    
}

#modal-cart .body .info{
    background-color: var(--bg-light);
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

#modal-cart .body .info p.t{
    font-size: 1.2rem;
    font-weight: 500;  
    margin-bottom: 0.5rem;  
}

#modal-cart .body .info p{
    font-size: 0.8rem;
}

#modal-cart .body .cart-items{
    display: flex;
}

#modal-cart .body .cart-items.products .product{
    height: 140px;
}

#modal-cart .body .cart-items.products .product.default{
    display: none;
}

#modal-cart .body .empty{
    padding: 2rem 0;
}

#modal-cart .body .empty.hide{
    display: none;
}

#modal-cart .foo,
#modal-product .foo {
    padding: 0 1rem 1rem;
    background-color: var(--bg-solid);
    border-radius: 0 0 1rem 1rem;
    display: flex;    
    align-items: center;
}

#modal-cart .foo .total,
#modal-product .foo .total{
    flex: 1;
    text-align: right;
    font-size: 1rem;    
    text-transform: capitalize;
    margin-right: 0.5rem;
    font-weight: 100;
}

#modal-cart .foo .value,
#modal-product .foo .value{
    font-size: 1rem;
    font-weight: 500;
    color: var(--highlight-color);
}

#modal-product .body .image{
    height: 40vh;
    display: flex;
    margin: 1rem 0;
}

#modal-product .body .image.no-image{
    display: none;
}

#modal-product .body .image img{
    height: 100%;
    margin: auto;
    object-fit: cover;
    width: 100%;
}

#modal-product .body .information .actions{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1rem;
    align-items: flex-start;
}

#modal-product .body .information .shareAction,
#modal-product .body .information .like-it{
    margin-right: 0.5rem;
    margin-bottom: 1rem;
}

#modal-product .body .information .like-it{
    margin-right: 0;
}

#modal-product .body .information .identity{
    flex: 1;
    margin-right: 0.5rem;
}

#modal-product .body .information .identity .name{
    font-size: 1.2rem;
    font-weight: 700;    
    
}

#modal-product .body .information .identity .price span{
    font-weight: 500;
    color: var(--highlight-color);
    margin-bottom: 0.5rem;    
}

/***************************** LOGO *******************************/

.p404{
    height: 100%;
}

#page-404{
    height: 100%;
    display: flex;
    width: 100%;
    background-color: var(--bg-solid);
}

#page-404 .content{   
    margin: auto;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;

    border-radius: 1rem;
}

#page-404 .content .logo{
    display: flex;
    width: 200px;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
}

#page-404 .content .logo img{
    margin: 0 auto;
    width: 100%;
}

#page-404 .content .name{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

#page-404 .content .description{
    text-align: center;
}

/***************** SLIDE ******************/
#top-area{
    width: 100%;    
    padding: 1rem 1rem 0;
}

#top-area  .exp-title {
    margin-bottom: 0.5rem;
    font-weight: 500;
}

#top-area .navigation-wrapper{
    display: flex;
    flex-direction: column;
}

#linked-stores {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

#linked-stores .lk-store{
    height: 2.5rem;
    display: flex;    
    /*width: 125px;*/
    background-color: var(--bg-shinny);
    padding: 0.5rem;
    border-radius: 0.5rem;
    margin-right: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
    justify-content: center;
}

#linked-stores .lk-store:hover img{
    transform: scale(1.2);
}

#linked-stores .lk-store img {
    margin: auto;
    height: 100%;

    transition: transform 0.2s;
}

#experiences{
    height: 200px;
    overflow: hidden;
    border-radius: 1rem;
}

#experiences .experience{
    height: 100%;    
    position: relative;
}

#experiences .experience .info{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    padding: 0.5rem;
    background: var(--bg-solid);        
    box-shadow: 0 0 1rem 1rem var(--bg-solid);
}

#experiences .experience .info .info-title{
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

#experiences .experience .info .text{
    font-size: 0.7rem;
    line-height: 0.8rem;
    height: 0.8rem;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

#experiences .experience img{
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.navigation-wrapper {
    position: relative;
}

.dots {
    display: flex;    
    justify-content: center;
    margin: 1rem auto 0;
    padding: 0.5rem;
    background-color: var(--bg-light);
    border-radius: 1rem;
}

.dot {
    border: none;
    width: 6px;
    height: 6px;
    background: var(--highlight-color);
    border-radius: 0.2rem;
    margin: 0 6px;
    cursor: pointer;
    transition: width 0.2s;
}

.dot:focus {
    outline: none;
}

.dot--active {
    background: var(--highlight-color);
    width: 18px;
}

.arrow {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    fill: #fff;
    cursor: pointer;
    display: none;
}

.arrow--left {
    left: 5px;
    fill: "#fff";
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}

.arrow--right {
    left: auto;
    right: 5px;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}

.arrow--disabled.arrow--left {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' %3E%3C/path%3E%3C/svg%3E");
}

.arrow--disabled.arrow--right {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' %3E%3Cpath d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'%3E%3C/path%3E%3C/svg%3E");
}

/* MERCADITO PAGE */
body.mercadito{
    width: 100%;
    height: 100%;
}
#page-mercado{
    display: flex;
    height: 100%;
    margin: auto;
    padding: 2rem;      
    width: 100%;
    max-width: 700px;
}

#page-mercado .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;     
    width: 100%;
}

#page-mercado .content .name{
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-align: center;
}

#page-mercado .content p{
    margin-top: 1rem;
}

#page-mercado .content .description{
    margin-bottom: 2rem;
    text-align: center;
    width: 100%;    
    text-wrap: auto;
}

#page-mercado .content .store-links{
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;    
    width: 100%;
}

#page-mercado .content .store-links a.store-link {
    width: 100%;    
    padding: 1rem;
}

#page-mercado .content .store-links a.store-link .store-link-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-light);
    padding: 1rem;
    border-radius: 1rem;
    height: 70px;
    text-align: left;    
    position: relative;
}

#page-mercado .content .store-links a.store-link .store-link-card .store-link-logo{
    width: 50px;    
    margin-right: 1rem;
    position: absolute;
    left: 1rem;
}

#page-mercado .content .store-links a.store-link .store-link-card .store-link-logo img{
    width: 100%;
}

#page-mercado .content .store-links a.store-link .store-link-card .store-link-title{
    font-size: 1.2rem;
    flex: 1;
    text-align: center;
}

#page-mercado .content .store-links a.store-link .store-link-card:hover{
    background-color: var(--bg-solid);
}

/******************/