/*
Theme Name: AJK Moto
Theme URI: ajkmoto.ru
Author: Oleg Vasilev (SCORPOICOM)
Description: Тема для интернет-магазина японского аукциона
Version: 1.0.0
License: https://it97.ru/
Text Domain: https://it97.ru/
*/
@import url('./assets/css/menu.css');
@import url('./assets/css/header.css');
@import url('./assets/css/home.css');
@import url('./assets/css/contact.css');
@import url('./assets/css/cookieBanner.css');
@import url('./assets/css/popupZakaz.css');
@import url('./assets/css/404.css');
@import url('./assets/css/home-moto-search-form.css');
@import url('./assets/css/home-akcia.css');
@import url('./assets/css/home-block-category.css');
@import url('./assets/css/home-block-contact.css');
@import url('./assets/css/home-block-scheme-work.css');
@import url('./assets/css/home-block-faq.css');
@import url('./assets/css/home-block-review.css');
@import url('./assets/css/popupReview.css');
@import url('./assets/css/categoryReview.css');
@import url('./assets/css/home-block-news.css');
@import url('./assets/css/categoryNews.css');
@import url('./assets/css/home-block-send-zayavka.css');
@import url('./assets/css/home-block-calculator.css');
@import url('./assets/css/page-calculator.css');
@import url('./assets/css/moto.css');
@import url('./assets/css/sistema-otsenok.css');


@import url('./assets/css/pagination.css');
@import url('./assets/css/footer.css');

:root {
    --width: 100%;
    --black: #000000;
    --ajk-text: #111617;
    --ajk-text-grey: #040404;
    --ajk-text-light: #f7f7f7;
    --white: #ffffff;
    --a-link: #f36e00;
    --a-hover-link: #B5161A;
    --yl: #eebf0d;
    --ajk-red: #B5161A;
    --ajk-grey-opacity-20: #f7f7f720;


    /*Фоновые элементы для разделителей*/
    --dark: #111617;
    --block-bg: #111617;
    --block-bg-light: #f4f4f4;
    --block-bg-dark: #bfbfbf;
    --block-bg-dark-dark: #262626;
    --border-light: #dadada;


    --padding-top-20: 20px;
    --padding-bottom-20: 20px;

    --padding-top-30: 30px;
    --padding-bottom-30: 30px;

    --padding-top-40: 40px;
    --padding-bottom-40: 40px;

    --padding-top-60: 60px;
    --padding-bottom-60: 60px;

    --padding-top-80: 80px;
    --padding-bottom-80: 80px;

    --padding-top-160: 160px;
    --padding-bottom-160: 160px;
}

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border-right: solid 5px var(--block-bg-dark-dark);
    background: var(--block-bg-dark-dark);
}

::-webkit-scrollbar-track {
    border: none;
    background: var(--block-bg-dark);
}

::-moz-scrollbar {
    width: 10px;
}

::-moz-scrollbar-thumb {
    border-right: solid 5px var(--block-bg-dark);
    background: var(--block-bg-dark);
}

::-moz-scrollbar-track {
    border: none;
    background: var(--block-bg-dark);
}

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

a {
    text-decoration: none;
}

body {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    /*line-height: 130%;*/
    font-size: 19px;
    color: var(--black);
    background: var(--ajk-text-light);

    width: 100%;
    position: relative;
}

.container {
    width: 1400px;
    margin-right: auto;
    margin-left: auto;
}


@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }
}


@media (max-width: 1400px) {
    .container {
        width: 705px;
    }
}

@media (max-width: 767px) {
    .container {
        width: 425px;
    }
}
@media (max-width: 425px) {
    .container {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    display: inline-block;
    margin: 0;
    color: var(--text);
}

h1 {
    font-size: 48px;
    line-height: 110%;
    font-weight: 700;
}

h2 {
    font-size: 40px;
    line-height: 110%;
}

h3 {
    font-size: 22px;
    line-height: 130%;
}

@media (max-width: 1247px) {
    body {
        font-size: 18px;
    }

    h1 {
        font-size: 28px;
        line-height: 110%;
    }

    h2 {
        font-size: 28px;
    }
}


@media (max-width: 577px) {
    body {
        font-size: 17px;
    }

    h1 {
        font-size: 24px;
    }

    h2 {
        font-size: 22px;
        line-height: 130%;
    }

    h3 {
        font-size: 20px;
    }

}

header {
    position: relative;
    z-index: 20;
}

body.policy,
body.policy-cookies {
    line-height: 140%;
}

.breadcrumbs {
    display: block;
    margin-top: 40px;
}

.kama_breadcrumbs span,
.kama_breadcrumbs a {
    color: var(--ajk-text);
    font-size: 15px;
    transition: all .3s ease-in;
}

.kama_breadcrumbs a:hover span,
.kama_breadcrumbs a:hover {
    color: var(--ajk-red);
    transition: all .3s ease-in;
}

.breadcrumbs__line {
    display: block;
    height: 1px;
    width: calc(100% - 40px);
    margin: 50px auto;
    background: var(--ajk-text);
    opacity: .3;
}
@media (max-width: 767px) {
    .kama_breadcrumbs span, .kama_breadcrumbs a {
        font-size: 8px;
    }
    .breadcrumbs__line {
        margin: 20px auto;
    }
}


/* Кнопка прокрутки вверх */
.arrow-up {
    position: fixed;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

.arrow-up.show {
    opacity: 1;
    visibility: visible;
}

/* Эффект при наведении */
.arrow-up:hover svg rect {
    stroke: var(--ajk-red, #e63946);
    transition: stroke 0.2s;
}

.arrow-up:hover svg path {
    stroke: var(--ajk-red, #e63946);
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .arrow-up {
        bottom: 20px;
        right: 20px;
    }
    .arrow-up svg {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 1400px) {

}

@media (max-width: 767px) {

}


@media (max-width: 1400px) {

}

@media (max-width: 767px) {

}




.no-pk {
    display: none;
}
@media (max-width: 1400px) {
    .no-pk {
        display: block;
    }
    .no-tablet{
        display: none;
    }
}

@media (max-width: 767px) {
    .no-pk {
        display: block;
    }
    .no-tablet{
        display: block;
    }
    .no-mob {
        display: none;
    }
}


details, main {
    display: block;
    position: relative;
}