@import url("https://use.typekit.net/xub5gtk.css");
@import url("spectre.min.css");
@import url("pretty-checkbox.css");

* { box-sizing: border-box; margin: 0; padding: 0 }

/* Override Spectre's defaults for slightly larger margins
--------------------------------- */

.container { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box }
.columns { margin-left: -0.5rem; margin-right: -0.5rem }
.column { padding-left: 1rem; padding-right: 1rem; box-sizing: border-box }
.panel { border: none }
.btn { font-size: 1.4rem; padding: 1rem 2rem; line-height: 1; display: inline-block; height: auto; border-radius: 0.3rem }
.btn.btn-primary { background-color: #FE4B45; border-color: #FE4B45 }
.btn.btn-primary:hover, .btn.btn-primary:focus { background-color: #F00901; border-color: #F00901 }
.btn.btn-link { color: #989788 }
.btn.btn-link:hover, .btn.btn-link:focus { color: #737264 }

html { font-size: 62.5% }

body { color: #3D3E56; font-family: "aktiv-grotesk", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-size: 1.6em; font-weight: 400; font-style: normal; letter-spacing: 0; background: #3D3E56; line-height: 1.5; text-rendering: optimizeLegibility; overflow-x: hidden; overflow-y: scroll }

.button, button, input[type='button'], input[type='reset'], input[type='submit'] { background-color: #FE4B45; border: 0.1rem solid #FE4B45; border-radius: 0.2rem }
.button, button, input[type='button'], input[type='reset'], input[type='submit'] { padding: 0 2rem }
.button.button-clear, button.button-clear, input[type='button'].button-clear, input[type='reset'].button-clear, input[type='submit'].button-clear { color: #989788 }
input { font-family: "aktiv-grotesk", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight: 300; font-style: normal }

a { color: inherit; text-decoration: underline }
a:hover { color: inherit; text-decoration: none }


/* Wantful styles
--------------------------------- */

.pretty input:checked ~ .state.p-primary label:after, .pretty.p-toggle .state.p-primary label:after { background-color: #FE4B45 !important }

.pnav { display: inline-block; margin: 1.2rem 1.2rem 0 1.2rem; border: 0.1rem solid rgba(254,75,69,0); width: 2.4rem; height: 2.4rem; line-height: 2.4rem; padding-top: 0.2rem; text-align: center; border-radius: 0.2rem }
a.pnav:hover { border-color: rgba(254,75,69,0.8) }
span.pnav img { opacity: 0.2 }

.mt-full { margin-top: 6rem }
.mt-half { margin-top: 1.5rem }

.inverted { color: rgba(255,255,255,0.3); font-weight: 300 }

.product-card { background-color: #F4F4F4; border-radius: 0.2rem; transition: transform 0.25s ease }
.product-card:hover { transform: translateY(-0.2rem) }
.product-card footer { padding: 2rem }
.product-card figure { width: 100%; margin: 0; border-radius: 0.2rem 0.2rem 0 0 }
.product-card figure img { border-radius: 0.2rem 0.2rem 0 0; display: block }
.product-card .shop { color: #989788; text-transform: uppercase; font-size: 1.2rem; font-weight: 400; letter-spacing: 0.1rem; display: block }
.product-card .title { display: block; color: #3D3E56; margin: 0.3rem 0; text-decoration: none }
.product-card .price { display: block; color: #989788; font-size: 1.4rem }
.masonry .product-card { margin-bottom: 2rem }

#page { padding-top: 8rem }

#header { position: fixed; display: block; top: 0; left: 0; width: 100%; z-index: 9; background-color: #FFFFFF; border-bottom: 1px solid #EAEAEA; height: 5rem }

#nav { position: relative }

#searchform { position: relative; margin-bottom: 0 }
#searchform fieldset { margin-bottom: 0 }
#additionalfields { position: absolute; top: 4.8rem; left: 0; right: 0; background-color: #FFFFFF; border: 1px solid #EAEAEA; box-shadow: 0 2px 4px rgba(0,0,0,0.125); padding-top: 0.5rem; box-sizing: border-box; display: none }

.panel { border-bottom: 1px solid #d1d1d1; padding: 1rem 2rem; margin-bottom: 0.5rem }
.panel:last-child { border-bottom: none; margin-bottom: 0 }
.panel .fielditem { margin-bottom: 0.5rem }
.panel .fielditem label { font-size: 1.4rem; line-height: 1 }

#logo { width: 10rem; height: 5rem; display: block; margin: 0; background: url("img/wantful.svg") left center no-repeat; background-size: contain }
#logo:hover { opacity: 0.8 }
#logo span { visibility: hidden }
#query { border-radius: 0; border: 0; height: 4.9rem; line-height: 5rem; font-size: 1.4rem; padding-left: 2rem; padding-right: 5rem; width: 100% }
#query:focus { border-color: #D1D1D1; background-color: #FBFBFB; outline: 0 }
.visible { display: block !important }

#fs-query { border-right: 0.1rem solid #CCCCCC; border-left: 0.1rem solid #CCCCCC }
#fs-query, #query { margin-bottom: 0 }

#toggle-filters { background: url("img/settings.svg") center center no-repeat; display: block; width: 5rem; height: 5rem; position: absolute; right: 0.5rem; top: 0 }
#toggle-filters span { visibility: hidden }
#toggle-filters .bdg { position: absolute; top: 0.6rem; right: 0.4rem; z-index: 9; font-size: 1rem; letter-spacing: -0.1rem; color: #FFFFFF; font-weight: 400; display: block; width: 1.8rem; height: 1.8rem; line-height: 1.8rem; border-radius: 1.6rem; text-align: center; background-color: #FE4B45; visibility: visible; border: 0.1rem solid #FFFFFF; box-sizing: content-box }

h1 { font-family: "abril-fatface"; font-style: italic; font-weight: 400; color: #989788; font-size: 2.4rem; line-height: 1.4; margin-top: 2rem; word-spacing: 0.5rem }

#footer { width: 100%; background: #35364A url("img/footer.svg") top center no-repeat; padding-top: 24rem; padding-bottom: 3rem }
#footer p { color: rgba(255,255,255,0.25); font-weight: 300; font-size: 1.4rem }

.pagemeta { display: block; margin-bottom: 3rem }


/* Minor alignments that kick in for tablets and beyond */
@media (min-width:841px) {
    
    h1 { font-size: 3.6rem; line-height: 1.25 }
    
}