/* "Footer bim" (Magento_Theme/templates/html/footers/footer_bim.phtml).
   Every rule is scoped to .bimf, so the other MGS footers are not affected. Colour values match
   header-bim.css's tokens (kept as a separate copy so each is still independently selectable). */
.bimf {
    /* Matches the site's own footer colour (#191919, theme.less's "footer-v3 -- active theme"
       rule) and brand tokens (@brand-orange / @brand-blue in theme.less), rather than a new
       navy block that nothing else on the site uses. */
    --bimf-ink: #f2f2f2;
    --bimf-soft: rgba(255, 255, 255, .62);
    --bimf-line: rgba(255, 255, 255, .12);
    --bimf-bg: #191919;
    --bimf-orange: #ff7f1d;
    --bimf-orange-2: #ffb347;
    --bimf-blue: #0030b8;
    --bimf-margin: clamp(16px, 3.6vw, 54px);
    position: relative;
    background: var(--bimf-bg);
    color: var(--bimf-ink);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.6;
}
.bimf::before {
    /* The same thin orange accent line the site's existing footer has at its top edge. */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--bimf-orange) 0%, var(--bimf-orange-2) 100%);
}
.bimf *,
.bimf *::before,
.bimf *::after { box-sizing: border-box; }
.bimf a,
.bimf a:visited { color: inherit; text-decoration: none; }
.bimf a:hover { color: var(--bimf-orange); }
.bimf a:focus-visible,
.bimf button:focus-visible { outline: 3px solid var(--bimf-orange); outline-offset: 2px; }

.bimf-wrap { padding: clamp(40px, 5vw, 64px) var(--bimf-margin) 20px; }

.bimf-top {
    display: grid;
    grid-template-columns: 1.7fr repeat(3, 1fr);
    gap: 40px;
    padding-bottom: clamp(32px, 4vw, 48px);
}

.bimf-logo { margin: 0 0 2px; color: #fff; font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.bimf-tag { margin: 0 0 18px; color: var(--bimf-orange); font-size: 13px; font-weight: 700; }
.bimf-addr { margin: 0 0 14px; color: var(--bimf-soft); font-style: normal; font-size: 14px; line-height: 1.6; }
.bimf-line { margin: 0; font-size: 14px; }
.bimf-line a:hover { text-decoration: underline; text-underline-offset: 3px; }

.bimf-col h3 { margin: 0 0 16px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.bimf-col ul { margin: 0; padding: 0; list-style: none; }
.bimf-col li { margin: 0; }
.bimf-col a { display: inline-block; padding: 7px 0; color: var(--bimf-soft); font-size: 14px; font-weight: 500; transition: color .15s ease, transform .15s ease; }
.bimf-col a:hover { color: var(--bimf-orange); transform: translateX(2px); }

.bimf-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    padding: 18px 0 0;
    border-top: 1px solid var(--bimf-line);
}
.bimf-copy { color: var(--bimf-soft); font-style: normal; font-size: 13px; }
.bimf-top-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--bimf-soft);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s ease;
}
.bimf-top-link::before { content: "\2191"; } /* taste-skill-ignore: a plain arrow glyph, not an icon font */
.bimf-top-link:hover { color: var(--bimf-orange); }

@media (max-width: 991px) {
    .bimf-top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .bimf-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .bimf-top { grid-template-columns: 1fr 1fr; }
    .bimf-wrap { padding-top: 40px; }
}