/* =========================================================
   FOODRYNOK TEST HOME
   ========================================================= */

#test-home {
    background: #f5f5f5;
    min-height: 100vh;
}


/* =========================================================
   ОСНОВНАЯ СЕТКА
   ========================================================= */

.food-layout {
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px 24px;

    display: grid;

    grid-template-columns:
        300px
        minmax(500px, 1fr)
        360px;

    gap: 20px;

    align-items: start;
}


/* =========================================================
   ЛЕВАЯ КОЛОНКА
   ========================================================= */

.food-sidebar {

    background: #fff;

    border-radius: 18px;

    padding: 20px;

    position: sticky;

    top: 20px;
}


.food-sidebar-title {

    font-size: 25px;

    line-height: 1.2;

    font-weight: 700;

    margin-bottom: 18px;
}


.food-sidebar-list {
    display: flex;
    flex-direction: column;
}


.food-category {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 54px;

    padding: 6px 4px;

    color: #222;

    text-decoration: none;

    border-radius: 10px;
}


.food-category:hover {

    background: #f7f7f7;

    color: #222;

    text-decoration: none;
}


.food-category-left {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
}


.food-category-icon {

    width: 42px;

    height: 42px;

    object-fit: contain;

    flex-shrink: 0;
}


.food-category-icon-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 25px;
}


.food-category-name {

    font-size: 15px;

    line-height: 1.2;
}


.food-category-arrow {

    font-size: 24px;

    color: #aaa;

    margin-left: 5px;
}


/* =========================================================
   ЦЕНТР
   ========================================================= */

.food-content {

    min-width: 0;
}


/* =========================================================
   HERO
   ========================================================= */

.food-hero {
    display: none; /* временно скрываем блок */

    min-height: 300px;

    border-radius: 20px;

    padding: 40px;

    margin-bottom: 20px;

   /* display: flex; */

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #ffe1bd,
            #fff5e8
        );
}


.food-hero-title {

    font-size: 42px;

    line-height: 1.05;

    font-weight: 800;
}


.food-hero-subtitle {

    margin-top: 15px;

    font-size: 18px;

    color: #555;
}


.food-hero-button {

    display: inline-block;

    margin-top: 25px;

    padding: 13px 22px;

    border-radius: 10px;

    background: #222;

    color: #fff !important;

    text-decoration: none;
}


.food-hero-button:hover {

    opacity: .85;

    text-decoration: none;
}


/* =========================================================
   СЕКЦИИ
   ========================================================= */

.food-section {

    background: #fff;

    border-radius: 18px;

    padding: 24px;

    margin-bottom: 20px;
}


.food-section-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 20px;
}


.food-section-header h2 {

    margin: 0;

    font-size: 26px;

    line-height: 1.2;

    font-weight: 700;
}


.food-section-header a {

    color: #777;

    text-decoration: none;

    font-size: 14px;
}


/* =========================================================
   ТОВАРЫ
   ========================================================= */

