/* настройка хедеров */
.header-main {
    display: none;
}

.header-cont-1 {
    display: none;
}

.header-cont-2 {
    display: flex;
}
/* конец настройки хэдеров */

.main {
    padding: calc(20px + 48px) 0 100px;
    width: calc(100vw - 20px * 2);

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.main-title {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.main-title-t {
    font-size: 64px;
    line-height: 110%;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--color-foreground-primary);

    text-transform: lowercase;
}

.settings-line {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.settings-items {
    display: flex;
    height: fit-content;
    gap: 15px;
}

.settings-items-cat {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.settings-items-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    
    height: 48px;
    padding: 0 48px;

    border: .8px solid var(--color-foreground-primary);
    border-radius: 24px;

    cursor: pointer;
}

.settings-items-item.active {
    background-color: var(--color-foreground-primary);
}

.settings-items-item.active .settings-items-item-t {
    color: var(--color-background-primary);
}

.settings-items-item-icon {
    width: 20px;
    height: 20px;
}

.settings-items-item-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.settings-items-item-t {
    font-size: 16px;
    line-height: 110%;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-foreground-primary);

    text-transform: lowercase;
}

/* Для выпадающего */
.drop-sort {
    display: flex;
    flex-direction: column;

    position: relative;
    width: 197px;
}

.drop-sort-visible {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;

    height: 48px;
    width: 100%;

    transition: all 0.3s ease;
}

.drop-sort-btn {
    display: none;
}

.drop-sort-title {
    font-size: 16px;
    line-height: 110%;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-foreground-primary);

    text-transform: lowercase;
}

.drop-sort-icon {
    width: 20px;
    height: 20px;

    transition: all 0.3s ease;
}

.drop-sort-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.drop-sort:hover .drop-sort-icon {
    transform: rotate(90deg);
}

.drop-sort-content {
    position: absolute;
    top: 48px;

    z-index: 1;
    width: 100%;

    background-color: var(--color-background-primary);

    animation-name: smoothDrop;
    animation-duration: 0.3s;
    animation-timing-function: ease;

    display: none;
}

.drop-sort:hover .drop-sort-content {
    display: block;
}

.sort-option {
    display: flex;
    height: 38px;
    align-items: center;

    font-size: 16px;
    line-height: 110%;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--color-foreground-primary);

    text-transform: lowercase;

    cursor: pointer;

    padding: 9px 12px;

    transition: all 0.3s ease;
}

.sort-option:hover {
    opacity: 50%;
}

.checkbox-label {
    padding-left: calc(20px + 7.6px);
    height: 20px;
}

/* Пустой каталог */
.products-empty {
    padding: 200px 0;
    width: 100%;

    display: flex;
    justify-content: center;
    gap: 24px;
}

.products-empty-icon {
    width: 152px;
    height: 152px;
}

.products-empty-icon img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.products-empty-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.products-empty-content-info {
    display: flex;
    flex-direction: column;
    gap: 16px;

    color: var(--color-foreground-primary);
    text-transform: lowercase; 
    letter-spacing: -0.3px;
    font-weight: 500;
}

.products-empty-content-info-title {
    font-size: 48px;
    line-height: 110%;

    width: 444px;
}

.products-empty-content-info-t {
    font-size: 24px;
    line-height: 110%;
}

.products-empty-btn {
    width: fit-content;
    padding: 0 48px;
}

.item-filter {
    position: absolute;
    height: 48px;
}

.settings-items-cat .settings-items-item:first-of-type {
    margin-left: calc(195px + 15px);
}

/* Адаптация на маленькие экраны (< 1920)*/
/* 1440 */
@media screen and (max-width: 1575px) {
    .settings-line {
        align-items: start;
    }

    .settings-items {
        flex-wrap: wrap;
        height: fit-content;
        width: 830px;
    }

    .settings-items-item {
        height: 48px;
    }
}

/* 1280 */
@media screen and (max-width: 1280px) {
    /* Пустой каталог */
    .products-empty {
        padding: 150px 0;
    }
}

/* 768 */
@media screen and (max-width: 1200px) {
    .main {
        padding: calc(20px + 48px) 0 64px;
        gap: 32px;
    }

    .main-title-t {
        font-size: 48px;
        line-height: 110%;
    }

    .settings-line {
        flex-direction: row-reverse;
        gap: 8px;
        justify-content: start;
    }

    .settings-items {
        flex-wrap: nowrap;
        display: flex;
        height: 38px;
        gap: 8px;
        width: calc(100% - 56px - 8px);
    }

    .item-filter {
        position: initial;
    }

    .settings-items-cat .settings-items-item:first-of-type {
        margin-left: 0;
    }

    .settings-items-cat {
        gap: 8px;
        overflow-x: scroll;
        pointer-events: auto;
        flex-wrap: nowrap;
    }

   .settings-items-cat::-webkit-scrollbar {
        height: 0;
    }

    .settings-items-item {
        height: 100%;
        padding: 0 32px;
        flex-shrink: 0;
    }

    .settings-items-item-t {
        font-size: 14px;
        line-height: 110%;
    }

    /* Для выпадающего */
    .drop-sort {
        width: 56px;
        height: 38px;
        background-color: var(--color-foreground-primary);
        border-radius: 24px;
        flex-shrink: 0;
    }

    .drop-sort-visible {
        padding: 0;
        justify-content: center;
    }

    .drop-sort-btn {
        display: flex;
    }

    .drop-sort-title,
    .drop-sort-icon {
        display: none;
    }

    .drop-sort-content {
        top: 38px;
        padding-top: 16px;

        width: 197px;
    }

    /* Пустой каталог */
    .products-empty-icon {
        width: 100px;
        height: 100px;
    }

    .products-empty-content-info-title {
        font-size: 32px;

        width: 320px;
    }

    .products-empty-content-info-t {
        font-size: 20px;
    }
}

/* 375 */
@media screen and (max-width: 725px) {
    .main {
        padding: calc(20px + 32px) 0 64px;
        width: calc(100vw - 12px * 2);

        gap: 16px;
    }

    .main-title {
        gap: 16px;
    }

    .main-title-t {
        font-size: 32px;
        line-height: 110%;
    }

    .settings-items-item {
        padding: 0 24px;
    }

    .settings-items-item-t {
        font-size: 14px;
        line-height: 110%;
    }

    /* Для выпадающего */
    .drop-sort-title {
        font-size: 14px;
        line-height: 110%;
    }

    .drop-sort-content {
        padding-top: 8px;
    }

    .sort-option {
        font-size: 14px;
        line-height: 110%;
    }

    /* Пустой каталог */
    .products-empty {
        padding: 80px 0;
        flex-direction: column;
        align-items: center;
    }

    .products-empty-content {
        width: 100%;
    }

    .products-empty-content-info {
        align-items: center;
    }

    .products-empty-content-info-title {
        font-size: 24px;

        width: 193px;
    }

    .products-empty-content-info-t {
        font-size: 14px;
        text-align: center;
    }

    .products-empty-btn {
        width: 100%;
        text-align: center;
    }
}