/**
 * Pure Life — компактний мобільний хедер (≤1100px)
 * Підключається після stylesheet.css
 */

/* Логотип у #top — тільки для мобільної версії */
.top-mobile-brand {
    display: none;
}

@media (max-width: 1100px) {

    .top-mobile-brand {
        display: flex;
    }

    /* ——— Одна sticky-панель замість #top + header ——— */
    #top {
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
    }

    #top .container {
        min-height: 44px;
        align-items: center;
        gap: 6px;
        flex-wrap: nowrap;
    }

    #m_menu {
        order: 0;
        flex-shrink: 0;
    }

    #m_menu > button:before {
        -webkit-mask-size: 20px;
        mask-size: 20px;
        height: 18px;
        width: 18px;
    }

    .top-mobile-brand {
        order: 1;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        max-width: 88px;
    }

    .top-mobile-brand a,
    .top-mobile-brand span {
        display: flex;
        align-items: center;
        line-height: 0;
    }

    .top-mobile-brand img {
        height: 26px;
        width: auto;
        max-width: 88px;
        object-fit: contain;
    }

    #top #search {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 0;
    }

    #top #search input {
        height: 34px;
        min-width: 0;
        width: 100%;
        padding-left: 12px;
        padding-right: 40px;
        font-size: 14px;
        border-radius: 8px;
        border: 1px solid #e8e8e8;
    }

    #top #search button {
        height: 28px;
        width: 28px;
        right: 3px;
        border-radius: 6px;
    }

    #top #cart {
        order: 3;
        flex-shrink: 0;
        margin-left: 4px;
    }

    /* Другий ряд (лого + контакти) — приховуємо, контакти є в меню */
    header {
        display: none;
    }

    /* ——— Breadcrumbs: компактна смуга з «Назад» ——— */
    .breadcrumb-bar {
        display: flex;
        align-items: center;
        gap: 6px;
        margin: 0 -10px 8px;
        padding: 6px 10px;
        background: #f7f7f7;
        border-bottom: 1px solid #ececec;
        min-height: 32px;
    }

    .breadcrumb-back {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #e5e5e5;
        text-decoration: none;
        color: #333;
        font-size: 0;
    }

    .breadcrumb-back:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        transform: rotate(45deg);
        margin-left: 3px;
    }

    .breadcrumb-bar .breadcrumb {
        flex: 1;
        min-width: 0;
        margin: 0;
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .breadcrumb-bar .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .breadcrumb-bar .breadcrumb li {
        font-size: 11px;
    }

    .breadcrumb-bar .breadcrumb li * {
        font-size: 11px;
        color: #888;
    }

    .breadcrumb-bar .breadcrumb li:last-child * {
        color: #222;
        font-weight: 500;
        max-width: 42vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
    }

    /* На вузьких екранах — лише «батько» + поточна */
    .breadcrumb-bar .breadcrumb li:not(:nth-last-child(-n+2)) {
        display: none;
    }

    .breadcrumb-bar .breadcrumb li:nth-last-child(2):after {
        display: none;
    }

    /* Звичайні breadcrumbs без .breadcrumb-bar */
    .container > .breadcrumb:first-child,
    #blog-article > .breadcrumb:first-child {
        margin-top: 0;
        margin-bottom: 8px;
        padding: 4px 0;
    }

    .container > .breadcrumb:first-child li,
    #blog-article > .breadcrumb:first-child li {
        font-size: 11px;
    }

    #blog-article {
        padding-top: 4px;
    }

    #blog-article .article_middle {
        margin-top: 6px;
        padding-top: 16px;
    }
}

@media (max-width: 400px) {
    .top-mobile-brand {
        max-width: 72px;
    }

    .top-mobile-brand img {
        height: 22px;
        max-width: 72px;
    }

    #top .container {
        gap: 4px;
    }
}