*{ margin: 0; padding: 0; box-sizing: border-box;}

html{
    --clr-black: #111111;
    --clr-gray: #555555;
    --clr-smooth-gray: #f5f5f5;
    --clr-light-gray: #f8f9fa;
    --clr-red: #dd3327;
    --clr-orange: #c27125;
    --clr-yellow: #ffb800;
    --clr-green: #0f5b3f;
    --clr-white: #fff;
    --bg-black: #111111;
    --bg-white: #fff;

    --hot-bg: #d0473e;
    --hot-cl: #ffffff;

    --border-color: #ebebeb;
    --border-color-2: #e5e8ec;

    --header-height: 70px;
    --dp: 30px;

    --navigaiton-fw: 500;
    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;

    --base-radius: 20px;
    --radius: 50%;
    --radius-xs: 2px;
    --btn-radius: 999px;

    --shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
    --shadow-2: 0 5px 30px #0000000d;

    --max-width: 1400px;

    --slider-arr-width: 60px;
    --slider-arr-height: 60px;

    /* --spacing: 60px; */


    font-family: 'Jost', sans-serif;
    color: var(--clr-black);
}
body{
    background-color: var(--body-bg, #fff);
}


a{ text-decoration: none;}
button{ background-color: transparent; border: none; outline: none;}
a,button{ cursor: pointer;}
a,button,input{ color: inherit; font-family: inherit;}
ul{ list-style: none;}

/* ----------------------------------------------------- */
/* --------------- KC_1 HEADER / FOOTER ---------------- */
/* ----------------------------------------------------- */
.ghost-header{ position: absolute; height: var(--header-height);}

.kc_1-header{ --py: 11px; height: var(--header-height); position: static; top: 0; left: 0; width: 100%; box-shadow: var(--shadow); z-index: 50; background-color: var(--bg-white);}
.kc_1-header.transparent-banner{ background-color: transparent; position: fixed; box-shadow: none;}
.kc_1-header.transparent-banner ~ .first-slider .swiper-slide{ height: calc(100dvh) !important;}
.kc_1-top-banner + .kc_1-header.transparent-banner ~ .first-slider .swiper-slide{ height: calc(100dvh - (50px)) !important;}
.kc_1-top-banner + .kc_1-header.transparent-banner:has(~ .first-slider + .kc_1-banner) ~ .first-slider .swiper-slide{ height: calc(100dvh - (50px + 50px)) !important;}
.kc_1-top-banner + .kc_1-header.transparent-banner:not(.stick){ position: absolute; top: 50px;}
/* .kc_1-header.transparent-banner.stick + .ghost-header{ position: static;} */
.kc_1-header.white-banner{ color: var(--clr-white);}
.kc_1-header.stick{ position: fixed; top: -90px; background-color: var(--bg-white); color: var(--clr-black);}
/* .kc_1-header.stick.white-banner .logo img{ filter: invert(1);} */
.kc_1-header.stick:not(.transparent-banner) + .ghost-header{ position: static;}
.kc_1-header.stick.come{ top: 0; transition: all .5s ease;}
.kc_1-header > div{ display: flex; justify-content: space-between; align-items: center; padding: var(--py) var(--dp); height: 100%;}
.kc_1-header > div > div{ flex: 1;}
.kc_1-header > div .l{ display: flex;}
.kc_1-header > div .l .logo{display: flex; align-items: center;}
.kc_1-header > div .l .logo img{ height: 35px;}
.kc_1-header > div .c{ height: 100%; display: flex; justify-content: center;}
.kc_1-header > div .c nav{ height: 100%;}
.kc_1-header > div .c nav > ul{ height: 100%; list-style: none; display: flex;}
.kc_1-header > div .c nav > ul > li{ position: relative;}
.kc_1-header > div .c nav > ul > li > a{ height: 100%; font-weight: var(--navigaiton-fw); position: relative; padding: 0 20px; display: flex; align-items: center; white-space: nowrap; text-decoration: none;}
.kc_1-header > div .c nav > ul > li > a::before{ content: ''; position: absolute; height: var(--py); top: 100%; width: 100%; left: 0;}
.kc_1-header > div .c nav > ul > li > a span{ position: relative; display: inline-block;}
.kc_1-header > div .c nav > ul > li a small{ }
.kc_1-header > div .c nav > ul > li:has(> ul) > a::after{ --size: 5px; border-color: var(--clr-black); opacity: .5; content: ''; display: inline-block; width: var(--size); min-width: var(--size); height: var(--size); transform: rotate(-45deg); border-left: 1.5px solid; border-bottom: 1.5px solid; margin-left: 10px; margin-top: -1px;}
.kc_1-header > div .r{ display: flex; justify-content: flex-end;}
.kc_1-header > div .r .icons{ display: flex; gap: 20px;}
.kc_1-header > div .r .icons > div{ display: flex;}
.kc_1-header > div .r .icons > div :is(button, a){ background-color: transparent; border: none; outline: none; position: relative; cursor: pointer;}
.kc_1-header > div .r .icons > div :is(button, a) svg{ }
.kc_1-header > div .r .icons > div :is(button, a) small{ }




/* Footer */
.kc_1-footer{ padding: 0 var(--dp); color: var(--clr-gray); border-top: 1px solid var(--border-color);}
.kc_1-footer.v2{ background-color: var(--clr-green); color: var(--clr-light-gray);}
.kc_1-footer.v2 .text-black{ color: var(--clr-white);}
.kc_1-footer > div{ max-width: var(--max-width); margin: 0 auto;}
.kc_1-footer > div .top{ gap: var(--dp); padding: calc(var(--dp) * 1.5) 0; display: grid; grid-template-columns: 2fr 1fr 1fr 2fr;}
.kc_1-footer > div .bottom{ display: flex; align-items: center; padding: var(--dp) 0; border-top: 1px solid var(--border-color);}
.kc_1-footer > div .bottom > div{ flex: 1; display: flex;}
.kc_1-footer > div .bottom > div:nth-child(1){}
.kc_1-footer > div .bottom > div:nth-child(2){ justify-content: center;}
.kc_1-footer > div .bottom > div:nth-child(3){ justify-content: flex-end;}




.kc_1-hot-txt{ font-size: 9px; font-weight: 600; padding: 1px 7px 2px; border-radius: var(--radius-xs); position: absolute; right: 0; top: 0; transform: translateX(calc(100% - 10px)) translateY(-100%); color: var(--hot-cl); background-color: var(--hot-bg);}
.kc_1-hot-txt::before{ position: absolute; top: calc(100% - 1px); left: 3px; content: ''; width: 0px; height: 0px; border-style: solid; border-width: 4.5px 4.5px 0 4.5px; border-color: var(--hot-bg) transparent transparent transparent;}

.kc_1-top-count{ --size: 18px; font-size: 10px; border-radius: var(--radius); position: absolute; right: 0; top: 0; color: var(--clr-white); background-color: var(--clr-red); display: flex; align-items: center; justify-content: center; white-space: nowrap; width: var(--size); height: var(--size); transform: translateX(50%) translateY(-50%);}
.kc_1-top-count{}








/* ----------------------------------------------------- */
/* -------------------- KC_1 SLIDER -------------------- */
/* ----------------------------------------------------- */
/* Slider Wrapper */
.kc_1-slider-wrapper-1{ width: 100%; overflow: hidden;}
.kc_1-slider-wrapper-1.rounded .swiper-slider{ border-radius: var(--base-radius); overflow: hidden;}
.kc_1-slider-wrapper-1 .swiper-slider{}
.kc_1-slider-wrapper-1 .swiper-slider .swiper{}
.kc_1-slider-wrapper-1 .swiper-slider .swiper .swiper-slide{}
.kc_1-slider-wrapper-1 .swiper-slider .swiper .swiper-slide img{}


/* Slider Template */
.kc_1-slider-template-1{ height: calc(100dvh - (var(--header-height) + var(--banner-height, 0px))) !important; position: relative;}
.full-padding .kc_1-slider-template-1{ height: calc(100dvh - (var(--header-height) + var(--banner-height, 0px) + calc(var(--dp) * 2))) !important;}
.kc_1-slider-template-1 > img{ z-index: -1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}


/* Slider Pagination */
.kc_1-slider-pagination .swiper-pagination-bullets.swiper-pagination-horizontal{ bottom: 20px !important;}
.swiper-pagination-bullet-active{ background-color: var(--bg-black) !important;}
.white-bullet .swiper-pagination-bullet-active,
.white-bullet .swiper-pagination-bullet{ background-color: var(--bg-white) !important;}


/* Slider Progressbar */
.kc_1-slider-progressbar{ bottom: 0; top: unset !important; --swiper-pagination-progressbar-size: 2px; --swiper-pagination-color: var(--clr-green);}
div:has(> .kc_1-slider-progressbar){ padding-bottom: 25px;}



/* Slider Arrows */
.kc_1-slider-arr{ width: var(--slider-arr-width); height: var(--slider-arr-height); border-radius: var(--btn-radius); box-shadow: var(--shadow); position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: flex; align-items: center; justify-content: center; transition: all .4s ease; opacity: 0;}
.kc_1-slider-arr.prev{ left: calc(var(--dp) + 15px);}
.kc_1-slider-arr.next{ right: calc(var(--dp) + 15px);}
.swiper:hover .kc_1-slider-arr{ opacity: 1 !important;}
.swiper:hover .kc_1-slider-arr.prev{ left: var(--dp);}
.swiper:hover .kc_1-slider-arr.next{ right: var(--dp);}

.kc_1-slider-arr.v2.prev{ left: calc(var(--dp) / 2 + 15px);}
.kc_1-slider-arr.v2.next{ right: calc(var(--dp) / 2 + 15px);}
.swiper:hover .kc_1-slider-arr.v2{ opacity: .5;}
.swiper:hover .kc_1-slider-arr.v2:hover{ opacity: 1;}
.swiper:hover .kc_1-slider-arr.v2.prev{ left: calc(var(--dp) / 2);}
.swiper:hover .kc_1-slider-arr.v2.next{ right: calc(var(--dp) / 2);}
.swiper:hover .kc_1-slider-arr.v2.swiper-button-disabled{ cursor: default; opacity: .7 !important;}








/* ----------------------------------------------------- */
/* -------------------- KC_1 WRAPPERS ------------------ */
/* ----------------------------------------------------- */
.kc_1-wrapper-1{ display: grid; gap: var(--dp); grid-template-columns: repeat(3,minmax(0,1fr));}
.kc_1-wrapper-1 > *:nth-child(1){ grid-area: 1/1/3/2;}
.kc_1-wrapper-1 > *:nth-child(2){ grid-area: 1/2/2/3;}
.kc_1-wrapper-1 > *:nth-child(3){ grid-area: 2/2/3/3;}
.kc_1-wrapper-1 > *:nth-child(4){ grid-area: 1/3/3/4;}

.kc_1-wrapper-2{ display: grid; gap: var(--dp); grid-template-columns: repeat(2, minmax(0,1fr));}
.kc_1-wrapper-3{ display: grid; gap: var(--dp); grid-template-columns: repeat(3, minmax(0,1fr));}
.kc_1-wrapper-4{ display: grid; gap: var(--dp); grid-template-columns: repeat(4, minmax(0,1fr));}
.kc_1-wrapper-5{ display: grid; gap: var(--dp); grid-template-columns: repeat(5, minmax(0,1fr));}
.kc_1-wrapper-6{ display: grid; gap: var(--dp); grid-template-columns: repeat(6, minmax(0,1fr));}

.kc_1-wrapper-7{ display: flex; flex-direction: column; gap: calc(var(--dp) / 2);}
.kc_1-wrapper-7 > div:not(:first-child){ border-top: 1px solid var(--border-color); padding-top: calc(var(--dp) / 2);}

.kc_1-wrapper-8{ display: flex; gap: 5px;}
.kc_1-wrapper-8 > div{ flex: 1;}
.kc_1-wrapper-8 > div:nth-child(1){}
.kc_1-wrapper-8 > div:nth-child(2){ display: flex; justify-content: center;}
.kc_1-wrapper-8 > div:nth-child(3){ display: flex; justify-content: flex-end;}

.kc_1-wrapper-9{ display: none;}

.kc_1-wrapper-10{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--dp);}

