/* Tag styling */
body {
    background: #F8FAFC;
    color: #606c76;
    font-family: 'Roboto', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: .01em;
    line-height: 1.2;
}
a {
    color: #b71c1c;
}
strong {
    font-weight: 700;
}
.soft {
    color: #bbb;
    font-weight: 300;
}
h3 {
    font-size: 0.9em;
    margin-bottom: 0.5em;
    font-weight: normal;
    text-transform: uppercase;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

/* Reset default elements */
details summary {
    cursor: pointer;
}
details summary::-webkit-details-marker {
    display:none;
}
details > summary:first-of-type {
    list-style-type: none;
}

/* Main layout */
body {
    margin: 0;
    padding: 0;
}
.search {
    background: #F1F5F8;
    display: flex;
    align-items: center;
    padding: 1em;
}
.wrapper {
    padding: 1em;
}
    .facets {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 1em;
        overflow: auto;
        scrollbar-width: none; /* Hide scrollbar i Fx */
    }
        .facets > * {
            padding-right: 2em;
        }


/* Components */
.logo {
    margin-right: 1em;
}
.sort-by {
    max-width: 150px;
    margin-right: 1em;
    margin-left: 0.3em;
    flex-grow: 1;
}
    .ais-SortBy-select {
        position: relative;
        font-size: 14px;
        width: 100%;
        min-width: 150px;
        appearance: none;
        font: inherit;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 4px;
        padding: 10px 2px 10px 5px;
        vertical-align: middle;
        white-space: normal;
        height: 100%;
        width: 100%;
    }
.search-box {
    max-width: 300px;
    margin-right: 1em;
    flex-grow: 1;
}
    .ais-SearchBox {
        position: relative;
        white-space: nowrap;
        font-size: 14px;
        width: 100%;
        min-width: 200px;
    }
    .ais-SearchBox-form {
        width: 100%;
    }
    .ais-SearchBox-input {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        font: inherit;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.05);
        border-radius: 4px;
        padding: 10px 10px 10px 35px;
        vertical-align: middle;
        white-space: normal;
        height: 100%;
        width: 100%;
    }
    .ais-SearchBox-submit {
        position: absolute;
        left: 12px;
        top: calc(50% - 18px/2);
    }
        .ais-SearchBox-submit:hover, .ais-SearchBox-submit:focus-within {
            outline: 1px dotted;
        }
        .ais-SearchBox-submitIcon {
            fill: #bfc7d8;
            height: 18px;
            width: 18px;
        }
    .ais-SearchBox-reset {
        margin-left: -22px;
    }
        .ais-SearchBox-resetIcon {
            fill: #bfc7d8;
        }

.stats {
    display: inline-block;
    margin-right: 1em;
    flex-grow: 1;
}
@media screen and (max-width: 530px) {
    .stats {
        display: none;
    }
}
.ref {
    opacity: 0.3;
    filter: grayscale(100%);
    margin-top: 3px;
}
    .ref:hover, .ref:focus-within {
        filter: none;
        opacity: 1;
    }

