/* ============================================================
   header.css — шапка сайту «Друкарня РАЗ»
   ============================================================

   Підключати ПІСЛЯ /assets/ui.css — усі значення беруться з його
   токенів. Власний неймспейс .hdr-* навмисний: на сторінках, які ще
   не перейшли на новий шаблон, лишається стара шапка зі стилями
   з template-styles.css, і два набори не конфліктують.
   ============================================================ */

.hdr {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--g-0);
    /* Тонка лінія знизу: під шапкою одразу темний hero, і без неї
       білий блок «зливався» у смугу між двома темними зонами */
    border-bottom: 1px solid var(--g-200);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.hdr.is-compact {
    box-shadow: var(--sh-md);
    border-bottom-color: transparent;
}

/* Посилання для клавіатури — з'являється лише у фокусі */
.hdr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1000;
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-brand);
    color: var(--g-0);
    border-radius: 0 0 var(--r-md) 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
}
.hdr-skip:focus { left: 0; }

/* ============================================================
   ВЕРХНЯ СМУГА
   ============================================================ */
.hdr-top {
    background: var(--c-navy);
    color: rgba(255, 255, 255, .82);
    font-size: var(--fs-xs);
    overflow: hidden;
    /* max-height лише обмежує стелю для згортання: реальну висоту задає
       вміст. 40px не вистачало — кнопки-пігулки давали 43px, і низ
       смуги обрізався. Ставимо із запасом. */
    max-height: 64px;
    transition: max-height var(--transition), opacity var(--transition);
}

/* При прокрутці смуга згортається — шапка стає компактнішою */
.hdr.is-compact .hdr-top { max-height: 0; opacity: 0; }

/* Верх менший за низ: іконки Flaticon сидять високо в своєму кеглі,
   тож симетричний відступ візуально «опускав» увесь рядок */
.hdr-top__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 7px var(--sp-4) 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
}

.hdr-top__trust,
.hdr-top__hours {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.hdr-top__trust i { color: var(--c-gold); }
.hdr-top__trust strong { color: var(--g-0); font-weight: var(--fw-bold); }

.hdr-top__sep { opacity: .45; }
.hdr-top__years { opacity: .78; }

.hdr-top__right {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
}

.hdr-msg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .10);
    color: var(--g-0);
    text-decoration: none;
    font-weight: var(--fw-medium);
    white-space: nowrap;   /* номер не має розриватися на два рядки */
    transition: background var(--transition);
}
.hdr-msg:hover { background: rgba(255, 255, 255, .20); }
.hdr-msg img { display: block; border-radius: var(--r-xs); }

/* Месенджери — самі іконки: підписи «Viber» і «Telegram» нічого не
   пояснювали (логотипи впізнавані), але з\u2019їдали місце у смузі */
.hdr-msg--icon {
    width: 30px;
    height: 26px;
    padding: 0;
    justify-content: center;
}

/* ============================================================
   ОСНОВНА СМУГА
   ============================================================ */
.hdr-main__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--sp-3) var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    transition: padding var(--transition);
}

.hdr.is-compact .hdr-main__inner { padding: 6px var(--sp-4); }

.hdr-logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}

.hdr-logo svg {
    display: block;
    height: 72px;
    width: auto;
    transition: height var(--transition);
}

.hdr.is-compact .hdr-logo svg { height: 48px; }

/* ============================================================
   ГОРИЗОНТАЛЬНА НАВІГАЦІЯ
   ============================================================ */
/* Меню займає весь вільний простір і центрується: інакше логотип із
   навігацією тиснулися ліворуч, а між ними й кнопками зяяла порожнеча */
.hdr-nav { flex: 1 1 auto; display: flex; justify-content: center; }

.hdr-nav > ul {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hdr-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 13px;
    border: none;
    background: none;
    border-radius: var(--r-md);
    font-family: var(--font);
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--g-850);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.hdr-nav__link i {
    font-size: .8em;
    transition: transform var(--transition);
}

.hdr-nav__link:hover,
.hdr-nav__link[aria-expanded="true"] {
    background: var(--g-50);
    color: var(--c-brand);
}

.hdr-nav__link[aria-expanded="true"] i { transform: rotate(180deg); }

/* Поточний розділ — підкреслення брендовим */
.hdr-nav__item.is-active > .hdr-nav__link {
    color: var(--c-brand);
    font-weight: var(--fw-bold);
    position: relative;
}
.hdr-nav__item.is-active > .hdr-nav__link::after {
    content: '';
    position: absolute;
    left: 13px;
    right: 13px;
    bottom: 4px;
    height: 1.5px;
    border-radius: var(--r-pill);
    background: var(--c-brand);
    opacity: .8;
}

