/* MUVIO - мобільні правки (підключається останнім на всіх сторінках) */
@media (max-width: 640px) {
    /* Кнопки мови UA/EN: більша зона натискання без зміни вигляду */
    html body .lang-btn { padding-top: 10px !important; padding-bottom: 10px !important; margin-top: -10px !important; margin-bottom: -10px !important; }

    /* Юридичні посилання у футері: зручніше натискати пальцем */
    html body footer .flex-wrap > a { display: inline-block; padding-top: 5px !important; padding-bottom: 5px !important; }

    /* Вкладки категорій транспорту: в один рядок з горизонтальним скролом */
    html body :has(> #tab-all) { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: 100%; }
    html body :has(> #tab-all)::-webkit-scrollbar { display: none; }
    html body :has(> #tab-all) > * { flex: 0 0 auto !important; white-space: nowrap !important; }

    /* Калькулятор: усі 5 строків оренди в один ряд */
    html:not(#_):not(#__):not(#___):not(#____):not(#_____) body #durationPillsContainer { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 6px !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____) body #durationPillsContainer > * { min-width: 0 !important; padding-left: 2px !important; padding-right: 2px !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____) body #durationPillsContainer > * * { white-space: nowrap !important; font-size: 12px !important; letter-spacing: -0.01em !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____) body #durationPillsContainer > * :first-child { font-size: 10px !important; }

    /* Кнопка заявки в Telegram: текст не впирається в край */
    html body #calcTelegramBtn { white-space: normal !important; text-align: center !important; justify-content: center !important; line-height: 1.3 !important; padding-left: 12px !important; padding-right: 12px !important; }

    /* Сторінка товару: «Часто купують разом» та «Схожі товари» - по 2 в ряд */
    html body .pd-bundle-layout,
    html body .pd-similar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    html body .pd-similar-card { padding: 10px !important; min-width: 0 !important; }
    html body .pd-similar-card * { min-width: 0; }
    html body .pd-bundle-layout img,
    html body .pd-similar-grid img { max-height: 130px !important; }
}

/* Бронювання (кошик «бронь діє», Мої бронювання): зручно на телефоні */
@media (max-width: 640px) {
    html body .rc-live-top { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
    html body .rc-live-img { width: 100% !important; max-width: 100% !important; }
    html body .rc-live-top h4 { overflow-wrap: anywhere; }
    html body .rc-tap { width: 100% !important; min-height: 46px !important; white-space: normal !important; line-height: 1.25 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; }
    html body .rc-tap-link { display: inline-block !important; padding: 12px 8px !important; min-height: 44px; }
    html body [data-rc-open] { padding: 14px !important; overflow-wrap: anywhere; }
    html body [data-rc-open] .font-mono { overflow-wrap: anywhere; }
    html body #rcLiveErr { overflow-wrap: anywhere; }
}


/* Дуже вузькі телефони (до 400px): шапка не виходить за край екрана */
@media (max-width: 400px) {
    :root { --hdr-logo-h: 48px; --hdr-logo-ty: 0px; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced .header-container { gap: 2px !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced #burger-btn { width: 36px !important; min-width: 36px !important; height: 44px !important; padding-left: 0 !important; padding-right: 0 !important; flex: 0 0 36px !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced .header-right { gap: 0 !important; min-width: 0 !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced .header-right .btn-profile-trigger,
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced .header-right .theme-toggle-btn { width: 34px !important; min-width: 34px !important; padding-left: 0 !important; padding-right: 0 !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced .header-right .lang-switch { margin: 0 !important; gap: 2px !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) body header.site-header-synced .header-right .lang-btn { padding-left: 2px !important; padding-right: 2px !important; font-size: 13px !important; }
}
@media (max-width: 767px) {
    html:not(#_):not(#__):not(#___):not(#____):not(#_____) body #durationPillsContainer { display: flex !important; justify-content: space-between !important; gap: 8px !important; }
    html:not(#_):not(#__):not(#___):not(#____):not(#_____) body #durationPillsContainer > * { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
}