/* =========================================
   FOOTER (global — every page loads this)
   ========================================= */
footer { background: #020202; padding: 60px 0 30px; border-top: 1px solid #111; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 60px; }
.footer-col h3 { color: #fff; margin-bottom: 25px; font-size: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; }
.footer-col p { color: #666; font-size: 14px; line-height: 1.6; margin-bottom: 15px; }
.footer-links li { margin-bottom: 12px; }
.footer-links a { color: #666; font-size: 14px; }
.footer-links a:hover { color: var(--accent-gold); padding-left: 5px; }

/* =========================================
   FOOTER ACCORDION (Каталог / Клієнтам)
   Desktop: identical to the original design — header/icon/toggle markup
   is simply invisible and inert, columns are always fully expanded.
   Mobile: real collapsible accordion (JS toggle, see core-bridge.js) —
   the brand column and Контакти stay always visible since they're short
   and essential; only the two link-heavy columns collapse, so mobile
   doesn't get a wall of footer text on load.
   ========================================= */
.footer-accordion-header { cursor: default; }
.footer-accordion-icon { display: none; }

@media (max-width: 768px) {
    .footer-accordion-header {
        cursor: pointer; display: flex; align-items: center; justify-content: space-between;
        padding: 16px 0; border-bottom: 1px solid #151515;
    }
    .footer-accordion-header h3 { margin-bottom: 0; }
    .footer-accordion-icon { display: block; color: #666; font-size: 14px; transition: transform 0.3s ease; }
    .footer-col.expanded .footer-accordion-icon { transform: rotate(45deg); }

    .footer-accordion-body {
        max-height: 0; overflow: hidden; margin: 0; padding: 0;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .footer-col.expanded .footer-accordion-body { max-height: 300px; padding: 15px 0 5px; }
}