/* ============================================================
   ДІЇ ПРАВОРУЧ
   ============================================================ */
/* margin-left:auto притискає блок до правого краю. Без нього на
   мобільному, де меню приховане, кнопки липли впритул до логотипа. */
.hdr-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    margin-left: auto;
}

/* Іконки-дії: заливка замість рамки. Порожні квадрати з тонким контуром
   виглядали легшими за сусідів і «розвалювали» правий блок — тепер усі
   кнопки ряду мають однакову форму й вагу. */
.hdr-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--g-100);
    color: var(--g-800);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.hdr-icon:hover {
    color: var(--c-brand);
    background: var(--c-brand-soft);
}

/* Атрибут hidden мусить перемагати.
   Браузер ховає [hidden] правилом display:none зі своєї таблиці, але
   будь-яке авторське display його перебиває — а в .hdr-icon стоїть
   inline-flex. Через це кнопка кошика лишалася видимою на сторінках,
   де кошика взагалі немає (статус замовлення, правові сторінки):
   header.js там не доходить до рядка cartBtn.hidden = false, тож і
   не проставляє data-empty, і лічильник падав на базовий стиль. */
.hdr-icon[hidden],
.hdr-cart[hidden] { display: none; }
.hdr-icon:active { transform: scale(.96); }

/* Гліфи Flaticon мають зміщену базову лінію: у своєму кеглі вони сидять
   вище оптичного центру, тож у flex-центрі виглядають піднятими.
   line-height:1 прибирає зайвий простір під гліфом, зсув доводить решту. */
.hdr-icon i,
.hdr-cta i,
.hdr-msg i,
.hdr-mobile__close i,
.hdr-top__trust i,
.hdr-top__hours i,
.hdr-mobile__phone i {
    display: block;
    line-height: 1;
    position: relative;
    top: 2px;
}

/* Головна дія — замовлення онлайн. Єдиний брендовий елемент у шапці:
   дзвінок для друкарні дорожчий за онлайн-замовлення, тож акцент
   мусить вести до конфігуратора, а не до телефону. */
.hdr-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 20px;
    border-radius: var(--r-btn);
    background: var(--c-brand);
    color: var(--g-0);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--transition), box-shadow var(--transition);
}
.hdr-cta:hover {
    background: var(--c-brand-dark);
    box-shadow: var(--sh-brand);
}

/* ---- Кнопка «Статус замовлення» ----
   Контурна, не залита: вона друга за важливістю після замовлення, і
   дві брендові плями поруч зчиталися б як два однакові заклики. */
.hdr-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border: 1px solid var(--g-300);
    border-radius: var(--r-btn);
    background: var(--g-0);
    color: var(--c-navy);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.hdr-status:hover {
    border-color: var(--c-brand);
    color: var(--c-brand);
}
.hdr-status.is-active {
    border-color: var(--c-brand);
    background: var(--c-brand-soft);
    color: var(--c-brand);
}
.hdr-status i {
    display: block;
    line-height: 1;
    font-size: 1.2em;
    flex-shrink: 0;
}

/* Два слова стовпчиком. Кегль дрібніший за решту кнопок — це підпис
   допоміжної дії, і два рядки по 15px читаються спокійніше, ніж один
   довгий рядок, який тиснув би меню. */
.hdr-status__text {
    display: flex;
    flex-direction: column;
    font-size: 11.5px;
    line-height: 1.2;
    letter-spacing: .01em;
    text-align: left;
}

/* Дві стрічки в кнопці: назва дії та зняття головного страху новачка —
   що доведеться комусь дзвонити й реєструватися. Другий рядок навмисно
   дрібний і без ваги: він пояснює, а не конкурує.

   Обгортка обовʼязкова: без неї обидва рядки лишаються прямими дітьми
   флексу .hdr-cta й вишиковуються в один ряд — кнопка розтягувалася
   на 347px замість 175. */
.hdr-cta__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hdr-cta__text { line-height: 1.15; }

.hdr-cta__note {
    margin-top: 1px;
    font-size: 10px;
    font-weight: var(--fw-medium);
    letter-spacing: .015em;
    line-height: 1.2;
    opacity: .82;
}

/* Телефон лишається доступним, але перестає бути найпомітнішим
   контактом смуги: жирний номер суперечив обіцянці «усе вирішуємо
   онлайн». Акцент віддано кнопці чату нижче. */
