.moder-block {
    display: none
}

/* 1. Общие настройки таблицы */
table.catalog {
    width: 100%;
    border-collapse: collapse;
}

table.catalog tbody {
    display: flex;
    flex-wrap: wrap;
    gap: calc(2 * var(--sizew));
    width: 100%;
}

/* 2. Контейнер строки — теперь это просто гибкий блок без фикс. ширины */
table.catalog tbody tr {
    display: contents;
    /* Позволяет дочерним td участвовать во flex-сетке напрямую */
}

/* 3. Сама карточка (Ячейка td) — ТУТ ЗАДАЕМ ШИРИНУ */
table.catalog tbody td.catalog-item {
    position: relative;
    display: flex;
    align-items: end;
    align-content: flex-end;
    flex-wrap: wrap;
    width: calc(25% - (calc(2 * var(--sizew)) * 3 / 4));
    height: calc(20 * var(--sizew));
    background-color: var(--white);
    padding: calc(1.5 * var(--sizew));
    border-radius: calc(1 * var(--sizew));
    overflow: hidden;
    box-sizing: border-box;
    gap: calc(1 * var(--sizew));
    box-shadow: 0px 10px 30px 0px rgb(240 222 186);
}

#catalog-item-008 {
    width: calc(50% - (calc(2 * var(--sizew)) * 1 / 2));
}

/* 4. Картинка-фон */
table.catalog tbody td a.catalog-item-img-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

table.catalog tbody td a.catalog-item-img-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

table.catalog tbody td.catalog-item:hover a.catalog-item-img-link img {
    transform: scale(1.08);
}

/* 5. Стили плашек (Заголовки и ссылки внутри div) */
table.catalog tbody tr td h3,
table.catalog tbody tr td div {
    position: relative;
    z-index: 2;
    margin: 0;
}

/* Единый стиль для всех "кнопок" на карточке */
table.catalog tbody tr td h3 a,
table.catalog tbody tr td div a {
    display: inline-block;
    backdrop-filter: blur(1px);
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--onix) !important;
    text-decoration: none;
    font-weight: 500;
    padding: calc(0.6 * var(--sizew)) calc(1.2 * var(--sizew));
    border-radius: calc(2 * var(--sizew));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: calc(1.1 * var(--sizew));
    line-height: 1.2;
    transition: all 0.2s ease;
    text-align: center;
}

/* Эффект наведения на плашку */
table.catalog tbody tr td h3 a:hover,
table.catalog tbody tr td div a:hover {
    background-color: var(--red2);
    color: var(--white) !important;
}

/* Контейнер подкатегорий (те, что под заголовком) */
table.catalog tbody tr td div {
    display: flex;
    align-items: flex-start;
    gap: calc(1 * var(--sizew));
    flex-wrap: wrap;
}

.catshoppage table.catalog tbody td.catalog-item {
    align-items: end;
    justify-content: center;
    text-align: center;
    width: calc(16.66% - (calc(2 * var(--sizew)) * 5 / 6));
    height: calc(12 * var(--sizew));
        padding: calc(1.5 * var(--sizew)) calc(0.8 * var(--sizew));
}

/* */

.goods-list {
    display: grid !important;
    gap: calc(2 * var(--sizew));
    grid-template-columns: repeat(auto-fill, minmax(calc(16.666% - (calc(2 * var(--sizew)) * 5 / 6)), 1fr));
}

/* Адаптивность для мобильных (2 в ряд) */
@media (max-width: 1479px) {
    .catshoppage table.catalog tbody td.catalog-item {
        width: calc(20% - (calc(2 * var(--sizew)) * 4 / 5));
        height: calc(12 * var(--sizew));
    }

    .goods-list {
        grid-template-columns: repeat(auto-fill, minmax(calc(25% - (calc(2 * var(--sizew)) * 3 / 4)), 1fr));
    }
}

@media (max-width: 1279px) {
    .catshoppage table.catalog tbody td.catalog-item {
        width: calc(25% - (calc(2 * var(--sizew)) * 3 / 4));
        height: calc(12 * var(--sizew));
    }
}

@media (max-width: 1239px) {

    .goods-list {
        grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - (calc(2 * var(--sizew)) * 2 / 3)), 1fr));
    }
}

@media (max-width: 1023px) {
    .prev-btn, .next-btn {
        display: none;
    }
    
    table.catalog tbody td.catalog-item {
        width: calc(50% - var(--sizew));
        height: calc(25 * var(--sizew));
        padding: calc(1 * var(--sizew));
    }

    .catshoppage table.catalog {
        overflow: unset;
    }

    #catalog-item-008 {
        width: 100%;
    }

    .catshoppage table.catalog tbody td.catalog-item {
        width: calc(33.333% - (calc(2 * var(--sizew)) * 2 / 3));
        height: calc(12 * var(--sizew));
        padding: calc(1 * var(--sizew));
        box-shadow: 0px 5px 20px 0px rgb(240 222 186);
    }

    .catshoppage table.catalog tbody tr td h3 a,
    .catshoppage table.catalog tbody tr td div a {
        font-size: calc(1 * var(--sizew));
        line-height: 1.2;
        padding: calc(0.6 * var(--sizew)) calc(0.6 * var(--sizew));
        border-radius: calc(1 * var(--sizew));
    }

    .goods-list .product-card {
        border: none;
        border-radius: 0px;
        padding: 0;
        position: relative;
    }
}