.kc_1-wrapper-11{ display: grid; grid-template-columns: 1fr 1fr; height: 63dvh;}

.kc_1-wrapper-12{ display: flex; flex-direction: column; gap: var(--dp);}


.kc_1-shop-wrapper{ display: flex; gap: calc(var(--dp) * 2);}
.kc_1-shop-wrapper > div{ }
.kc_1-shop-wrapper > div:nth-child(1){ min-width: 300px; width: 300px;}
.kc_1-shop-wrapper > div:nth-child(2){ width: 100%; display: flex; flex-direction: column; gap: calc(var(--dp));}





.gap-half{ gap: calc(var(--dp) / 2);}





/* ----------------------------------------------------- */
/* ------------------ KC_1 TEMPLATES ------------------- */
/* ----------------------------------------------------- */
.kc_1-template-1{ padding: 0 var(--dp); height: 100%;}
.kc_1-template-1.black{ color: #000;}
.kc_1-template-1 > div{ max-width: var(--max-width); margin: 0 auto; height: 100%; display: grid; grid-template-columns: repeat(2, 1fr);}
.kc_1-template-1.v2 > div{ display: flex; width: 100%;}
.kc_1-template-1 > div > div{ padding: 50px 0; display: flex; flex-direction: column; text-align: center; align-items: center; justify-content: center; width: 100%;}
.kc_1-template-1 .align-left{ text-align: start; align-items: flex-start;}
.kc_1-template-1 .align-center{ text-align: center; align-items: flex-start;}
.kc_1-template-1 .align-right{ text-align: end; align-items: flex-end;}
.kc_1-template-1 .top{ font-size: 15px; font-weight: var(--fw-600); margin-bottom: 20px;}
.kc_1-template-1 .title{ font-size: 70px; font-weight: var(--fw-400); line-height: 1.15;}
.kc_1-template-1 .text{ margin-top: 15px;}
.kc_1-template-1 button{ margin-top: 50px;}
.kc_1-template-1 > div > .r{}



.kc_1-template-2{ position: relative; border-radius: var(--base-radius); overflow: hidden; display: flex;}
.kc_1-template-2 .img{ width: 100%; height: 100%; display: flex;}
.kc_1-template-2 .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .5s ease;}
.kc_1-template-2:hover .img img{ transform: scale(1.1);}
.kc_1-template-2 > button{ position: absolute; bottom: var(--dp); left: 50%; transform: translateX(-50%);}
.kc_1-template-2.v2{ flex-direction: column; border-radius: unset; align-items: center; gap: 20px;}
.kc_1-template-2.v2 .img{ max-width: 160px; height: unset; aspect-ratio: 1; overflow: hidden; border-radius: 50%;}
.kc_1-template-2.v2 span{ font-weight: var(--fw-500);}
.kc_1-template-2.v3{ border-radius: unset;}
.kc_1-template-2.v3 .img{ height: unset; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--base-radius) / 2);}
.kc_1-template-2.v3 .icons{ position: absolute; right: 0; top: 0; padding: 10px;}
.kc_1-template-2.v4{ flex-direction: column; border-radius: unset; align-items: center; gap: 20px;}
.kc_1-template-2.v4 .img{ height: unset; aspect-ratio: 1.5; overflow: hidden; border-radius: calc(var(--base-radius));}