.hdr-msg--phone { font-weight: var(--fw-medium); }
.hdr-msg--phone i { color: var(--c-gold); font-size: .95em; }

/* ---- Кнопка онлайн-чату у верхній смузі ----
   Єдиний канал, що відповідає без людини, тож він і найпомітніший
   елемент смуги. Крикливої заливки не треба — увагу тримає крапка
   статусу, а обведення відрізняє кнопку від сусідніх месенджерів. */
.hdr-chat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 13px;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .14);
    color: var(--g-0);
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--fw-semi);
    line-height: 1.7;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.hdr-chat:hover {
    background: var(--g-0);
    border-color: var(--g-0);
    color: var(--c-navy);
}

/* Крапка статусу. Зелена — менеджер на місці, золота — відповідає
   помічник. Значення дублюється текстом у вікні чату, тож тут вона
   лише підказка, а не єдине джерело сенсу. */
.hdr-chat__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-green);
    flex-shrink: 0;
    animation: hdrChatPulse 2s infinite;
}
.hdr-chat__dot.is-offline {
    background: var(--c-gold);
    animation: none;
}

@keyframes hdrChatPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

.hdr-top__hours strong { color: var(--g-0); font-weight: var(--fw-bold); }
.hdr-top__mgr { opacity: .72; }

/* Кошик */
.hdr-cart__count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--c-brand);
    color: var(--g-0);
    font-size: 11px;
    font-weight: var(--fw-bold);
    line-height: 19px;
    text-align: center;
}

/* Порожній кошик — без бейджа взагалі, сама іконка.
   Пробували сірий нуль (читався як «кнопка неактивна») і червоний
   (червоний кружечок означає «щось є» або «щось потребує уваги», а тут
   він означав рівно протилежне). Найчесніше — не показувати нічого,
   доки нічого немає. Бейдж зʼявляється з першою позицією. */
.hdr-cart[data-empty="1"] .hdr-cart__count { display: none; }

/* Непорожній кошик НЕ перефарбовує всю кнопку. Червона кнопка в шапці
   читалася як заклик до дії нарівні з «Розрахувати ціну» і перетягувала
   увагу на себе щоразу, коли в кошику щось лежить. Сигнал несе лічильник:
   червоний кружечок помітний і сам по собі, а кнопка лишається сірою,
   як решта іконок шапки. */
.hdr-cart[data-empty="0"] .hdr-cart__count {
    background: var(--c-brand);
    color: var(--g-0);
}

.hdr-cart.is-bump { animation: hdrBump .35s ease; }
@keyframes hdrBump {
    0%, 100% { transform: scale(1); }
    40%      { transform: scale(1.18); }
}

/* Бургер — лише на вузьких екранах. Виглядає так само, як інші
   кнопки-дії: те саме коло й та сама заливка, щоб ряд читався
   як один набір, а не як три різні елементи. */
.hdr-burger {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: var(--r-pill);
    background: var(--g-100);
    cursor: pointer;
    transition: background var(--transition);
}
.hdr-burger:hover { background: var(--c-brand-soft); }
.hdr-burger:active { transform: scale(.96); }

.hdr-burger span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--g-850);
    transition: transform var(--transition), opacity var(--transition),
                background var(--transition);
}
.hdr-burger:hover span { background: var(--c-brand); }

.hdr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hdr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   МЕГА-МЕНЮ
   ============================================================ */
.hdr-mega {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--g-0);
    border-top: 1px solid var(--g-200);
    box-shadow: var(--sh-lg);
    animation: hdrMegaIn .16s ease;
}

@keyframes hdrMegaIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hdr-mega__inner {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

.hdr-mega__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--g-100);
}

.hdr-mega__head h2 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}

.hdr-mega__all {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--c-brand);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    text-decoration: none;
    white-space: nowrap;
}
.hdr-mega__all:hover { text-decoration: underline; }

.hdr-mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--sp-2) var(--sp-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Іконка + текст. Іконка в м\u2019якому колі: помітна, але не сперечається
   з назвою — сірий за замовчуванням, брендовий при наведенні. */
.hdr-mega__grid a {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: 10px var(--sp-3);
    border-radius: var(--r-md);
    text-decoration: none;
    transition: background var(--transition);
}
.hdr-mega__grid a:hover { background: var(--g-50); }

.hdr-mega__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--r-pill);
    background: var(--g-100);
    color: var(--g-600);
    font-size: 1rem;
    transition: background var(--transition), color var(--transition);
}
/* Гліфи Flaticon сидять високо у своєму кеглі, тож їх опускаємо на
   піксель. Власним SVG це не потрібно — вони вже відцентровані. */
