.filter_section {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    gap: 20px 2%;
}

.filter_section .item {
    display: flex;
    flex-direction: column;
    width: 18%;
    padding: 12px;
    border: 1px solid transparent;
    box-shadow: 0px 0px 10px -1px #bb9255;
    gap: 10px;
    min-width: 237px;
}

.filter_section .item:hover {
    border: 1px solid #BBBBBB;
}

.filter_section .item .img-area {
    position: relative;
    width: 100%;
    height: 150px;
}

.filter_section .item .img-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.filter_section .item .img-area .cat-area {
    position: absolute;
    top: 3px;
    left: 3px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.filter_section .item .img-area .cat-area .cat-item {
    display: flex;
    background-color: #BB9255;
    color: #ffffff;
    padding: 3px;
    font-size: 6px;
}
.filter_section .item .item-title {
    font-size: 20px;
}
.filter_section .item .logo-product-area {
    width: 47px;
    height: 47px;
}

.filter_section .item .logo-product-area img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.filter_section .item .item-title:hover {
    color: #BB9255;
}

.filter_section .item .item-text {
    font-size: 14px;
    font-weight: 400;
}

.filter_section .item .price-area {
    font-size: 18px;
    font-weight: 900;
    color: #BB9255;
    margin-top: auto;
    padding-top: 15px;
    text-align: center;
    margin-bottom: 10px
}

.filter_section .item .button {
    font-size: 12px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background-color: #000000;
    color: #FFFFFF;
    margin: auto auto 15px;
}

.filter_section .item .button:hover {
    background-color: #BB9255;
}

.filter_section .item .button-add {
    font-size: 10px;
    font-weight: 800;
    color: #ffffff;
    background-color: #000000;
    padding: 8px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

.filter_section .item .button-add:hover {
    background-color: #BB9255;
}

.filter_section .item .button-add::before {
    content: '';
    display: flex;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'><path d='M18.2261 17.7719L16.7666 3.95792C16.7611 3.90588 16.7332 3.85748 16.6884 3.82224C16.6436 3.78699 16.5851 3.76745 16.5243 3.76745H14.3601L14.3988 3.40034C14.4541 2.86708 14.3492 2.33053 14.0941 1.84222C13.8389 1.35392 13.4422 0.930259 12.9419 0.611935C12.4416 0.293611 11.8546 0.0913143 11.2372 0.0244732C10.6199 -0.042368 9.99291 0.0284919 9.41656 0.230248C8.89285 0.0464219 8.32628 -0.0290158 7.76249 0.0100092C7.1987 0.0490342 6.65344 0.201431 6.17061 0.454928C5.68779 0.708425 5.28089 1.05594 4.98269 1.46948C4.68449 1.88303 4.50332 2.35104 4.45377 2.83585L4.3555 3.76745H1.92933C1.8686 3.76745 1.81007 3.78699 1.76524 3.82224C1.7204 3.85748 1.69251 3.90588 1.68705 3.95792L0.22755 17.7719C0.224509 17.8008 0.228512 17.83 0.239306 17.8576C0.2501 17.8851 0.267446 17.9104 0.29024 17.9319C0.313034 17.9533 0.340775 17.9705 0.371695 17.9822C0.402615 17.9939 0.436036 18 0.469827 18H17.9838C18.0173 17.9992 18.0503 17.9925 18.0807 17.9805C18.1112 17.9685 18.1385 17.9513 18.1611 17.9301C18.1837 17.9088 18.2011 17.8838 18.2123 17.8566C18.2234 17.8295 18.2281 17.8006 18.2261 17.7719ZM15.0648 16.0074L12.9284 17.3003L14.3142 4.18606H15.0648V16.0074ZM15.3056 16.3737L17.2358 17.5814H13.3098L15.3056 16.3737ZM17.6931 17.3499L15.5513 16.0097V4.18606H16.3022L17.6931 17.3499ZM10.7899 0.41862C11.2259 0.41862 11.657 0.496794 12.0559 0.648156C12.4548 0.799518 12.8126 1.02075 13.1066 1.29773C13.4005 1.57471 13.6242 1.90137 13.7632 2.25687C13.9023 2.61237 13.9537 2.9889 13.9143 3.36245L13.8717 3.76745H11.6331L11.6717 3.40034C11.7347 2.83335 11.614 2.26244 11.3232 1.75081C11.0323 1.23918 10.5825 0.806786 10.0237 0.501503C10.2743 0.447148 10.5316 0.419315 10.7899 0.41862ZM11.1446 3.76745H7.57127L7.6654 2.87373C7.71229 2.40981 7.8986 1.96435 8.20604 1.58111C8.51348 1.19786 8.93148 0.89001 9.41899 0.687782C9.99697 0.923799 10.4766 1.30702 10.793 1.7855C11.1093 2.26398 11.247 2.81458 11.1874 3.36266L11.1446 3.76745ZM4.93833 2.87373C4.97714 2.48586 5.1135 2.10988 5.33797 1.77185C5.56243 1.43383 5.86964 1.14184 6.23829 0.916121C6.60694 0.690404 7.02822 0.536358 7.47293 0.464657C7.91765 0.392955 8.37517 0.405314 8.81379 0.500875C8.3531 0.757585 7.96658 1.10137 7.68364 1.50604C7.40071 1.91071 7.22883 2.36559 7.18109 2.83606L7.08258 3.76745H4.84395L4.93833 2.87373ZM2.15141 4.18606H13.8255L12.4102 17.5814H0.736185L2.15141 4.18606Z' fill='%23BB9255'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.filter_section .item .button-add:hover::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='19' height='18' viewBox='0 0 19 18' fill='none'><path d='M18.2261 17.7719L16.7666 3.95792C16.7611 3.90588 16.7332 3.85748 16.6884 3.82224C16.6436 3.78699 16.5851 3.76745 16.5243 3.76745H14.3601L14.3988 3.40034C14.4541 2.86708 14.3492 2.33053 14.0941 1.84222C13.8389 1.35392 13.4422 0.930259 12.9419 0.611935C12.4416 0.293611 11.8546 0.0913143 11.2372 0.0244732C10.6199 -0.042368 9.99291 0.0284919 9.41656 0.230248C8.89285 0.0464219 8.32628 -0.0290158 7.76249 0.0100092C7.1987 0.0490342 6.65344 0.201431 6.17061 0.454928C5.68779 0.708425 5.28089 1.05594 4.98269 1.46948C4.68449 1.88303 4.50332 2.35104 4.45377 2.83585L4.3555 3.76745H1.92933C1.8686 3.76745 1.81007 3.78699 1.76524 3.82224C1.7204 3.85748 1.69251 3.90588 1.68705 3.95792L0.22755 17.7719C0.224509 17.8008 0.228512 17.83 0.239306 17.8576C0.2501 17.8851 0.267446 17.9104 0.29024 17.9319C0.313034 17.9533 0.340775 17.9705 0.371695 17.9822C0.402615 17.9939 0.436036 18 0.469827 18H17.9838C18.0173 17.9992 18.0503 17.9925 18.0807 17.9805C18.1112 17.9685 18.1385 17.9513 18.1611 17.9301C18.1837 17.9088 18.2011 17.8838 18.2123 17.8566C18.2234 17.8295 18.2281 17.8006 18.2261 17.7719ZM15.0648 16.0074L12.9284 17.3003L14.3142 4.18606H15.0648V16.0074ZM15.3056 16.3737L17.2358 17.5814H13.3098L15.3056 16.3737ZM17.6931 17.3499L15.5513 16.0097V4.18606H16.3022L17.6931 17.3499ZM10.7899 0.41862C11.2259 0.41862 11.657 0.496794 12.0559 0.648156C12.4548 0.799518 12.8126 1.02075 13.1066 1.29773C13.4005 1.57471 13.6242 1.90137 13.7632 2.25687C13.9023 2.61237 13.9537 2.9889 13.9143 3.36245L13.8717 3.76745H11.6331L11.6717 3.40034C11.7347 2.83335 11.614 2.26244 11.3232 1.75081C11.0323 1.23918 10.5825 0.806786 10.0237 0.501503C10.2743 0.447148 10.5316 0.419315 10.7899 0.41862ZM11.1446 3.76745H7.57127L7.6654 2.87373C7.71229 2.40981 7.8986 1.96435 8.20604 1.58111C8.51348 1.19786 8.93148 0.89001 9.41899 0.687782C9.99697 0.923799 10.4766 1.30702 10.793 1.7855C11.1093 2.26398 11.247 2.81458 11.1874 3.36266L11.1446 3.76745ZM4.93833 2.87373C4.97714 2.48586 5.1135 2.10988 5.33797 1.77185C5.56243 1.43383 5.86964 1.14184 6.23829 0.916121C6.60694 0.690404 7.02822 0.536358 7.47293 0.464657C7.91765 0.392955 8.37517 0.405314 8.81379 0.500875C8.3531 0.757585 7.96658 1.10137 7.68364 1.50604C7.40071 1.91071 7.22883 2.36559 7.18109 2.83606L7.08258 3.76745H4.84395L4.93833 2.87373ZM2.15141 4.18606H13.8255L12.4102 17.5814H0.736185L2.15141 4.18606Z' fill='%23ffffff'/></svg>");
}


@media (max-width: 670px) {
    .filter_section .item {
        width: calc(50% - 12.5px);
        gap: 25px;
    }

    .filter_section .item .img-area img {
        object-fit: cover;
    }
}

@media (max-width: 490px) {
    .filter_section .item {
        width: 100%;
        gap: 25px;
    }
}







.popular-cat {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.popular-cat .title-area {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 0 0;
    margin-left: auto;
    position: relative;
    font-size: 42px;
    text-transform: uppercase;
    color: #414243;
    gap: 20px;
}

.popular-cat .title-area .title-section {
    color: #414243;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 90%;
    position: relative;
    text-shadow:
        6px 0 #F1F0EF,
        -6px 0 #F1F0EF,
        0 6px #F1F0EF,
        0 -6px #F1F0EF,
        6px 6px #F1F0EF,
        -6px -6px #F1F0EF,
        -6px 6px #F1F0EF,
        6px -6px #F1F0EF,
        0px 8px 8px rgba(0, 0, 0, 0.25);
}

.popular-cat .title-area::after {
    content: '';
    width: 100%;
    height: 3px;
    position: absolute;
    background-color: #BB9255;
    top: 0;
    left: 0;
    box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.popular-cat .title-area .button-go {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 196px;
    height: 40px;
    background-color: #BB9255;
    color: #FFFFFF;
    font-size: 10px;
    font-weight: 800;
}

.popular-cat .title-area .button-go:hover {
    background-color: #000000;
}

.popular-cat .items-area {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.popular-cat .items-area .item {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: calc(25% - 15px);
}

.popular-cat .items-area .item .img-area {
    width: 100%;
    height: 400px;
}

.popular-cat .items-area .item .img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.popular-cat .items-area .item .title-item {
    font-size: 20px;
    font-weight: 800;
}

.popular-cat .items-area .item .text {
    font-size: 14px;
    font-weight: 300;
}

.popular-cat .items-area .item .button {
    font-size: 12px;
    font-weight: 800;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 40px;
    background-color: #000000;
    color: #FFFFFF;
    margin-top: auto;
}

.popular-cat .items-area .item .button:hover {
    background-color: #BB9255;
}
.popular-cat>.img-area {
    width: 100%;
    height: 825px;
}
.popular-cat>.img-area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
@media (max-width: 950px) {
    .popular-cat .items-area .item {
        width: calc(50% - 10px);
    }
}
@media (max-width: 767px) {
    .popular-cat .title-area {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .popular-cat .title-area .title-section {
        line-height: 120%;
        font-size: 30px;
    }
}
@media (max-width: 650px) {
    .popular-cat>.img-area {
        height: 408px;
    }
}
@media (max-width: 555px) {
    .popular-cat .items-area .item .img-area {
        height: 225px;
    }

    .popular-cat .items-area .item .title-item {
        font-size: 16px;
    }

    .popular-cat .items-area .item .button {
        width: 100%;
    }

    .popular-cat .items-area .item {
        text-align: center;
    }
}
@media (max-width: 360px) {
    .popular-cat .items-area .item {
        width: 100%;
    }
}




/* === Category extra content + FAQ =============================== */

.category-extra-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    margin-top: 40px;
}

.category-extra-content {
    font-size: 16px;
    line-height: 1.6;
    color: #414243;
}

.category-extra-content p {
    margin-bottom: 1em;
}

.category-extra-content ul,
.category-extra-content ol {
    padding-left: 1.5em;
    margin-bottom: 1em;
}

/* FAQ */

.category-faq {
    border-top: 1px solid #E0E0E0;
    padding-top: 20px;
}

.category-faq-title {
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #414243;
    margin-bottom: 20px;
}

.category-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.category-faq-item {
    border-bottom: 1px solid #E9E9E9;
}

.category-faq-question {
    width: 100%;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    text-align: left;
    color: #414243;
}

.category-faq-question:hover {
    color: #BB9255;
}

.category-faq-question-text {
    flex: 1;
}

/* плюс/минус справа */

.category-faq-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    position: relative;
}

.category-faq-icon::before,
.category-faq-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: #BB9255;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.category-faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.category-faq-item.is-open .category-faq-icon::after {
    opacity: 0;
    /* минус вместо плюса */
}

.category-faq-answer {
    padding: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #555555;
}

.category-faq-answer-inner p {
    margin-bottom: 0.6em;
}

/* Адаптивность */

@media (max-width: 768px) {
    .category-extra-block {
        gap: 30px;
        margin-top: 30px;
    }

    .category-faq-title {
        font-size: 22px;
        text-align: left;
    }

    .category-faq-question {
        font-size: 15px;
    }

    .category-extra-content {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .category-faq-title {
        font-size: 20px;
    }

    .category-faq-question {
        padding: 12px 0;
        font-size: 14px;
    }

    .category-faq-answer {
        font-size: 13px;
    }
}

/* === /Category extra content + FAQ ============================== */