/* The one footer of both storefronts (lib/footer.php), a mirror of the header:
   a white band with a line, the brand logos left and the other storefront right. */
.fw-footer {
    padding: 2.5rem max(1.25rem, calc((100% - 76rem) / 2 + 1.25rem));
    border-top: 1px solid #e4e4e4;
    background: #fff;
    color: #111;
    font-family: Montserrat, "Open Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.75;
}
.fw-footer a {
    color: inherit;
    text-decoration: none;
}
/* A text link needs a mark at rest, not only on hover, as in Ekspress. */
.fw-footer__company a,
.fw-footer__links a {
    text-decoration: underline;
    text-decoration-color: #c4c4c4;
    text-underline-offset: .2em;
}
.fw-footer__company a:hover,
.fw-footer__links a:hover {
    text-decoration-color: currentColor;
}
.fw-footer__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas:
        "company badges right"
        "logos   social social";
    gap: 2rem;
    align-items: start;
}
.fw-footer__company { grid-area: company; }
.fw-footer__badges { grid-area: badges; }
.fw-footer__right { grid-area: right; }
.fw-footer__logos { grid-area: logos; }
.fw-footer__social { grid-area: social; }

/* Widths in the ratio that gives both FARWELL wordmarks one size (the red logo's box also
   holds its slogan and swoosh), so they stay matched at any width. */
.fw-footer__logos {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    align-self: center;
    max-width: 18rem;
}
.fw-footer__logos > * {
    flex: 3.74 1 0;
    min-width: 0;
}
.fw-footer__logos > * + * {
    flex-grow: 4.49;
}
.fw-footer__logos img {
    display: block;
    width: 100%;
    height: auto;
}
.fw-footer__company {
    margin: 0;
    font-style: normal;
}

.fw-footer__badges {
    display: flex;
    align-self: center;
    justify-content: center;
    gap: 2.5rem;
    padding: 0 2rem;
}
.fw-footer__badges > * {
    line-height: 0;
}
.fw-footer__badges img {
    display: block;
    width: auto;
    height: 7.5rem;
}

.fw-footer__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .75rem;
    text-align: right;
}
.fw-footer__ekspress img {
    display: block;
    width: auto;
    height: 3.25rem;
}
.fw-footer__links {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.fw-footer__withdraw {
    padding: 4px 8px;
    border: 1px solid currentColor;
    border-radius: 3px;
    font-size: .875rem;
    line-height: 1.5;
}
.fw-footer__withdraw:hover {
    background: #111;
    color: #fff;
}
.fw-footer__social {
    display: flex;
    flex-wrap: wrap;
    align-self: center;
    justify-self: end;
    gap: .5rem 1.25rem;
}
.fw-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}
.fw-footer__social a:hover span {
    text-decoration: underline;
}
.fw-footer__social img {
    display: block;
    width: 34px;
    height: 34px;
    padding: 4px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

@media (max-width: 767.98px) {
    .fw-footer__inner {
        grid-template-columns: 1fr;
        grid-template-areas: "company" "badges" "right" "logos" "social";
    }
    .fw-footer__social {
        justify-self: start;
    }
    .fw-footer__badges {
        justify-content: flex-start;
        gap: 1.5rem;
        padding: 0;
    }
    .fw-footer__right,
    .fw-footer__links {
        align-items: flex-start;
        text-align: left;
    }
}