.food-products {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.food-product {

    min-width: 0;
}


.food-product-image {

    display: block;

    background: #f7f7f7;

    border-radius: 14px;

    overflow: hidden;
}


.food-product-image img {

    width: 100%;

    height: 175px;

    object-fit: contain;

    display: block;

    background: #fff;
}


.food-product-no-image {

    height: 175px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #aaa;

    font-size: 13px;
}


.food-product-name {

    margin-top: 10px;

    min-height: 40px;

    font-size: 14px;

    line-height: 1.3;
}


.food-product-name a {

    color: #222;

    text-decoration: none;
}


.food-product-name a:hover {

    color: #222;

    text-decoration: none;
}


.food-product-price {

    margin-top: 8px;
    margin-bottom: 10px;

    min-height: 22px;

    font-size: 17px;

    font-weight: 700;
}


.food-special {

    color: #e53935;
}


.food-old-price {

    margin-left: 5px;

    color: #999;

    font-size: 13px;

    text-decoration: line-through;
}


.food-product-unit {

    margin-left: 4px;

    font-size: 12px;

    font-weight: 400;

    color: #999;
}


.food-add {

    width: 100%;

    margin-top: 10px;

    padding: 10px;

    border: 0;

    border-radius: 9px;

    background: #f2f2f2;

    color: #222;

    cursor: pointer;

    font-weight: 600;

    transition:
        background .15s,
        transform .1s;
}


.food-add:hover {

    background: #e7e7e7;
}


.food-add:active {

    transform: scale(.98);
}


/* =========================================================
   ПОЛКИ ИЗ АДМИНКИ — СЛАЙДЕР В ОДНУ СТРОКУ
   ========================================================= */

.food-shelf-wrap {

    display: flex;

    align-items: center;

    gap: 8px;

    position: relative;
}


.food-shelf-track {

    display: flex;

    justify-content: flex-start;

    gap: 14px;

    flex: 1;

    min-width: 0;

    overflow-x: auto;

    scroll-snap-type: x mandatory;

    scroll-behavior: smooth;

    padding-bottom: 4px;

    scrollbar-width: none;

    -ms-overflow-style: none;
}


.food-shelf-track::-webkit-scrollbar {

    display: none;
}


.food-shelf-item {

    flex: 0 0 150px;

    scroll-snap-align: start;

    /*
     * Карточки в ряду уже растянуты по высоте под самую высокую
     * (flex stretch по умолчанию у .food-shelf-track) — но раньше
     * кнопка "В корзину" просто шла следом за ценой в обычном потоке,
     * поэтому если у соседней карточки единица измерения переносилась
     * на вторую строку ("/ 0.5" + "кг"), её кнопка съезжала ниже, а
     * у карточек с однострочной ценой — оставалась выше. display:flex
     * + margin-top:auto у кнопки (ниже) прижимает кнопку к низу уже
     * растянутой карточки — теперь она всегда на одной высоте у всех
     * карточек ряда, независимо от того, перенеслась единица
     * измерения на вторую строку или нет.
     */

    display: flex;

    flex-direction: column;
}


.food-shelf-item .food-add {

    margin-top: auto;
}


.food-shelf-item .food-product-image img {

    height: 120px;
}


.food-shelf-item .food-product-no-image {

    height: 120px;
}


.food-shelf-item .food-product-name {

    font-size: 13px;

    min-height: 34px;
}


.food-shelf-arrow {

    flex: 0 0 36px;

    width: 36px;

    height: 36px;

    border-radius: 50%;

    border: 1px solid #eee;

    background: #fff;

    font-size: 20px;

    line-height: 1;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #222;

    transition:
        opacity .15s,
        background .15s;
}


.food-shelf-arrow:hover {

    background: #f2f2f2;
}


.food-shelf-arrow.is-hidden {

    visibility: hidden;

    pointer-events: none;
}


.food-shelf-more {

    flex: 0 0 110px;

    scroll-snap-align: start;

    border-radius: 14px;

    background: #f6f6f6;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #222;

    text-decoration: none;

    font-weight: 600;

    text-align: center;

    padding: 10px;
}


.food-shelf-more:hover {

    background: #ededed;

    color: #222;

    text-decoration: none;
}


.food-shelf-more-arrow {

    font-size: 26px;
}


/* =========================================================
   КАТЕГОРИИ В ЦЕНТРЕ
   ========================================================= */

.food-category-grid {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 12px;
}


.food-category-card {

    min-height: 100px;

    padding: 12px;

    border-radius: 14px;

    background: #f6f6f6;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    color: #222;

    text-decoration: none;

    font-weight: 600;
}


.food-category-card:hover {

    background: #ededed;

    color: #222;

    text-decoration: none;
}


.food-category-card img {

    width: 55px;

    height: 55px;

    object-fit: contain;
}


/* =========================================================
   ПРАВАЯ КОРЗИНА
   ========================================================= */

.food-cart-sidebar {

    min-width: 0;
}


#test-home-cart {

    position: sticky;

    top: 20px;
}


#test-home-cart.is-loading {

    opacity: .55;

    pointer-events: none;
}


.test-cart-inner {

    background: #fff;

    border-radius: 18px;

    padding: 20px;

    box-shadow:
        0 4px 25px rgba(0, 0, 0, .07);
}


/* =========================================================
   ЗАГОЛОВОК
   ========================================================= */

.test-cart-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    margin-bottom: 18px;
}


.test-cart-title {

    font-size: 22px;

    line-height: 1.2;

    font-weight: 700;
}


.test-cart-count {

    margin-top: 4px;

    font-size: 13px;

    color: #888;
}


.test-cart-total {

    font-size: 18px;

    font-weight: 700;
}


/* =========================================================
   ТОВАРЫ КОРЗИНЫ
   ========================================================= */

.test-cart-products {

    display: flex;

    flex-direction: column;

    gap: 14px;
}


.test-cart-product {

    position: relative;

    display: flex;

    gap: 11px;

    min-height: 90px;

    padding-bottom: 14px;

    border-bottom: 1px solid #eee;
}


.test-cart-image {

    width: 72px;

    height: 72px;

    flex: 0 0 72px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 12px;

    background: #f7f7f7;

    overflow: hidden;
}


.test-cart-image img {

    width: 100%;

    height: 100%;

    object-fit: contain;
}


.test-cart-product-info {

    min-width: 0;

    flex: 1;

    padding-right: 20px;
}


.test-cart-product-name {

    display: block;

    color: #222;

    font-size: 14px;

    line-height: 1.3;

    font-weight: 600;

    text-decoration: none;
}


