.products-page__front-banner--container {
    background: #0f0037;
}

button,
[role="button"],
label,
.btn,
.btn-primary,
.filter_toggle_button,
.filter__label,
.filter__tag,
.filter__tag--button,
.filter-close-button,
.filter-reset,
.table__section,
.view__section,
.sort-section__tab,
.sort-section__icon,
.products__search__submit,
.chemical-elem,
.chemical-elem--active,
.pagination-button,
.filter_divider,
.products-page__button {
    user-select: none !important;
    -webkit-user-select: none !important;
}

h1 {
    padding: 100px 0 30px;
    margin: 0;
    max-width: 490px;
    color: #fff;
    font-family: Poppins, sans-serif;
    font-size: 32px;
    line-height: 40px;
    letter-spacing: 0;
    font-weight: 700;
}

.products-page__front-banner {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    position: relative;
}

.products-page__front-banner::before {
    content: '';
    position: absolute;
    z-index: 1;
    height: 717px;
    top: 5%;
    right: -28%;
    width: 100%;
    background: url(../img/fireworks.svg) no-repeat;
}

h1.products-page__title .products-page__title-hightlight {
    color: #f7941e;
}

h1.products-page__title {
    z-index: 5;
    position: relative;
}

h1.products-page__title hr {
    height: 0;
    border: none;
    margin: 0;
}

.products-page__button {
    text-decoration: none;
    padding: 0px 0 101px;
    z-index: 5;
    position: relative;
    display: flex;
}

.products-page__desc {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0;
    padding: 0 0 30px;
    margin: 0;
    color: #fff;
    z-index: 5;
}

.products__main-content__container {
    background: #fff;
}

.products__main-content {
    width: 100%;
    padding: 60px 0 65px;
    max-width: 1140px;
    position: relative;
    z-index: 5;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    flex-direction: column;
}

.products__title {
    padding: 0 0 70px;
    font-weight: 700;
    font-size: 24px;
    line-height: 36px;
    letter-spacing: 0;
    color: #0f0037;
    margin: 0 auto;
}

.products__section--grid {
    padding: 0 0 90px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: fit-content(270px);
    gap: 40px 20px;
}

.product__link {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 270px;
    text-decoration: none;
}

.product__full-name {
    color: #0f0037;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    padding: 0;
    margin: 0;
    word-break: break-all;
}

.product__CAS {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #0f0037;
}

.product__CAS--bold {
    font-weight: 700;
}

.product__card {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 270px;
    max-height: 270px;
    padding: 0 0 0 20px;
    border-left: 1px solid #0f003733;
}

.product__image {
    max-width: 140px;
    max-height: 140px;
    width: 100%;
    object-fit: cover;
    align-self: center;
}

.product__code {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    color: #0f0037;
    margin: 0;
    padding: 0;
}

.settings__section {
    width: 100%;
    display: flex;
    gap: 60px;
}

h4.product__line__name {
    margin: 0;
    padding: 0;
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #0f0037;
}

.product__line {
    padding: 20px 0;
    position: relative;
}

.product__line::after {
    content: '';
    display: block;
    width: calc(100% - 20px);
    height: 1px;
    border-bottom: 1px solid #0f003733;
    position: absolute;
    inset: auto 0 0 auto;
}

.products__section--list {
    padding: 0 0 83px;
}

.product__line__link {
    text-decoration: none;
    display: grid;
    grid-template-columns: 46px 1fr 315px 87px;
}

.product__line__index {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #f7941e;
    user-select: none;
}

.product__line__cas {
    font-family: Poppins, sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
    color: #0f0037;
}

.product__line__code {
    font-family: Poppins, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0f0037;
}

.search__section {
    width: 100%;
    display: flex;
    padding: 0;
    gap: 10px;
    justify-content: space-between;
    max-width: 420px;
}

