.cards{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start
}
.card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0 1px 1px 0 rgba(60, 64, 67, .08), 0 1px 3px 1px rgba(60, 64, 67, .16);
    transition: box-shadow 135ms cubic-bezier(.4, 0, .2, 1), width 235ms cubic-bezier(.4, 0, .2, 1);
    padding: 1rem;
    width: calc(100% - 2rem);
    margin: 1rem;
    min-height: 0
}

@media screen and (min-width:580px) {
    .card{
        width: calc(50% - 4rem)
    }
}
@media screen and (min-width:768px) {
    .card{
        width: calc(33.33333% - 4rem)
    }
}
@media screen and (min-width:1200px) {
    .card{
        width: calc(25% - 2rem)
    }
}

.card:active,
.card:hover,
.card:link,
.card:visited {
    color: #000;
    text-decoration: none;
    cursor: pointer
}
.card:hover {
    box-shadow: 0 1px 3px 1px rgba(60, 64, 67, .2), 0 2px 8px 4px rgba(60, 64, 67, .1)
}
.card__image{
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block
}
@media(-ms-high-contrast:none),
screen and (-ms-high-contrast:active) {
    .card__image{
        max-height: 300px
    }
}
.card__name{
    font-size: 1.25rem;
    color: #000;
    margin: 0 0 .5rem;
    word-break: break-word;
}
.card__subtitle, .card__description{
    font-size: 0.8rem;
    color: #000;
    margin: 10px 0;
}
.card__description{
    color: #666;
}
@media (min-width: 993px){
    .card__name{
        font-size: 1.5rem;
    }
    .card__subtitle, .card__description{
        font-size: 1rem;
    }
}
.card__price{
    display: block;
    font-size: .9rem;
    color: #a2a2a2;
    margin-top: 1rem
}
.card__banner__heading{
    font-size: 1.5rem;
    letter-spacing: .02rem;
    text-transform: uppercase
}
.card__banner__text{
    line-height: 1.5rem
}
.card__banner__cta{
    font-size: .9rem;
    text-transform: uppercase;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2rem
}
.card__banner__cta__svg{
    margin-left: .5rem;
    height: .9rem;
    width: .9rem
}
.visually-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0
}
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
h1 {
    font-size: 2.5em
}
h1,
h2 {
    font-family: Oswald, Roboto, Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, Prompt, sans-serif;
    font-weight: 400;
    letter-spacing: .05rem;
    margin: 1rem 0
}
h2 {
    font-size: 1.5em
}
h3 {
    font-size: 1.25em
}
h3,
h4 {
    font-family: Oswald, Roboto, Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, Prompt, sans-serif;
    font-weight: 400;
    letter-spacing: .05rem;
    margin: 1rem 0
}
h4 {
    font-size: 1.2em
}
h5 {
    font-size: 1.1em
}
h5,
h6 {
    font-family: Oswald, Roboto, Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, Prompt, sans-serif;
    font-weight: 400;
    letter-spacing: .05rem;
    margin: 1rem 0
}
h6 {
    font-size: 1em
}
a {
    text-decoration: underline;
    color: #000;
    transition: color .2s
}
a:active,
a:focus {
    color: #757575
}
a:hover {
    color: #007cc3
}
:lang(ja-jp) * h1,
:lang(ja-jp) * h2,
:lang(ja-jp) * h3,
:lang(ja-jp) * h4,
:lang(ja-jp) * h5,
:lang(ja-jp) * h6,
:lang(ja-jp) .copy h1,
:lang(ja-jp) .copy h2,
:lang(ja-jp) .copy h3,
:lang(ja-jp) .copy h4,
:lang(ja-jp) .copy h5,
:lang(ja-jp) .copy h6,
:lang(ko-kr) * h1,
:lang(ko-kr) * h2,
:lang(ko-kr) * h3,
:lang(ko-kr) * h4,
:lang(ko-kr) * h5,
:lang(ko-kr) * h6,
:lang(ko-kr) .copy h1,
:lang(ko-kr) .copy h2,
:lang(ko-kr) .copy h3,
:lang(ko-kr) .copy h4,
:lang(ko-kr) .copy h5,
:lang(ko-kr) .copy h6,
:lang(zh-cn) * h1,
:lang(zh-cn) * h2,
:lang(zh-cn) * h3,
:lang(zh-cn) * h4,
:lang(zh-cn) * h5,
:lang(zh-cn) * h6,
:lang(zh-cn) .copy h1,
:lang(zh-cn) .copy h2,
:lang(zh-cn) .copy h3,
:lang(zh-cn) .copy h4,
:lang(zh-cn) .copy h5,
:lang(zh-cn) .copy h6,
:lang(zh-tw) * h1,
:lang(zh-tw) * h2,
:lang(zh-tw) * h3,
:lang(zh-tw) * h4,
:lang(zh-tw) * h5,
:lang(zh-tw) * h6,
:lang(zh-tw) .copy h1,
:lang(zh-tw) .copy h2,
:lang(zh-tw) .copy h3,
:lang(zh-tw) .copy h4,
:lang(zh-tw) .copy h5,
:lang(zh-tw) .copy h6 {
    font-family: Oswald, Roboto, Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, sans-serif
}
:lang(ja-jp) a,
:lang(ja-jp) button,
:lang(ja-jp) button.caption-button,
:lang(ja-jp) div,
:lang(ja-jp) p,
:lang(ja-jp) span,
:lang(ko-kr) a,
:lang(ko-kr) button,
:lang(ko-kr) button.caption-button,
:lang(ko-kr) div,
:lang(ko-kr) p,
:lang(ko-kr) span,
:lang(zh-cn) a,
:lang(zh-cn) button,
:lang(zh-cn) button.caption-button,
:lang(zh-cn) div,
:lang(zh-cn) p,
:lang(zh-cn) span,
:lang(zh-tw) a,
:lang(zh-tw) button,
:lang(zh-tw) button.caption-button,
:lang(zh-tw) div,
:lang(zh-tw) p,
:lang(zh-tw) span {
    font-family: Roboto, Noto Sans TC, Noto Sans SC, Noto Sans JP, Noto Sans KR, sans-serif
}
:lang(vi-vn) * h1,
:lang(vi-vn) * h2,
:lang(vi-vn) * h3,
:lang(vi-vn) * h4,
:lang(vi-vn) * h5,
:lang(vi-vn) * h6,
:lang(vi-vn) .copy h1,
:lang(vi-vn) .copy h2,
:lang(vi-vn) .copy h3,
:lang(vi-vn) .copy h4,
:lang(vi-vn) .copy h5,
:lang(vi-vn) .copy h6 {
    font-family: Roboto Condensed, Roboto, sans-serif
}
:lang(vi-vn) a,
:lang(vi-vn) button,
:lang(vi-vn) button.caption-button,
:lang(vi-vn) div,
:lang(vi-vn) p,
:lang(vi-vn) span {
    font-family: Roboto, sans-serif
}
:lang(th-th) * h1,
:lang(th-th) * h2,
:lang(th-th) * h3,
:lang(th-th) * h4,
:lang(th-th) * h5,
:lang(th-th) * h6,
:lang(th-th) .copy h1,
:lang(th-th) .copy h2,
:lang(th-th) .copy h3,
:lang(th-th) .copy h4,
:lang(th-th) .copy h5,
:lang(th-th) .copy h6 {
    font-family: Oswald, Roboto, Prompt, sans-serif;
}
:lang(th-th) a,
:lang(th-th) button,
:lang(th-th) button.caption-button,
:lang(th-th) div,
:lang(th-th) p,
:lang(th-th) span {
    font-family: Roboto, Prompt, sans-serif;
}
.results {
    background: #eee;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .16);
    padding: 2rem 0
}
.results__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem
}
.ais-no-results,
.ais-stats {
    font-family: Roboto, sans-serif;
}
.ais-stats {
    text-align: right;
    padding: 0 1rem 1rem 2rem
}
.ais-InstantSearch label{
    margin-bottom: 0;
}
.ais-SearchBox-form {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem
}
.ais-SearchBox-form .ais-SearchBox-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    transition: border-bottom .25s ease;
    padding: 3rem 0;
    font-size: 1.5rem;
    font-family: Roboto, sans-serif;
    display: block;
    background: 0 0;
    -webkit-appearance: none;
    text-indent: 1rem
}
@media screen and (min-width:1200px) {
    .ais-SearchBox-form .ais-SearchBox-input {
        padding: 3rem 0
    }
}
.ais-SearchBox-form .ais-SearchBox-input:focus {
    outline: none;
    border-bottom: 1px solid rgba(60, 64, 67, .16)
}
.ais-SearchBox-form .ais-SearchBox-input:focus::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none
}
.ais-SearchBox-form .ais-SearchBox-submit {
    display: none
}
.ais-SearchBox-form .ais-SearchBox-reset {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 1rem;
    background: #fff;
    border: none;
    cursor: pointer;
}
@media screen and (min-width:1200px) {
    .ais-SearchBox-form .ais-SearchBox-reset {
        right: 2rem
    }
}

.ais-Pagination {

}

.ais-Pagination-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 800px;
    padding: 4rem 2rem 0;
    justify-content: center
}

.ais-Pagination-item {
    list-style: none;
    margin: .5rem;
    border: 1px solid #000;
    color: #000
}
.ais-Pagination-item a, .ais-Pagination-item span {
    display: block;
    padding: .5rem .75rem
}
.ais-Pagination-item a:active,
.ais-Pagination-item a:focus,
.ais-Pagination-item a:hover,
.ais-Pagination-item a:link,
.ais-Pagination-item a:visited {
    color: #000;
    background: 0 0;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    transition: all .2s ease
}
.ais-Pagination-item--selected,
.ais-Pagination-item a:hover {
    background: #000;
    color: #fff
}

.ais-Pagination-item--selected a.ais-Pagination-link:active,
.ais-Pagination-item--selected a.ais-Pagination-link:focus,
.ais-Pagination-item--selected a.ais-Pagination-link:hover,
.ais-Pagination-item--selected a.ais-Pagination-link:link,
.ais-Pagination-item--selected a.ais-Pagination-link:visited {
    color: #fff
}