.container {
    max-width: 80vw;
}
main {
    display: flex;
    gap: 16px;
}
.filters {
    min-width: 350px;
    max-width: 350px;
}
.buttons {
    width: 100%;
    display: flex;
    justify-content: center;
}
.filters > .buttons > button {
    width: 200px;
    margin: 8px;
}
.results {
    flex-grow: 3;
}
.results > .buttons {
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.results > .buttons > button {
    margin-bottom: 0;
    padding: 8px;
    width: 120px;
}
.spacer
{
    flex-grow: 1;
}
.product-grid {
    transition: opacity 150ms;
}
.product-grid.stale {
    opacity: 0.5;
}
.product-grid > article
{
    min-width: 100%;
}
.product-grid > article > header
{
    display: flex;
    justify-content: space-between;
}
.product-links {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.product-links > a[role=button] {
    width: 10rem;
}
.product-desc > .unavailable {
    margin: 16px 0 0;
    text-align: center;
    font-style: italic;
    color: var(--pico-muted-color);
}
.slider {
    margin: 40px 8px;
}
th {
    font-weight: bold;
}
#noresults {
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
}
.loading {
    position: fixed;
    width: 200px;
    height: 200px;
    left: 50%;
    top: 50%;
    margin-top: -100px;
    margin-left: -100px;
    animation-name: mulShdSpin;
    animation-duration: 750ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    font-size: 200px;
    transform: scale(0.2);
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
@keyframes mulShdSpin {
    0%,
    100% {
        box-shadow: 0em -2.6em 0em 0em #000, 1.8em -1.8em 0 0em rgba(0,0,0,0.2), 2.5em 0em 0 0em rgba(0,0,0,0.2), 1.75em 1.75em 0 0em rgba(0,0,0,0.2), 0em 2.5em 0 0em rgba(0,0,0,0.2), -1.8em 1.8em 0 0em rgba(0,0,0,0.2), -2.6em 0em 0 0em rgba(0,0,0,0.5), -1.8em -1.8em 0 0em rgba(0,0,0,0.7);
    }

    12.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.7), 1.8em -1.8em 0 0em #000, 2.5em 0em 0 0em rgba(0,0,0,0.2), 1.75em 1.75em 0 0em rgba(0,0,0,0.2), 0em 2.5em 0 0em rgba(0,0,0,0.2), -1.8em 1.8em 0 0em rgba(0,0,0,0.2), -2.6em 0em 0 0em rgba(0,0,0,0.2), -1.8em -1.8em 0 0em rgba(0,0,0,0.5);
    }

    25% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.5), 1.8em -1.8em 0 0em rgba(0,0,0,0.7), 2.5em 0em 0 0em #000, 1.75em 1.75em 0 0em rgba(0,0,0,0.2), 0em 2.5em 0 0em rgba(0,0,0,0.2), -1.8em 1.8em 0 0em rgba(0,0,0,0.2), -2.6em 0em 0 0em rgba(0,0,0,0.2), -1.8em -1.8em 0 0em rgba(0,0,0,0.2);
    }

    37.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.2), 1.8em -1.8em 0 0em rgba(0,0,0,0.5), 2.5em 0em 0 0em rgba(0,0,0,0.7), 1.75em 1.75em 0 0em #000, 0em 2.5em 0 0em rgba(0,0,0,0.2), -1.8em 1.8em 0 0em rgba(0,0,0,0.2), -2.6em 0em 0 0em rgba(0,0,0,0.2), -1.8em -1.8em 0 0em rgba(0,0,0,0.2);
    }

    50% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.2), 1.8em -1.8em 0 0em rgba(0,0,0,0.2), 2.5em 0em 0 0em rgba(0,0,0,0.5), 1.75em 1.75em 0 0em rgba(0,0,0,0.7), 0em 2.5em 0 0em #000, -1.8em 1.8em 0 0em rgba(0,0,0,0.2), -2.6em 0em 0 0em rgba(0,0,0,0.2), -1.8em -1.8em 0 0em rgba(0,0,0,0.2);
    }

    62.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.2), 1.8em -1.8em 0 0em rgba(0,0,0,0.2), 2.5em 0em 0 0em rgba(0,0,0,0.2), 1.75em 1.75em 0 0em rgba(0,0,0,0.5), 0em 2.5em 0 0em rgba(0,0,0,0.7), -1.8em 1.8em 0 0em #000, -2.6em 0em 0 0em rgba(0,0,0,0.2), -1.8em -1.8em 0 0em rgba(0,0,0,0.2);
    }

    75% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.2), 1.8em -1.8em 0 0em rgba(0,0,0,0.2), 2.5em 0em 0 0em rgba(0,0,0,0.2), 1.75em 1.75em 0 0em rgba(0,0,0,0.2), 0em 2.5em 0 0em rgba(0,0,0,0.5), -1.8em 1.8em 0 0em rgba(0,0,0,0.7), -2.6em 0em 0 0em #000, -1.8em -1.8em 0 0em rgba(0,0,0,0.2);
    }

    87.5% {
        box-shadow: 0em -2.6em 0em 0em rgba(0,0,0,0.2), 1.8em -1.8em 0 0em rgba(0,0,0,0.2), 2.5em 0em 0 0em rgba(0,0,0,0.2), 1.75em 1.75em 0 0em rgba(0,0,0,0.2), 0em 2.5em 0 0em rgba(0,0,0,0.2), -1.8em 1.8em 0 0em rgba(0,0,0,0.5), -2.6em 0em 0 0em rgba(0,0,0,0.7), -1.8em -1.8em 0 0em #000;
    }
}

@media (max-width: 1200px)
{
    main {
        flex-wrap: wrap;
    }
    .container {
        max-width: 90vw;
        justify-content: center;
    }
    .filters {
        flex-grow: 1;
    }
}