@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');

html {
    box-sizing: border-box;
}

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

body {
    max-width: 1300px;
    font-family: "PT Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

a {
    color: #fff;
    text-decoration: none;
}

.container {
    width: 100%;
    padding: 0px 86px;
}

/* Секция header */
.header {
    background: #265C9A;
    height: 73px;
    display: flex;
    align-items: center;
    gap: 294px;
}

.header>.menu {
    display: none;
}

.header .left {
    display: flex;
    align-items: center;
    gap: 86px;
}

.header .left .logo {
    color: #fff;
    font-weight: 700;
    font-size: 28px;
}

.header .left .number {
    font-size: 19px;
}

.header .left .search {
    width: 281px;
    height: 22px;
    border-bottom: 1px solid #517DAE;
}

.header .left .search input {
    color: #fff;
    background: none;
    width: 250px;
    outline: 0;
    border: 0;
}

.header .left .search input::placeholder {
    color: #fff;
}

.header .pay {
    height: 17px;
    border-bottom: 1px solid #fff;
}

.header .pay:hover {
    color: #FBFF3D;
    border-color: #FBFF3D;
}

.header .left .dd-search {
    display: none;
}

.header .left .dd-input {
    display: none;
}

.header .basket {
    display: none;
}

/* Секция categories */
.categories {
    background: #1F497B;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 327px;
}

.categories .chapter-filters {
    display: none;
}

.categories .chapter {
    display: flex;
    gap: 39px;
}

.categories .chapter a {
    font-weight: 700;
}

.categories .chapter a:hover {
    color: #FBFF3D;
}

.categories .basket a {
    display: flex;
    gap: 9px;
}

.categories .basket:hover img {
    content: url('img/categories-basket-yellow.svg');
}

.categories .basket a:hover {
    color: #FBFF3D;
}

.chapter-filters {
    display: none;
}

/* Секция filters */
.filters {
    height: 96px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.filters .dropdown {
    position: relative;
    width: 264px;
}

.filters .dropdown:hover {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}

/* тут */
/* .filters .dropdown:hover .dropdown-content {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);

} */

.filters .dropdown .dropbtn {
    color: #484848;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    border: 1px solid #D0D0D0;
    border-bottom: 1px solid #D0D0D0;
    padding: 8px 17px;
    cursor: pointer;
}

.filters .dropdown:hover .dropbtn {
    border-bottom: 0;
}


.filters .dropdown:hover .dropdown-content {
    display: block;
}

/* тут */
.filters .dropdown .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
    border: 1px solid #D0D0D0;
    border-top: 0;
    min-width: 264px;
    z-index: 2;
}

.filters .dropdown .dropdown-content::after {
    position: absolute;
    content: "";
    width: 230px;
    height: 1px;
    background: #D0D0D0;
    top: 0;
    left: 17px
}

.filters .dropdown .dropdown-content a {
    display: block;
    padding: 10px 17px;
    text-decoration: none;
    color: #484848;
}

.filters .dropdown .dropdown-content a:hover {
    background: #E8EEFF;
}

.filters .price-filter {
    display: flex;
    align-items: center;
    margin-left: 13px;
}

.filters .price-filter .price,
.filters .price-filter .currency {
    color: #484848;
}

.filters .price-filter .price {
    width: 65px;
    height: 21px;
    margin-right: 14px;
}

.filters .price-filter .filter {
    width: 265px;
    height: 48px;
    display: flex;
    position: relative;
}

.filters .price-filter .filter .from {
    font-family: "PT Sans", sans-serif;
    width: 132px;
    font-weight: 700;
    border: 1px solid #D0D0D0;
    outline: 0;
    padding: 14px 11px 13px 61px;
}

.filters .price-filter .filter .from::placeholder {
    color: #484848;
}

.filters .price-filter .filter .to {
    width: 133px;
    font-weight: 700;
    border: 1px solid #D0D0D0;
    border-left: 0;
    outline: 0;
    padding: 14px 11px 13px 41px;
}

.filters .price-filter .filter .to::placeholder {
    color: #484848;
}

.filters .price-filter .filter .t-from {
    color: #484848;
    position: absolute;
    left: 11px;
    top: 13px;
}

.filters .price-filter .filter .t-to {
    color: #484848;
    position: absolute;
    left: 144px;
    top: 13px;
}


.filters .price-filter .currency {
    width: 56px;
    height: 21px;
    margin-left: 9px;
}

/* Секция info */

.info {
    display: grid;
    grid-template-columns: repeat(4, 282px);
    grid-auto-rows: 358px;
    margin-bottom: 39px;
}

.info .big {
    grid-column: span 2;
}

.info .sale-block {
    width: 564px;
    height: 358px;
    display: flex;
    gap: 21px;
    padding: 21px;
    border: 1px solid #DEDEDE;
    cursor: pointer;
}

.info .sale-block:hover {
    background: #FFF1F1;
    border: 1px solid #FF3D3D;
}

.info .sale-block>img {
    width: 250px;
    height: 250px;
}

.info .sale-block .sale-info h3 {
    color: #333333;
    font-weight: normal;
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 4px;
}

.info .sale-block .sale-info .text {
    color: #989898;
    line-height: 21px;
    height: 210px;
    margin-bottom: 20px;
}

.info .sale-block .sale-info .text-2 {
    display: none;
}

.info .sale-block .sale-info .non-price {
    text-decoration: line-through;
    color: #989898;
    margin-bottom: 3px;
}

.info .sale-block .sale-info .non-price-2 {
    display: none;
}

.info .sale-block .sale-info hr {
    margin-top: 6px;
    margin-bottom: 7px;
}

.info .sale-block .sale-info .price {
    display: flex;
    justify-content: space-between;
}

.info .sale-block .sale-info .price a {
    color: #FF3D3D;
    font-size: 20px;
}

.info .block {
    width: 282px;
    height: 358px;
    display: flex;
    flex-direction: column;
    border: 1px solid #DEDEDE;
    padding: 21px 20px 16px 20px;
    cursor: pointer;
}

.info .block:hover {
    background: #E8EEFF;
    outline: 1px solid #819DEB;
    outline-offset: -1px;
}

.info .block>img {
    width: 160px;
    height: 160px;
    margin-left: 41px;
    margin-right: 41px;
    margin-bottom: 10px;
}

.info .block h3 {
    font-size: 18px;
    font-weight: normal;
    color: #333333;
    margin-bottom: 6px;
}

.info .block .full-text,
.info .block .medium-text,
.info .block .light-text {
    width: 242px;
    height: 72px;
    font-size: 14px;
    color: #979797;
    margin-bottom: 20px;
    line-height: 19px;
}

.info .block .medium-text,
.info .block .light-text {
    display: none;
}

.info .block.n5 .medium-text {
    display: block;
}

.info .block.n5 .full-text {
    display: none;
}

.info .block.n6 .light-text {
    display: block;
}

.info .block.n6 .full-text {
    display: none;
}

.info .block hr {
    margin: 0;
    margin-bottom: 5px;
}

.info .block .price {
    display: flex;
    justify-content: space-between;
}

.info .block .price a {
    color: #325AC0;
    height: 26px;
    font-weight: normal;
    font-size: 20px;
}

.info .block .price .img {
    height: 16px;
}

/* Адаптив Планшет1*/
@media (max-width: 1024px) {
    .container {
        padding: 0 20px;
    }

    .header {
        background: #265C9A;
        width: 100%;
        height: 73px;
        display: flex;
        align-items: center;
        gap: 41px;
    }

    /* Выпад. меню при клике */
    .header .menu {
        background: none;
        width: 24px;
        height: 24px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        padding-top: 3px;
        padding-bottom: 3px;
        position: relative;
    }

    .header .menu span {
        position: relative;
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    .header .menu .dd-section {
        display: none;
        background: #265C9A;
        width: 1024px;
        height: 217px;
        flex-direction: column;
        position: absolute;
        top: 47px;
        left: -20px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 2;
    }

    .header .menu.active .dd-section {
        display: flex;
    }

    .header .menu .dd-section a {
        width: 100%;
        height: 40px;
        font-weight: 700;
        padding: 9px 700px 10px 16px;
        border-radius: 1px;
    }

    .header .menu .dd-section a:hover {
        background: #618CBF;
    }

    .header .left {
        display: flex;
        align-items: center;
        gap: 41px;
    }

    .header .left .logo {
        color: #fff;
        font-weight: 700;
        font-size: 28px;
    }

    .header .left .number {
        display: none;
    }

    .header .left .search {
        width: 697px;
        height: 22px;
        border-bottom: 1px solid #517DAE;
    }

    .header .left .search input {
        color: #fff;
        background: none;
        width: 400px;
        outline: 0;
        border: 0;
    }

    .header .left .search input::placeholder {
        color: #fff;
    }

    .header .pay {
        display: none;
    }

    .header .left .dd-search {
        display: none;
    }

    .header .basket {
        display: block;
        width: 21px;
        height: 20px;
    }

    /* Секция categories */
    .categories {
        display: none;
    }

    /* Секция chapter-filters */
    .chapter-filters {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 47px;
    }

    .chapter-filters>.active-chapter>.no-active {
        display: none;
    }

    .chapter-filters>.active-chapter>.active {
        display: block;
        color: #333333;
        font-weight: 700;
    }

    .chapter-filters>.filter-icon {
        width: 22px;
        height: 22px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .chapter-filters>.filter-icon .top {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .top::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .top::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .mid {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .mid::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .mid::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .bottom {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .bottom::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 66%;
        left: 12px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .bottom::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters .overlay.active {
        display: block;
    }

    .chapter-filters .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        pointer-events: none;
        transition: 0.3s;
        z-index: 9;
    }

    .chapter-filters .dd-filters.active {
        display: flex;
    }

    .chapter-filters .dd-filters {
        display: none;
        background: #fff;
        width: 280px;
        height: 356px;
        flex-direction: column;
        gap: 19px;
        padding: 20px 18px;
        border-radius: 1px;
        position: absolute;
        top: 132px;
        left: 370px;
        z-index: 10;
    }

    .chapter-filters .dd-filters .filter-close {
        position: absolute;
        top: -27px;
        right: 0;
    }

    .chapter-filters .dd-filters .filter-close:hover {
        content: url('img/filter-close-point.svg');
    }

    .chapter-filters .dd-filters .dropdown {
        position: relative;
    }

    .chapter-filters .dd-filters .dropdown .dropbtn {
        color: #484848;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 244px;
        height: 48px;
        border: 1px solid #D0D0D0;
        border-bottom: 1px solid #D0D0D0;
        padding: 8px 17px;
        cursor: pointer;
    }

    .chapter-filters .dd-filters .dropdown:hover .dropbtn {
        border-bottom: 0;
    }


    .chapter-filters .dd-filters .dropdown:hover .dropdown-content {
        display: block;
    }

    /* тут */
    .chapter-filters .dd-filters .dropdown .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
        border: 1px solid #D0D0D0;
        border-top: 0;
        min-width: 244px;
        z-index: 2;
    }

    .chapter-filters .dd-filters .dropdown .dropdown-content a {
        display: block;
        padding: 10px 17px;
        text-decoration: none;
        color: #484848;
    }

    .chapter-filters .dd-filters .dropdown .dropdown-content a:hover {
        background: #E8EEFF;
    }

    .chapter-filters .dd-filters .price-filter {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 19px;
    }

    .chapter-filters .dd-filters .price-filter .filter {
        width: 244px;
        height: 48px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .chapter-filters .dd-filters .price-filter .filter .from {
        font-family: "PT Sans", sans-serif;
        width: 244px;
        font-weight: 700;
        text-align: end;
        border: 1px solid #D0D0D0;
        outline: 0;
        padding: 14px 10px 13px 61px;
    }

    .chapter-filters .dd-filters .price-filter .filter .from::placeholder {
        color: #484848;
    }

    .chapter-filters .dd-filters .price-filter .filter .to {
        font-family: "PT Sans", sans-serif;
        width: 244px;
        font-weight: 700;
        text-align: end;
        border: 1px solid #D0D0D0;
        outline: 0;
        padding: 14px 10px 13px 41px;
    }

    .chapter-filters .dd-filters .price-filter .filter .to::placeholder {
        color: #484848;
    }

    .chapter-filters .dd-filters .price-filter .filter .t-from {
        color: #484848;
        position: absolute;
        left: 11px;
        top: 13px;
    }

    .chapter-filters .dd-filters .price-filter .filter .t-to {
        color: #484848;
        position: absolute;
        left: 11px;
        top: 13px;
    }

    .chapter-filters .dd-filters .apply {
        background: #FF3D3D;
        width: 244px;
        height: 48px;
        color: #fff;
        font-weight: 700;
        border: 0;
    }


    /* Секция filters */
    .filters {
        display: none;
    }

    /* Секция info */
    .info {
        display: grid;
        grid-template-columns: repeat(3, 328px);
        grid-auto-rows: 359px;
        margin-bottom: 39px;
    }

    .info .big {
        grid-column: span 2;
    }

    .info .sale-block {
        width: 656px;
        height: 359px;
        display: flex;
        gap: 26px;
        padding: 31px 17px 19px 16px;
        border: 1px solid #DEDEDE;
        cursor: pointer;
    }

    .info .sale-block:hover {
        background: #FFF1F1;
        outline: 1px solid #FF3D3D;
        outline-offset: -1px;
    }

    .info .sale-block>img {
        width: 297px;
        height: 297px;
    }

    .info .sale-block .sale-info h3 {
        color: #333333;
        height: 26px;
        font-weight: normal;
        font-size: 20px;
        margin: 0;
    }

    .info .sale-block .sale-info .text {
        color: #989898;
        line-height: 21px;
        height: 189px;
        margin-bottom: 32px;
    }

    .info .sale-block .sale-info .non-price {
        text-decoration: line-through;
        color: #989898;
        margin-bottom: 8px;
    }

    .info .sale-block .sale-info hr {
        margin-bottom: 8px;
    }

    .info .sale-block .sale-info .price {
        display: flex;
        justify-content: space-between;
    }

    .info .sale-block .sale-info .price a {
        color: #FF3D3D;
        font-size: 20px;
    }

    .info .block {
        width: 328px;
        height: 359px;
        display: flex;
        flex-direction: column;
        border: 1px solid #DEDEDE;
        padding: 16px 16px 19px 16px;
        cursor: pointer;
    }

    .info .block:hover {
        background: #E8EEFF;
        outline: 1px solid #819DEB;
        outline-offset: -1px;
    }

    .info .block>img {
        width: 164px;
        height: 164px;
        margin-left: 66px;
        margin-right: 66px;
        margin-bottom: 12px;
    }

    .info .block h3 {
        height: 26px;
        font-size: 18px;
        font-weight: normal;
        color: #333333;
        margin-bottom: 4px;
    }

    .info .block .full-text,
    .info .block .medium-text,
    .info .block .light-text {
        width: 242px;
        height: 72px;
        font-size: 14px;
        color: #979797;
        margin-bottom: 20px;
        line-height: 19px;
    }

    .info .block .medium-text {
        display: block;
    }

    .info .block .full-text,
    .info .block .light-text {
        display: none;
    }

    .info .block.n3 .medium-text {
        display: none;
    }

    .info .block.n3 .light-text {
        display: block;
    }

    .info .block.n6 .light-text {
        display: none;
    }

    .info .block hr {
        margin: 0;
        margin-bottom: 5px;
    }

    .info .block .price {
        display: flex;
        justify-content: space-between;
    }

    .info .block .price a {
        color: #325AC0;
        height: 26px;
        font-weight: normal;
        font-size: 20px;
    }

    .info .block .price .img {
        height: 16px;
    }
}


/* Адаптив Планшет2 */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .header {
        background: #265C9A;
        width: 100%;
        height: 73px;
        display: flex;
        align-items: center;
        gap: 37px;
    }

    /* Выпад. меню при клике */
    .header .menu {
        background: none;
        width: 24px;
        height: 24px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        padding-top: 3px;
        padding-bottom: 3px;
        position: relative;
    }

    .header .menu span {
        position: relative;
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    .header .menu .dd-section {
        display: none;
        background: #265C9A;
        width: 768px;
        height: 217px;
        flex-direction: column;
        position: absolute;
        top: 47px;
        left: -20px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 2;
    }

    .header .menu.active .dd-section {
        display: flex;
    }

    .header .menu .dd-section a {
        width: 100%;
        height: 40px;
        font-weight: 700;
        padding: 9px 100px 10px 16px;
    }

    .header .menu .dd-section a:hover {
        background: #618CBF;
    }

    .header .left {
        display: flex;
        align-items: center;
        gap: 37px;
    }

    .header .left .logo {
        color: #fff;
        font-weight: 700;
        font-size: 28px;
    }

    .header .left .number {
        display: none;
    }

    .header .left .search {
        width: 452px;
        height: 22px;
        border-bottom: 1px solid #517DAE;
    }

    .header .left .search input {
        color: #fff;
        background: none;
        width: 300px;
        outline: 0;
        border: 0;
    }

    .header .left .search input::placeholder {
        color: #fff;
    }

    .header .pay {
        display: none;
    }

    .header .left .dd-search {
        display: none;
    }

    .header .basket {
        display: block;
        width: 21px;
        height: 20px;
    }

    /* Секция categories */
    .categories {
        display: none;
    }

    /* Секция chapter-filters */
    .chapter-filters {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 47px;
    }

    .chapter-filters>.active-chapter>.no-active {
        display: none;
    }

    .chapter-filters>.active-chapter>.active {
        display: block;
        color: #333333;
        font-weight: 700;
    }

    .chapter-filters>.filter-icon {
        width: 22px;
        height: 22px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .chapter-filters>.filter-icon .top {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .top::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .top::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .mid {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .mid::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .mid::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .bottom {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .bottom::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 66%;
        left: 12px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .bottom::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters .overlay.active {
        display: block;
    }

    .chapter-filters .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        pointer-events: none;
        transition: 0.3s;
        z-index: 9;
    }

    .chapter-filters .dd-filters.active {
        display: flex;
    }

    .chapter-filters .dd-filters {
        display: none;
        background: #fff;
        width: 280px;
        height: 356px;
        flex-direction: column;
        gap: 19px;
        padding: 20px 18px;
        border-radius: 1px;
        position: absolute;
        top: 136px;
        left: 245px;
        z-index: 10;
    }

    .chapter-filters .dd-filters .filter-close {
        position: absolute;
        top: -27px;
        right: 0;
    }

    .chapter-filters .dd-filters .filter-close:hover {
        content: url('img/filter-close-point.svg');
    }

    .chapter-filters .dd-filters .dropdown {
        position: relative;
    }

    .chapter-filters .dd-filters .dropdown .dropbtn {
        color: #484848;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 244px;
        height: 48px;
        border: 1px solid #D0D0D0;
        border-bottom: 1px solid #D0D0D0;
        padding: 8px 17px;
        cursor: pointer;
    }

    .chapter-filters .dd-filters .dropdown:hover .dropbtn {
        border-bottom: 0;
    }


    .chapter-filters .dd-filters .dropdown:hover .dropdown-content {
        display: block;
    }

    /* тут */
    .chapter-filters .dd-filters .dropdown .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
        border: 1px solid #D0D0D0;
        border-top: 0;
        min-width: 244px;
        z-index: 2;
    }

    .chapter-filters .dd-filters .dropdown .dropdown-content a {
        display: block;
        padding: 10px 17px;
        text-decoration: none;
        color: #484848;
    }

    .chapter-filters .dd-filters .dropdown .dropdown-content a:hover {
        background: #E8EEFF;
    }

    .chapter-filters .dd-filters .price-filter {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 19px;
    }

    .chapter-filters .dd-filters .price-filter .filter {
        width: 244px;
        height: 48px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .chapter-filters .dd-filters .price-filter .filter .from {
        font-family: "PT Sans", sans-serif;
        width: 244px;
        font-weight: 700;
        text-align: end;
        border: 1px solid #D0D0D0;
        outline: 0;
        padding: 14px 10px 13px 61px;
    }

    .chapter-filters .dd-filters .price-filter .filter .from::placeholder {
        color: #484848;
    }

    .chapter-filters .dd-filters .price-filter .filter .to {
        font-family: "PT Sans", sans-serif;
        width: 244px;
        font-weight: 700;
        text-align: end;
        border: 1px solid #D0D0D0;
        outline: 0;
        padding: 14px 10px 13px 41px;
    }

    .chapter-filters .dd-filters .price-filter .filter .to::placeholder {
        color: #484848;
    }

    .chapter-filters .dd-filters .price-filter .filter .t-from {
        color: #484848;
        position: absolute;
        left: 11px;
        top: 13px;
    }

    .chapter-filters .dd-filters .price-filter .filter .t-to {
        color: #484848;
        position: absolute;
        left: 11px;
        top: 13px;
    }

    .chapter-filters .dd-filters .apply {
        background: #FF3D3D;
        width: 244px;
        height: 48px;
        color: #fff;
        font-weight: 700;
        border: 0;
    }


    /* Секция filters */
    .filters {
        display: none;
    }

    /* Секция info */
    .info {
        display: grid;
        grid-template-columns: repeat(2, 364px);
        grid-auto-rows: 364px;
        margin-bottom: 39px;
    }

    .info .big {
        grid-column: span 2;
    }

    .info .sale-block {
        width: 728px;
        height: 364px;
        display: flex;
        gap: 39px;
        padding: 25px 24px 21px 21px;
        border: 1px solid #DEDEDE;
        cursor: pointer;
    }

    .info .sale-block:hover {
        background: #FFF1F1;
        outline: 1px solid #FF3D3D;
        outline-offset: -1px;
    }

    .info .sale-block>img {
        width: 318px;
        height: 318px;
    }

    .info .sale-block .sale-info h3 {
        color: #333333;
        height: 26px;
        font-weight: normal;
        font-size: 20px;
        margin: 0;
    }

    .info .sale-block .sale-info .text {
        color: #989898;
        line-height: 20px;
        height: 168px;
        margin-bottom: 64px;
    }

    .info .sale-block .sale-info .non-price {
        text-decoration: line-through;
        color: #989898;
        margin-bottom: 8px;
    }

    .info .sale-block .sale-info hr {
        margin-bottom: 8px;
    }

    .info .sale-block .sale-info .price {
        display: flex;
        justify-content: space-between;
    }

    .info .sale-block .sale-info .price a {
        color: #FF3D3D;
        font-size: 20px;
    }

    .info .block {
        width: 364px;
        height: 364px;
        display: flex;
        flex-direction: column;
        border: 1px solid #DEDEDE;
        padding: 17px 24px;
        cursor: pointer;
    }

    .info .block:hover {
        background: #E8EEFF;
        outline: 1px solid #819DEB;
        outline-offset: -1px;
    }

    .info .block>img {
        width: 175px;
        height: 175px;
        margin-left: 70px;
        margin-right: 71px;
        margin-bottom: 15px;
    }

    .info .block h3 {
        height: 26px;
        font-size: 20px;
        font-weight: normal;
        color: #333333;
        margin-bottom: 4px;
    }

    .info .block .full-text,
    .info .block .medium-text,
    .info .block .light-text {
        width: 242px;
        height: 72px;
        font-size: 14px;
        color: #979797;
        margin-bottom: 15px;
        line-height: 19px;
    }

    .info .block .medium-text {
        display: block;
    }

    .info .block .full-text,
    .info .block .light-text {
        display: none;
    }

    .info .block.n3 .medium-text {
        display: none;
    }

    .info .block.n3 .light-text {
        display: block;
    }

    .info .block.n6 .light-text {
        display: none;
    }

    .info .block hr {
        margin: 0;
        margin-bottom: 8px;
    }

    .info .block .price {
        display: flex;
        justify-content: space-between;
    }

    .info .block .price a {
        color: #325AC0;
        height: 26px;
        font-weight: normal;
        font-size: 20px;
    }

    .info .block .price .img {
        height: 16px;
    }
}


/* Адаптив Мобил */
@media (max-width: 320px) {
    .container {
        padding: 0 20px;
    }

    .header {
        background: #265C9A;
        width: 100%;
        height: 73px;
        display: flex;
        align-items: center;
        gap: 17px;
    }

    /* Выпад. меню при клике */
    .header .menu {
        background: none;
        width: 24px;
        height: 24px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
        padding-top: 3px;
        padding-bottom: 3px;
        position: relative;
        margin-right: 5px;
    }

    .header .menu span {
        position: relative;
        display: block;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }

    .header .menu:hover span {
        background: #FBFF3D;
    }

    .header .menu .dd-section {
        display: none;
        background: #265C9A;
        width: 320px;
        height: 217px;
        flex-direction: column;
        position: absolute;
        top: 47px;
        left: -20px;
        padding-left: 20px;
        padding-right: 20px;
        z-index: 2;
    }

    .header .menu.active .dd-section {
        display: flex;
    }

    .header .menu .dd-section a {
        width: 100%;
        height: 40px;
        font-weight: 700;
        font-size: 14px;
        padding: 11px 60px 11px 9px;
    }

    .header .menu .dd-section a:hover {
        background: #618CBF;
    }

    .header .left {
        display: flex;
        align-items: center;
        gap: 62px;
    }

    .header .left .logo {
        color: #fff;
        font-weight: 700;
        font-size: 28px;
    }

    .header .left .number {
        display: none;
    }

    .header .left .search {
        display: none;
    }

    .header .pay {
        display: none;
    }

    .header .left .dd-search {
        display: block;
    }

    .header .left .dd-search span {
        display: flex;
        height: 17px;
    }

    .header .left .dd-search span:hover {
        content: url('img/header-search-yellow.svg');
    }

    .header .left .dd-input {
        display: none;
        position: absolute;
        background: #1F497B;
        width: 320px;
        height: 44px;
        top: 73px;
        left: 0px;
        padding: 11px 20px;
        z-index: 1;
    }

    .header .left .dd-input input {
        background: none;
        width: 100%;
        border: 0;
        outline: 0;
        color: #fff;
    }

    .header .left .dd-input input::placeholder {
        color: #fff;
    }

    .header .left.active .dd-input {
        display: flex;
    }

    .header .basket {
        display: block;
        width: 21px;
        height: 20px;
        cursor: pointer;
    }

    .header .basket:hover {
        content: url('img/header-basker-yellow.svg');
    }

    /* Секция categories */
    .categories {
        display: none;
    }

    /* Секция chapter-filters */
    .chapter-filters {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 47px;
        margin-bottom: 13px;
        position: relative;
    }

    .chapter-filters>.active-chapter>.no-active {
        display: none;
    }

    .chapter-filters>.active-chapter>.active {
        display: block;
        color: #333333;
        font-weight: 700;
    }

    .chapter-filters>.filter-icon {
        width: 22px;
        height: 22px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        cursor: pointer;
    }

    .chapter-filters>.filter-icon .top {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .top::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 50%;
        left: 12px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .top::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .mid {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .mid::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 50%;
        left: 3px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .mid::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 5px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .bottom {
        position: relative;
        display: block;
        height: 2px;
        background: #757575;
        border-radius: 2px;
    }

    .chapter-filters>.filter-icon .bottom::before {
        content: "";
        height: 7px;
        width: 7px;
        position: absolute;
        top: 66%;
        left: 12px;
        transform: translateY(-50%);
        background: #757575;
        border-radius: 50%;
    }

    .chapter-filters>.filter-icon .bottom::after {
        content: "";
        height: 3px;
        width: 3px;
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        background: #fff;
        border-radius: 50%;
    }

    .chapter-filters .overlay.active {
        display: block;
    }

    .chapter-filters .overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        pointer-events: none;
        transition: 0.3s;
        z-index: 9;
    }

    .chapter-filters .dd-filters.active {
        display: flex;
    }

    .chapter-filters .dd-filters {
        display: none;
        background: #fff;
        width: 280px;
        height: 356px;
        flex-direction: column;
        gap: 19px;
        padding: 20px 18px;
        border-radius: 1px;
        position: absolute;
        top: 75px;
        left: 20px;
        z-index: 10;
    }

    .chapter-filters .dd-filters .filter-close {
        position: absolute;
        top: -27px;
        right: 0;
    }

    .chapter-filters .dd-filters .filter-close:hover {
        content: url('img/filter-close-point.svg');
    }

    .chapter-filters .dd-filters .dropdown {
        position: relative;
    }

    .chapter-filters .dd-filters .dropdown .dropbtn {
        color: #484848;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 244px;
        height: 48px;
        border: 1px solid #D0D0D0;
        border-bottom: 1px solid #D0D0D0;
        padding: 8px 17px;
        cursor: pointer;
    }

    .chapter-filters .dd-filters .dropdown:hover .dropbtn {
        border-bottom: 0;
    }


    .chapter-filters .dd-filters .dropdown:hover .dropdown-content {
        display: block;
    }

    /* тут */
    .chapter-filters .dd-filters .dropdown .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: white;
        box-shadow: 0 6px 6px rgba(0, 0, 0, 0.15);
        border: 1px solid #D0D0D0;
        border-top: 0;
        min-width: 244px;
        z-index: 2;
    }

    .chapter-filters .dd-filters .dropdown .dropdown-content a {
        display: block;
        padding: 10px 17px;
        text-decoration: none;
        color: #484848;
    }

    .chapter-filters .dd-filters .dropdown .dropdown-content a:hover {
        background: #E8EEFF;
    }

    .chapter-filters .dd-filters .price-filter {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 19px;
    }

    .chapter-filters .dd-filters .price-filter .filter {
        width: 244px;
        height: 48px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .chapter-filters .dd-filters .price-filter .filter .from {
        font-family: "PT Sans", sans-serif;
        width: 244px;
        font-weight: 700;
        text-align: end;
        border: 1px solid #D0D0D0;
        outline: 0;
        padding: 14px 10px 13px 61px;
    }

    .chapter-filters .dd-filters .price-filter .filter .from::placeholder {
        color: #484848;
    }

    .chapter-filters .dd-filters .price-filter .filter .to {
        font-family: "PT Sans", sans-serif;
        width: 244px;
        font-weight: 700;
        text-align: end;
        border: 1px solid #D0D0D0;
        outline: 0;
        padding: 14px 10px 13px 41px;
    }

    .chapter-filters .dd-filters .price-filter .filter .to::placeholder {
        color: #484848;
    }

    .chapter-filters .dd-filters .price-filter .filter .t-from {
        color: #484848;
        position: absolute;
        left: 11px;
        top: 13px;
    }

    .chapter-filters .dd-filters .price-filter .filter .t-to {
        color: #484848;
        position: absolute;
        left: 11px;
        top: 13px;
    }

    .chapter-filters .dd-filters .apply {
        background: #FF3D3D;
        width: 244px;
        height: 48px;
        color: #fff;
        font-weight: 700;
        border: 0;
    }

    .chapter-filters .dd-filters .apply:hover {
        background: #CE2929;
    }

    /* Секция filters */
    .filters {
        display: none;
    }

    /* Секция info */
    .info {
        display: grid;
        grid-template-columns: repeat(1, 280px);
        grid-template-rows: 588px;
        grid-auto-rows: 381px;
        margin-bottom: 39px;
    }

    .info .big {
        grid-column: 1;
    }

    .info .sale-block {
        width: 280px;
        height: 588px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 18px 18px 16px 18px;
        border: 1px solid #DEDEDE;
        cursor: pointer;
    }

    .info .sale-block:hover {
        background: #FFF1F1;
        outline: 1px solid #FF3D3D;
        outline-offset: -1px;
    }

    .info .sale-block>img {
        width: 244px;
        height: 244px;
    }

    .info .sale-block .sale-info h3 {
        color: #333333;
        height: 26px;
        font-weight: normal;
        font-size: 20px;
        margin: 0;
        margin-bottom: 5px;
    }

    .info .sale-block .sale-info .text {
        display: none;
    }

    .info .sale-block .sale-info .text-2 {
        display: block;
        color: #989898;
        height: 168px;
        line-height: 20px;
        margin-bottom: 30px;
    }

    .info .sale-block .sale-info .non-price {
        display: none;
    }

    .info .sale-block .sale-info .non-price-2 {
        display: block;
        text-decoration: line-through;
        color: #989898;
        margin-bottom: 5px;
    }

    .info .sale-block .sale-info hr {
        margin-top: 5px;
        margin-bottom: 8px;
    }

    .info .sale-block .sale-info .price {
        display: flex;
        justify-content: space-between;
    }

    .info .sale-block .sale-info .price a {
        color: #FF3D3D;
        font-size: 20px;
    }

    .info .block {
        width: 280px;
        height: 381px;
        display: flex;
        flex-direction: column;
        border: 1px solid #DEDEDE;
        padding: 23px 18px 16px 18px;
        cursor: pointer;
    }

    .info .block:hover {
        background: #E8EEFF;
        outline: 1px solid #819DEB;
        outline-offset: -1px;
    }

    .info .block>img {
        width: 169px;
        height: 169px;
        margin-left: 37px;
        margin-right: 37px;
        margin-bottom: 8px;
    }

    .info .block h3 {
        height: 26px;
        font-size: 20px;
        font-weight: normal;
        color: #333333;
        margin-bottom: 5px;
    }

    .info .block .full-text,
    .info .block .medium-text,
    .info .block .light-text {
        width: 244px;
        height: 84px;
        font-size: 16px;
        color: #979797;
        margin-bottom: 15px;
        line-height: 21px;
    }

    .info .block .medium-text {
        display: block;
    }

    .info .block .full-text,
    .info .block .light-text {
        display: none;
    }

    .info .block.n3 .medium-text {
        display: block;
    }

    .info .block.n3 .light-text {
        display: none;
    }

    .info .block.n6 .light-text {
        display: none;
    }

    .info .block hr {
        margin: 0;
        margin-bottom: 8px;
    }

    .info .block .price {
        display: flex;
        justify-content: space-between;
    }

    .info .block .price a {
        color: #325AC0;
        height: 26px;
        font-weight: normal;
        font-size: 20px;
    }

    .info .block .price .img {
        height: 16px;
    }
}