/* ===== fb-footer ===== */ /* Значки вставляє скрипт, тому розмір їм потрібен на будь-якій ширині — інакше на мобільному вони підуть у натуральну величину. */ #qodef-page-footer .fb-footer-logo img { width: 45px !important; height: 56px !important; display: block !important; } #qodef-page-footer .fb-tg img { width: 36px !important; height: 36px !important; display: block !important; } /* Картинка всередині — блокова, тому саме посилання теж має бути inline-block: інакше на мобільному значок телеграма зривався на окремий рядок під фейсбуком та інстаграмом. Заміряно: ширина посилання була 323px. */ #qodef-page-footer .fb-tg { display: inline-block !important; vertical-align: middle !important; } /* Власник 08.09: «Правимо тільки десктоп». Уся перебудова підвала — від 1025px. На вузькому екрані підвал лишається таким, як робить тема. */ @media (min-width: 1025px) { /* ---------- Розміри підвала (завдання власника 08.09) ---------- Уся смуга — не ширше 1252 і по центру. Усередині вміст 1172, тобто по 40 ліворуч і праворуч. Зверху теж 40, знизу 16. */ #qodef-page-footer { /* тема робить підвал `inline-block`, і `margin: auto` його не центрує — тому спершу переводимо в блок, потім центруємо. Заміряно: стояв ліворуч, left = 0 при вікні 1440. */ display: block !important; max-width: 1252px !important; margin-left: auto !important; margin-right: auto !important; } /* 39, а не 40: у підвала є власна межа 1px зверху. Від видимого краю — рівно 40. */ #qodef-page-footer-top-area { padding: 39px 40px 0 40px !important; } #qodef-page-footer-bottom-area { padding: 0 40px 16px 40px !important; } #qodef-page-footer .qodef-content-grid, #qodef-page-footer-top-area-inner, #qodef-page-footer-bottom-area-inner { max-width: 1172px !important; width: 100% !important; /* у теми в цих обгортках свої відступи: зверху 60 і знизу 12. Знімаємо всі чотири, інакше до наших 40 і 16 додаються чужі — заміряно: виходило 101 зверху і 55 знизу. */ padding: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* друга колонка нижньої смуги порожня, але займає місце під рядком */ #qodef-page-footer-bottom-area-inner .qodef-grid-inner > .qodef-grid-item:last-child:not(:first-child) { display: none !important; } /* обгортка сітки — inline-block, від базової лінії лишався зайвий 1px */ #qodef-page-footer-top-area-inner > .qodef-grid, #qodef-page-footer-bottom-area-inner > .qodef-grid { display: block !important; } /* напис телеграма прибрано скриптом; розділювач-пустушку над меню знімаємо — потрібну лінію задає сам відступ зверху */ #qodef-page-footer .qodef-grid-item > .widget_eirwen_core_separator { display: none !important; } /* Відступи рахуємо по тому, що видно. Тому обнуляємо власні відступи теми: інакше до наших додаються чужі, і замість 32 виходило 104. */ #qodef-page-footer .qodef-grid-item p { line-height: 1.2 !important; } #qodef-page-footer .qodef-grid-item .widget, #qodef-page-footer .qodef-grid-item p, #qodef-page-footer .qodef-grid-item .wp-block-group, #qodef-page-footer .qodef-grid-item .wp-block-group__inner-container { margin: 0 !important; padding: 0 !important; } /* Логотип і заголовки стовпців — в одну лінію по верху: обидва починаються від верхнього краю вмісту, тобто на 40 від краю смуги. */ #qodef-page-footer .fb-footer-logo { display: block !important; margin: 0 0 32px 0 !important; line-height: 0 !important; } #qodef-page-footer .fb-footer-logo img { width: 45px !important; height: 56px !important; display: block !important; } #qodef-page-footer .qodef-grid-item .widget-title, #qodef-page-footer .qodef-grid-item .qodef-widget-title, #qodef-page-footer .qodef-grid-item h1, #qodef-page-footer .qodef-grid-item h2, #qodef-page-footer .qodef-grid-item h3, #qodef-page-footer .qodef-grid-item h4, #qodef-page-footer .qodef-grid-item h5 { margin: 0 0 16px 0 !important; } /* рядки контактів — рівно 32 між ними */ #qodef-page-footer .qodef-grid-item p + p { margin-top: 32px !important; } /* соцмережі: усі значки однакові, між ними 16 */ #qodef-page-footer .qodef-grid-item .qodef-social-icons-group { margin-top: 32px !important; display: flex !important; align-items: center !important; gap: 16px !important; } #qodef-page-footer .fb-tg { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; } #qodef-page-footer .fb-tg img { width: 36px !important; height: 36px !important; display: block !important; } /* ---- нижня смуга: картки оплати ліворуч, копірайт по центру, один рядок ---- */ #qodef-page-footer-bottom-area-inner .qodef-grid-inner { display: block !important; } #qodef-page-footer-bottom-area-inner .qodef-grid-inner > .qodef-grid-item { width: 100% !important; max-width: none !important; float: none !important; } /* Картки оплати — рядком ліворуч, копірайт окремим рядком під ними і по центру. Власник 08.09: «© 2026 … опусти вниз з відступом 16 від низу екрана». */ #qodef-page-footer-bottom-area-inner .qodef-grid-inner > .qodef-grid-item:first-child { display: flex !important; flex-direction: column !important; align-items: stretch !important; } /* У розмітці копірайт іде ПЕРЕД картками оплати, і стовпчиком він ставав зверху. Заміряно: копірайт був на 31px вище низу карток. Тому задаємо порядок явно — картки першими, копірайт під ними. */ #qodef-page-footer-bottom-area-inner .qodef-grid-item:first-child > .widget_eirwen_core_social_icons_group { order: 1 !important; } #qodef-page-footer-bottom-area-inner .qodef-grid-item:first-child > .widget { order: 2 !important; } /* між картками оплати — 16 */ #qodef-page-footer-bottom-area-inner .qodef-social-icons-group { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 16px !important; margin: 0 0 16px 0 !important; } /* Копірайт — окремим рядком під картками, по центру смуги. Раніше він був абсолютним і виносився з потоку: коробка віджета мала висоту 0, і рядок з'їжджав. Тепер звичайний елемент. */ #qodef-page-footer-bottom-area-inner p.qodef-copy { position: static !important; transform: none !important; margin: 0 !important; text-align: center !important; width: 100% !important; } }