.hits {}
    .hits:after {
        clear: both;
        content: "";
        display: table;
    }
    .ais-Hits-list {
        margin: 0;
        padding: 0;
        list-style: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
        .ais-Hits-item {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(0,0,0,0.1);
            border-width: 0 1px 1px 0;
        }
        .ais-Highlight-highlighted {
            background: #b71c1c;
            color: white;
        }
        .game-wrapper {
            position: relative;
        }
            .game {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                padding: 10px;
                position: relative;
                height: 130px;
            }
                .game img {
                    min-height: 100px;
                    min-width: 100px;
                    max-height: 100%;
                    max-width: 100%;
                    border-radius: 4px;
                    border: 1px solid rgba(0,0,0,0.2);
                }
                .game-details {
                    background: white;
                    box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
                    border: 1px solid rgba(0,0,0,0.1);
                    border-radius: 3px;
                    left: 8px;
                    position: absolute;
                    top: 8px;
                    width: 350px;
                    z-index: 1;
                }
                    .game-details .heading {
                        padding: 10px 25px 10px 15px;
                        margin: 0;
                    }
                    .game-details .close {
                        cursor: pointer;
                        font-size: 2em;
                        line-height: 1.35em;
                        pointer-events: all;
                        position: absolute;
                        right: 14px;
                        top: 0;
                    }
                        .game-details .close:hover, .game-details .close:focus-within {
                            color: red;
                        }
                    .game-details .properties, .game-details .description {
                        margin-left: 15px;
                        margin-right: 15px;
                    }
                    .properties {
                        font-size: 0.9em;
                        border-collapse: collapse;
                        display: grid;
                        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
                    }
                        .properties div {
                            margin: 0 1em 1em 0;
                        }
                            .properties .expansions {
                                grid-column: 1 / 3;
                            }
                        .properties dt {
                            margin-bottom: 3px;
                            font-weight: bold;
                            text-transform: uppercase;
                        }
                        .properties dd {
                            margin: 0;
                            padding: 0;
                        }
                        .properties ul {
                            margin: 0;
                            padding: 0;
                        }
                            .properties li {
                                list-style: none;
                            }
                    .description {
                        line-height: 1.3;
                    }

.facets .heading {
    margin-top: 0;
}
.facets .clear-all {}
    .ais-ClearRefinements-button {
        background: #b71c1c;
        color: white;
        padding: 3px 8px;
        border-radius: 5px;
        font-size: 0.9em;
    }
    .ais-ClearRefinements-button--disabled {
        display: none;
    }

.facet {}
    .facet .ais-Panel-header {
        white-space: nowrap;
    }
        .facet .ais-Panel-header h3:after{
            content: "▼";
            padding-left: 3px;
        }
    .facet .ais-Panel-body {
        background: #F8FAFC;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
        border: 1px solid rgba(0,0,0,0.1);
        padding: 1em;
        min-width: 200px;
        position: absolute;
        z-index: 1;
        display: none;
    }
    @media (hover: hover) {
        .facet:hover .ais-Panel-body,
        .facet:focus-within .ais-Panel-body {
            display: block;
        }
    }
    .facet a {
        text-decoration: none;
    }
    .facet label {
        cursor: pointer;
        color: #b71c1c;
    }
    .ais-HierarchicalMenu-item, .ais-RefinementList-item, .ais-NumericMenu-item {
        line-height: 2em;
    }
    .ais-HierarchicalMenu-item--selected, .ais-RefinementList-item--selected, .ais-NumericMenu-item--selected {
        font-weight: bold;
    }
    .ais-HierarchicalMenu-list--child {
        font-weight: normal;
    }
    .ais-HierarchicalMenu-count, .ais-RefinementList-count, .ais-NumericMenu-count {
        padding: 5px 8px;
        margin-left: 5px;
        background: #efefef;
        border-radius: 10px;
    }
    .ais-RefinementList-showMore {
        color: gray;
        cursor: pointer;
        font-size: 0.8em;
        margin-left: 2.3em;
    }
        .ais-RefinementList-showMore:hover, .ais-RefinementList-showMore:focus-within {
            outline: 1px dotted;
        }
        .ais-RefinementList-showMore:after {
            content: " »";
        }

.ais-Pagination {
    margin: 1em 0 2em;
}
    .ais-Pagination-item a, .ais-Pagination-item span {
        padding: 5px 8px;
        margin-left: 5px;
        background: #efefef;
        border-radius: 10px;
        text-decoration: none;
    }
    .ais-Pagination-item--disabled a, .ais-Pagination-item--disabled span {
        background: #fff;
        border: 1px #efefef solid;
    }
    .ais-Pagination-item--selected a {
        font-weight: bold;
        border: 2px solid #b71c1c;
    }