.IssueFilterPanel {
    --offset-height: 50px;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    background: #212121
}
.IssueFilterPanel button {
    --line-height: 1.3333333333;
    color: #EBEBEB;
    align-items: center;
    background-color: unset;
    border: none;
    cursor: pointer;
    display: flex;
    font-family: "Brutal", serif;
    font-size: calc(0.34483vw + 13.10345px);
    font-style: normal;
    font-weight: 700;
    font-stretch: 200%;
    justify-content: center;
    text-transform: uppercase;
    line-height: 1.3333333333;
    outline: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
@media (hover: hover) and (pointer: fine) {
    .IssueFilterPanel button:hover {
        opacity: 0.4;
    }
}
@media (min-width: 1440px) {
    .IssueFilterPanel button {
        font-size: 20px;
    }
}
@media (max-width: 739px) {
    .IssueFilterPanel button {
        font-size: 15px;
    }
}
.IssueFilterPanel button em {
    font-family: "Brutal", serif;
    font-style: italic;
}
.IssueFilterPanel svg {
    margin-left: 10px;
}
@media (hover: hover) and (pointer: fine) {
    .IssueFilterPanel .ProductCard:hover .ProductCard__additional-links {
        opacity: 1;
        pointer-events: auto;
    }
    .IssueFilterPanel .ProductCard:hover .ProductCard__media-thumbnail {
        transform: translateY(-5px);
    }
}
@media (hover: none) {
    .IssueFilterPanel .ProductCard .ProductCard__additional-links {
        opacity: 1;
        pointer-events: auto;
    }
}
.IssueFilterPanel .ProductCard .ProductCard__cat-wrapper {
    display: none;
}
.IssueFilterPanel.active-filters {
    --offset-height: 132px;
}
.IssueFilterPanel.active-filters .IssueFilterPanel__footer {
    align-items: flex-end;
}
.IssueFilterPanel__background {
    background-color: #121212;
    background-image: url(../assets/images/cover_bg.png);
}
.IssueFilterPanel__background,
.IssueFilterPanel__content {
    height: calc(100% - var(--offset-height));
    position: absolute;
    width: 100%;
}
.IssueFilterPanel__content {
    box-sizing: border-box;
    column-gap: var(--six-gutter);
    display: grid;
    overflow-y: scroll;
    pointer-events: none;
    transform: translateY(-25vh);
}
@media (min-width: 4069px) {
    .IssueFilterPanel__content {
        --max-grid: calc(var(--six-site-max-width) / 2 + var(--six-site-margin) + var(--six-gutter) * 2);
        grid-template-columns:
            [full-start] var(--six-site-margin) calc(50vw - var(--max-grid)) [content-start] repeat(
                var(--six-cols),
                1fr
            )
            [content-end] calc(50vw - var(--max-grid)) var(--six-site-margin) [full-end];
    }
}
@media (max-width: 4068px) {
    .IssueFilterPanel__content {
        --col-spacer: calc(var(--six-site-margin) - var(--six-gutter));
        grid-template-columns:
            [full-start] var(--col-spacer) [content-start] repeat(var(--six-cols), 1fr) [content-end] var(--col-spacer)
            [full-end];
    }
}
@supports not (display: grid) {
    .IssueFilterPanel__content {
        display: block;
        width: 100%;
    }
}
@media (max-width: 739px) {
    .IssueFilterPanel__content .IssueFilterPanel__col {
        grid-column: span 4;
    }
    .IssueFilterPanel__content .IssueFilterPanel__col:nth-child(odd) {
        grid-column: content/span 4;
    }
}
@media (min-width: 740px) and (max-width: 1023px) {
    .IssueFilterPanel__content .IssueFilterPanel__col {
        grid-column: span 4;
    }
    .IssueFilterPanel__content .IssueFilterPanel__col:nth-child(3n + 1) {
        grid-column: content/span 4;
    }
}
@media (min-width: 1024px) and (max-width: 1599px) {
    .IssueFilterPanel__content .IssueFilterPanel__col {
        grid-column: span 6;
    }
    .IssueFilterPanel__content .IssueFilterPanel__col:nth-child(4n + 1) {
        grid-column: content/span 6;
    }
}
@media (min-width: 1600px) {
    .IssueFilterPanel__content .IssueFilterPanel__col {
        grid-column: span 4;
    }
    .IssueFilterPanel__content .IssueFilterPanel__col:nth-child(6n + 1) {
        grid-column: content/span 4;
    }
}
@media (max-width: 1023px) {
    .IssueFilterPanel__content .ProductCard {
        padding-bottom: 0;
    }
}
.IssueFilterPanel__content .ProductCard a {
    pointer-events: auto;
}
.IssueFilterPanel__content .ProductCard .ProductCard__additional-links-buy-link a {
    pointer-events: auto;
}
.IssueFilterPanel__footer {
    background:#212121;
    align-items: center;
    bottom: 0;
    display: flex;
    height: var(--offset-height);
    justify-content: space-between;
    opacity: 0;
    padding-bottom: 12px;
    padding-left: var(--six-site-margin);
    padding-right: var(--six-site-margin);
    padding-top: 12px;
    position: absolute;
    width: 100%;
}
.IssueFilterPanel__footer button.IssueFilterPanel__clear-trigger {
    display: none;
}
.IssueFilterPanel__footer button.IssueFilterPanel__clear-trigger.mobile {
    position: absolute;
    top: 0;
}
@media (max-width: 1023px) {
    .IssueFilterPanel__footer button.IssueFilterPanel__clear-trigger.is-active.mobile {
        display: inline-block;
    }
}
@media (min-width: 1024px) {
    .IssueFilterPanel__footer button.IssueFilterPanel__clear-trigger.is-active.desktop {
        display: inline-block;
    }
}
.IssueFilterPanel__footer button svg {
    height: 6px;
    margin-top: -4px;
    transform: rotate(180deg);
    width: 12px;
}
@media (max-width: 1023px) {
    .IssueFilterPanel__footer button.is-active + .IssueFilterPanel__footer-total {
        opacity: 0;
        pointer-events: none;
    }
}
.IssueFilterPanel__footer-left {
    position: relative;
}
.IssueFilterPanel__footer-center {
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
}
.IssueFilterPanel__footer-right > button {
    padding: 0;
}
.IssueFilterPanel__footer-right > button svg {
    margin-bottom: 0;
}
.IssueFilterPanel__footer button,
.IssueFilterPanel__footer-total {
    --line-height: 1.3333333333;
    font-family: "Brutal", serif;
    font-size: calc(0.13793vw + 12.24138px);
    font-style: normal;
    font-weight: 700;
    font-stretch: 200%;
    line-height: 1.3333333333;
    text-transform: uppercase;
    font-feature-settings: "case";
    color: #EBEBEB
}
@media (min-width: 1440px) {
    .IssueFilterPanel__footer button,
    .IssueFilterPanel__footer-total {
        font-size: 19px;
    }
}
@media (max-width: 739px) {
    .IssueFilterPanel__footer button,
    .IssueFilterPanel__footer-total {
        font-size: 13px;
    }
}
.IssueFilterPanel__footer button em,
.IssueFilterPanel__footer-total em {
    font-family: "Brutal", serif;
    font-style: italic;
}
@media (max-width: 1023px) {
    .IssueFilterPanel__footer-total span {
        display: none;
    }
}
.IssueFilterPanel__active-issue {
    align-items: center;
    display: flex;
    flex-direction: column;
}
.IssueFilterPanel__active-issue > p {
    --line-height: 1.3333333333;
    align-items: center;
    display: flex;
    font-family: "Brutal", serif;
    font-size: calc(0.13793vw + 12.24138px);
    font-style: normal;
    font-weight: 700;
    font-stretch: 200%;
    justify-content: center;
    line-height: 1.3333333333;
    color: #EBEBEB
}
@media (min-width: 1440px) {
    .IssueFilterPanel__active-issue > p {
        font-size: 15px;
    }
}
@media (max-width: 739px) {
    .IssueFilterPanel__active-issue > p {
        font-size: 13px;
    }
}
.IssueFilterPanel__active-issue > p em {
    font-family: "Brutal", serif;
    font-style: italic;
}
.IssueFilterPanel__active-issue > p .serif {
    text-wrap: nowrap;
    --line-height: 1.3333333333;
    font-family: "Brutal", serif;
    font-size: calc(0.13793vw + 12.24138px);
    font-style: normal;
    font-weight: 700;
    font-stretch: 200%;
    line-height: 1.3333333333;
    margin-left: 0.25rem;
    text-transform: uppercase;
}
@media (min-width: 1440px) {
    .IssueFilterPanel__active-issue > p .serif {
        font-size: 15px;
    }
}
@media (max-width: 739px) {
    .IssueFilterPanel__active-issue > p .serif {
        font-size: 13px;
    }
}
.IssueFilterPanel__active-issue > p .serif b,
.IssueFilterPanel__active-issue > p .serif strong {
    font-weight: 700;
    text-transform: uppercase;
}
.IssueFilterPanel__active-issue > p .serif em {
    font-family: "Kinfolk-Serif-Text-Italic", serif;
    font-style: italic;
}
@media (max-width: 1023px) {
    .IssueFilterPanel__active-issue > p .serif span {
        display: none;
    }
}
.IssueFilterPanel__active-issue img {
    bottom: 10px;
    display: none;
    height: 110px;
    left: 50%;
    object-fit: contain;
    position: absolute;
    transform: translateX(-50%);
    width: 75px;
}
.IssueFilterPanel__active-issue img.is-active {
    display: block;
}