@media (max-width: 699px) {
    .goods-list {
        grid-template-columns: repeat(auto-fill, minmax(calc(50% - (calc(2 * var(--sizew)) * 1 / 2)), 1fr));
        gap: calc(1 * var(--sizew));
    }

}

@media (max-width: 699px) {

    .catshoppage table.catalog tbody td.catalog-item {
        width: calc(50% - calc(0.75 * var(--sizew)));
        height: calc(8 * var(--sizew));
    }

    table.catalog tbody {
        gap: calc(1.5 * var(--sizew));
    }

    table.catalog tbody td.catalog-item {
        width: 100%;
        height: calc(16 * var(--sizew));
    }

    h1.titlep,
    #blockpage h1 {
        margin-bottom: calc(0.5 * var(--sizew));
        font-size: calc(1.5 * var(--sizew));
        line-height: calc(1.8 * var(--sizew));
    }

    p.titlep {
        font-size: calc(0.9 * var(--sizew));
        line-height: calc(1.4 * var(--sizew));
        margin-top: calc(0.5 * var(--sizew));
    }
}


/* User page */

#pagelogin {
   max-width: var(--maxwidth);
   margin: 0 auto;
}

#pagelogin h1 {
   text-align: center;
}

.pagelogin {
    border: 2px solid var(--yell);
    padding: calc(2 * var(--sizew));
    border-radius: calc(1 * var(--sizew));
    width: calc(100% - 4px - calc(4 * var(--sizew)));
    max-width: calc(26 * var(--sizew));
    margin: 0 auto;
    overflow: hidden;
}

.pagelogin :where(.auth-social-list, .auth-block) {
   gap: 0px;
   justify-content: space-evenly;
}

.pagelogin :where(.login-with) {
   border-radius: 8px;
   width: 40px;
   height: 40px;
}

.pagelogin #uf-register .register-social-list,
#plogin {
   display: flex;
   flex-wrap: wrap;
   gap: calc(1 * var(--sizew));
   justify-content: space-between;
}

.pagelogin #uf-register .register-social-list {
    justify-content: center;
}

a.login-with.facebook,
.social-label {
   display: none;
}

.uf-soc-icons {
   width: 100%;
}

.pagelogin #uf-register .register-social-list, .auth-social-list {
    padding: calc(1 * var(--sizew)) calc(2 * var(--sizew));
    background-color: var(--line);
    margin: calc(2 * var(--sizew)) calc(-2 * var(--sizew)) calc(-2 * var(--sizew)) calc(-2 * var(--sizew));
}

.pagelogin #uf-register .register-social-list {
   margin-top: calc(-2 * var(--sizew));
   margin-bottom: 0px;
}

input[type="submit"]#uf-submit,
input[type="text"].pl_log,
input[type="password"].pl_pas,
input[type="submit"].pl_in {
   width: 100%;
   background-repeat: no-repeat;
   background-position: left 20px center;
   background-size: 14px auto;
   margin-bottom: 0px;
}

#plogin input[type="text"], #plogin input[type="password"] {
    width: 100%;
    background-repeat: no-repeat;
    background-position: left calc(1 * var(--sizew)) center;
    background-size: calc(1 * var(--sizew)) auto;
    margin: 0px;
    padding-left: calc(2.6 * var(--sizew));
}

input[type="submit"]#uf-submit,
input[type="submit"].pl_in {
   padding: 0px;
   font-weight: 500;
   margin: 0px;
}


.pl_log {
   background-image: url(/knit/imgcss/log.webp);
}

.pl_pas {
   background-image: url(/knit/imgcss/pas.webp);
}

#uf-email {
   background-image: url(/knit/imgcss/mail.webp);
}

.uf-fields-wrap p,
.uf-soc-icons p,
.uf-reg-wrap h2 {
   display: none !important;
}

.pagelogin #uf-register {
   flex-wrap: wrap;
   display: flex;
   gap: 20px 0;
}

.uf-fields-wrap {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
   justify-content: space-between;
}

.pagelogin #uf-register .uf-field {
   position: relative;
   width: 100%;
   margin: 0;
   padding: 0;
}

.shoptehpage {
   max-width: var(--maxwidth);
   margin: 0 auto;
   padding: 0 20px;
   margin-top: 60px;
   margin-bottom: 40px;
}