/* Styles specifically for the shop page (shop.html) */

#header {
    padding-top: 40px;
    text-align: center;
    font-size: calc(1.6vw + 1.7rem);
    font-family: Lato;
}

#description {
    font-family: "League Spartan";
    text-align: center;
    font-size: calc(0.6vw + 0.7rem);
    font-style: italic;
    max-width: min(70vw, 45ch);
    margin: 0 auto;
    padding-top: 10px;
    line-height: calc(0.8vw + 0.8rem);
}

#description > a {
    color: var(--text-color);
}

#description > a:hover {
    color: var(--highlight-color-dark);
}

#shop-section {
    margin: 40px auto 0 auto;
    max-width: 85vw;
    padding-bottom: calc(5vw + 70px);
}

#active-listings {
    border: none;
    border-top: 1px solid var(--text-color);
    padding-top: 20px;

    display: flex;
    flex-wrap: wrap;
    justify-content: baseline;
    gap: calc(1.8vw + 25px);
    row-gap: calc(2.2vw + 50px);
}

legend {
    padding-right: 10px;
    font-size: calc(0.5vw + 1rem);
    font-family: Lato;
}

.shop-disclaimer {
    color: #999;
    margin: 0 auto;
    text-align: center;
    padding-top: calc(1vw + 15px);
    font-weight: 400;
    font-size: calc(0.5vw + 0.9rem);
    width: 70vw;
}

.shop-item {
    width: calc(8vw + 120px);
    height: calc(8vw + 120px);
    border-radius: 5%;
}

.shop-item a {
    text-decoration: none;
}

.shop-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5%;
}

.item-name, .item-price {
    text-align: center;
    padding-top: 3px;
}

.item-name:hover {
    color: var(--highlight-color-dark);
}

.item-name {
    font-size: calc(0.6vw + 0.85rem);
    font-weight: 400;
    font-family: Lato;
    color: #222;
}

.item-price {
    font-size: calc(0.2vw + 0.7rem);
    font-weight: bold;
    font-family: "League Spartan";
    color: black;
}

@media (orientation: portrait) {
    #active-listings {
        justify-content: center;
    }
}