* {


    margin: 0;


    padding: 0;


    box-sizing: border-box;


    font-family: inherit;


    font-size: inherit;


}





img {


    max-width: 100%;


}





a {


    text-decoration: none;


    color: inherit;


}





:root {


    --primary-color: #7650ff;


    --secondary-color: #494949;


    --text-light-color: #555;


    --text-lighter-color: #999;


    --light-gray-color: #f9f9f9;


    --background-color: #fff;


    --text-color: white;


    --light-bg-color: #f9f9f9;


    --black: #1d1d1d;





    --border-radius: 5px;





    --box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


    --box-shadow-md: 0 0 10px rgba(0, 0, 0, 0.2);





    --body-font: "Montserrat", sans-serif;


    --body-font-size: 16px;


    --body-text-color: var(--text-color);





    --header-height: 70px;


}





html,


body {


    height: 100vh;


}





body {


    font-family: var(--body-font);


    font-size: var(--body-font-size);


    background-color: var(--black);


    color: var(--body-text-color);





    display: flex;


    flex-direction: column;


}





/* Header */





header {


    position: fixed;


    z-index: 99999;


    width: 100%;


    height: var(--header-height);


    background-color: var(--primary-color);


    padding: 0 1rem;


    color: var(--background-color);


    background-color: #171717;


    box-shadow: 0px 8px 46px 5px rgba(0, 0, 0, 0.67);


    display: flex;


    justify-content: space-between;


    align-items: center;





    transition: 0.3s ease;


}





header.no-scroll {


    top: 0 !important;


}





header .action-box {


    --action-box-size: 40px;





    cursor: pointer;


    user-select: none;





    display: flex;


    align-items: center;


    justify-content: center;





    width: var(--action-box-size);


    height: var(--action-box-size);





    background-color: var(--background-color);


    color: #171717;


    border-radius: var(--border-radius);


    box-shadow: var(--box-shadow);


    font-size: 20px;


    transition: 0.4s ease-in-out;


}





header .action-box .action:not(.active) {


    display: none;


}





header .action-box .action {


    display: flex;


    justify-content: center;


    align-items: center;


    width: 100%;


    height: 100%;


}





header .action-box.active {


    display: flex;


    justify-content: center;


    align-items: center;


    width: 100%;


    height: 100%;


}





header .action-box:hover {


    background-color: var(--secondary-color);


    color: white;


}





header .language-dropdown-box {


    --language-dropdown-box-size: 40px;





    cursor: pointer;


    position: relative;


    user-select: none;





    display: flex;


    align-items: center;


    justify-content: center;





    min-width: var(--language-dropdown-box-size);


    height: var(--language-dropdown-box-size);





    padding: 0 0.75rem;





    background-color: var(--background-color);


    color: #171717;


    border-radius: var(--border-radius);


    box-shadow: var(--box-shadow);


    font-size: var(--body-font-size);


    font-weight: 700;


    transition: 0.4s ease-in-out;


}





header .language-dropdown-box .language-label {


    display: flex;


    align-items: center;


}





header .language-dropdown-box:not(.single-language):hover,


header .language-dropdown-box:not(.single-language).active {


    background-color: var(--secondary-color);


    color: white;


}





header .language-dropdown-box i {


    margin-left: 5px;


    font-size: 18px;


}





header .language-dropdown-box.single-language i {


    display: none;


}





header .language-dropdown-box .dropdown-content {


    display: none;





    position: absolute;


    top: calc(100% + 10px);


    left: 0;





    background-color: var(--background-color);


    width: 100%;


    border-radius: var(--border-radius);


    box-shadow: var(--box-shadow-md);





    overflow: hidden;


}





header .language-dropdown-box .dropdown-content .dropdown-item {


    padding: 0.5rem 0.75rem;


    transition: 0.4s ease-in-out;


    color: var(--text-light-color);


}





header .language-dropdown-box .dropdown-content .dropdown-item a {


    display: block;


}





header .language-dropdown-box .dropdown-content .dropdown-item:hover {


    background-color: var(--secondary-color);


    color: white;


}





/* Main */





main {


    background-color: var(--black);


    height: calc(100vh - 70px);


    display: flex;


    flex-direction: column;


    max-width: 1200px;


    margin: auto;


}





.container {


    max-width: 1200px;


    margin: 0 auto;


    padding: 0 1rem;


}





/* Dealer Intro */





#dealer-intro {


    padding: 1rem 1rem;


    background-color: var(--black);


    border-bottom: 2px solid var(--black);


}





#dealer-intro .content {


    display: flex;


    justify-content: center;


    align-items: center;


    flex-direction: column;


    text-align: center;


}





#dealer-intro .content img {


    width: 120px;


    height: 120px;


    object-fit: cover;


    border-radius: 120px;


}





#dealer-intro .content h1 {


    margin-top: 10px;


    font-size: 1.25rem;


    line-height: 1;


    margin-bottom: 5px;


}





#dealer-intro .content p {


    font-size: 0.975rem;


    margin-top: 0;


    margin-bottom: 0;


}