.products__search__input {
    font-size: 12px;
    color: #0f0037;
    letter-spacing: 0;
    line-height: 18px;
    font-family: Poppins, sans-serif;
    width: 100%;
    align-self: center;
    border: none;
    padding: 0 0 2px;
    display: flex;
    outline: none;
    border-bottom: 0.5px solid;
    border-image: linear-gradient(90deg, #f7941e 0%, #bd6fd5 100%) 1;
}

.products__search__input::placeholder {
    color: #0f0037;
}

.products__search__submit {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.filter__section {
    display: flex;
    gap: 10px;
    align-items: center;
    width: fit-content;
    cursor: pointer;
}

.filter__text {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    user-select: none;
}

.fixed {
    position: fixed;
}

.inset-0 {
    inset: 0;
}

.background-opacity-30 {
    background: rgba(0, 0, 0, 0.3);
}

.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* REACT PART START */
.filter__label {
    max-width: 370px;
    width: 100%;
    font-family: Poppins, sans-serif;
    font-weight: lighter;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0;
    color: #0f0037;
    display: flex;
    gap: 10px;
    position: relative;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.filter__label::before {
    content: '';
    margin: 0;
    width: 10px;
    height: 10px;
    border: 0.5px solid #0f003780;
}

.filter__label:has(.filter__input:checked)::before {
    background: url('../icons/check-icon.svg') no-repeat center;
}

.filter__label__facet {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 17px;
    color: #F7941E;
}

.filter_view.filter_view--tags.filter_view--has-tags .filter-reset {
    margin-right: 25px;
}

.filter_view.filter_view--tags.filter_view--has-tags  .filter_buttons {
    width: 178px;
}

.filter__input {
    opacity: 0;
    position: absolute;
    display: none;
}

.filter_tags {
    display: flex;
    gap: 30px;
    padding: 20px 0 0 20px;
    flex-wrap: nowrap;
}

.filter__tag {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0;
    color: #0f0037;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    user-select: none;
}

.filter__tag--button {
    outline: none;
    border: none;
    width: 10px;
    height: 10px;
    cursor: pointer;
    background: url('../icons/tag-close-icon.svg') no-repeat center;
}

.filter_settings {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 220px;
    width: fit-content;
    padding: 0 0 20px;
}

.filter_divider {
    border-bottom: 1px solid #0f003733;
    width: 100%;
    height: 1px;
    margin-left: 20px;
}

.filter_divider:last-child {
    border-bottom: unset;
}

.filter_view {
    padding: 30px 50px 17px 30px;
    box-shadow: 0px 0px 20px 0px #3d3efe33;
    position: relative;
}

.filter_view--tags {
    padding: 20px 50px 20px 30px;
}

.filter_toggles {
    padding: 0 0 4px;
    width: 100%;
    user-select: none;
}

.filter_buttons {
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 0;
    width: 153px;
}

.filter__products {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px 30px;
}

.filter-reset {
    width: 153px;
}

.filter-reset__disabled {
    opacity: 0.5;
    cursor: default;

}

.filter-reset__disabled .filter-reset:hover {
    animation: none!important;
    font-weight: 300!important;
}

.filter_toggle_label {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0;
    color: #0f0037;
    line-height: 18px;
    padding: 0 12px 0 0;
}

.filter_toggle_button {
    font-family: Poppins, sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #0f0037;
    outline: none;
    background: transparent;
    border: none;
    padding: 0 25px 0 0;
    position: relative;
    cursor: pointer;
}

.filter_toggle_button::after {
    position: absolute;
    right: 12px;
    content: '|';
    height: 16px;
    color: #f7941e;
    font-weight: 700;
}

.filter_toggle_button:last-child::after {
    content: '';
}

.filter_toggle_button--selected {
    font-weight: 700;
    position: relative;
}

.filter_toggle_button--window::before {
    position: absolute;
    content: '';
    background: url('../icons/selected-tab-icon.svg') center no-repeat;
    width: 24px;
    height: 14px;
    inset: auto 50%  calc(-100% - 15px) auto;
}

.filter_setup {
    display: flex;
    padding: 0 0 16px;
}

.filter-close-button {
    position: absolute;
    right: 22px;
    top: 20px;
    padding: 0;
    outline: none;
    border: none;
    background: none;
    cursor: pointer;
}

.icons__section {
    display: flex;
    gap: 25px;
    cursor: pointer;
}

.icons__section .table__section,
.icons__section .view__section {
    padding: 0;
    outline: none;
    border: none;
    background: transparent;
}

/* REACT PART END */

/* MAYBE NEXT is to remove */

.filter__title {
    font-family: Poppins, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 36px;
    padding: 0 0 50px;
    margin: 0;
    letter-spacing: 0;
    color: #0f0037;
}

.filter__column {
    width: 100%;
    max-width: 420px;
}

.filter__search {
    width: 100%;
    display: flex;
    padding: 0;
    gap: 10px;
    justify-content: space-between;
}

.filter__search__input {
    font-size: 12px;
    color: #0f0037;
    letter-spacing: 0;
    line-height: 18px;
    font-family: Poppins, sans-serif;
    width: 100%;
    align-self: center;
    border: none;
    padding: 0 0 2px;
    display: flex;
    outline: none;
    border-bottom: 0.5px solid;
    border-image: linear-gradient(90deg, #f7941e 0%, #bd6fd5 100%) 1;
}

.filter__search__input::placeholder {
    color: #0f0037;
}

.filter__search__submit {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

.filter__table__image {
    box-shadow: 0 0 20px 0 #3d3efe33;
    cursor: pointer;
}

.filter__table {
    padding: 30px 0 60px;
}

.filter__section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 20px;
}

.filter__section__title {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    color: #0f0037;
}

.filter__section__header .custom-button {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(270deg, #f7941e 0%, #bd6fd5 100%) border-box;
    color: #0f0037;
    margin: 0;
    padding: 4px 4px 3px;
}

.filter__list__title {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 32px;
    color: #0f0037;
    letter-spacing: 0;
}

.filter__list__title--bold {
    font-weight: 700;
}

.filter__list__title--highlight {
    color: #f7941e;
}

.filter__list {
    margin: 0;
    padding: 0 0 10px;
    list-style: none;
    max-height: 500px;
    overflow-y: auto;
}

.filter__content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 0 34px;
}

.filter__list__reset-button {
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(270deg, #f7941e 0%, #bd6fd5 100%) border-box;
    color: #0f0037;
    padding: 4px 4px 3px;
}

.filter__list__label {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 32px;
    letter-spacing: 0;
    color: #0f0037;
    cursor: pointer;
}

.filter__list__label:has(input[type='checkbox']:checked) {
    font-weight: 700;
    padding: 0 0 0 13px;
    position: relative;
}

.filter__list__label:has(input[type='checkbox']:checked)::before {
    content: '';
    width: 8px;
    height: 10px;
    position: absolute;
    inset: 0;
    background: url('../icons/arrow-icon.svg') no-repeat;
    align-self: center;
}

/* Product Main Content Column 2 */

.products-column {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.products__sort {
    display: flex;
    max-height: 24px;
}

.products__sort-section {
    display: flex;
    align-self: end;
    gap: 50px;
    align-items: end;
}

.products__sort__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.products__sort__title {
    font-family: Poppins, sans-serif;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0;
    color: #0f0037;
    align-self: end;
    padding: 0 12px 0 0;
}

.products__sort__label {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    padding: 0 30px 0 0;
    line-height: 24px;
    letter-spacing: 0;
    color: #0f0037;
    cursor: pointer;
    position: relative;
}

.products__sort__label::after {
    content: '|';
    position: absolute;
    font-family: Poppins, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #f7941e;
    right: 12px;
}

.products__sort__label:has(input[type='radio']:checked) {
    font-weight: 700;
}

.products__sort__item:last-child .products__sort__label {
    padding: 0;
}

.products__sort__item:last-child .products__sort__label::after {
    content: unset;
}

.products__view__label--list,
.products__view__label--grid {
    width: 30px;
    height: 30px;
    display: flex;
    cursor: pointer;
}

.products__view__label--list {
    background: url('../icons/list-inactive-icon.svg') no-repeat center;
}

.products__view__label--grid {
    background: url('../icons/grid-inactive-icon.svg') no-repeat center;
}

.products__view__label--list:has(input[type='radio']:checked) {
    background: url('../icons/list-active-icon.svg') no-repeat center;
}

.products__view__label--grid:has(input[type='radio']:checked) {
    background: url('../icons/grid-active-icon.svg') no-repeat center;
}

.products__view {
    display: flex;
    gap: 30px;
}

.products__list {
    list-style: none;
    margin: 0;
    padding: 67px 0 85px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 280px);
    gap: 60px;
}

.pagination__item {
    font-family: Poppins, sans-serif;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    color: #0f0037;
    display: flex;
    padding: 0 24px 0 0;
    position: relative;
}

.pagination__item::after {
    content: '|';
    color: #f7941e;
    position: absolute;
    right: 11px;
    font-weight: 300;
}

.pagination__item--active {
    font-weight: 700;
}

.pagination__prev-link,
.pagination__next-link {
    text-decoration: none;
}

.pagination__prev-link {
    padding: 0 20px 0 0;
}

.pagination__next-link {
    padding: 0 0 0 20px;
}

.products__pagination,
.pagination__section {
    display: flex;
    align-self: center;
    justify-content: center;
}

.pagination__section button {
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
}

.pagination__item--last {
    padding: 0;
}

.pagination__item--last::after {
    content: none;
}

.products__sort__input,
.products__view__input,
.filter__list__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}


.filter__total {
    display: flex;
    gap: 10px;
    font-weight: 300;
    font-size: 14px;
    line-height: 21px;
}

.filter__total .text-highlight {
    font-weight: 700;
    font-size: 16px;
    line-height: 24px;
}



/* ============================================================ */
/* MOBILE STYLES                                                 */
/* ============================================================ */

@media (max-width: 768px) {
    /* Header */
    main#main {
        margin-top: 50px;
    }

    /* Hero banner */
    .products-page__front-banner {
        padding: 0 16px;
        max-width: 100%;
    }

    .products-page__front-banner::before {
        height: 320px;
        top: 8%;
        right: -20%;
        background-size: contain;
    }

    h1,
    h1.products-page__title {
        padding: 60px 0 16px;
        font-size: 22px;
        line-height: 30px;
        max-width: 100%;
    }

    .products-page__desc {
        font-size: 13px;
        line-height: 18px;
        padding: 0 0 20px;
    }

    .products-page__button {
        padding: 0 0 50px;
    }

    /* Main content section */
    .products__main-content {
        padding: 32px 16px 40px;
        gap: 20px;
        max-width: 100%;
    }

    .products__title {
        padding: 0 0 24px;
        font-size: 18px;
        line-height: 26px;
        text-align: center;
    }

    /* Filter setup */
    .filter_setup {
        flex-direction: column;
        gap: 16px;
        padding: 0 0 16px;
    }

    .filter_toggles {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 0;
        padding: 0;
    }

    .filter_toggle_label {
        font-size: 11px;
        line-height: 16px;
        padding: 0 8px 0 0;
        flex-basis: 100%;
    }

    .filter_toggle_button {
        font-size: 13px;
        line-height: 20px;
        padding: 0 16px 0 0;
    }

    .filter_toggle_button::after {
        right: 0;
    }

    .settings__section {
        order: 2;
        gap: 16px;
        flex-direction: column;
    }

    .icons__section {
        order: 1;
    }

    .filter_toggles {
        order: 3;
    }

    .search__section {
        max-width: 100%;
    }

    .icons__section {
        gap: 16px;
        align-self: flex-end;
    }

    /* Filter view (tags / lists) */
    .filter_view {
        padding: 20px 16px;
    }

    .filter_view--tags,
    .filter_view.filter_view--tags {
        padding: 12px 16px;
    }

    .filter_tags {
        padding: 12px 0 0 12px;
        gap: 8px 20px;
    }

    .filter_settings {
        max-height: none;
        flex-direction: column;
        flex-wrap: nowrap;
    }

    .filter__label {
        font-size: 14px;
        line-height: 28px;
        max-width: 100%;
    }

    .filter_divider {
        margin-left: 12px;
    }

    .filter_buttons {
        gap: 24px;
        padding: 16px 0 0;
    }

    .filter-close-button {
        right: 12px;
        top: 12px;
    }

    /* Periodic table — scrollable horizontal list, no SVG icons */
    .filter_view.filter_view--periodic-table {
        padding: 16px 0 20px 16px;
    }

    .periodic-table__description {
        padding: 0 30px 12px 16px;
        font-size: 12px;
        line-height: 18px;
        margin: 0;
    }
    periodic-table__description::marker {
        display: none;
    }

    .periodic-table--first-part,
    .periodic-table--second-part {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        grid-template-columns: none;
        grid-template-rows: none;
        gap: 16px;
        padding: 4px 16px 8px 0;
        -webkit-overflow-scrolling: touch;
    }

    .periodic-table--second-part {
        padding-top: 8px;
    }

    .chemical-elem {
        grid-column: auto;
        grid-row: auto;
        flex: 0 0 auto;
        width: auto;
        height: auto;
    }

    .chemical-elem:not(:has(.chemical-elem__info)) {
        display: none;
    }

    .chemical-elem .chemical-elem__border {
        display: none;
    }

    .chemical-elem__info {
        position: static;
        width: auto;
        height: auto;
        flex-direction: row;
        align-items: baseline;
        gap: 6px;
        padding: 4px 2px;
        white-space: nowrap;
    }

    .chemical-elem__name {
        padding: 0;
        font-size: 18px;
        line-height: 22px;
    }

    .chemical-elem__facets {
        font-size: 11px;
        line-height: 18px;
    }

    .chemical-elem--selected .chemical-elem__name,
    .chemical-elem--active:hover .chemical-elem__name {
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    .chemical-elem--selected svg,
    .chemical-elem--active:hover svg {
        background: none;
    }

    .chemical-elem--selected .chemical-elem__facets,
    .chemical-elem--active:hover .chemical-elem__facets {
        color: #0F0037;
    }

    /* Sorting section */
    .sort-section {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 0 0 12px;
    }

    .sort-section__tab,
    .sort-section__tab:first-child {
        padding: 0;
        gap: 12px;
    }

    .sort-section__title {
        font-size: 12px;
        line-height: 18px;
    }

    /* Products grid */
    .products__section--grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        gap: 24px 12px;
        padding: 0 0 40px;
    }

    .product__card {
        max-width: 100%;
        max-height: none;
        padding: 0 0 0 12px;
    }

    .product__link {
        height: auto;
        min-height: 220px;
        gap: 8px;
    }

    .product__full-name {
        font-size: 13px;
        line-height: 18px;
    }

    .product__CAS,
    .product__code {
        font-size: 12px;
        line-height: 18px;
    }

    .product__image {
        max-width: 110px;
        max-height: 110px;
    }

    /* Products list */
    .products__section--list {
        padding: 0 0 40px;
    }

    .product__line {
        padding: 16px 0;
    }

    .product__line__link {
        grid-template-columns: 28px 1fr;
        grid-template-rows: auto auto auto;
        gap: 2px 8px;
    }

    .product__line__index {
        grid-row: 1 / span 3;
        align-self: start;
        font-size: 14px;
        line-height: 20px;
    }

    h4.product__line__name {
        font-size: 14px;
        line-height: 20px;
    }

    .product__line__cas,
    .product__line__code {
        font-size: 12px;
        line-height: 18px;
    }

    /* Pagination */
    .pagination__item {
        font-size: 14px;
        line-height: 20px;
        padding: 0 16px 0 0;
    }

    .pagination__item::after {
        right: 7px;
    }

    .pagination__prev-link {
        padding: 0 12px 0 0;
    }

    .pagination__next-link {
        padding: 0 0 0 12px;
    }

    .pagination__section svg {
        width: 20px;
        height: 20px;
    }

    /* Sub-footer */
    .sub-footer__block {
        padding: 40px 16px 0;
        max-width: 100%;
    }

    .sub-footer__title {
        font-size: 18px;
        line-height: 26px;
        padding: 0 0 24px;
    }

    .sub-footer__desc {
        font-size: 13px;
        line-height: 20px;
        padding: 0 0 24px;
    }

    form.sub-footer__form {
        padding: 20px 20px;
        gap: 14px;
    }

    .sub-footer .sub-footer__form label,
    .sub-footer__form input:not([type='checkbox']):not([type='radio']),
    .sub-footer__form textarea {
        font-size: 13px;
        line-height: 22px;
    }

    .sub-footer__links {
        padding: 32px 16px;
        gap: 16px;
        flex-wrap: wrap;
    }

    .sub-footer__link {
        font-size: 11px;
        line-height: 16px;
    }

    /* Footer */
    footer {
        padding: 32px 0 40px;
    }

    .footer__container {
        flex-direction: column;
        gap: 16px;
        padding: 0 16px;
        width: 100%;
        max-width: 100%;
    }

    .footer__logo svg {
        width: 100px;
        height: auto;
    }

    .footer__menu {
        flex-direction: column;
        gap: 20px;
    }

    .footer__column,
    .footer__column:first-child {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .footer__column__title,
    .footer__container .widgettitle {
        font-size: 13px;
        line-height: 24px;
        padding: 0 0 8px;
    }

    .footer__column__item a,
    .footer__column .widget_nav_menu ul li a,
    .footer__menu a {
        font-size: 12px;
        line-height: 22px;
    }

    .footer__column__item {
        padding: 0 0 10px;
    }
}

/* ==========================================================================
   СОВРЕМЕННАЯ МОБИЛЬНАЯ ВЕРСИЯ (ОПТИМИЗАЦИЯ ДЛЯ SMARTPHONES & TABLETS)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Базовые настройки страницы и контейнеров */
    body, html {
        overflow-x: hidden; /* Исключаем горизонтальный скролл */
    }

    .main-body,
    .wp-singular .main-body,
    .max-w-\[1280px\] {
        padding: 0 16px;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Главный баннер и заголовки */
    h1, h1.products-page__title {
        font-size: 24px !important;
        line-height: 32px !important;
        padding: 40px 0 16px !important;
        text-align: center;
    }

    .products-page__front-banner {
        padding: 0 16px;
    }

    .products-page__front-banner::before {
        display: none; /* Убираем декоративные элементы, ломающие мобильную верстку */
    }

    .products-page__desc {
        text-align: center;
        font-size: 14px !important;
        line-height: 20px !important;
        padding: 0 0 20px !important;
    }

    .products-page__button {
        justify-content: center;
        padding: 0 0 40px !important;
    }

    /* Инструменты управления (Поиск, Сортировка, Вид) */
    /* Делаем так, чтобы все элементы управления красиво переносились на новые строки */
    .products__management__container,
    .products__controls,
    .sort-section,
    .view__section {
        display: flex;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px;
        margin-bottom: 16px;
    }

    /* Полноширинный поиск для удобного ввода */
    .products__search__form {
        width: 100% !important;
        display: flex;
    }

    .products__search__input {
        flex-grow: 1;
        width: 100% !important;
        font-size: 16px !important; /* Предотвращает авто-зум в iOS Safari */
    }

    /* Секция интерактивной таблицы элементов */
    /* Периодическую таблицу на мобильных экранах лучше сделать скроллируемой по горизонтали,
       чтобы сохранить её структуру, скрыв лишние отступы */
    .periodic-table__wrapper,
    .periodic-table-container {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 12px;
        margin-bottom: 24px;
    }

    .periodic-table {
        min-width: 700px; /* Позволяет аккуратно скроллить таблицу без сжатия элементов */
    }

    /* Блок фильтров (Делаем его современным и вертикальным) */
    .filter__container {
        display: flex;
        flex-direction: column !important;
        gap: 16px;
        width: 100% !important;
    }

    fieldset.filter__group {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Кнопки фильтров делаем крупнее (Touch-friendly — минимум 44px в высоту) */
    .filter_toggle_button,
    .filter__label,
    .filter-reset {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 16px !important;
        font-size: 14px !important;
        box-sizing: border-box;
    }

    /* Сетка продуктов (Product Grid) */
    /* Автоматически переносим карточки: 2 в ряд на планшетах, 1 в ряд на смартфонах */
    .products__grid,
    .products__container {
        display: grid !important;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
        gap: 16px !important;
        padding: 16px 0 !important;
    }

    /* Специфический фикс для экранов меньше 480px (строго 1 колонка для карточек товаров) */
    @media (max-width: 480px) {
        .products__grid,
        .products__container {
            grid-template-columns: 1fr !important;
        }
    }

    /* Карточка продукта (Современный аккуратный UI) */
    .product__card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background: #ffffff;
        border-radius: 12px; /* Скругленные углы в стиле современного UI */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        transition: transform 0.2s;
    }

    .product__link {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 16px;
    }

    .product__full-name {
        font-size: 16px !important;
        line-height: 22px !important;
        margin-bottom: 12px !important;
        min-height: auto !important; /* Убираем фиксированную высоту для текста */
    }

    .product__image {
        max-height: 200px;
        object-fit: contain;
        margin: 12px auto;
        width: auto;
    }

    .product__info {
        margin-top: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 12px;
        border-top: 1px solid #f0f0f0;
    }

    /* Пагинация (Кнопки переключения страниц) */
    .pagination__container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap; /* Кнопки переносятся, если их много */
        gap: 8px;
        padding: 24px 0;
    }

    .pagination-button {
        padding: 10px 14px !important;
        font-size: 14px !important;
    }

    .filter_toggle_button--window::before {
        content: unset!important;
    }

    .icons__section .table__section, .icons__section .view__section {
        margin: 0!important;
    }

    .filter__label::before {
        content: '';
        margin: 0;
        width: 10px;
        height: 10px;
        border: 0.5px solid #0f003780;
        display: flex;
    }
    .filter_toggle_button, .filter__label, .filter-reset {
        display: flex !important;
    }

    .filter_toggle_button, .filter__label, .filter-reset {
        width: unset !important;
    }

    .filter_toggle_button, .filter__label, .filter-reset {
        padding: 12px 15px !important;
    }



    /* Мобильный подвал сайта (Footer) */
    footer, .sub-footer {
        padding: 32px 16px !important;
    }

    .footer__container {
        flex-direction: column !important;
        align-items: center;
        text-align: center;
        gap: 24px !important;
    }

    .footer__column {
        width: 100% !important;
    }

    .footer__menu, .sub-footer__links {
        flex-direction: column !important;
        align-items: center;
        gap: 12px !important;
    }

    .footer__menus {
        flex-wrap: wrap;
    }


     .sort-section{
        display: flex;
        width: 100% !important;
        gap: 12px;
        margin-bottom: 16px;
        justify-content: space-between;
    }
}