.hdr-mega__ico i { display: block; line-height: 1; position: relative; top: 1px; }
.hdr-mega__ico .raz-ico { display: block; }
.hdr-mega__grid a:hover .hdr-mega__ico {
    background: var(--c-brand);
    color: var(--g-0);
}

.hdr-mega__text { min-width: 0; }

.hdr-mega__name {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    color: var(--g-900);
}
.hdr-mega__grid a:hover .hdr-mega__name { color: var(--c-brand); }

.hdr-mega__desc {
    display: block;
    margin-top: 2px;
    font-size: var(--fs-xs);
    color: var(--g-600);
    line-height: 1.4;
    /* Браузер сам не лишає в кінці одиноке коротке слово — саме через
       це «шт» відривалося від числа й висіло другим рядком. Де правило
       не підтримується, працює формулювання: тексти в nav.php підібрані
       так, щоб рядки ділилися рівно й без нього. */
    text-wrap: pretty;
}

/* Позначки біля пунктів */
.hdr-tag {
    font-style: normal;
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}
/* Мітки «нове» немає навмисно: вона читається як «раніше ми цього
   не вміли». Лишається тільки ext — вона несе корисне попередження,
   що посилання веде на інший сайт. */
.hdr-tag--ext { background: var(--g-100); color: var(--g-600); }

/* ============================================================
   ПОШУК
   ============================================================ */
.hdr-search {
    position: absolute;
    left: 0;
    right: 0;
    background: var(--g-0);
    border-top: 1px solid var(--g-200);
    box-shadow: var(--sh-lg);
    animation: hdrMegaIn .16s ease;
}

.hdr-search__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-4) var(--sp-2);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.hdr-search__inner > i { color: var(--g-500); font-size: 1.1rem; }

.hdr-search__input {
    flex: 1;
    padding: 11px 0;
    border: none;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-md);
    color: var(--g-900);
}
.hdr-search__input:focus { outline: none; }

.hdr-search__close {
    border: none;
    background: none;
    color: var(--g-500);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
}
.hdr-search__close:hover { color: var(--c-brand); }

.hdr-search__results {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 var(--sp-4) var(--sp-4);
    max-height: 60vh;
    overflow-y: auto;
}

.hdr-search__results a {
    display: block;
    padding: 10px var(--sp-3);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--g-900);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
}
.hdr-search__results a:hover,
.hdr-search__results a.is-cursor { background: var(--g-50); color: var(--c-brand); }

.hdr-search__results small {
    display: block;
    color: var(--g-600);
    font-weight: var(--fw-normal);
    font-size: var(--fs-xs);
    margin-top: 2px;
}

.hdr-search__empty {
    padding: var(--sp-4) var(--sp-3);
    color: var(--g-600);
    font-size: var(--fs-base);
    text-align: center;
}

/* ============================================================
   ЗАТЕМНЕННЯ
   ============================================================ */
.hdr-backdrop {
    position: fixed;
    inset: 0;
    z-index: 890;
    background: rgba(16, 24, 40, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
}
.hdr-backdrop.is-open { opacity: 1; visibility: visible; }

/* ============================================================
   МОБІЛЬНЕ МЕНЮ
   ============================================================ */
.hdr-mobile {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 950;
    width: min(400px, 88vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--g-0);
    transform: translateX(100%);
    transition: transform .26s ease;
    overflow-y: auto;
}
.hdr-mobile.is-open { transform: translateX(0); }

.hdr-mobile__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-4);
    border-bottom: 1px solid var(--g-200);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--c-navy);
}

.hdr-mobile__close {
    width: 38px;
    height: 38px;
    border: 1px solid var(--g-200);
    border-radius: var(--r-md);
    background: none;
    color: var(--g-800);
    font-size: 1.2rem;
    cursor: pointer;
}

/* Пошук у мобільному меню */
.hdr-mobile__search {
    display: none;
    position: relative;
    margin: var(--sp-3) var(--sp-4) 0;
}
.hdr-mobile__search i {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--g-500);
    pointer-events: none;
}
.hdr-mobile__search input {
    width: 100%;
    padding: 12px 14px 12px 38px;
    border: 2px solid var(--g-200);
    border-radius: var(--r-md);
    background: var(--g-50);
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--g-900);
}
.hdr-mobile__search input:focus {
    outline: none;
    border-color: var(--c-accent);
    background: var(--g-0);
}