/* Main Category Carousel */





#main-category-carousel-wrapper {


    background-color: var(--black);


    position: sticky;


}





#main-category-carousel {


    padding: 1rem;


    overflow: hidden;


}





#main-category-carousel .category-item {


    border-radius: 10px;


    cursor: pointer;


    user-select: none;


    transition: 0.4s ease-in-out box-shadow;


    /* overflow: hidden; */


    width: 100%;


}





#main-category-carousel .category-item .icon {


    height: 120px;


    display: flex;


    justify-content: center;


    align-items: center;


    background: white;


    border-top-right-radius: 10px;


    border-top-left-radius: 10px;


}





#main-category-carousel .category-item .icon img {


    width: 80px;


    height: 80px;


    object-fit: cover;


}





#main-category-carousel .category-item > img {


    width: 100%;


    height: 100%;


    object-fit: cover;


    display: block;


    height: 120px;


    border-top-right-radius: 10px;


    border-top-left-radius: 10px;


}





#main-category-carousel .category-item p {


    font-size: 0.9rem;


    font-weight: 600;


    padding: 0.75rem 0.75rem;


    margin-bottom: 0;


    background: rgb(51, 51, 51);


    border-bottom-right-radius: 10px;


    border-bottom-left-radius: 10px;


    text-align: center;


}





#main-category-carousel .category-item.active {


    box-shadow: 0 0 0 2px var(--primary-color);


}





/* Main Product List */





html {


    --product-grid-template-columns: repeat(1, 1fr);


    --product-grid-gap: 1rem;


}





@media (min-width: 768px) {


    html {


        --product-grid-template-columns: repeat(2, 1fr);


        --product-grid-gap: 1rem;


    }


}





@media (min-width: 1200px) {


    html {


        --product-grid-template-columns: repeat(3, 1fr);


        --product-grid-gap: 1rem;


    }


}





@media (min-width: 1600px) {


    html {


        --product-grid-template-columns: repeat(4, 1fr);


        --product-grid-gap: 1rem;


    }


}





.product-list-grid {


    display: block;


}





#main-product-list {


    padding: 1rem;


    /*flex: 1;*/


}





.product-card {


    border-radius: 10px;


    cursor: pointer;


    user-select: none;


    transition: 0.4s ease-in-out box-shadow;


    box-shadow: var(--box-shadow);


    margin-bottom: 52px;


    box-shadow: 0px 6px 23px 2px rgba(0, 0, 0, 0.31) !important;


    padding: 15px 24px;


}


.product-card .image-area-wrap {


    display: flex;


    align-items: end;


    margin-top: -34px;


}





.product-card .image-box > img {


    object-fit: cover;


    border-radius: 10px;


    display: block;


    max-width: 100px;


    height: 100px;


    box-shadow: 7px 11px 23px -9px rgba(0, 0, 0, 0.38) !important;


    margin-right: 14px;


}





.product-card .product-info {


    flex: 1;


}





.product-card .product-name {


    font-size: 1rem;


    font-weight: 700;


    margin-bottom: 5px;


    overflow: hidden;


    text-overflow: ellipsis;


}





.product-card .product-info .product-description {


    opacity: 0.7;


    font-size: 0.8rem;


    margin-bottom: 10px;


    font-weight: 500;


    max-width: 100%;


    line-height: 1.4;


    margin-top: 25px;


}





.product-card .product-price {


    font-size: 0.875rem;


    font-weight: 500;


    text-align: end;


}





.product-card .original {


    margin-right: 5px;


    text-decoration: line-through;


    color: var(--text-lighter-color);


}





.product-card .product-price .discounted {


    font-size: 1.1rem;


    font-weight: 700;


    opacity: 0.8;


}





.product-card .product-actions {


    display: flex;


    flex-direction: column;


    padding: 0.5rem;


    display: none;


}





/* Product Detail Page */





#product-detail-page .product-image {


    max-height: 280px;


    max-width: 280px;


    width: 100%;


    object-fit: contain;


    display: block;


    border-radius: 20px;


    margin: auto;


    box-shadow: 0px 7px 21px 3px rgba(0, 0, 0, 0.45);


    z-index: 4;


    position: relative;


}


@media (max-width: 760px) {


    #product-detail-page .product-image {


        max-height: 200px;


        max-width: 200px;


    }


}





#product-detail-page .product-detail {


    padding: 1rem;


    position: relative;


    box-shadow: 0px 10px 32px 10px rgba(0, 0, 0, 0.18);


    margin-top: -30px;


    padding-top: 70px;


    padding-bottom: 30px;


    border-radius: 20px;


    text-align: center;


}





#product-detail-page .product-detail .product-name {


    font-size: 1.15rem;


    font-weight: 700;


    margin-bottom: 10px;


    color: white;


}





#product-detail-page .product-detail .product-price {


    font-size: 1rem;


    font-weight: 500;


}





#product-detail-page .product-detail .original {


    margin-right: 5px;


    text-decoration: line-through;


    color: var(--text-lighter-color);


}