.kc_1-template-3{ display: flex; flex-direction: column;}
.kc_1-template-3 .img-area{ aspect-ratio: 3/4; overflow: hidden; border-radius: var(--base-radius); position: relative;}
.kc_1-template-3 .img-area .img{ width: 100%; height: 100%; display: flex;}
.kc_1-template-3 .img-area .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .5s ease;}
.kc_1-template-3 .img-area:hover .img img{ transform: scale(1.1);}
.kc_1-template-3 .img-area .kc_1-abs-tags{ }
.kc_1-template-3 .img-area .kc_1-abs-tags span{}
.kc_1-template-3 .img-area > .kc_1-btn{ padding: 12px 0; opacity: 0; transform: translateY(20px); position: absolute; bottom: 15px; left: 15px; right: 15px;}
.kc_1-template-3 .img-area > .kc_1-banner-2 +  .kc_1-btn{ bottom: 45px;}
.kc_1-template-3 .img-area:hover > button{ opacity: 1; transform: translateY(0px);}
.kc_1-template-3 .img-area:hover > button.sold{ pointer-events: none; opacity: .5;}
.kc_1-template-3 .img-area .kc_1-abs-btns{ opacity: 0; transform: translateX(15px); transition: all .3s ease;}
.kc_1-template-3 .img-area:hover .kc_1-abs-btns{ opacity: 1; transform: translateX(0);}
.kc_1-template-3 .img-area .kc_1-abs-btns.bottom{ transform: translateY(15px);}
.kc_1-template-3 .img-area:hover .kc_1-abs-btns.bottom{ transform: translateY(0);}
.kc_1-template-3 .img-area .moving-banner{ pointer-events: none; font-size: 10px;}
.kc_1-template-3 .detail{ padding-top: 15px; display: flex; flex-direction: column; gap: 10px;}
.kc_1-template-3 .detail.center{ text-align: center; align-items: center;}
.kc_1-template-3 .detail > b{ font-weight: var(--fw-400); color: var(--clr-gray); margin-bottom: -5px;}
.kc_1-template-3 .detail > a{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 2lh;}
.kc_1-template-3.v2 .img-area{ aspect-ratio: 1; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding: 20px; background-color: var(--bg-white);}
.kc_1-template-3.v2 .img-area .img{ overflow: hidden; border-radius: var(--base-radius);}
.kc_1-template-3.v2 .detail{ background-color: var(--bg-white); border-radius: 0 0 var(--base-radius) var(--base-radius); padding: 20px; border-top: 1px solid var(--border-color);}
.kc_1-template-3.v3 .img-area{ aspect-ratio: 1;}




.kc_1-template-4{ display: block; overflow: hidden; border-radius: var(--base-radius); position: relative;}
.kc_1-template-4 .img{ }
.kc_1-template-4 .img img{}
.kc_1-template-4 .img{ width: 100%; height: 100%;}
.kc_1-template-4 .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .5s ease;}
.kc_1-template-4:hover .img img{ transform: scale(1.1);}
.kc_1-template-4 .txt{ position: absolute; padding: calc(var(--dp) * 2); left: 0; bottom: 0; width: 100%;}
.kc_1-template-4:hover .txt .underline-hover-2::before{ width: 100%;}



.kc_1-template-5{ display: flex; align-items: center; flex-direction: column; gap: 15px; text-align: center; border: 1px solid var(--border-color); border-radius: var(--base-radius); overflow: hidden; padding: var(--dp);}
.kc_1-template-5.v2{ background-color: var(--bg-white); text-align: unset; height: 100%;}
.kc_1-template-5.v2 > p{ height: 100%;}

.swiper-slide:has(.kc_1-template-5.v2){ height: auto;}

.swiper-slide{ height: auto;}


.kc_1-template-6{ display: flex; gap: 10px;}
.kc_1-template-6 .img-area{}
.kc_1-template-6 .img-area .img{ aspect-ratio: 3/4; width: 90px; min-width: 90px; border-radius: var(--base-radius); overflow: hidden; display: flex;}
.kc_1-template-6 .img-area .img img{ width: 100%; height: 100%; object-fit: cover;}
.kc_1-template-6 .detail-area{ width: 100%;}
.kc_1-template-6 .icon-area{ display: flex; flex-direction: column; gap: 10px;}



.kc_1-template-7{ display: flex; flex-direction: column; gap: calc(var(--dp) / 2);}
.kc_1-template-7 .img-area{}
.kc_1-template-7 .img-area .img{ aspect-ratio: 1.8; overflow: hidden; border-radius: var(--base-radius);}
.kc_1-template-7 .img-area .img img{ width: 100%; height: 100%; object-fit: cover; transition: all .5s ease;}
.kc_1-template-7 .img-area:hover .img img{ transform: scale(1.1);}
.kc_1-template-7 .detail{ display: flex; flex-direction: column; gap: 3px;}



.kc_1-template-8{ display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--base-radius); overflow: hidden;}
.kc_1-template-8 .l{}
.kc_1-template-8 .r{ position: relative;}
.kc_1-template-8 .r img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.kc_1-template-8.v2{ border-radius: 0; gap: var(--dp); overflow: visible;}
.kc_1-template-8.v2 > div{ border-radius: var(--base-radius); overflow: hidden;}


.kc_1-template-9{ background-color: var(--content-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--dp) * 3) var(--dp); position: relative;}
.kc_1-template-9.align-left{ align-items: flex-start;}
.kc_1-template-9.align-right{ align-items: flex-end;}
.kc_1-template-9 > img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; transition: all .5s ease;}
.kc_1-template-9:hover > img{ transform: scale(1.1);}
.kc_1-template-9 > iframe,
.kc_1-template-9 > video{ width: 100%;}
.kc_1-template-9.short{ max-width: 300px; margin: 0 auto;}


.kc_1-template-10{ padding: 100px var(--dp); display: flex; border-radius: var(--base-radius); overflow: hidden; position: relative;}
.kc_1-template-10 img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;}


.kc_1-template-11{ background-color: var(--bg-white); border-radius: var(--base-radius); padding: calc(var(--dp) * 2); max-width: 590px; display: flex; flex-direction: column; align-items: flex-start;}
.kc_1-template-11.center{ align-items: center; text-align: center;}
.kc_1-template-11.right{ align-items: flex-end; text-align: end;}


.kc_1-template-12{ display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 350px; margin-inline: auto;}
.kc_1-template-12 .icon{ margin-bottom: 10px;}
.kc_1-template-12 .icon img{ width: 40px;}
.kc_1-template-12.v2 .icon img{ width: 80px;}
.kc_1-template-12 h4{}
.kc_1-template-12 p{ color: var(--clr-gray); margin-top: 15px;}


