body{
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    font-family: "Geologica", sans-serif;
    font-weight: 400;
    color: #171C32;
}

html{
}

main{
    position: relative;
    max-width: 1920px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
}

@media (max-width: 579px){
    main{
        padding-left: 0;
        padding-right: 0;
    }
}

.container {
    max-width: 1620px;
    padding-left: 15px;
    padding-right: 15px;
    margin-right: auto;
    margin-left: auto;
    transform: translateX(-30px);
}

@media (min-width: 1501px) and (max-width: 1700px) {
    .container {
        padding-left: 120px;
        padding-right: 180px;
    }
}

@media (min-width: 1200px) and (max-width: 1500px) {
    .container {
        padding-left: 90px;
        padding-right: 160px;
        transform: translateX(0);
    }
}

@media (max-width: 579px){
    .container{
        transform: unset;
    }
}

a,
a.nav-link{
    color: #171C32;
    transition: .4s;
}

a:hover,
a.nav-link:hover,
a.nav-link:focus{
    color: #EF7D00;
}

b{
    font-weight: bold;
}


/* BOOTSTRAP CUSTOM
================================
================================*/
.btn{
    height: 60px;
    border-radius: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 5px;
    font-size: 16px;
    font-weight: 400;
}
@media (max-width: 579px){
    .btn{
        height: 50px;
        font-size: 16px;
        border-radius: 10px;
    }
}

.btn:focus{
    box-shadow: 0 0 0 .25rem rgba(204, 204, 204, .5);
}

a.btn{
    display: flex;
    align-items: center;
}