#product-detail-page .product-detail .product-price .discounted {


    font-size: 1.15rem;


    font-weight: 700;


    color: white;


}





#product-detail-page .product-fav {


    position: absolute;


    top: 1.75rem;


    right: 1.75rem;


    cursor: pointer;


    user-select: none;


    color: white;


    font-size: 1.25rem;


    width: 2.5rem;


    height: 2.5rem;


    display: flex;


    justify-content: center;


    align-items: center;


    border-radius: 100%;


}





#product-detail-page .product-detail .product-fav span {


    opacity: 0;


    transition: 0.4s ease;


    position: absolute;


    top: 50%;


    left: 50%;


    transform: translate(-50%, -50%);


}





#product-detail-page .product-detail .product-fav.active .fav-true {


    display: block;


    color: red;


    opacity: 1;


    animation: fav-true 0.4s ease;


    animation-iteration-count: 1;


}





#product-detail-page .product-detail .product-fav:not(.active) .fav-false {


    display: block;


    opacity: 1;


    animation: fav-true 0.4s ease;


    animation-iteration-count: 1;


}





#product-detail-page .product-description {


    font-weight: 500;


    max-width: 620px;


    margin: auto;


    padding-top: 12px;


    line-height: 22px;


    font-size: 14px;


}





@keyframes fav-true {


    0% {


        transform: translate(-50%, -50%) scale(1);


    }


    50% {


        transform: translate(-50%, -50%) scale(1.5);


    }


    100% {


        transform: translate(-50%, -50%) scale(1);


    }


}





/* Pages */





::-webkit-scrollbar {


    width: 6px;


}





/* Track */


::-webkit-scrollbar-track {


    border-radius: 0px;


}





/* Handle */


::-webkit-scrollbar-thumb {


    background: #565656;


    border-radius: 0px;


}





.page {


    height: 100%;


    width: 100vw;





    padding-top: calc(var(--header-height) + 30px);


    background-color: var(--black);





    position: fixed;


    top: 0;


    left: 0;


    transition: 0.4s ease;


    visibility: hidden;


    opacity: 0;


    transform: translateX(-100%);


    overflow-x: hidden;


    overflow-y: auto;


}





.page.active {


    visibility: visible;


    opacity: 1;


    transform: translateX(0);


}





/* Page Loading Block */


.page-loading-block {


    position: fixed;


    top: 0;


    left: 0;


    width: 100vw;


    height: 100vh;


    background-color: #171717;


    z-index: 99999999;


    opacity: 0;


    visibility: hidden;


    transition: 1s ease;


}





.page-loading-block.active {


    opacity: 1;


    visibility: visible;


}





.page-loading-block .page-loading-svg {


    position: absolute;


    top: 50%;


    left: 50%;


    transform: translate(-50%, -50%);


    width: 50px;


    height: 50px;


    background-image: url(../fonts/bars.svg);


    background-size: cover;


}





/* Search Page */





#search-page .container {


    padding: 1rem;


    height: calc(100vh - var(--header-height));


    overflow-x: hidden;


    overflow-y: auto;


    display: flex;


    flex-direction: column;


}





#search-page .search-bar {


    position: relative;


    margin-bottom: 4rem;


}





#search-page .search-bar input {


    width: 100%;


    padding: 0.75rem 1rem;


    padding-right: 2.5rem !important;


    border-radius: var(--border-radius);


    border: 2px solid #666666;


    font-size: 1rem;


    font-weight: 500;


    outline: none;


    transition: 0.4s ease-in-out;


    background-color: white;


}





#search-page .search-bar input:focus {


    border-color: #171717;


    box-shadow: 0px 0px 13px 5px rgba(0, 0, 0, 0.67);


}





#search-page .search-bar button {


    position: absolute;


    top: 50%;


    right: 1rem;


    transform: translateY(-50%);


    font-size: 1.25rem;


    color: var(--text-lighter-color);


    cursor: pointer;


    transition: 0.4s ease-in-out;


    background: none;


    outline: none;


    border: none;


}





#search-page #search-results.loading {


    flex: 1;


    background-image: url(../fonts/bars-colored.svg);


    background-size: 40px;


    background-position: center;


    background-repeat: no-repeat;


}





/* Ads Card */





.ads-card img {


    object-fit: contain;


    max-width: 90px;


    margin-top: 10px;


    margin-right: 15px;


}





.ads-card .title {


    font-size: 0.75rem;


    font-weight: 700;


}





.ads-card .description {


    font-size: 0.65rem;


    margin-top: 10px;


}





.ads-card {


    position: relative;


    display: flex;


    align-items: center;


}





.ads-card .sponsor {


    position: absolute;


    top: 0;


    left: 0;


    padding: 2px 3px;


    background-color: #e8e8e8;


    color: #555;


    font-size: 0.6rem;


    font-weight: 700;


    border-bottom-right-radius: 5px;


}





.ads-card .link {


    position: absolute;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    z-index: 99999;


}