.hdr-mobile__results { padding: 0 var(--sp-4); }
.hdr-mobile__results:not(:empty) { padding-top: var(--sp-2); }
.hdr-mobile__results a {
    display: block;
    padding: 11px var(--sp-3);
    border-radius: var(--r-md);
    color: var(--g-900);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    text-decoration: none;
}
.hdr-mobile__results a:active { background: var(--g-50); }
.hdr-mobile__results small { display: block; color: var(--g-600); font-size: var(--fs-xs); }

.hdr-mobile__nav { flex: 1; padding: var(--sp-2) 0; }
.hdr-mobile__nav ul { list-style: none; margin: 0; padding: 0; }

.hdr-mobile__toggle,
.hdr-mobile__single {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    border: none;
    background: none;
    font-family: var(--font);
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--g-900);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
/* Пункт з іконкою ліворуч.
   Базовий .hdr-mobile__single розводить дітей по краях — він
   розрахований на «підпис + шеврон праворуч», як у розділів. Щойно
   всередині зʼявилася іконка, вона з текстом опинилася на протилежних
   кінцях рядка, а сам підпис вилазив за межі панелі. */
.hdr-mobile__single--icon {
    justify-content: flex-start;
    gap: var(--sp-2);
}
.hdr-mobile__single--icon i {
    display: block;
    line-height: 1;
    font-size: 1.05em;
    color: var(--c-brand);
    flex-shrink: 0;
}

.hdr-mobile__toggle i { transition: transform var(--transition); color: var(--g-500); }
.hdr-mobile__toggle[aria-expanded="true"] { color: var(--c-brand); }
.hdr-mobile__toggle[aria-expanded="true"] i { transform: rotate(180deg); }

.hdr-mobile__sub {
    max-height: 0;
    overflow: hidden;
    background: var(--g-50);
    transition: max-height .26s ease;
}
.hdr-mobile__group.is-open .hdr-mobile__sub { max-height: 900px; }

.hdr-mobile__sub a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px var(--sp-4) 11px var(--sp-4);
    color: var(--g-800);
    font-size: var(--fs-base);
    text-decoration: none;
}
.hdr-mobile__sub a:active { background: var(--g-100); }

/* Кружечок під іконку. Селектор ловить і гліф Flaticon (<i>), і власний
   малюнок (<svg> з includes/icons.php) — вони взаємозамінні. */
.hdr-mobile__sub a > i:first-child,
.hdr-mobile__sub a > svg:first-child {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: var(--r-pill);
    background: var(--g-0);
    color: var(--c-brand);
    font-size: .95rem;
    line-height: 1;
}

.hdr-mobile__foot {
    padding: var(--sp-4);
    border-top: 1px solid var(--g-200);
    background: var(--g-50);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

/* Головна дія блоку — чат: він відповідає одразу й не потребує людини.
   Заливка бренду переїхала сюди з телефону. */
.hdr-mobile__chat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: var(--r-btn);
    background: var(--c-brand);
    color: var(--g-0);
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semi);
    cursor: pointer;
    transition: background var(--transition);
}
.hdr-mobile__chat:hover { background: var(--c-brand-dark); }
.hdr-mobile__chat .hdr-chat__dot { width: 8px; height: 8px; }

/* Телефон лишається під рукою, але вже як другорядний варіант */
.hdr-mobile__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1px solid var(--g-300);
    border-radius: var(--r-btn);
    background: var(--g-0);
    color: var(--c-navy);
    font-weight: var(--fw-semi);
    text-decoration: none;
    transition: border-color var(--transition), color var(--transition);
}
.hdr-mobile__phone:hover { border-color: var(--c-brand); color: var(--c-brand); }

.hdr-mobile__msgs { display: flex; gap: var(--sp-2); }
.hdr-mobile__msgs .hdr-msg {
    flex: 1;
    justify-content: center;
    background: var(--c-navy);
    padding: 9px;
    font-size: var(--fs-sm);
}

/* Текст із <br> усередині flex-контейнера розпадався на окремі
   flex-елементи — звідси й «колонки». Тепер іконка та текст —
   два явні елементи, а сам текст лишається суцільним абзацом. */
.hdr-mobile__info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.hdr-mobile__info p {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: var(--fs-xs);
    line-height: 1.5;
    color: var(--g-600);
    text-align: left;
}

