/* --------------------------------------------------------------
   Storefront footer
   -------------------------------------------------------------- */

.store-footer {
    margin-top:
        var(--space-20);

    padding:
        var(--space-16) 0
        var(--space-6);

    background:
        var(--color-black);

    color:
        var(--color-text-inverse);
}


.store-footer-main {
    display: grid;

    grid-template-columns:
        2fr repeat(3, 1fr);

    gap:
        var(--space-10);

    padding-bottom:
        var(--space-14);
}


.store-footer-brand {
    max-width: 300px;
}


.store-footer-logo {
    display: inline-block;

    margin-bottom:
        var(--space-5);

    font-size:
        1.6rem;

    font-weight:
        var(--font-weight-bold);

    letter-spacing:
        0.1em;
}


.store-footer-brand p {
    margin: 0;

    color:
        rgb(255 255 255 / 65%);

    line-height:
        var(--line-height-relaxed);
}


.store-footer-column h2 {
    margin:
        0 0 var(--space-5);

    font-size:
        var(--font-size-sm);

    text-transform: uppercase;

    letter-spacing:
        0.1em;
}


.store-footer-column nav {
    display: grid;

    gap:
        var(--space-3);
}


.store-footer-column a {
    width: fit-content;

    color:
        rgb(255 255 255 / 68%);

    font-size:
        var(--font-size-sm);
}


.store-footer-column a:hover {
    color:
        var(--color-text-inverse);
}


.store-footer-bottom {
    min-height: 64px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        var(--space-6);

    padding-top:
        var(--space-5);

    border-top:
        1px solid rgb(255 255 255 / 12%);
}


.store-footer-bottom p {
    margin: 0;

    color:
        rgb(255 255 255 / 55%);

    font-size:
        var(--font-size-xs);
}


@media (max-width: 800px) {

    .store-footer-main {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .store-footer-brand {
        grid-column:
            1 / -1;
    }

}


@media (max-width: 500px) {

    .store-footer {
        margin-top:
            var(--space-14);

        padding-top:
            var(--space-12);
    }


    .store-footer-main {
        grid-template-columns:
            1fr;

        gap:
            var(--space-8);
    }


    .store-footer-bottom {
        align-items: flex-start;

        flex-direction: column;
    }

}

/* Accessibility contrast */

.store-footer-description,
.store-footer-column a {
    color: rgb(255 255 255 / 78%);
}

.store-footer-bottom {
    color: rgb(255 255 255 / 70%);
}
/* 4.30.8D — breathing room and legible legal links on mobile */
.store-footer-legal{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:20px 0 24px;border-top:1px solid rgb(255 255 255 / 12%)}
.store-footer-legal a{color:rgb(255 255 255 / 80%);font-size:var(--font-size-sm);line-height:1.6;text-underline-offset:3px}
.store-footer-legal a:hover,.store-footer-legal a:focus-visible{color:#fff}
@media(max-width:500px){
  .store-footer-main{padding-bottom:28px}
  .store-footer-legal{padding:24px 0 28px;gap:14px;flex-direction:column;align-items:flex-start}
  .store-footer-legal a{display:inline-flex;min-height:36px;align-items:center}
  .store-footer-bottom{padding-top:22px}
}