.footer {
    --footer-background: #fff;
    --footer-section-background: var(--GS-10, #F6F6F6);
    --font-color: #000;

    /* Menu item colours (from "[ XL ] Footer" mockup) */
    --footer-heading-color: var(--GS-80, #262626);
    --footer-link-color: var(--GS-70, #4D4D4D);
    --footer-link-hover-color: var(--GS-80, #262626);
    --footer-bar-color: var(--GS-80, #262626);
    background-color: var(--footer-section-background);
    color: #000;
}

.neo-dark .footer {
    --footer-background: var(--SC-1, #040A17);
    --footer-section-background: var(--SC-2, #33536C);
    --font-color: #fff;
    --footer-heading-color: #fff;
    --footer-link-color: rgb(255 255 255 / 70%);
    --footer-link-hover-color: #fff;
    --footer-bar-color: #fff;
    color: #fff;
}

.footer__top {
    background-color: var(--footer-section-background);
}

.footer__bottom {
    background-color: var(--footer-background);
}

/* Main nav columns */
.footer__main {
    padding-top: 80px;
    padding-bottom: 80px;
    background: var(--footer-section-background);
}

.footer__columns {
    display: flex;
    flex-direction: row;
    gap: var(--gap-32);
}

/* Each column: heading stacked above its link list */
.footer__column {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--gap-16);
}

/* Column heading (top-level menu item title).
   Typography token: "Additional/Label" (BMWTypeNext Pro Light 12/16). */
.neo-ds.BMW .footer__column-heading {
    margin: 0;
    font-family: var(--general-typography-styles-font-family-label), sans-serif;
    font-size: var(--general-typography-styles-font-size-label, 0.75rem);
    font-weight: var(--general-typography-styles-font-weight-label, 300);
    line-height: var(--general-typography-styles-line-height-label, 1rem);
    color: var(--footer-heading-color);
    text-decoration: none;
}

/* Link list */
.footer__column-list {
    display: flex;
    flex-direction: column;
    gap: var(--gap-12);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__column-item {
    margin: 0;
    padding: 0;
}

/* Menu link — typography token: "Body baseline 2/Body 2"
   (BMWTypeNext Pro Light 16/26). Prefixed with .neo-ds.BMW to outweigh the
   design-system rule `.neo-ds.BMW:not(html) a` (specificity 0-2-2), which
   otherwise forces body-1 typography + text-decoration: underline. */
.neo-ds.BMW .footer__column-list a {
    font-family: var(--general-typography-styles-font-family-body-2), sans-serif;
    font-size: var(--general-typography-styles-font-size-body-2, 1rem);
    font-weight: var(--general-typography-styles-font-weight-body-2, 300);
    line-height: var(--general-typography-styles-line-height-body-2, 1.625rem);
    color: var(--footer-link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.neo-ds.BMW .footer__column-list a:hover,
.neo-ds.BMW .footer__column-list a:focus-visible {
    color: var(--footer-link-hover-color);
    text-decoration: underline;
}

/* Bottom bar */
.footer__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background: var(--footer-background);
}

/* Copyright — typography token: "Additional/Disclaimer"
   (BMWTypeNext Pro Light 12/18). */
.footer__copyright {
    margin: 0;
    font-family: var(--general-typography-styles-font-family-disclaimer), sans-serif;
    font-size: var(--general-typography-styles-font-size-disclaimer, 0.75rem);
    font-weight: var(--general-typography-styles-font-weight-disclaimer, 300);
    line-height: var(--general-typography-styles-line-height-disclaimer, 1.125rem);
    color: var(--footer-bar-color);
}

/* Bottom legal navigation (footer-bar menu) */
.footer__legal-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap-20);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__legal-nav li {
    margin: 0;
    padding: 0;
}

/* Legal link — typography token: "Body baseline 2/Action 2"
   (BMWTypeNext Pro Medium 16/26). Prefixed with .neo-ds.BMW to outweigh the
   design-system rule `.neo-ds.BMW:not(html) a` (specificity 0-2-2). */
.neo-ds.BMW .footer__legal-nav a {
    font-family: var(--general-typography-styles-font-family-body-2), sans-serif;
    font-size: var(--general-typography-styles-font-size-body-2, 1rem);
    font-weight: 500;
    line-height: var(--general-typography-styles-line-height-body-2, 1.625rem);
    color: var(--footer-bar-color);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.neo-ds.BMW .footer__legal-nav a:hover,
.neo-ds.BMW .footer__legal-nav a:focus-visible {
    text-decoration: underline;
}

/* Under 1024px: vertical layout */
@media (max-width: 1023px) {
    .footer__columns {
        flex-direction: column;
    }

    .footer__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--gap-8);
    }
}