.btn-warning {
    --bs-btn-color: #000;
    --bs-btn-bg: #FFBF33;
    --bs-btn-border-color: #FFBF33;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #FFCC5C;
    --bs-btn-hover-border-color: #FFCC5C;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #ffcd39;
    --bs-btn-active-border-color: #ffc720;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #EF7D00;
    --bs-btn-border-color: #EF7D00;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #e58c32;
    --bs-btn-hover-border-color: #e58c32;
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #e58c32;
    --bs-btn-active-border-color: #e58c32;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

/* FONT FAMILY
================================
================================*/
.fonts{
    font-family: fonts-title ;
}

/* FONT WEIGHT
================================
================================*/
.fw-100{
    font-weight: 100 !important;
}
.fw-200{
    font-weight: 200 !important;
}
.fw-300{
    font-weight: 300 !important;
}
.fw-400{
    font-weight: 400 !important;
}
.fw-500{
    font-weight: 500 !important;
}
.fw-600{
    font-weight: 600 !important;
}
.fw-700{
    font-weight: 700 !important;
}
.fw-800{
    font-weight: 800 !important;
}
.fw-900{
    font-weight: 900 !important;
}

/* FONT SIZE 
================================
================================*/


/* LOST CSS
================================
================================*/


/* COLOR & BACKGROUND
================================
================================*/


/* MOBILE NAV SWIPE 
================================
================================*/
.mobile-menu{
    height: 60px;
    width: 100%;
    padding: 0 15px;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
    border-top: 1px solid #ccc;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 1rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.mobile-menu .nav-header-tools{
    column-gap: 1.5rem;
}

.mobile-menu .nav-header-tools li:last-child{
    margin-left: -.75rem;
}

.mobile-menu-wrapper{
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.mobile-menu-wrapper img,
.mobile-menu-wrapper svg{
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

.mobile-menu-wrapper svg rect,
.mobile-menu-wrapper svg polygon{
    transition: .4s;
}

.mobile-menu-wrapper:hover svg rect,
.mobile-menu-wrapper:hover svg polygon{
    fill: #EF7D00;
}

.nav-menu{
    flex-direction: column;
    row-gap: 1rem;
    margin: 2rem 0;
}

.nav-menu li a{
    padding: 0;
    font-weight: 600;
}

.nav-header-tools li a img,
.nav-header-tools li a img{
    width: 30px;
    height: 30px;
}

.nav-header-tools li a.js-side-search img,
.nav-header-tools li a.js-side-search svg{
    padding: .1rem;
}

/* TOP ALL CATEGORY
================================
================================*/
.top-all-category{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 5;
}

.top-all-category-wrapper{
    position: relative;
    background: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    z-index: 1;
}

.top-all-category-mask{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.top-all-category-mask.active{
    position: fixed;
}

.top-all-category-mask::before{
    position: fixed;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: .4s;
    z-index: -1;
}

.top-all-category-mask.active::before{
    opacity: 1;
    visibility: visible;
}

.all-category {
    column-count: 6; /* Количество колонок */
    column-gap: 1rem; /* Расстояние между колонками */
    width: 100%;
    max-height: 80vh;
}

.all-category-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 2rem;
    break-inside: avoid; /* Предотвращает разрыв элементов между колонками */
    page-break-inside: avoid; /* Для старых браузеров */
}

.all-category-item-header{
    display: flex;
    align-items: center;
    column-gap: 1rem;
    margin-bottom: 1rem;
    line-height: 1.3;
    font-size: 14px;
    text-decoration: none;
}

.all-category-item-header img{
    transition: .4s;
}

.all-category-item-header:hover img{
    transform: scale(1.1);
}

.nav-all-category{
    flex-direction: column;
    row-gap: 1rem;
}

.nav-all-category li a{
    padding: 0;
    font-size: 14px;
    font-weight: 300;
    display: inline-block;
}

.nav-all-category li a:hover{
    font-weight: 500;
    color: black;
}

.all-category-close{
    position: absolute;
    top: 3rem;
    right: -2rem;
}

.all-category-close img{
    transition: .4s;
}

.all-category-close:hover img{
    transform: rotate(-180deg);
}

@media (max-width: 1700px){
    .all-category-item-header img{
        width: 35px;
        height: 35px;
    }
    .nav-all-category{
        row-gap: .5rem;
    }
    .nav-all-category li a{
        font-size: 12px;
    }
    .top-all-category-wrapper .container{
        padding-left: 30px;
        padding-right: 30px;
    }
}

/* SIDE LEFT & RIGHT
================================
================================*/
.side{
    position: absolute;
    top: 0;
    height: 100%;
}

.side-left{
    left: 0;
    width: 80px;
    margin-left: 15px;
    transition: .4s;
    z-index: 4;
}

.side-right{
    right: 0;
    width: 140px;
    margin-right: 15px;
    z-index: 3;
}

.side-left.hide{
    left: -500px;
    transition: 2s;
}

@media (max-width: 579px){
    .side-left{
        width: 100%;
        left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        margin-left: 0;
    }
}

/* NAVIGATION
================================
================================*/
.side-menu{
    position: fixed;
    width: fit-content;
    height: calc(100vh - 15px);
    background-color: #F3F4F5;
    z-index: 4;
    border-radius: 20px;
}

.side-menu::after{
    position: fixed;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .35);
    backdrop-filter: blur(5px);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: .4s;
}

.side-menu.active::after{
    opacity: 1;
    visibility: visible;
}

.side-menu-logo{
    position: relative;
    width: 100%;
    height: 80px;
    background-color: #171C32;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border-radius: 20px;
}

.side-menu.active .logo-full,
.side-menu.active .logo-short{
    transition: 1s;
}

.side-menu .logo-full{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    opacity: 0;
}

.side-menu.active .logo-full{
    opacity: 1;
}

.side-menu.active .logo-short{
    opacity: 0;
}

.side-menu-content{
    position: relative;
    height: 100%;
    max-width: 80px;
    transition: .2s;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.side-menu-content:hover{
    max-width: 360px;
    background-color: #F7F7F7;
    transition: 1s;
}

.side-menu-content:hover .nav-sidemenu li a span{
    position: relative;
    opacity: 1;
    visibility: visible;
}

.nav-sidemenu{
    height: calc(100% - 80px);
    /*row-gap: 1rem;*/
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    overflow: hidden;
    padding-top: 1rem;
}

.nav-sidemenu li a{
    padding: .5rem 15px;
    column-gap: 1rem;
    display: flex;
    align-items: center;
    font-size: 14px;
    text-decoration: none;
}

.nav-sidemenu li a span{
    opacity: 0;
    visibility: hidden;
    /*position: absolute;*/
    text-wrap: nowrap;
}

.nav-sidemenu li a img,
.nav-sidemenu li a svg{
    transition: .4s;
}

.nav-sidemenu li a:hover img,
.nav-sidemenu li a:hover svg{
    transform: scale(1.1);
}

.nav-sidemenu li a img.ico,
.nav-sidemenu li a svg.ico{
    width:  50px;
    height: 50px;
}

.nav-sidemenu li a svg rect,
.nav-sidemenu li a svg circle,
.nav-sidemenu li a svg path{
    transition: .4s;
}

.nav-sidemenu li a:hover svg rect,
.nav-sidemenu li a:hover svg circle,
.nav-sidemenu li a:hover svg path{
    /*stroke: #EF7D00;*/
}

.color-guitar .nav-sidemenu li a svg path[fill="#FAD8B3"]{
    fill: rgba(239, 125, 0, .5);
}
.color-headphones .nav-sidemenu li a svg path[fill="#FAD8B3"]{
    fill: rgba(23, 143, 207, .5);
}
.color-voice .nav-sidemenu li a svg path[fill="#FAD8B3"]{
    fill: rgba(130, 53, 140, .5);
}




.nav-side-right li a svg path,
.side-menu-logo svg path{
    transition: .4s;
}

.color-guitar .side-menu-logo svg path[fill="#EF7D00"]{
    fill: rgba(239, 125, 0, 1);
}

.color-headphones .side-menu-logo svg path[fill="#EF7D00"]{
    fill: rgba(23, 143, 207, 1);
}

.color-voice .side-menu-logo svg path[fill="#EF7D00"]{
    fill: rgba(130, 53, 140, 1);
}

.color-guitar .nav-side-right li a svg path[fill="#FAD8B3"]{
    fill: rgba(239, 125, 0, .5);
}
.color-headphones .nav-side-right li a svg path[fill="#FAD8B3"]{
    fill: rgba(23, 143, 207, .5);
}
.color-voice .nav-side-right li a svg path[fill="#FAD8B3"]{
    fill: rgba(130, 53, 140, .5);
}




@media (max-width: 1700px){
    .side-menu-content{
        padding: 0 0;
    }
    .side-menu-logo{
        height: 70px;
    }
    .nav-sidemenu li a{
        padding: .5rem 10px;
        font-size: 16px;
    }
    .side-menu-content{
        max-width: 70px;
        height: 100%;
    }
}

@media(max-width: 579px){
    .side-menu{
        position: sticky;
        top: 0;
        width: 100%;
        height: 100vh;
        border-radius: 0;
        border-top-right-radius: 30px;
        border-bottom-right-radius: 30px;
    }
    .side-menu .logo-full{
        left: 15px;
    }
    .side-menu-content{
        padding: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
    }

    .nav-sidemenu li a{
        padding: 0 15px;
        font-size: 14px;
    }
    .nav-sidemenu li a span{
        opacity: 1;
        visibility: visible;
        text-align: start;
        text-wrap: auto;
    }

    .nav-sidemenu li a img.ico, 
    .nav-sidemenu li a svg.ico{
        width:  35px;
        height: 35px;
        min-width:  35px;
        min-height: 35px;
    }
}

/* SUBMENU SIMPLE  */
.sidemenu-submenu{
    position: absolute;
    top: 0;
    left: 100%;
    background-color: #F7F7F7;
    height: 100%;
    border-left: 1px solid #ccc;
    padding: 1.5rem 1rem;
    opacity: 0;
    visibility: hidden;
    transition: .2s;
    z-index: 0;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.nav-sidemenu li > a{
    transition: .4s;
}

.nav-sidemenu li:hover > a{
    color: #EF7D00;
}
.nav-sidemenu li:hover .sidemenu-submenu{
    opacity: 1;
    visibility: visible;
    transition: .4s;
}

.submenu-simple-title{
    font-size: 24px;
    text-align: start;
    margin-bottom: 1rem;
    display: block;
    padding: 0 15px;
}

.nav-submenu-simple{
    flex-direction: column;
    row-gap: 1.5rem;
    padding: 0 1rem;
}

.nav-submenu-simple li a{
    font-size: 14px;
    font-weight: 300;
    text-decoration: none;
    text-wrap: nowrap;
    padding: 0;
}

/* SIDE MENU RIGHT */
.side-menu-right{
    position: fixed;
    height: 100vh;
    width: 100%;
    padding: 4rem 0;
}

.nav-side-right{
    flex-direction: column;
    row-gap: 2rem;
    justify-content: center;
    height: 100%;
}

.nav-side-right li:last-child{
    margin-top: 5rem;
}

.nav-side-right li a{
    position: relative;
    padding: 0;
    width: 140px;
    height: 140px;
    border-radius: 20px;
    background-color: #F3F4F5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
    padding: 1rem;
    font-size: 14px;
    line-height: 1.3;
}

.nav-side-right li a img{
    transition: .4s;
}

.nav-side-right li a span{
    margin-top: .25rem;
}

.nav-side-right li a:hover img{
    transform: scale(1.05);
}

.nav-side-right li a:not(.disk)::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: red;
    border-radius: 20px;
    opacity: 0;
    background: linear-gradient(to bottom, rgba(239, 125, 0, 0.1), rgba(239, 125, 0, 1));
    transition: .4s;
    z-index: 0;
}

.nav-side-right li a:hover::after{
    opacity: 1;
}

.nav-side-right li a:hover{
    color: white;
}

.nav-side-right li a img,
.nav-side-right li a span{
    position: relative;
    z-index: 1;
}

.nav-side-right li a.disk{
    position: relative;
    padding: 0;
    background-color: transparent;
}

/*
.nav-side-right li a.disk::after{
    position: absolute;
    content: '';
    width:  100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #EF7D00;
    filter: blur(100px);
    opacity: 0;
    transition: .4s;
}

.nav-side-right li a.disk:hover::after{
    opacity: 1;
}
*/

.nav-side-right li a.disk img.disk,
.nav-side-right li a.disk svg.disk{
    transform: rotate(180deg);
    transition: 2s;
    animation: spin 20s linear infinite reverse;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.nav-side-right li a.disk img.disk-tg{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: .4s;
    transform: translateY(0.05rem);
}

.nav-side-right li a.disk:hover img.disk-tg{
    transform: scale(1.2);
}

/* PROMO 
================================
================================*/
.nav-promo{
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

.nav-promo li a{
    padding: 0;
    font-size: 14px;
}

.block-promo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.promo-tel{
    font-size: 20px;
    font-weight: 600;
    text-decoration: none;
    color: #45495B;
}

/* PROMO TOOLS */
.nav-promo-tools{
    column-gap: 2rem;
    align-items: center;
}

.nav-promo-tools li a{
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.nav-promo-tools li a img{
    width: 15px;
    height: 15px;
    object-fit: contain;
    transition: .4s;
}

.nav-promo-tools li a:hover img{
    transform: scale(1.15);
}

.nav-promo-tools li a.email{
    color: black;
    font-weight: 500;
}

.nav-promo-tools li a.phone{
    color: black;
    font-size: 16px;
    font-weight: 600;
}

/* HEADER 
================================
================================*/
header{
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 1.15rem;
    padding-bottom: 1.15rem;
    z-index: 2;
    background-color: white;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: .4s;
}

.header-wrapper{
    max-width: 1610px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: 1.45fr 5.5fr 3.55fr;
    column-gap: 3rem;
    align-items: center;
}

/* HEADER NAV TOOLS */
.nav-header-tools{
    justify-content: space-between;
}

header .nav-header-tools li a{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: .5rem;
    line-height: 1;
    font-size: 14px;
    padding: 0;
}

.nav-header-tools li a img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* HEADER TOOOLS */
.nav-header-tools{
    justify-content: space-between;
}

.nav-header-tools li a{
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.nav-header-tools li a .count{
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background-color: #FFBF33;
    border-radius: 6px;
    color: black;
}

.nav-header-tools li a img,
.nav-header-tools li a svg{
    width: 30px;
    height: 30px;
}

.nav-header-tools li a svg path,
.nav-header-tools li a svg rect,
.nav-header-tools li a svg circle[stroke="black"],
.nav-header-tools li a svg circle:not([stroke="black"]){
    transition: .4s;
}
.nav-header-tools li a:hover svg path,
.nav-header-tools li a:hover svg rect{
    stroke: #EF7D00;
}
.nav-header-tools li a:hover svg circle[stroke="black"]{
    stroke: #EF7D00;
}
.nav-header-tools li a:hover svg circle:not([stroke="black"]){
    fill: #EF7D00;
}

.nav-header-tools li a.header-login-icon:hover svg path[stroke="#0D0D0D"]{
    transform: translateX(3px);
}

/* HEADER SEARCH */
.header-search {
    position: relative;
    height: 50px;
}

.header-search input{
    height: 50px;
    border-radius: 12px;
    background-color: #F3F4F5;
    border: 1px solid #E8E8EB;
    width: 100%;
    padding: .5rem 1.5rem;
    transition: .4s;
}

.header-search input::placeholder{
    font-size: 14px;
    transition: .4s;
}

.header-search input:focus{
    box-shadow: 0 0 0 .25rem rgba(243, 244, 245, .75);
    outline: none;
}

.header-search input:focus::placeholder{
    color: #ccc;
}

.btn-search{
    position: absolute;
    top: 0;
    right: 1rem;
    bottom: 0;
    margin: auto;
    height: 50px;
    width: 50px;
    padding: 0;
}

.btn-search img{
    transition: .4s;
}

.btn-search:hover img{
    transform: scale(1.1);
}

@media (max-width: 810px){
    .header-wrapper a.menu img,
    .header-wrapper a.menu svg{
        width: 16px;
        height: 16px;
        margin-top: 1px;
    }
}

@media (max-width: 579px){
    header{
        padding-bottom: 1rem;
        padding-top: 1rem;
    }
    header.scrolling{
        box-shadow: 0 0 1px red;
    }
    .header-wrapper{
        column-gap: 1rem;
        display: grid;
        grid-template-columns: 140px auto;
        align-items: center;
        justify-content: space-between;
    }

    .header-wrapper a.menu {
        display: flex;
        align-items: center;
        column-gap: .75rem;
        text-decoration: none;
        line-height: 1;
    }
    .header-wrapper a.menu svg path{
        transition: .4s;
    }
    .header-wrapper a.menu:hover svg path{
        fill: #EF7D00;
    }
}

/* MAIN SLIDER
================================
================================*/
.block-slider{
    position: relative;
    z-index: 2;
}

.block-slider::after{
    position: absolute;
    content: '';
    left: 0;
    right: 0;
    bottom: -100px;
    height: 140px;
    width: 100%;
    background: linear-gradient(to bottom, white 40%, transparent);
}

.main-slider {
    border-radius: 30px;
}

.main-slider .cover{
    position: relative;
    overflow: hidden;
}

.main-slider .cover::before,
.main-slider .cover::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
}

.main-slider .cover::before{
    top: -50%;
    left: -18%;
    width: 150%;
    height: 75%;
    background: linear-gradient(180deg, rgba(23,28,50,0) 0%, #171c32 100%);
    transform: rotate(-18deg) scaleY(-1);
}

.main-slider .cover::after{
  right: 0;
  bottom: 0;
  width: 100%;
  height: 15%;
  background: linear-gradient(180deg, rgba(23,28,50,0) 0%, #171c32 100%);
}

.main-slider-header,
.main-slider-footer{
    position: absolute;
    color: white;
    z-index: 1;
}

.main-slider-header{
    top:  3.5rem;
    left: 3.5rem;
    font-size: 96px;
    font-weight: 700;
    width: 50%;
    line-height: 1.2;
}

.main-slider-footer{
    right:  3.5rem;
    bottom: 3.5rem;
    font-size: 54px;
    font-weight: 500;
}

/* MAIN SLIDER PAGINATION */
.main-slider-pagination-tools{
    position: absolute;
    width: fit-content;
    left: 6rem;
    bottom: 0;
}

.main-slider-pagination-angle{
    position: absolute;
    bottom: -1px;
    width: 12px;
    height: 12px;
    /*background: white;*/
    z-index: 1;
}

.main-slider-pagination-angle-left{
    left: -11px;
}
.main-slider-pagination-angle-right{
    right: -11px;
    transform: rotate(90deg);
}

.main-slider-pagination-angle::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: white;
  clip-path: path("M0 12C6.6 12 12 6.6 12 0L12 12C15.6 12 0 12 0 12Z");
}

.main-slider-pagination.swiper-pagination-bullets{
    position: relative;
    bottom: 0;
    width: fit-content;
    display: flex;
    align-items: end;
    background-color: white;
    height: 40px;
    border-radius: 12px 12px 0 0;
}

.main-slider-pagination .swiper-pagination-bullet{
    position: relative;
    width: 26px;
    height: 40px;
    background-color: #EF7D00;
    opacity: 1;
    border-radius: 0;
    margin: 0 !important;
    transition: .4s;
    border-radius: 20px;
    /*outline: .35rem solid #EF7D00;*/
    /*outline-offset: -.9rem;*/
    border: 7px solid white;
}

.main-slider-pagination .swiper-pagination-bullet:first-child{
    border-top-left-radius: 20px;
}

.main-slider-pagination .swiper-pagination-bullet:last-child{
    border-top-right-radius: 20px;
}

.main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    height: 60px;
}

.main-slider-pagination .swiper-pagination-bullet::before,
.main-slider-pagination .swiper-pagination-bullet::after{
    position: absolute;
    content: '';
    top: 4px;
    width:  10px;
    height: 10px;
    background: white;
    clip-path: path("M0 12C6.6 10 10 6.6 10 0L12 12C15.6 10 0 10 0 12Z");

}

.main-slider-pagination .swiper-pagination-bullet::before{
    left: -16px;
    transform: rotate(270deg) scale(-1, 1);
}

.main-slider-pagination .swiper-pagination-bullet::after{
    right: -16px;
    transform: rotate(90deg);
}

.main-slider-pagination .swiper-pagination-bullet:first-child::before,
.main-slider-pagination .swiper-pagination-bullet:last-child::after{
    display: none;
}

@media (max-width: 579px){
    .block-slider{
        padding-left: 0;
        padding-right: 0;
    }
    .main-slider{
        height: 80vh;
        border-radius: 15px;
    }
    .main-slider .cover{
        height: 100%;
    }
    .main-slider .cover img{
        height: 100%;
        object-fit: cover;
    }
    .main-slider-header{
        top: 2.5rem;
        left: 2.5rem;
        font-size: 42px;
        line-height: 1;
    }
    .main-slider-footer{
        right: 2.5rem;
        bottom: 4.5rem;
        font-size: 24px;
        text-align: end;
        line-height: 1.3;
    }
    .main-slider .cover::before{
        top: -25%;
        left: -30%;
    }
    .main-slider .cover::after{
        height: 25%;
    }


    .main-slider-pagination-tools{
        left: 3rem;
    }
    .main-slider-pagination.swiper-pagination-bullets{
        height: 35px;
    }
    .main-slider-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
        height: 50px;
    }
    .main-slider-pagination .swiper-pagination-bullet{
        width: 24px;
        height: 35px;
    }
    .main-slider-pagination .swiper-pagination-bullet::before, 
    .main-slider-pagination .swiper-pagination-bullet::after{
        top: -1px;
    }
}

@media (max-width: 380px){
    .main-slider-pagination .swiper-pagination-bullet::before, 
    .main-slider-pagination .swiper-pagination-bullet::after{
        top: -1px;
    }
    .main-slider-pagination.swiper-pagination-bullets{
        bottom: -1px;
    }
}

/* MAIN INDEX 
================================
================================*/
/* BLOCK GUITAR */
.block-guitar{
    position: relative;
    /*height: 85vh;*/
    margin-top: 7rem;
    overflow: hidden;
}

.guitar-list{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5rem;
    height: 100%;
    align-items: center;
}

.guitar-list .box-guitar{
    position: relative;
    border-radius: 200px;
    overflow: hidden;
    display: block;
    text-decoration: none;
}

.guitar-list .box-guitar .cover{
    position: relative;
    height: 100%;
}

.guitar-list .box-guitar .cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .4s;
}

.guitar-list .box-guitar:hover .cover img{
    transform: scale(1.1);
}

.guitar-list .box-guitar:first-child{
    height: 90%;
    z-index: 1;
}

.guitar-list .box-guitar:nth-child(even){
    height: 75%;
}
.guitar-list .box-guitar:last-child{
    height: 100%;
    z-index: 1;
}

.guitar-list .box-guitar::after{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.guitar-list .box-guitar:first-child::after{
    background: linear-gradient(10deg, rgba(239,125,0,.85) 25%, transparent);
}
.guitar-list .box-guitar:nth-child(even)::after{
    background: linear-gradient(10deg, rgba(130, 53, 140, .85) 25%, transparent);
}
.guitar-list .box-guitar:last-child::after{
    background: linear-gradient(10deg, rgba(23, 143, 207, .85) 25%, transparent);
}

.box-guitar-title{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    color: white;
    font-size: 36px;
    font-weight: 500;
    padding: 0 3rem;
    line-height: 1.3;
    z-index: 1;
}

.block-guitar-bg{
    position: absolute;
    top:  40vh;
    left: 0%;
    right: 0;
    margin: auto;
}

.block-guitar-bg img{
    width:  100%;
    height: 100%;
    object-fit: cover;
}

.block-guitar-bg::before{
    position: absolute;
    content: '';
    top:  40%;
    left: 15%;
    width:  550px;
    height: 550px;
    background-color: red;
    z-index: -1;
    background-color: rgba(0, 0, 0, .15);
    filter: blur(90px);
}

.block-guitar-bg::after{
    position: absolute;
    content: '';
    top:  20%;
    right: 15%;
    width:  750px;
    height: 150px;
    background-color: red;
    z-index: -1;
    background-color: rgba(0, 0, 0, .15);
    filter: blur(90px);
    transform: rotate(-25deg);
}

@media (max-width: 1700px){
    .box-guitar-title{
        padding: 0 2rem;
        font-size: 26px;
    }
}

@media (max-width: 579px){
    .block-guitar{
        margin-top: 3rem;
        overflow: hidden;
    }
    .guitar-list{
        column-gap: 1rem;
    }
    .guitar-list{
        height: 25rem;
    }
    .box-guitar-title{
        font-size: 16px;
        padding: 0;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }
    .block-guitar-bg{
        top: 38vh;
    }
}

/* BLOCK MAGAZINE */
.block-magazine{
    position: relative;
    margin-top: 15rem;
    margin-bottom: 1.5rem;
    z-index: 1;
}

.block-magazine-title{
    font-size: 36px;
    font-weight: 600;
    line-height: 1.2;
}

.block-magazine-title span{
    color: #EF7D00;
}

.block-magazine-content{
    font-size: 20px;
    margin-top: .75rem;
    text-align: justify;
    line-height: 1.3;
}

.block-wave-banner{
    margin-top: 10rem;
    margin-bottom: 1.5rem;
    height: 60vh;
}

.wave-vol-list{
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    column-gap: 1.25rem;
    height: 100%;
}

.wave-vol-list .vol{
    position: relative;
    background: linear-gradient(to bottom, #F3F4F5, #D1D2D6 50%);
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
}

.wave-vol-list .vol::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 100px;
    opacity: 0;
    transition: .4s;
}

.wave-vol-guitar .vol::after{
    background: linear-gradient(to bottom, rgba(239, 125, 0, .5) 10%, rgba(239, 125, 0, 1));
}

.wave-vol-list:hover .vol::after{
    opacity: 1;
    transition: .4s;
}

.wave-vol-list .vol:nth-child(1){
    height: 50%;
    margin-top: -35%;
}
.wave-vol-list .vol:nth-child(2){
    height: 70%;
    margin-top: 40%;
}
.wave-vol-list .vol:nth-child(3){
    height: 80%;
    margin-top: -20%;
}
.wave-vol-list .vol:nth-child(4){
    height: 100%;
}
.wave-vol-list .vol:nth-child(5){
    height: 50%;
}

.wave-vol-list .vol.image{
    z-index: 1;
}

.wave-vol-list .vol.link span{
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 20px;
    line-height: 1;
    transition: .4s;
}

.wave-vol-list .vol img{
    position: absolute;
    left: -1rem;
    bottom: 0;
}

.wave-vol-list:hover .vol.link{
    color: white;
}

.wave-vol-list .vol span,
.wave-vol-list .vol img{
    z-index: 1;
}

@media (max-width: 1700px){
    .wave-vol-list .vol img{
        width: 230px;
        left: -1.5rem;
    }
}

@media (max-width: 579px){
    .block-wave-banner{
        height: auto;
    }
    .block-magazine{
        margin-top: 10rem;
    }
    .wave-vol-list{
        column-gap: .5rem;
    }
    .wave-vol-list{
        height: 25rem;
    }
    .wave-vol-list .vol img{
        width: 165px;
        left: -1.5rem;
    }
    .wave-vol-list .vol.link span{
        font-size: 16px;
    }
    .block-wave-banner{
        margin-top: 3rem;
    }
    .block-magazine-content{
        font-size: 18px;
        text-align: left;
    }
}

/* TABS - PRODUCTS */
.block-tabs-product{
    margin-top: 10rem;
    margin-bottom:5rem;
}

.block-title-tools{
    display: grid;
    grid-template-columns: 30% 70%;
    column-gap: 3rem;
    align-items: baseline;
    justify-content: space-between;
}

.block-title-tools .title{
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
}

.nav-category{
    column-gap: .5rem;
    row-gap: .5rem;
}

.nav-category li a{
    padding: 0;
    border: 2px  solid #a2a4ad;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: .5rem 1.25rem;
    border-radius: 30px;
    font-size: 14px;
    transition: .4s;
    color: #A2A4AD;
}

.nav-category li a:hover{
    color: black;
    border-color: black;
}

.nav-category li a.active{
    color: #EF7D00;
    border-color: #EF7D00;
}

/* BOX PRODUCT */
.box-product{
    position: relative;
    border: 1px  solid #e8e8eb;
    border-radius: 15px;
    padding: 1rem;
    background-color: white;
}

.box-product::after{
    position: absolute;
    content: '';
    top: -10px;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 15px 33px rgba(239,125,0,0.14), 0px 61px 61px rgba(239,125,0,0.12), 0px 137px 82px rgba(239,125,0,0.07), 0px 243px 97px rgba(239,125,0,0.02), 0px 380px 106px rgba(239,125,0,0);
    opacity: 0;
    transition: .4s;
    z-index: -1;
}
.box-product:hover::after{
    opacity: 1;
}

.swiper .box-product::after{
    height: 75%;
}

.box-product .cover{
    position: relative;
    aspect-ratio: 3/4;
    display: block;
    overflow: hidden;
}

.col-6 .box-product .cover,
.col-lg-8 .box-product .cover{
    aspect-ratio: 13/8;
}

.box-product .cover a{
    display: block;
    height: 100%;
}

.box-product .cover img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .4s;
}

.box-product:hover .cover img{
    transform: scale(1.05);
}

.box-product .labels{
    position: absolute;
    top: .25rem;
    left: .25rem;
    display: flex;
    flex-direction: column;
    row-gap: .5rem;
}

.box-product .labels label{
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border: 1px solid #EF7D00;
    border-radius: 26px;
    font-size: 14px;
    font-weight: 600;
}

.box-product .favorite{
    position: absolute;
    top: .25rem;
    right: .25rem;
}

.box-product-colors{
    position: absolute;
    top: 0;
    left: .25rem;
    bottom: 0;
    margin: auto;
    height: fit-content;
    display: flex;
    flex-direction: column;
    row-gap: .25rem;
}

.box-product-colors .color{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    display: block;
    border: 1px solid #ccc;
}

.box-product-colors .color.active{
    width: 20px;
}

.box-product-info{
    padding: .25rem;
}

.box-product-category{
    font-size: 14px;
    font-weight: 300;
    color: #45495B;
}

.box-product-title{
    font-weight: 500;
    color: #171C32;
    text-decoration: none;
}

.box-product-tools{
    display: flex;
    grid-template-columns: 45% 15% 30%;
    column-gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
}

.box-product-prices{
    display: flex;
    flex-direction: column;
    row-gap: .25rem;
    line-height: 1;
}

.box-product-prices span{
    font-size: 20px;
    font-weight: 600;
}

.box-product-prices del{
    font-size: 12px;
    color: #747784;
}

.box-product-percent{
    font-size: 12px;
    font-weight: 500;
    height: 24px;
    padding: 0 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    border-radius: 15px;
    color: white;
}

.btn-buy{
    width: 60px;
    height: 60px;
    border-radius: 60px;
    background-color: #EF7D00;
}

.btn-buy:hover,
.btn-buy:focus,
.btn-buy:active{
    background-color: #EF7D00 !important;
    border: 0;
}

.btn-buy img{
    transition: .4s;
}

.btn-buy:focus,
.btn-buy:active{
    box-shadow: 0px 0px 0px 4px rgba(239, 125, 0, .5);
}

.btn-buy:hover img{
    transform: scale(1.1);
    margin-top: -2px;
}

/* BOX PRODUCT = END */

@media (max-width: 1700px){
    .box-product{
        padding: .75rem;
    }
    .box-product-prices span{
        font-size: 18px;
    }

    .block-tabs-product{
        margin-top: 3rem;
        margin-bottom: 3rem;
        overflow: hidden;
    }
    .block-title-tools{
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
    }
    .nav-category li a{
        padding: .25rem .5rem;
        font-size: 12px;
        border-width: 1px;
    }
    .block-tabs-product .swiper{
        overflow: visible;
    }

    .box-product::after{
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 100%;
        height: 60%;
    }

    .box-product .cover .box-product-percent{
        position: absolute;
        right: .25rem;
        bottom: .25rem;
    }

    .btn-buy{
        width: 40px;
        height: 40px;
        padding: 0;
    }
    .btn-buy img{
        width: 24px;
        margin-top: -6px;
    }
    .btn-buy:hover img,
    .btn-buy:focus img{
        margin-top: -6px;
    }

    .box-product-percent{
        padding: 0 .65rem;
    }
    .box-product-tools{
        column-gap: .5rem;
    }
}

/* HEADPHONES */
.wave-vol-list .headphones{
    position: absolute;
    top: 15%;
    left: 48%;
}

.wave-vol-headphones .vol:nth-child(1){
    margin-top: 0;
}
.wave-vol-headphones .vol:nth-child(2){
    margin-top: -15%;
}
.wave-vol-headphones .vol:nth-child(3){
    height: 50%;
}
.wave-vol-headphones .vol:nth-child(5){
    margin-top: -85%;
    z-index: 1;
}

.wave-vol-headphones .vol img{
    left: -2rem;
}

.wave-vol-headphones .vol::after{
    background: linear-gradient(to bottom, rgba(181, 229, 255, .5) 10%, rgba(23, 143, 207, 1));
}

.wave-vol-list .vol.link::after,
.wave-vol-headphones .vol.link::after{
    background: linear-gradient(to bottom, #171C32, #171C32);
    transition: .4s;
}

@media (max-width: 1700px){
    .wave-vol-headphones .vol img{
        width: 187px;
        left: -3.25rem;
    }
}

@media (max-width: 579px){
    .wave-vol-headphones .vol img{
        width: 140px;
        left: -2.5rem;
    }
    .wave-vol-list .headphones{
        top: 0;
        left: -10%;
        z-index: -1;
        opacity: .15;
        width: 120%;
    }
    .block-studio{
        overflow: hidden;
    }
}

/* BLOCK CATEGORY */
.block-category{
    margin-top: 7rem;
    margin-bottom: 5rem;
}

.block-category-wrapper{
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    column-gap: 1.75rem;
    row-gap: 1.75rem;
}

.block-title{
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.box-category{
    position: relative;
    aspect-ratio: 1/1;
    display: block;
    background: linear-gradient(to bottom, rgba(243, 244, 245, 1), rgba(209, 210, 214, 1));
    border-radius: 15px;
    overflow: hidden;
    transition: .4s;
}

.box-category .cover{
    height: 100%;
    display: block;
    position: relative;
    z-index: 1;
}

.box-category .cover img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: .4s;
}

.box-category:hover .cover img{
    transform: scale(1.1);
}

.box-category-title{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3rem;
    padding: 0 1rem;
    text-align: center;
    font-weight: 500;
    color: #171C32;
    transition: .4s;
}

.box-category.box-category-empty{
    background: linear-gradient(to top, rgba(209, 210, 214, .25), rgba(243, 244, 245, .5) );
}


.box-category .cover{
    position: relative;
}

/*
.box-category:hover:not(.box-category-empty) .cover{
    background: linear-gradient(to bottom, rgba(239, 125, 0, 0.1), rgba(239, 125, 0, 1));
}
*/

.box-category:not(.box-category-empty) .cover::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(239, 125, 0, 0.1), rgba(239, 125, 0, 1));
    opacity: 0;
    transition: .4s;
    z-index: -1;
}

.box-category:hover:not(.box-category-empty) .cover::after{
    opacity: 1;
}

.box-category:hover .box-category-title{
    color: black;
}

@media (max-width: 1700px){
    .box-category-title{
        bottom: 1rem;
    }
}

@media (max-width: 579px){
    .block-title{
        font-size: 24px;
    }
    .block-category{
        margin-top: 6rem;
        margin-bottom: 0;
    }
    .block-category-wrapper{
        grid-template-columns: repeat(3, 1fr);
        column-gap: .75rem;
        row-gap: .75rem;
    }
    .block-category-wrapper .col:nth-child(1){ order: 1 }
    .block-category-wrapper .col:nth-child(2){ order: 4 }
    .block-category-wrapper .col:nth-child(3){ order: 3 }
    .block-category-wrapper .col:nth-child(4){ order: 2 }
    .block-category-wrapper .col:nth-child(5){ order: 12 }
    .block-category-wrapper .col:nth-child(6){ order: 6 }
    .block-category-wrapper .col:nth-child(7){ order: 7 }
    .block-category-wrapper .col:nth-child(8){ order: 8 }
    .block-category-wrapper .col:nth-child(9){ order: 9 }
    .block-category-wrapper .col:nth-child(10){ order: 10 }
    .block-category-wrapper .col:nth-child(11){ order: 11 }
    .block-category-wrapper .col:nth-child(12){ order: 5 }
    .block-category-wrapper .col:nth-child(13){ order: 13 }
    .block-category-wrapper .col:nth-child(14){ order: 14 }
    .block-category-wrapper .col:nth-child(15){ order: 15 }
    .block-category-wrapper .col:nth-child(16){ order: 16 }
    .block-category-wrapper .col:nth-child(17){ order: 17 }
    .block-category-wrapper .col:nth-child(18){ order: 18 }

    .box-category-title{
        padding: 0 .5rem;
        font-weight: 400;
        bottom: .5rem;
        line-height: 1.1;
        font-size: 14px;
        font-weight: 400;
    }
}

/* WAVE - RENT  */
.wave-vol-voice .vol img{
    left: -1.1rem;
    top: 2.2rem;
}

.wave-vol-voice .vol:nth-child(1){
    height: 70%;
    margin-top: 75%;
}
.wave-vol-voice .vol:nth-child(2){
    margin-top: -80%;
}

.wave-vol-voice .vol::after{
    background: linear-gradient(to bottom, rgba(130, 53, 140, .5) 10%, rgba(130, 53, 140, 1));
}

.wave-vol-list .vol.link::after,
.wave-vol-headphones .vol.link::after,
.wave-vol-voice .vol.link::after{
    background: linear-gradient(to bottom, #171C32, #171C32);
    transition: .4s;
}

.block-wave-banner-voice{
    position: relative;
    background-image: url(scena.png);
    background-position: 55rem 0;
    background-repeat: no-repeat;
    margin-top: 0;
    padding-top: 10rem;
    margin-bottom: 10rem;
}

.block-wave-banner-voice::before{
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width:  415px;
    height: 415px;
    background: #82358c;
    filter: blur(200px);
    border-radius: 50%;
}

.block-wave-banner-voice-container{
    position: relative;
}

.block-wave-banner-voice-container::before{
    position: absolute;
    content: '';
    width: 1110px;
    height: 420px;
    left: 0;
    right: 0;
    bottom: 15%;
    margin: auto;
    background-image: url(cloud.png);
    background-repeat: no-repeat;
    background-size: contain;
    
    /* Плавная анимация с transform */
    animation: cloudGentleBreath 15s ease-in-out infinite;
}

@keyframes cloudGentleBreath {
    0%, 100% {
        transform: 
            scale(1) 
            translateY(0px) 
            matrix(1, 0, 0, 1, 0, 0)
            translateX(0)
            rotate(0deg)
    }
    50% {
        transform: 
            scale(1.03) 
            translateY(-5px) 
            matrix(1, 0.01, -0.01, 1, 0, 0)
            translateX(5rem)
            rotate(-5deg)
    }
}

.block-wave-banner-voice-text{
    position: relative;
    margin-top: 10rem;
    z-index: 1;
}

.block-wave-banner-voice-projector{
    position: absolute;
    top: 20%;
    left: -5rem;
}

@media (max-width: 1700px){
    .wave-vol-voice .vol img{
        width: 205px;
        left: -1rem;
        top: 1.6rem;
    }
}

@media (max-width: 579px){
    .block-wave-banner{
        margin-top: 0;
    }
    .block-wave-banner-voice{
        padding-top: 3rem;
        margin-bottom: 3rem;
        overflow: hidden;
    }
    .block-wave-banner-voice::before{
        width: 315px;
        height: 315px;
    }
    .wave-vol-voice .vol img{
        left: -.75rem;
        top: 2.3rem;
    }
}

/* COLLECTION 
================================
================================*/
/* BREACRUMBS */
.nav-breadcrumbs{
    column-gap: 2rem;
}

.nav-breadcrumbs li .nav-link{
    position: relative;
    padding: 0;
    color: #747784;
    font-size: 12px;
}

.nav-breadcrumbs li + li .nav-link::before{
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    border: 1px solid #747784;
    border-radius: 4px;
    top: 0;
    left: -1rem;
    bottom: 0;
    margin: auto;
}

.nav-breadcrumbs li a.nav-link:hover{
    color: #EF7D00;
}

.nav-breadcrumbs li span.nav-link{
    color: black;
}

/* SIDEBAR */
.box-filter{
    margin-bottom: 2rem;
}

.box-filter-title{
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.box-filter-title-small{
    font-size: 16px;
    font-weight: 500;
    margin-bottom: .75rem;
}

/* CATEGORY LINK */
.nav-filter-category{
    row-gap: .5rem;
    flex-direction: column;
}
.nav-filter-category li a{
    padding: 0;
    color: #747784;
}

.nav-filter-category li span{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-filter-category li a.active{
    position: relative;
    color: #EF7D00;
    padding-left: 1rem;
}

.nav-filter-category li a.active::before{
    position: absolute;
    content: '';
    width: 9px;
    height: 7px;
    background-image: url(check-active.svg);
    top: 2px;
    left: 0;
    bottom: 0;
    margin: auto;
}

.nav-filter-category li a span{
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.nav-filter-category li span img{
    transition: .4s;
}

.nav-filter-category li span:hover img,
.nav-filter-category li span a[aria-expanded="true"] img{
    transform: scale(1.2);
}

.nav-filter-category li span a[aria-expanded="true"] img{
    transform: scale(1.2) rotate(45deg);
}

.nav-filter-subcategory{
    margin: 1rem 0 1rem 2rem;
}

.nav-filter-subcategory li a.active{
    padding-left: 0;
}

.nav-filter-subcategory li a.active::before{
    display: none;
}

/* BOX FILTER PRICE */
.box-filter-range input{
    width: 100%;
    height: 40px;
    border-radius: 40px;
    padding: .5rem 1rem;
    text-align: center;
    border: 1px solid #E8E8EB;
    background-color: #f3f4f5;
    color: #747784;
}

.box-filter-range input{
    transition: .4s;
}

.box-filter-range input:focus{
    box-shadow: 0 0 0 .25rem rgba(243, 244, 245, .75);
    outline: none;
}

.filter-price-delimetr{
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

.filter-price-delimetr::after{
    position: absolute;
    content: '';
    width: 50%;
    height: 2px;
    background-color: #747784;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

/* BOX FILTER CHARACTERISTICS */
.nav-filter-char{
    flex-direction: column;
    row-gap: 1rem;
}
.nav-filter-char li label{
    display: inline-flex;
    column-gap: .5rem;
    align-items: center;
    cursor: pointer;
}

.nav-filter-char li label span.text{
    line-height: 1;
    color: #747784;
    transition: .4s;
}


.nav-filter-char li label input{
    display: none;
}


.nav-filter-char li label span.checkbox{
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #E8E8EB;
    background-color: #F3F4F5;
    border-radius: 6px;
}

.nav-filter-char li label input:checked + span.checkbox{
    background-image: url(check.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.nav-filter-char li label:hover span.text{
    color: #EF7D00;
}

.nav-filter-char li label input:checked ~ span.text{
    color: black;
}

@media (max-width: 579px){
    .box-filter-title{
        font-size: 20px;
    }
    .btn-open-filter{
        margin: 1rem 0;
        display: grid;
        grid-template-columns: 2fr 4fr;
        align-items: center;
        column-gap: 1rem;
        line-height: 1;
    }
    .btn-open-filter span{
        text-align: end;
    }

    #dynamicFilters{
        position: fixed;
        top: 0;
        left: -85%;
        width: 85%;
        transition: .4s;
        padding-right: 1rem; 
    }
    #dynamicFilters.active{
        left: 0;
        height: 100vh;
    }
    #dynamicFilters{
        background-color: rgba(255, 255, 255, .75);
        backdrop-filter: blur(5px);
        z-index: 5;
        overflow-y: auto;
    }
    .filter-sidebar .dynamic-side-header{
        margin: 1.5rem 0;
    }

}

/* PAGINATION */
.pagintaion{
    margin-top: 2.5rem;
    margin-bottom: 3.5rem;
    display: flex;
}

.nav-pagination{
    display: inline-flex;
    justify-content: end;
    background-color: rgba(185, 187, 194, .2);
    margin-left: auto;
    border-radius: 30px;
    align-items: end;
    padding: .5rem;
    column-gap: .85rem;
}

.nav-pagination li .nav-link{
    padding: 0;
}

.nav-pagination li .nav-link i{
    width: 12px;
    height: 22px;
    background-color: #D1D2D6;
    display: block;
    border-radius: 12px;
}

.nav-pagination li .nav-link:hover i{
    background-color: #bbb;
}

.nav-pagination li span.active i{
    height: 44px;
}

.nav-pagination li:first-child .nav-link.arrow{
    margin-right: 1rem;
}
.nav-pagination li:last-child .nav-link.arrow{
    margin-left: 1rem;
}

.nav-pagination li .nav-link.arrow img{
    transition: .4s;
}
.nav-pagination li .nav-link.arrow:hover img{
    transform: scale(1.1);
}

/* SIDEBAR 
================================
================================*/


/* PRODUCT
================================
================================*/
/* GALLERY */
.gallery-wrapper{
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 1.25rem;
}

.product-gallery .gallery-image .swiper-slide{
    aspect-ratio: 5/3;
    display: block;
}

.product-gallery .gallery-image .swiper-slide .cover{
    width: 100%;
    height: 100%;
}

.product-gallery .gallery-image .swiper-slide .cover img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* GALLERY THUMB */
.product-gallery-thumbs{
    margin-top: 1rem;
}

.product-gallery-thumbs .gallery-thumb .swiper-slide{
    aspect-ratio: 4/3;
    display: block;
    transition: .4s;
    height: 75px;
    max-width: 100% !important;
}

.product-gallery-thumbs .gallery-thumb .swiper-slide .cover{
    width: 100%;
    height: 100%;
    padding: .5rem;
    border: 2px solid #ccc;
    border-radius: 10px;
    cursor: pointer;
}

.product-gallery-thumbs .gallery-thumb .swiper-slide.swiper-slide-thumb-active .cover{
    border-color: #EF7D00;
    cursor: default;
}

.product-gallery-thumbs .gallery-thumb .swiper-slide .cover img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.product-gallery-thumbs .swiper-tools .swiper-navs{
    height: 70px;
    width: 100%;
    border-radius: 70px;
    background-color: #f1f1f3;
    padding: .5rem;
    display: flex;
    justify-content: space-between;
}

/* SLIDER */
.swiper-tools{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1;
}

.swiper-tools .swiper-navs{
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    width: 100px;
    align-items: end;
}

.swiper-tools .swiper-navs .swiper-button-prev,
.swiper-tools .swiper-navs .swiper-button-next{
    position: relative;
    margin-top: unset;
    top: auto;
    left: auto;
    right: auto;
    width: 50px;
    height: 50px;
    mask-position: center;
    mask-size: auto;
    mask-repeat: no-repeat;
    transition: .4s;
}

.swiper-tools .swiper-navs .swiper-button-prev::after,
.swiper-tools .swiper-navs .swiper-button-next::after{
    position: absolute;
    width: 100%;
    height: 100%;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transition: .4s;
}

.swiper-tools .swiper-navs .swiper-button-prev::after{
    background-image: url(arrow-left-grey.svg);
}
.swiper-tools .swiper-navs .swiper-button-next::after{
    background-image: url(arrow-right-grey.svg);
}

.swiper-tools .swiper-navs .swiper-button-prev:hover::after,
.swiper-tools .swiper-navs .swiper-button-next:hover::after{
    transform: scale(1.1);
}

.swiper-tools-pagin .swiper-navs {
    background-color: #f1f1f3;
    padding: .5rem;
    height: 70px;
    width: auto;
    border-radius: 70px;
}

.swiper-tools-pagin .swiper-pagination{
    position: relative;
    top: 0;
    margin-top: unset;
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
    margin-bottom: .25rem;
}

.swiper-tools-pagin .swiper-navs{
    column-gap: 1rem;
}

.swiper-tools-pagin .swiper-navs .swiper-button-prev, 
.swiper-tools-pagin .swiper-navs .swiper-button-next{
    aspect-ratio: 1/1;
}

.swiper-tools-pagin .swiper-navs .swiper-pagination .swiper-pagination-bullet{
    width: 12px;
    height: 22px;
    background-color: #D1D2D6;
    border-radius: 12px;
    transition: .4s;
    opacity: 1;
}

.swiper-tools-pagin .swiper-navs .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
    height: 44px;
}

/* PRODUCT INFO */
.product-info{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.product-info-sku{
    font-size: 14px;
    color: #747784;
}

.product-info-category{
    font-size: 24px;
    font-weight: 300;
    color: #45495B;
    margin-bottom: .5rem;
}

.nav-product-prop{
    flex-direction: column;
    row-gap: .55rem;
}

.nav-product-prop li{
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    align-items: center;
}

.nav-product-prop li span{
    font-weight: 500;
}

.nav-product-prop li span:first-child{
    color: #808080;
    font-weight: 300;
}

.nav-product-prop li a{
    padding: 0;
    color: #808080;
    font-weight: 300;
    border-bottom: 1px solid #808080;
    transition: .4s;
    display: inline-block;
    width: fit-content;
}

.nav-product-prop li a:hover{
    border-color: #FF4C14;
    color: #FF4C14;
}

.product-available{
    margin: 1.5rem 0;
    color: #50CB04;
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.product-available img{
    margin-top: 2px;
}

.product-info .box-product-prices span{
    font-size: 26px;
}
.product-info .box-product-prices del{
    font-size: 16px;
}

/* PRODUCT TABS */
.product-wrapper .product-tabs{
    margin-top: 3.5rem;
    height: 100%;
    font-size: 16px;
    font-weight: 300;
}

.nav-product-tabs{
    column-gap: 2.5rem;
}

.nav-product-tabs li .nav-link{
    position: relative;
    background-color: transparent;
    border-radius: 0;
    height: 50px;
    border: 2px solid transparent;
    padding: .5rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #808080;
    font-size: 14px;
    font-weight: 500;
}

.nav-product-tabs li .nav-link.active{
    border-color: #EF7D00;
    background-color: transparent;
    color: black;
    padding: .5rem 1.25rem;
    border-radius: 10px;
}

.nav-product-tabs li .nav-link::after{
    position: absolute;
    content: '';
    width:  20px;
    height: 20px;
    left: 0;
    right: 0;
    bottom: -12px;
    transform: rotate(45deg);
    margin: auto;
    border-bottom: 2px solid #EF7D00;
    border-right: 2px solid #EF7D00;
    background-color: white;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

.nav-product-tabs li .nav-link.active::after{
    opacity: 1;
    visibility: visible;
}

.product-wrapper .product-tabs .tab-content{
    margin-top: 2.5rem;
}

.product-wrapper .product-tabs .tab-content .nav-product-prop li{
    grid-template-columns: 2fr 10fr;
}

.product-info-button button{
    width: 100%;
}


.product-similar-title{
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 1rem;
}


@media (min-width: 580px) {
    .product-similar .similar-product{
        overflow: visible;
    }
    .product-similar .similar-product .swiper-wrapper {
        flex-direction: column;
        row-gap: 1rem;
    }
}

@media (max-width: 579px){
    .product-info-button{
        margin-top: 1rem;
    }

    .nav-product-tabs{
        column-gap: 1.5rem;
    }

    .gallery-wrapper{
        padding: .75rem;
    }

    .product-gallery .gallery-image .swiper-slide{
        aspect-ratio: 1/1;
    }
    .product-gallery-thumbs .gallery-thumb .swiper-slide{
        aspect-ratio: 1/1;
    }
    .similar-product,
    .carousel-product{
        overflow: visible;
    }
}

/* CART 
================================
================================*/
.cart-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.cart-header-title{
    font-size: 36px;
    font-weight: 600;
}

.cart-header a{
    text-decoration: none;
    color: #747784;
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-size: 12px;
}

.cart-header a:hover{
    color: #EF7D00;
}

.cart-header a img,
.cart-header a svg{
    transition: .4s;
}

.cart-header a:hover img,
.cart-header a:hover svg{
    transform: translateX(-10px);
}

.cart-header a:hover svg path{
    fill: #EF7D00;
}

.cart-list{
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.box-item{
    position: relative;
}

.box-item .cover{
    position: relative;
    aspect-ratio: 1/1;
    display: block;
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: .5rem;
}

.box-item .cover::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0px 15px 33px rgba(239, 125, 0, 0.14), 0px 61px 61px rgba(239, 125, 0, 0.12), 0px 137px 82px rgba(239, 125, 0, 0.07), 0px 243px 97px rgba(239, 125, 0, 0.02), 0px 380px 106px rgba(239, 125, 0, 0);
    opacity: 0;
    transition: .4s;
    z-index: -1;
    border-radius: 15px;
}

.box-item:hover .cover::after{
    opacity: 1;
}

.box-item .cover img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: .4s;
    transform-origin: center;
    will-change: transform;
    border-radius: 15px;
}

.box-item:hover .cover img{
    transform: scale(1.05);
}

.box-item-info{
    height: 100%;
    display: grid;
    padding: .5rem 0;
}

.box-item-sku{
    font-size: 12px;
    color: #747784;
}

.box-item-category{
    font-size: 14px;
    font-weight: 300;
    color: #45495B;
}

.box-item-title{
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.box-item-price{
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

.box-item-tools-price{
    height: 100%;
    display: grid;
    padding: .5rem 0;

}

.nav-item-tools{
    column-gap: 1.5rem;
    justify-content: end;
}

.nav-item-tools li:nth-child(3){
    margin-left: auto;
}

.nav-item-tools li a{
    padding: 0;
    color: #747784;
    font-size: 12px;
    font-weight: 300;
    display: flex;
    align-items: center;
    column-gap: .5rem;
}

.nav-item-tools li a svg path,
.nav-item-tools li a svg rect{
    transition: .4s;
}

.nav-item-tools li a:hover svg path,
.nav-item-tools li a:hover svg rect{
    stroke: #EF7D00;
}

.nav-item-tools li:last-child a svg{
    transition: .4s;
}

.nav-item-tools li:last-child a:hover svg{
    transform: rotate(45deg);
}

.box-item-qty-price{
    display: flex;
    align-items: center;
    column-gap: 2rem;
    margin-left: auto;
}

.box-item-all-price{
    font-size: 16px;
    font-weight: 500;
}

.quantity{
    position: relative;
    width: 126px;
    height: 40px;
    background-color: #f1f1f3;
    border-radius: 40px;
    padding: 5px;
    display: grid;
    grid-template-columns: 30px auto 30px;
    column-gap: .5rem;
}

.quantity input{
    width: 100%;
    height: 30px;
    text-align: center;
    border: 0;
    background-color: transparent;
}

.quantity input:focus{
    box-shadow: none;
    outline: none;
}

.quantity button{
    width: 100%;
    height: 30px;
}

@media (max-width: 579px){
    .box-item{
        padding-top: 2rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #efefef;
    }
    .box-item-tools{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .box-item-qty-price{
        margin-left: 0;
        justify-content: space-between;
        flex-direction: row-reverse;
    }
}

/* CHECKOUT BOX */
.checkout{
    height: 100%;
}

.box-checkout{
    position: sticky;
    top: 7rem;
    padding: 1.4rem 2.15rem;
    background-color: #f3f4f5;
    border-radius: 20px;
}

.box-checkout-title{
    font-size: 36px;
    font-weight: 600;
}

.box-checkout-count{
    font-size: 12px;
    font-weight: 300;
    color: #747784;
}

.box-checkout-price{
    font-size: 20px;
    font-weight: 500;
    margin-top: 1.75rem;
}

.box-checkout-discount{
    margin: 2rem 0;
}

.box-checkout-discount-title{
    font-size: 14px;
    font-weight: 300;
    margin-bottom: .5rem;
}

.box-checkout-discount-form{
    position: relative;
}

.box-checkout-discount-form input{
    width: 100%;
    height: 58px;
    border-radius: 15px;
    background-color: #F8F8F9;
    border: 1px solid #E8E8EB;
    padding: .5rem 1rem;
    transition: .4s;
    text-transform: uppercase;
}

.box-checkout-discount-form input:focus{
    box-shadow: 0 0 0 .25rem rgba(204, 204, 204, .25);
    outline: none;
}

.box-checkout-discount-form input::placeholder{
    font-weight: 300;
    color: #747784;
    font-size: 14px;
    text-transform: none;
}

.box-checkout-discount-form .discount-apply{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 120px;
    height: 38px;
    background-color: #747784;
    color: white;
    border-radius: 10px;
}

.box-checkout-discount-form .discount-apply:focus,
.box-checkout-discount-form .discount-apply:active{
    box-shadow: 0 0 0 .25rem rgba(204, 204, 204, .5);
    outline: none;
    background-color: #747784;
    color: white;
}

.box-checkout-discount-form .discount-apply:focus{
}

.box-checkout-title-price{
    font-size: 14px;
    color: #747784;
}

.box-checkout-all-price{
    font-size: 32px;
    font-weight: 600;
}

.box-checkout-button{
    margin-top: 1.5rem;
}

.box-checkout-button button{
    height: 80px;
}

@media (max-width: 1700px){
    .box-checkout{
        padding: 1.5rem;
    }

    .box-checkout-button button{
        height: 60px;
    }
}

@media(max-width: 579px){
    .box-checkout{
        padding: 1.25rem;
    }
}

/* FOOTER 
================================
================================*/
.footer-wrapper{
    background-color: #171C32;
    margin: 2rem 0;
    padding: 3rem 3rem;
    border-radius: 25px;
    color: white;
}

.footer-left{
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
    text-align: center;
    justify-content: center;
}

.footer-menu-title{
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 1rem;
}

.nav-footer-menu{
    row-gap: 1rem;
    flex-direction: column;
}

.nav-footer-menu li a{
    color: white;
    padding: 0;
    font-size: 14px;
    line-height: 1.3;
}

.footer-menu-dual .footer-menu-title{
    margin-top: 3rem;
}

.footer-menu-dual .footer-menu-title:nth-child(1){
    margin-top: 0;
}

.footer-info a.tel{
    font-size: 32px;
    font-weight: bold;
    color: white;
    text-decoration: none;
    line-height: 1;
    margin-bottom: 1.75rem;
    display: inline-block;
}

.footer-info a.tel:hover{
    color: #EF7D00;
}

.footer-info-address{
    font-size: 14px;
    margin-bottom: 1.75rem;
    line-height: 1.3;
}

.footer-info-icon{
    display: flex;
    align-items: start;
    column-gap: .5rem;
}

.footer-info-icon-content{
    line-height: 1;
}

.footer-info-icon img{
    margin-top: .15rem;
}

.footer-info-icon-wrapper{
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.footer-info-icon-title{
    font-size: 12px;
    color: #B9BBC2;
}

.footer-info-icon-text{
    font-size: 14px;
    margin-top: .25rem;
    line-height: 1.3;
}

.footer-info a.mailto{
    font-size: 14px;
    display: inline-block;
    color: white;
    text-decoration: none;
    margin-top: 1.75rem;
    margin-bottom: .5rem;
}

.footer-info a.mailto:hover{
    color: #EF7D00;
}

.nav-socials{
    margin-top: 1.5rem;
    column-gap: 2rem;
}

.nav-socials li a{
    padding: 0;
}

.nav-socials li a img,
.nav-socials li a svg{
    transition: .4s;
}
.nav-socials li a:hover img,
.nav-socials li a:hover svg{
    transform: scale(1.1);
}

.nav-socials li a svg path{
    transition: .4s;
}
.nav-socials li a:hover svg path{
    fill: #EF7D00;
}

.copyright{
    font-size: 12px;
    color: #A2A4AD;
    margin-top: 2rem;
}

.poweredby{
    font-size: 8px;
    color: #B9BBC2;
    text-decoration: none;
    display: flex;
    align-items: center;
    column-gap: .25rem;
    justify-content: center;
    text-align: center;
}

.poweredby img{
    transition: .4s;
}

.poweredby:hover img{
    transform: scale(1.1);
}

@media (max-width: 579px){
    footer{
        margin-bottom: 75px;
    }
    .footer-wrapper{
        padding: 1.5rem;
    }
    .mobile-copyright-powered{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 2rem;
    }
    .mobile-copyright-powered .copyright{
        margin-top: 0;
    }
}