.hdr-mobile__info i {
    flex-shrink: 0;
    position: relative;
    top: 2px;
    line-height: 1;
    color: var(--c-brand);
}

.hdr-mobile__info p:last-child i { color: var(--c-navy); }
.hdr-mobile__info strong { color: var(--g-850); }

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* Кнопка статусу забрала в рядку ~100px, тож ущільнюємо меню трохи
   раніше, ніж доводилося без неї. */
@media (max-width: 1300px) {
    .hdr-nav__link { padding: 10px 9px; font-size: var(--fs-sm); }
    .hdr-main__inner { gap: var(--sp-3); }
}

@media (max-width: 1024px) {
    .hdr-nav { display: none; }
    .hdr-burger { display: flex; }
    .hdr-mega { display: none !important; }
    /* Пошук переїздить усередину меню: чотири кнопки поспіль тиснули
       логотип і давали надто дрібні цілі для пальця */
    #hdrSearchBtn { display: none; }
    .hdr-mobile__search { display: block; }
}

/* ---- Верхня смуга: прибираємо текст порціями, поки вміщається ----
   Смуга має overflow:hidden (потрібен для згортання), тож зайвий текст
   не переноситься, а зрізається.

   Пороги зсунуті приблизно на 150px проти попередніх: стільки займає
   кнопка «Запитати онлайн». Порядок згортання — від найменш потрібного
   до найважливішого, і кнопка чату лишається до останнього: це єдиний
   канал у смузі, який відповідає без людини. */
@media (max-width: 1300px) {
    .hdr-top__years,
    .hdr-top__trust .hdr-top__sep { display: none; }
}

@media (max-width: 1150px) {
    .hdr-top__mgr,
    .hdr-top__hours .hdr-top__sep { display: none; }
}

@media (max-width: 1180px) {
    /* Кнопки лишаються, але коротшають до іконок — акцент важливіший
       за підпис. Разом із підписом ховається й пояснювальний рядок.
       Статус згортається на тому самому порозі, що й головна дія:
       інакше контурна кнопка з текстом виглядала б важчою за брендову
       без нього. */
    .hdr-cta__body    { display: none; }
    .hdr-cta          { padding: 0 15px; }
    .hdr-status__text { display: none; }
    .hdr-status       { width: 46px; padding: 0; justify-content: center; }
}

@media (max-width: 1000px) {
    /* Номер ховаємо, лишається іконка. Не font-size:0 на всій кнопці —
       саме через нього номер колись розсипався на два рядки. */
    .hdr-msg--phone span { display: none; }
    .hdr-msg--phone { width: 30px; height: 26px; padding: 0; justify-content: center; }
}

@media (max-width: 780px) {
    /* Гео прибираємо останнім: рядок «Київ, друкарня наклейок та
       етикеток» працює на локальний пошук, тож тримаємо його, доки
       вміщається. Заміряно: за згорнутого номера й графіка вміст
       смуги займає ~700px, тож до 780 запас ще лишається. */
    .hdr-top__trust { display: none; }
    .hdr-top__inner { justify-content: center; padding: 7px var(--sp-3) 10px; gap: var(--sp-2); }
    .hdr-top__right { gap: var(--sp-2); }
    .hdr-top__hours { font-size: 11px; }
    .hdr-msg { padding: 4px 9px; font-size: 11px; }
}

@media (max-width: 768px) {
    .hdr-logo svg { height: 48px; }
    .hdr.is-compact .hdr-logo svg { height: 40px; }
}

@media (max-width: 730px) {
    .hdr-main__inner { gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
}

@media (max-width: 600px) {
    /* Чотири кнопки поспіль (статус, замовлення, кошик, бургер) на 375px
       уже не вміщаються — рядок вилазив на 17px. Статус ховаємо: він
       першим пунктом лежить у мобільному меню, і там ще й з підписом,
       а сама іконка коробки без слів однаково мало що пояснює. */
    .hdr-status { display: none; }
}

@media (max-width: 560px) {
    /* Месенджери ховаємо: вони повним списком лежать у мобільному меню,
       а в смузі місце потрібніше чату й графіку */
    .hdr-msg--icon { display: none; }
    .hdr-top__right { gap: 7px; }
    .hdr-chat { padding: 4px 11px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .hdr-mega, .hdr-search { animation: none; }
    .hdr-mobile, .hdr-backdrop, .hdr-top, .hdr-logo svg { transition: none; }
    .hdr-cart.is-bump { animation: none; }
}