.kc_1-template-13{ background-color: var(--bg); width: 100%; height: 100%;}
.kc_1-template-13 > div{ height: 100%; max-width: 500px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.kc_1-template-13.left > div{ text-align: left; align-items: flex-start;}
.kc_1-template-13.right > div{ text-align: end; align-items: flex-end;}
.kc_1-template-13 > div > img{ width: 120px; margin-bottom: 50px;}
.kc_1-template-13 > div > img{}


.kc_1-template-14{ position: relative; width: 100%; height: 100%;}
.kc_1-template-14 img{ width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0;}








/* ACCORDION TEMPLATES */
.kc_1-accordion-1{ border-bottom: 1px solid var(--border-color);}
.kc_1-accordion-1 .h{}
.kc_1-accordion-1 .h h4{ font-size: 18px; padding: calc(var(--dp) / 2) 0; font-weight: var(--fw-500); display: flex; align-items: center; width: 100%; position: relative; cursor: pointer;}
.kc_1-accordion-1 .h h4::after{ content: '+'; display: inline-block; font-weight: var(--fw-200); font-size: 26px; position: absolute; top: 50%; transform: translateY(-50%); right: 0; transition: all .3s ease; transform-origin: center;}
.kc_1-accordion-1.active .h h4::after{ transform: translateY(-50%) rotate(45deg);}
.kc_1-accordion-1 .b{ padding-bottom: calc(var(--dp) / 2); overflow-y: auto; max-height: 220px;}
.kc_1-accordion-1 .b::-webkit-scrollbar{ width: 3px; background-color: var(--border-color);}
.kc_1-accordion-1 .b::-webkit-scrollbar-thumb{ background-color: rgba(0, 0, 0, .15);}





/* TEXT TEMPLATES */
.kc_1-text-template-1{ margin-bottom: 40px;}




/* BANNER WRAPPER */
.kc_1-banner{ width: 100%; overflow: hidden; background-color: var(--bg, #000); color: var(--clr, #fff); padding: calc(var(--dp) / 2) var(--dp);}
.kc_1-banner ~ * .single-slider{ --banner-height: 45px;}

.kc_1-banner-2{ position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; background-color: var(--bg, #000); color: var(--clr, #fff); padding: calc(var(--dp) / 4) var(--dp);}

.kc_1-banner-3{ position: relative;}
.kc_1-banner-3 img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.kc_1-banner-3 .txt{ gap: 5px; color: var(--clr-white); max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--dp) * 2) 0; position: relative; z-index: 3;}
.kc_1-banner-3::before{ content: ''; display: inline-block; position: absolute; inset: 0; background-color: rgba(0, 0, 0, .2); z-index: 1;}

.kc_1-banner-4{ width: 100%; overflow: hidden; background-color: var(--bg, #000); color: var(--clr, #fff); padding: calc(var(--dp) / 2) var(--dp); text-align: center;}
.kc_1-banner-4 ~ * .single-slider{ --banner-height: 50px;}




/* ROUTE */
.kc_1-route{ display: flex; align-items: center; gap: 7px;}




/* HR */
hr.line{ background-color: var(--border-color); height: 1px; border: none;}



/* HALF WHITE */
.half-white{ background-color: var(--bg-white); width: 100%; height: 50%; position: absolute; left: 0; top: 0;}




/* ----------------------------------------------------- */
/* -------------------- KC_1 ITEMS --------------------- */
/* ----------------------------------------------------- */
.kc_1-stars{ display: flex; font-size: 10px;}
.kc_1-stars.v2{ gap: 3px;}
.kc_1-stars.golden{ color: var(--clr-yellow);}

.kc_1-prices{ display: flex; align-items: center; gap: 5px;}
.kc_1-prices strong{ color: var(--clr-red); font-weight: var(--fw-500);}
.kc_1-prices del{ font-size: 0.875em; color: var(--clr-gray); font-weight: var(--fw-400);}
.kc_1-prices.v2 strong{ color: var(--clr-black); font-weight: var(--fw-400);}
.kc_1-prices.v2:has(del) strong{ color: var(--clr-red);}

.kc_1-price-area{}
.kc_1-price-area > div{ display: flex; align-items: center; justify-content: space-between;}
.kc_1-price-area > div strong{ font-weight: var(--fw-500);}

.kc_1-colors{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.kc_1-colors > button{ --size: 24px; box-shadow: inset 0 0 0 2px var(--bg-white); width: var(--size); height: var(--size); border-radius: var(--radius); background-color: var(--clr); border: 1px solid var(--border-color); cursor: pointer; transition: all .2s ease;}
.kc_1-colors.lg > button{ --size: 32px;}
.kc_1-colors > button.active{ border-color: var(--clr-gray);}

.kc_1-sizes{ display: flex; flex-wrap: wrap; gap: 10px;}
.kc_1-sizes > button{ padding: 10px 15px; min-width: 50px; border: 1px solid var(--border-color); border-radius: 3px; color: var(--clr-gray);}
.kc_1-sizes > button.active{}

.kc_1-links{ display: flex; align-items: center; gap: 10px;}

.kc_1-abs-tags{ position: absolute; left: calc(var(--dp) / 2); top: calc(var(--dp) / 2); display: flex; flex-direction: column; gap: 3px;}

.kc_1-abs-btns{ position: absolute; right: calc(var(--dp) / 2); top: calc(var(--dp) / 2); display: flex; flex-direction: column; align-items: flex-end; gap: 5px; width: fit-content;}
.kc_1-abs-btns > *{ box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);}
.kc_1-abs-btns.bottom{ top: unset; bottom: calc(var(--dp) / 2); right: unset; width: 100%; flex-direction: row; justify-content: center;}

.kc_1-avatar{ --size: 70px; width: var(--size); height: var(--size); border-radius: var(--radius);}
.kc_1-avatar.sm{ --size: 60px;}
.kc_1-avatar img{ width: 100%; height: 100%; object-fit: cover;}

.kc_1-avatar-wrapper{ display: flex; width: 100%; gap: 15px;}
.kc_1-avatar-wrapper .l{}
.kc_1-avatar-wrapper .r{ width: 100%; display: flex; flex-direction: column; gap: 7px; padding-top: 6px;}

.kc_1-vertical-list{ list-style: none; display: flex; flex-direction: column; gap: 10px;}
.kc_1-vertical-list-2{ display: flex; flex-direction: column;}
.kc_1-vertical-list-2 a{ padding: 5px 0; color: var(--clr-gray); display: inline-block; transition: all .3s ease; width: 100%;}
.kc_1-vertical-list-2 a:hover{ color: var(--clr-black);}
.kc_1-vertical-list-2.v2 a:hover{ padding-left: 10px;}


.kc_1-counter-template{ background-color: var(--clr-light-gray); display: flex; height: 30px; border: 1px solid var(--border-color); width: fit-content; border-radius: var(--base-radius); overflow: hidden;}
.kc_1-counter-template button{ background-color: transparent; border: none; outline: none; height: 100%; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; transition: all .2s ease;}
.kc_1-counter-template button:hover{ background-color: rgba(0, 0, 0, .02);}
.kc_1-counter-template button:active{ transform: scale(.9); background-color: rgba(0, 0, 0, .05);}
.kc_1-counter-template button.down{ border-top-left-radius: var(--base-radius); border-bottom-left-radius: var(--base-radius);}
.kc_1-counter-template button.up{ border-top-right-radius: var(--base-radius); border-bottom-right-radius: var(--base-radius);}
.kc_1-counter-template button svg{ fill: var(--clr-gray);}
.kc_1-counter-template input{ border: 1px solid var(--border-color); color: var(--clr-gray); font-size: 14px; padding: 0 5px; text-align: center; background-color: transparent; border-top: none; border-bottom: none; outline: none; width: 50px;}

.kc_1-info{ font-size: 14px; margin-top: 6px; color: var(--clr-gray); display: flex; gap: 12px;}

.kc_1-bottom-info{ display: flex; align-items: center; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--border-color); width: 100%; font-size: .8em;}
.kc_1-bottom-info strong{ font-weight: var(--fw-600);}

.kc_1-pagination{ display: flex; justify-content: center; gap: 10px;}

.kc_1-image{ border-radius: var(--base-radius); overflow: hidden; display: flex;}
.kc_1-image img{ width: 100%;}


.kc_1-bg{ position: relative; margin-top: -100px !important; padding: var(--dp); z-index: 1; border-radius: var(--base-radius); border-top-left-radius: 0;}
.kc_1-bg::before{ content: ''; display: inline-block; position: absolute; left: 0; width: calc(75px + 5px); transform: translateX(-100%); height: 100%; z-index: 1; top: 0; background-color: var(--bg-white);}


.kc_1-cb{ position: relative; display: flex !important; align-items: center;}
.kc_1-cb::before{ --size: 20px; font-size: 13px; border: 1px solid var(--border-color); color: var(--clr-white); margin-right: 10px; border-radius: 3px; content: '\f00c'; font-family: 'FONT AWESOME 5 FREE'; font-weight: 900; width: var(--size); min-width: var(--size); height: var(--size); display: inline-block; transition: all .2s ease; display: flex; align-items: center; justify-content: center;}
.kc_1-cb:hover::before{ background-color: rgba(0, 0, 0, .02);}
.kc_1-cb.active::before{ background-color: var(--bg-black);}
.kc_1-cb[data-radio]::before{ border-radius: 50% !important;}


.kc_1-paths{}
.kc_1-paths path{ fill: var(--clr);}


.kc_1-sticky{ position: sticky; height: fit-content; top: calc(var(--header-height) + var(--dp));}







/* Underline Hover */
.underline-hover,
.underline-hover-2{ position: relative; display: inline-block;}
.underline-hover::before,
.underline-hover-2::before{ content: ''; display: inline-block; position: absolute; transition: all .3s ease; left: 50%; bottom: 0; width: 0; transform: translateX(-50%);}
.underline-hover.lr::before,
.underline-hover-2.lr::before{ left: 0; transform: translateX(0);}
.underline-hover.rl::before,
.underline-hover-2.rl::before{ right: 0; left: unset; transform: translateX(0);}
.underline-hover::before{ border-top: 1px solid;}
.underline-hover-2::before{ border-top: 2px solid;}
.underline-hover:hover::before,
.underline-hover.active::before,
.underline-hover.reverse::before,
.underline-hover-2:hover::before,
.underline-hover-2.active::before,
.underline-hover-2.reverse::before{ width: 100%;}
.underline-hover.reverse:hover::before,
.underline-hover-2.reverse:hover::before{ width: 0;}






/* ----------------------------------------------------- */
/* ------------------- KC_1 CONTAINERS ----------------- */
/* ----------------------------------------------------- */
.kc_1-input-template-1{}
.kc_1-input-template-1 > div{ width: 100%; display: flex; gap: 10px; position: relative;}
.kc_1-input-template-1 > div input{ padding: 17px 20px; border: 1px solid var(--border-color); border-radius: var(--btn-radius); width: 100%; outline: none; transition: all .2s ease;}
.kc_1-input-template-1 > div input:focus{ border-color: var(--clr-black);}
.kc_1-input-template-1 > div .search-btn{ position: absolute; top: 1px; right: 1px; bottom: 1px; padding: 0 10px; aspect-ratio: 1; font-size: 15px;}


.kc_1-input-template-2{ display: flex; align-items: center; gap: 10px;}
.kc_1-input-template-2 > label{ white-space: nowrap; color: var(--clr-gray);}
.kc_1-input-template-2 > div{ width: 100%; display: flex; gap: 10px; position: relative; position: relative;}

.custom-dropdown input{ cursor: pointer; font-size: 16px; width: 180px; height: 30px; padding: 0 10px; background-color: transparent; border: none; border-bottom: 1px solid var(--border-color); border-radius: 3px; font-weight: var(--fw-500); outline: none;}
.custom-dropdown::before{ --size: 6px; border-color: var(--clr-black); opacity: 1; content: ''; display: inline-block; width: var(--size); min-width: var(--size); height: var(--size); border-left: 1.5px solid; border-bottom: 1.5px solid; margin-top: -2px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(-45deg); transition: all .2s ease;}
.custom-dropdown.active::before{ transform: translateY(-50%) rotate(135deg);}
.custom-dropdown input + div{ opacity: 0; pointer-events: none; transform: translateY(15px); min-width: 220px; padding: 7px 0; position: absolute; right: 0; top: 100%; width: 100%; background-color: var(--bg-white); box-shadow: var(--shadow); z-index: 2; display: flex; flex-direction: column; border-radius: 3px; transition: all .2s ease;}
.custom-dropdown.active input + div{ opacity: 1; pointer-events: all; transform: translateY(0);}
.custom-dropdown input + div > label{ padding: 6px 15px; font-size: 14px; color: var(--clr-gray); cursor: pointer; transition: all .2s ease;}
.custom-dropdown input + div > label:hover{ background-color: var(--clr-light-gray); padding-left: 20px; color: var(--clr-black);}



/* ----------------------------------------------------- */
/* -------------------- KC_1 BUTTONS ------------------- */
/* ----------------------------------------------------- */
.kc_1-btns-wrapper{ display: flex; gap: calc(var(--dp) / 3);}
.kc_1-btns-wrapper-2{ display: flex; gap: calc(var(--dp));}

/* Buttons */
.kc_1-btn{ white-space: nowrap; text-align: center; background-color: var(--bg); border: 1px solid var(--border, var(--bg)); color: var(--clr); transition: all .3s ease; cursor: pointer; display: flex; justify-content: center; gap: 10px; align-items: center;}
.kc_1-btn:not(.just-clr){ border-radius: var(--btn-radius); padding: 17px 50px; font-size: 12px; font-weight: 600;}
.kc_1-btn:not(.no-hover):hover,
.kc_1-btn:not(.no-hover).active{ color: var(--hover-clr, var(--bg)); background-color: var(--clr); border: 1px solid var(--hover-border, var(--border, var(--bg)));}
.kc_1-btn.v2:not(.just-clr){ padding: 12px 50px;}

.kc_1-btn-v2{ font-size: 14px !important; font-weight: 400 !important; border-radius: 3px !important; padding: 5px 10px !important;}
.kc_1-btn-v2 button{ font-size: 20px; font-weight: 300; font-family: normal;}

.kc_1-btn-lg{ font-size: 14px !important; font-weight: 600 !important;}
.kc_1-btn-md{ font-size: 12px !important; font-weight: 600 !important; padding: 15px 50px !important;}

.btn-circle,
.btn-circle-2xs,
.btn-circle-xs,
.btn-circle-sm,
.btn-circle-md{ aspect-ratio: 1 !important; width: fit-content; padding-left: 0 !important; padding-right: 0 !important; display: flex; align-items: center; justify-content: center;}
.btn-circle{ height: 50px; font-size: 18px !important;}
.btn-circle-2xs{ height: 20px; font-size: 11px !important;}
.btn-circle-xs{ height: 30px; font-size: 13px !important;}
.btn-circle-sm{ height: 40px; font-size: 15px !important;}
.btn-circle-md{ height: 60px; font-size: 22px !important;}


.kc_1-single-btn{ font-size: 15px; background-color: transparent; border: none; outline: none; color: var(--bg); opacity: .5; transition: all .2s ease;}
.kc_1-single-btn.v2{ opacity: .3;}
.kc_1-single-btn.v2:hover{ opacity: .6;}
.kc_1-single-btn:hover,
.kc_1-single-btn.v2.active,
.kc_1-single-btn.active{ opacity: 1;}




.btn-white{ --bg: #fff; --clr: #000;}
.btn-white-outlined{ --bg: #00000000; --clr: #fff; --hover-clr: #000; --border: #fff;}
.btn-white-single{ --bg: #000; --clr: #fff; --hover-border: #fff;}

.btn-black{ --bg: #000; --clr: white;}
.btn-black-outlined{ --bg: #fff; --clr: #000; --border: #000;}
.btn-black-single{ --bg: #fff; --clr: #000; --hover-border: #000;}

.btn-gray{ --bg: var(--clr-gray); --clr: white;}
.btn-gray-outlined{ --bg: #fff; --clr: var(--clr-gray); --border: var(--clr-gray);}
.btn-gray-single{ --bg: #fff; --clr: var(--clr-gray); --hover-border: var(--clr-gray);}

.btn-light-gray{ --bg: var(--clr-light-gray); --clr: var(--clr-black);}
.btn-light-gray-outlined{ --bg: var(--clr-black); --clr: var(--clr-light-gray); --border: var(--clr-light-gray);}
.btn-light-gray-single{ --bg: var(--clr-black); --clr: var(--clr-light-gray); --hover-border: var(--clr-light-gray);}

.btn-red{ --bg: var(--clr-red); --clr: white;}
.btn-red-outlined{ --bg: #fff; --clr: var(--clr-red); --border: var(--clr-red);}
.btn-red-single{ --bg: #fff; --clr: var(--clr-red); --hover-border: var(--clr-red);}

.btn-green{ --bg: var(--clr-green); --clr: white;}
.btn-green-outlined{ --bg: #fff; --clr: var(--clr-green); --border: var(--clr-green);}
.btn-green-outlined-soft{ --bg: #fff; --clr: var(--clr-green); --border: var(--border-color-2);}
.btn-green-single{ --bg: #fff; --clr: var(--clr-green); --hover-border: var(--clr-green);}

.btn-darksea{ --bg: #248a79; --clr: white;}
.btn-darksea-outlined{ --bg: #fff; --clr: #248a79; --border: #248a79;}
.btn-darksea-single{ --bg: #fff; --clr: #248a79; --hover-border: #248a79;}

.btn-orange{ --bg: var(--clr-orange); --clr: white;}
.btn-orange-outlined{ --bg: #fff; --clr: var(--clr-orange); --border: var(--clr-orange);}
.btn-orange-single{ --bg: #fff; --clr: var(--clr-orange); --hover-border: var(--clr-orange);}


/* Tags */
.kc_1-tag{ padding: 3px 12px; font-size: 12px; line-height: 1.5; font-weight: var(--fw-400); border-radius: var(--btn-radius); background-color: var(--bg); border: 1px solid var(--border, var(--bg)); color: var(--clr); display: flex; width: fit-content; transition: all .3s ease;}
.kc_1-tag:not(.no-hover):hover{ color: var(--bg); background-color: var(--clr); border: 1px solid var(--hover-border, var(--border, var(--bg)));}










/* ----------------------------------------------------- */
/* ----------------------- ICONS ----------------------- */
/* ----------------------------------------------------- */
i.angle-left,
i.angle-right,
i.angle-down,
i.angle-up{ --size: 8px; display: inline-block; width: var(--size); min-width: var(--size); height: var(--size); transform: rotate(45deg); transform-origin: center center;}

i.angle-up{ border-right: 1.5px solid; border-bottom: 1.5px solid;}
i.angle-down{ border-top: 1.5px solid; border-left: 1.5px solid;}
i.angle-left{ border-bottom: 1.5px solid; border-left: 1.5px solid; margin-left: calc(var(--size) / 2);}
i.angle-right{ border-top: 1.5px solid; border-right: 1.5px solid; margin-left: calc(var(--size) / -2);}








/* ----------------------------------------------------- */
/* -------------------- KC_1 MODALS -------------------- */
/* ----------------------------------------------------- */
body:has(.kc_1-modal.active),
body:has(.mobile-filter.active){ overflow: hidden;}
.kc_1-modal{ background-color: rgba(0, 0, 0, .5); padding: var(--dp); display: flex; align-items: center; justify-content: center; position: fixed; inset: 0; overflow: hidden; opacity: 0; pointer-events: none; transition: all .4s ease; overflow-y: auto; z-index: 100;}
.kc_1-modal.active{ opacity: 1; pointer-events: all;}

.kc_1-modal > div{ background-color: white; padding: var(--dp); position: relative;}
.kc_1-modal > div > .close-btn{ position: absolute; right: var(--dp); top: var(--dp); font-size: 35px; line-height: 20px; font-weight: 600; border: none; outline: none; background-color: transparent; font-family: auto; cursor: pointer; opacity: .4; transition: all .2s ease;}
.kc_1-modal > div > .close-btn:hover{ opacity: 1;}


/* Search Modal */
.kc_1-modal.search-modal{ align-items: flex-start; padding: 0;}
.kc_1-modal.search-modal > div{ width: 100%; max-height: calc(100%  - (var(--dp) * 2)); overflow-y: auto; transform: translateY(-50%); transition: all .5s ease;}
.kc_1-modal.search-modal.active > div{ transform: translateY(0);}
.kc_1-modal.search-modal > div .search-wrapper{ max-width: 600px; margin: 0 auto;}

.kc_1-modal.cart-modal{ justify-content: flex-end; padding: 0;}
.kc_1-modal.cart-modal > div{ padding: 0; display: flex; flex-direction: column; width: 100%; height: 100dvh; max-width: 450px; overflow-y: auto; transform: translateX(100%); transition: all .5s ease;}
.kc_1-modal.cart-modal.active > div{ transform: translateX(0);}
.kc_1-modal.cart-modal > div .close-btn{ top: 17px;}

.kc_1-cart-wrapper{ height: 100%;}
.kc_1-cart-wrapper > .t{ border-bottom: 1px solid var(--border-color); padding: calc(var(--dp) / 2) var(--dp);}
.kc_1-cart-wrapper > .t > button{}
.kc_1-cart-wrapper > .c{ padding: var(--dp); height: calc(100% - (57px + 154px)); overflow-y: auto;}
.kc_1-cart-wrapper > .b{ padding: var(--dp); background-color: var(--clr-smooth-gray);}
.kc_1-cart-wrapper > .b .btns{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--dp) / 3);}










/* ----------------------------------------------------- */
/* ------------------ KC_1 ANIMATIONS ------------------ */
/* ----------------------------------------------------- */
.moving-banner { animation: ticker 20s infinite linear; flex-shrink: 0; display: flex; animation-play-state: running;}
.moving-banner.slow{ animation-duration: 30s;}
.moving-banner.fast{ animation-duration: 15s;}
.moving-banner.extra-fast{ animation-duration: 10s;}
.moving-banner.light-fast{ animation-duration: 5s;}
.moving-banner:not(.no-stop):hover{ animation-play-state: paused;}
.moving-banner > div{
    flex-wrap: nowrap; display: flex; white-space: nowrap;
}

@-moz-keyframes ticker {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}

@-webkit-keyframes ticker {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}

@-o-keyframes ticker {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}

@keyframes ticker {
    0% {transform: translateX(0)}
    100% {transform: translateX(-100%)}
}








/* ----------------------------------------------------- */
/* ------------------- KC_1 CONTAINERS ----------------- */
/* ----------------------------------------------------- */
.dp{ padding: 0 var(--dp);}
.full-padding{ padding: var(--dp);}
.kc_1-container{ max-width: var(--max-width); margin: 0 auto; width: 100%;}
.kc_1-container-2{ max-width: calc(100% - 150px); margin: 0 auto;}
.kc_1-container-half{ max-width: calc(var(--max-width) / 2); margin: 0 auto;}

.shadow{ box-shadow: var(--shadow);}
.shadow-2{ box-shadow: var(--shadow-2);}

.spacing-1{ padding-top: 60px;}
.spacing-2{ padding-top: 80px;}
.spacing-3{ padding-top: 100px;}

.kc_1-py{ padding-top: var(--dp); padding-bottom: var(--dp);}


.w-full{ width: 100%;}
.w-dp{ width: calc(100% - (var(--dp) * 2));}

.rounded{ border-radius: var(--base-radius); overflow: hidden;}

.relative{ position: relative;}
.z-1{ z-index: 1;}

.flex{ display: flex;}
.grid{ display: grid;}
.block{ display: block;}
.inline-block{ display: inline-block;}

.row-reverse{ flex-direction: row-reverse;}
.row-reverse > *:nth-child(1){ order: 5;}
.row-reverse > *:nth-child(2){ order: 4;}
.row-reverse > *:nth-child(3){ order: 3;}
.row-reverse > *:nth-child(4){ order: 2;}
.row-reverse > *:nth-child(5){ order: 1;}

.aspect-square{ aspect-ratio: 1;}
.aspect-half-rectangle{ aspect-ratio: 1.5;}
.aspect-rectangle{ aspect-ratio: 2;}
.aspect-short{ aspect-ratio: 9/16;}
.aspect-video{ aspect-ratio: 16/9;}

/* TEXT OPTIONS */
.text-center{ text-align: center;}
.text-start{ text-align: start;}
.text-end{ text-align: end;}

.text-white{ color: var(--clr-white);}
.text-black{ color: var(--clr-black);}
.text-gray{ color: var(--clr-gray);}
.text-green{ color: var(--clr-green);}

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

.kc_1-headline{ font-size: 40px; font-weight: var(--fw-400);}
.kc_1-headline-md{ font-size: 35px; font-weight: var(--fw-400);}
.kc_1-headline-sm{ font-size: 30px; font-weight: var(--fw-400);}
.kc_1-headline-lg{ font-size: 45px; font-weight: var(--fw-400);}
.kc_1-headline-xl{ font-size: 50px; font-weight: var(--fw-400);}

.kc_1-sub-headline{ font-size: 13px; font-weight: var(--fw-500);}

.kc_1-text-2xs{ font-size: 10px !important; font-weight: var(--fw-400);}
.kc_1-text-xs{ font-size: 12px !important; font-weight: var(--fw-400);}
.kc_1-text-sm{ font-size: 14px !important; font-weight: var(--fw-400);}
.kc_1-text{ font-size: 16px !important; font-weight: var(--fw-400);}
.kc_1-text-lg{ font-size: 18px !important; font-weight: var(--fw-500);}
.kc_1-text-xl{ font-size: 20px !important; font-weight: var(--fw-500);}
.kc_1-text-2xl{ font-size: 22px !important; font-weight: var(--fw-500);}
.kc_1-text-3xl{ font-size: 24px !important; font-weight: var(--fw-500);}

.kc_1-link{ font-size: 12px; font-weight: var(--fw-600);}

.kc_1-line-text{}
.kc_1-line-text::after{ margin: 0 calc(var(--dp)); content: ''; display: inline-block; vertical-align: middle; border-top: 1px solid; width: 40px; min-width: 40px;}

.kc_1-light-text{}
.kc_1-light-text::after{ margin: 0 calc(var(--dp) / 3); font-size: 1.2em; content: 'âš¡'; display: inline-block; vertical-align: middle;}

.fw-100{ font-weight: var(--fw-100) !important;}
.fw-200{ font-weight: var(--fw-200) !important;}
.fw-300{ font-weight: var(--fw-300) !important;}
.fw-400{ font-weight: var(--fw-400) !important;}
.fw-500{ font-weight: var(--fw-500) !important;}
.fw-600{ font-weight: var(--fw-600) !important;}

.leading-normal{ line-height: 1.2;}


.p-0{ padding: 0 !important;}

.mt-1{ margin-top: 5px !important;}
.mt-2{ margin-top: 10px !important;}
.mt-3{ margin-top: 15px !important;}
.mt-4{ margin-top: 20px !important;}
.mt-5{ margin-top: 25px !important;}
.mt-6{ margin-top: 30px !important;}
.mt-7{ margin-top: 35px !important;}
.mt-8{ margin-top: 40px !important;}
.mt-9{ margin-top: 45px !important;}
.mt-10{ margin-top: 50px !important;}

.mb-1{ margin-bottom: 5px !important;}
.mb-2{ margin-bottom: 10px !important;}
.mb-3{ margin-bottom: 15px !important;}
.mb-4{ margin-bottom: 20px !important;}
.mb-5{ margin-bottom: 25px !important;}
.mb-6{ margin-bottom: 30px !important;}
.mb-7{ margin-bottom: 35px !important;}
.mb-8{ margin-bottom: 40px !important;}
.mb-9{ margin-bottom: 45px !important;}
.mb-10{ margin-bottom: 50px !important;}



.ml-auto{ margin-left: auto;}
.mr-auto{ margin-right: auto;}
.mx-auto{ margin-inline: auto;}





@media screen and (min-width: 998px) {
    .show-mobile{ display: none;}
    .mobile-aspect-square{ aspect-ratio: 1;}

    .kc_1-header > div .c nav > ul > li > ul{ color: var(--clr-black); padding: 10px 0; width: 200px; transition: all .3s ease; display: flex; flex-direction: column; position: absolute; top: calc(100% + var(--py) + 20px); background-color: var(--bg-white); box-shadow: var(--shadow); list-style: none; left: 0; border-radius: 3px; opacity: 0; pointer-events: none; z-index: 2;}
    .kc_1-header > div .c nav > ul > li > a:hover + ul,
    .kc_1-header > div .c nav > ul > li > a + ul:hover{ top: calc(100% + var(--py) - .1px); opacity: 1; pointer-events: all;}
    .kc_1-header > div .c nav > ul > li > ul > li > a{ display: flex; padding: 7px 20px; transition: all .2s ease;}
    .kc_1-header > div .c nav > ul > li > ul > li > a:hover{ padding-left: 25px; background-color: var(--clr-light-gray);}
}
@media screen and (min-width: 668px) {
    .hide-phone{ display: none;}
}


@media screen and (max-width: 1280px) {
    .kc_1-wrapper-6{ grid-template-columns: repeat(5, 1fr);}

    .kc_1-shop-wrapper{ gap: var(--dp);}

    .mobile-filter{ position: fixed; top: 0; left: 0; width: 100% !important; min-width: unset !important; height: 100%; flex-direction: column; z-index: 50; background-color: var(--bg-white); transition: all .5s ease; opacity: 0; transform: translateX(-100%);}
    .mobile-filter.active{ transform: translateX(0); opacity: 1;}
    .mobile-filter .filter-area{ padding: 10px 25px 50px; max-height: calc(100% - var(--header-height)); overflow-y: auto;}

}

@media screen and (max-width: 1024px) {
    .kc_1-footer > div .top{ grid-template-columns: 1fr 1fr; gap: calc(var(--dp) * 2) calc(var(--dp) * 2)   ;}
    .kc_1-footer > div .bottom{ flex-direction: column; gap: 20px;}

    .kc_1-wrapper-6,
    .kc_1-wrapper-5{ grid-template-columns: repeat(4, 1fr);}
}

@media screen and (max-width: 998px) {
    html{
        --dp: 15px;
        --header-height: 60px;
    }

    .kc_1-accordion-1 .h h4{ padding: var(--dp) 0;}

    .kc_1-cart-wrapper > .t{ padding: var(--dp);}
    .kc_1-cart-wrapper > .c{ height: calc(100% - (56px + 107px));}


    .hide-mobile{ display: none !important;}

    .kc_1-modal > div > .close-btn{ font-size: 30px;}

    .kc_1-wrapper-9{ padding: 0 25px; display: flex; background-color: var(--clr-red); height: var(--header-height); position: relative;}
    .kc_1-wrapper-9 > button:not(.close-btn){ font-size: 16px; font-weight: var(--fw-500); background-color: transparent; color: var(--clr-white);}
    .kc_1-wrapper-9 .close-btn{ position: absolute; right: 30px; top: 50%; transform: translateY(calc(-50% - 4px)); color: var(--clr-white); font-size: 25px; font-weight: var(--fw-300); line-height: 1;}

    .kc_1-header .kc_1-hot-txt{ transform: translateX(calc(100% + 10px)) translateY(-50%); top: 50%;}
    .kc_1-header .kc_1-hot-txt::before{ border-color: transparent var(--hot-bg) transparent transparent; border-width: 4.5px 4.5px 4.5px; top: 50%; left: 0; transform: translateY(-50%) translateX(-100%);}
    .kc_1-header > div .c{ flex-direction: column; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; background-color: var(--bg-white); transition: all .5s ease; opacity: 0; transform: translateX(-100%);}
    .kc_1-header > div .c.active{ transform: translateX(0); opacity: 1;}
    .kc_1-header > div .c nav{ max-height: calc(100dvh - var(--header-height)); overflow-y: auto; padding-bottom: 100px;}
    .kc_1-header > div .c nav > ul{ flex-direction: column; padding: 0 25px; height: fit-content;}
    .kc_1-header > div .c nav > ul > li{ border-bottom: 1px solid var(--border-color);}
    .kc_1-header > div .c nav > ul > li > a{ padding: 15px 0; width: 100%; height: fit-content;}
    .kc_1-header > div .c nav > ul > li:has(> ul) > a::after{ position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(-45deg); opacity: 1; --size: 6px;}
    .kc_1-header > div .c nav > ul > li > ul{ padding-left: 5px; padding-bottom: 10px;}
    .kc_1-header > div .c nav > ul > li > a:hover + ul,
    .kc_1-header > div .c nav > ul > li > a + ul:hover{}
    .kc_1-header > div .c nav > ul > li > ul > li > a{ padding: 7px 10px; display: inline-block;}
    .kc_1-header > div .c nav > ul > li > ul > li > a:hover{}


    .kc_1-header > div .l{ justify-content: center;}

    .kc_1-template-1 > div{ display: flex; flex-direction: column; justify-content: center;}
    .kc_1-template-1 > div > .r{ display: none;}
    .kc_1-template-1 > div > div{ text-align: start; align-items: flex-start;}
    .kc_1-template-1 .title{ font-size: 40px;}

    .kc_1-wrapper-1{ grid-template-columns: repeat(2, 1fr);}
    .kc_1-wrapper-1 > *:nth-child(1){ grid-area: 1/1/3/2;}
    .kc_1-wrapper-1 > *:nth-child(2){ grid-area: 3/1/4/2;}
    .kc_1-wrapper-1 > *:nth-child(3){ grid-area: 1/2/1/3;}
    .kc_1-wrapper-1 > *:nth-child(4){ grid-area: 2/2/4/3;}
    .kc_1-wrapper-7{ gap: var(--dp);}
    .kc_1-wrapper-7 > div:not(:first-child){ padding-top: var(--dp);}




    .kc_1-btn:not(.just-clr){ padding: 10px 25px; font-size: 10px;}

    .kc_1-slider-template-1{ height: 500px !important;}
    .kc_1-header.transparent-banner ~ .first-slider .swiper-slide{ height: calc(500px + var(--header-height)) !important;}

}
@media screen and (max-width: 768px) {
    .show-tablet{ display: none;}

    .kc_1-wrapper-6,
    .kc_1-wrapper-5,
    .kc_1-wrapper-4{ grid-template-columns: repeat(3, 1fr);}

    .kc_1-wrapper-10{ grid-template-columns: 1fr; gap: calc(var(--dp) * 3) 0;}

    .kc_1-wrapper-11{ grid-template-columns: 1fr; height: fit-content;}

    .kc_1-container-2{ max-width: 100%;}

    .kc_1-bg{ margin-top: 0 !important;}

    .kc_1-template-8{ grid-template-columns: 1fr;}
    .kc_1-template-8 .r img{ position: static;}

    .kc_1-template-13{ padding: 50px var(--dp);}
    .kc_1-template-14{ height: 200px;}


    .kc_1-btns-wrapper{ gap: calc(var(--dp) / 2);}

}
@media screen and (max-width: 668px) {
    html{
        font-size: 15px;
        --slider-arr-width: 40px;
        --slider-arr-height: 40px;
    }

    .show-phone{ display: none;}

    .kc_1-wrapper-8{ flex-direction: column;}
    .kc_1-wrapper-8 > div:nth-child(3){ justify-content: space-between;}

    .kc_1-headline{ font-size: 32px; line-height: 1.3;}

    .kc_1-btn-lg{ font-size: 13px !important;}
    .kc_1-btn-md{ font-size: 11px !important;}

    .kc_1-tag{ font-size: 10px; padding: 2px 10px;}


    .btn-circle-md{ height: 50px; font-size: 19px !important;}
    .btn-circle{ height: 40px; font-size: 16px !important;}
    .btn-circle-xs{ height: 30px; font-size: 11px !important;}
    .btn-circle-sm{ height: 40px; font-size: 13px !important;}

    .kc_1-template-3 .img-area > .kc_1-banner-2 + .kc_1-btn{ bottom: 30px;}

    .kc_1-wrapper-3{ grid-template-columns: repeat(2, 1fr);}
    .kc_1-wrapper-6,
    .kc_1-wrapper-5,
    .kc_1-wrapper-4{ grid-template-columns: repeat(2, 1fr);}
    .single-mobile-wrapper{ grid-template-columns: 1fr !important;}

    .kc_1-footer > div .top{ padding-bottom: 0; display: flex; flex-direction: column; gap: 0;}
    .kc_1-footer > div .top > div:nth-child(1){ margin-bottom: calc(var(--dp) * 2);}
    .kc_1-footer > div .top .mobile-accordion{ padding: var(--dp) 0; border-top: 1px solid var(--border-color);}
    .kc_1-footer > div .top .mobile-accordion:nth-last-of-type(1){ border-bottom: 1px solid var(--border-color);}
    .kc_1-footer > div .top .mobile-accordion .h{ display: inline-block; width: 100%; cursor: pointer; position: relative;}
    .kc_1-footer > div .top .mobile-accordion .h::after{ content: '+'; display: inline-block; position: absolute; top: 50%; transform: translateY(calc(-50% - 3px)); right: 0; font-size: 30px; font-weight: var(--fw-300); pointer-events: none;}
    .kc_1-footer > div .bottom{ border-top: none; padding-top: 20px;}
    .kc_1-footer > div .top .mobile-accordion .kc_1-vertical-list{ margin-top: 1lh;}
    .kc_1-footer > div .top .mobile-accordion .kc_1-vertical-list br{ display: none;}
}




.iti{ width: 100%;}
.iti .iti__selected-dial-code{ font-size: 14px;}