.test-cart-product-name:hover {

    color: #222;

    text-decoration: none;
}


.test-cart-options {

    margin-top: 4px;

    font-size: 11px;

    color: #999;
}


.test-cart-product-bottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 10px;
}


.test-cart-price {

    font-size: 14px;

    font-weight: 700;
}


.test-cart-price-unit {

    display: block;

    margin-top: 2px;

    font-size: 11px;

    font-weight: 400;

    color: #999;
}


/* =========================================================
   КОЛИЧЕСТВО
   ========================================================= */

.test-cart-quantity {

    display: flex;

    align-items: center;

    flex-shrink: 0;

    border-radius: 9px;

    overflow: hidden;

    background: #f4f4f4;
}


.test-cart-qty-btn {

    width: 27px;

    height: 27px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #222;

    font-size: 18px;

    line-height: 27px;

    cursor: pointer;
}


.test-cart-qty-btn:hover {

    background: #e9e9e9;
}


.test-cart-qty-btn:disabled {

    opacity: .35;

    cursor: default;
}


.test-cart-qty {

    min-width: 25px;

    padding: 0 4px;

    text-align: center;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   УДАЛЕНИЕ
   ========================================================= */

.test-cart-remove {

    position: absolute;

    top: -4px;

    right: 0;

    width: 22px;

    height: 22px;

    padding: 0;

    border: 0;

    background: transparent;

    color: #aaa;

    font-size: 20px;

    line-height: 20px;

    cursor: pointer;
}


.test-cart-remove:hover {

    color: #222;
}


/* =========================================================
   FOOTER КОРЗИНЫ
   ========================================================= */

.test-cart-footer {

    margin-top: 18px;
}


.test-cart-progress {

    margin-bottom: 18px;

    padding: 12px;

    border-radius: 12px;

    background: #f7f7f7;
}


.test-cart-progress-text {

    font-size: 12px;

    line-height: 1.4;
}


.test-cart-progress-line {

    height: 6px;

    margin-top: 9px;

    border-radius: 10px;

    overflow: hidden;

    background: #ddd;
}


.test-cart-progress-line span {

    display: block;

    height: 100%;

    border-radius: inherit;

    background: #222;
}


.test-cart-minimum {

    margin-top: 6px;

    font-size: 11px;

    color: #999;
}


.test-cart-summary {

    margin-bottom: 15px;
}


.test-cart-summary-row {

    display: flex;

    justify-content: space-between;

    gap: 15px;

    margin-bottom: 8px;

    font-size: 13px;
}


.test-cart-summary-row:last-child {

    margin-bottom: 0;
}


/* =========================================================
   CHECKOUT
   ========================================================= */

.test-cart-checkout {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 48px;

    padding: 12px 16px;

    border-radius: 12px;

    background: #222;

    color: #fff !important;

    font-size: 14px;

    font-weight: 700;

    text-align: center;

    text-decoration: none !important;

    transition: opacity .2s;
}


.test-cart-checkout:hover {

    opacity: .85;

    text-decoration: none !important;
}


.test-cart-checkout.disabled {

    background: #ddd;

    color: #999 !important;

    cursor: not-allowed;
}


/* =========================================================
   ПУСТАЯ КОРЗИНА
   ========================================================= */

.test-cart-empty {

    padding: 55px 15px;

    text-align: center;
}


.test-cart-empty-icon {

    margin-bottom: 15px;

    font-size: 42px;

    opacity: .45;
}


.test-cart-empty-title {

    font-size: 17px;

    font-weight: 700;
}


.test-cart-empty-text {

    margin-top: 7px;

    color: #999;

    font-size: 13px;

    line-height: 1.4;
}


/* =========================================================
   МОБИЛЬНАЯ ПЛАШКА КОРЗИНЫ + ШТОРКА
   (видны только на мобильных, см. медиа-запрос max-width: 800px —
   на десктопе спрятаны, корзина остаётся обычной боковой колонкой)
   ========================================================= */

.test-cart-mobile-bar,
.test-cart-sheet-overlay,
.test-cart-sheet-close,
.test-cart-sheet-handle {

    display: none;
}


/* =========================================================
   1200 PX
   ========================================================= */

@media (max-width: 1200px) {

    .food-layout {
        grid-template-columns:
            240px
            minmax(0, 1fr)
            320px;

        gap: 15px;
    }

    .food-cart-sidebar {
        display: block;
    }

    .food-products {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .food-shelf-item,
    .food-shelf-more {
        flex-basis: 140px;
    }

}


/* =========================================================
   991 PX
   ========================================================= */

@media (max-width: 991px) {

    .food-layout {

        grid-template-columns:
            220px
            minmax(0, 1fr);
    }


    .food-cart-sidebar {

        grid-column: 1 / -1;
    }


    #test-home-cart {

        position: static;
    }


    .food-products {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   800 PX
   ========================================================= */

@media (max-width: 800px) {

    .food-layout {

        display: block;

        padding: 10px 10px 90px;
    }


    /*
     * Каталог слева на мобильной версии скрываем целиком — категории
     * и так есть в отдельном блоке "Каталог" ниже по странице и в
     * меню шапки.
     */

    .food-sidebar {

        display: none;
    }


    .food-cart-sidebar {

        margin-top: 15px;
    }


    #test-home-cart {

        position: static;
    }


    /*
     * На десктопе #test-home-cart.is-loading (см. выше) на время
     * AJAX-запроса делает корзину полупрозрачной — это нормально для
     * боковой панели в потоке страницы. На мобильной версии корзина —
     * зафиксированная снизу шторка, и то же самое затемнение на весь
     * контейнер визуально читается как "корзина на секунду пропадает/
     * мигает" при каждом нажатии +/- (шторка тухнет, потом резко
     * перерисовывается новым содержимым). Поэтому на мобильных
     * затемнение отключаем — pointer-events:none на время запроса
     * (от повторных нажатий) оставляем.
     */

    #test-home-cart.is-loading {

        opacity: 1;
    }


    /*
     * -----------------------------------------------------------
     * Плашка корзины — зафиксирована внизу экрана. По клику
     * раскрывается полная корзина снизу (шторка) — тот же приём,
     * что на странице "У подъезда" (entrance.twig), только там
     * плашка просто прижата к низу, а здесь дополнительно поднята
     * НАД нижней панелью темы (.header-mobile__panel) — высоту
     * панели меряем в JS и выставляем как "bottom" (см.
     * testHomeCartPositionBar() в test_home.twig).
     * -----------------------------------------------------------
     */

    .test-cart-mobile-bar {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 10px;

        position: fixed;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 1000;

        padding: 12px 16px;

        background: #fff;

        border-radius: 18px 18px 0 0;

        box-shadow: 0 -2px 14px rgba(0, 0, 0, .12);

        cursor: pointer;
    }


    .test-cart-mobile-bar-info {

        font-size: 13px;

        font-weight: 700;

        color: #222;
    }


    .test-cart-mobile-bar-btn {

        flex-shrink: 0;

        border: 0;

        border-radius: 10px;

        padding: 10px 18px;

        background: #222;

        color: #fff;

        font-size: 13px;

        font-weight: 700;

        pointer-events: none;
    }


    .test-cart-sheet-overlay {

        display: block;

        position: fixed;

        inset: 0;

        z-index: 999;

        background: rgba(0, 0, 0, .35);

        opacity: 0;

        visibility: hidden;

        transition: opacity .25s ease;

        pointer-events: none;
    }


    .test-cart-sheet-handle {

        display: block;

        width: 40px;

        height: 4px;

        margin: 0 auto 10px;

        border-radius: 2px;

        background: #ddd;
    }


    .test-cart-sheet-close {

        display: block;

        position: absolute;

        right: 16px;

        top: 14px;

        border: 0;

        background: none;

        color: #999;

        font-size: 22px;

        line-height: 1;

        cursor: pointer;
    }


    #test-cart-inner {

        position: fixed;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 1001;

        max-height: 75vh;

        overflow-y: auto;

        border-radius: 20px 20px 0 0;

        box-shadow: 0 -4px 24px rgba(0, 0, 0, .2);

        transform: translateY(110%);

        transition: transform .3s cubic-bezier(.32, .72, 0, 1);

        padding-bottom: 24px;
    }


    body.test-cart-sheet-open .test-cart-sheet-overlay {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }


    body.test-cart-sheet-open #test-cart-inner {

        transform: translateY(0);
    }


    body.test-cart-sheet-open {

        overflow: hidden;
    }


    .food-products {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .food-category-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .food-hero {

        min-height: 220px;

        padding: 25px;
    }


    .food-hero-title {

        font-size: 30px;
    }


    .food-section {

        padding: 15px;
    }


    .food-shelf-item,
    .food-shelf-more {

        flex-basis: 130px;
    }

}


/* =========================================================
   500 PX
   ========================================================= */

@media (max-width: 500px) {

    .food-products {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .food-product-image img {

        height: 140px;
    }


    .food-product-no-image {

        height: 140px;
    }


    .food-product-name {

        font-size: 13px;
    }


    .food-product-price {

        font-size: 15px;
    }


    .food-hero-title {

        font-size: 26px;
    }


    .food-shelf-item,
    .food-shelf-more {

        flex-basis: 110px;
    }


    .food-shelf-arrow {

        display: none;
    }

}