/* General Section */

div#container section {padding:1rem;}
div#container section h2 {font-size:1.5rem; margin:1rem 0 0; text-transform:uppercase; text-align:center;}



/* Categories Section */

div#container section#categories {padding:.5rem;}
div#container section#categories main {display:grid; grid-template-areas: 'a b c' 'd d d'; grid-gap:.5rem;}

div#container section#categories a.item {background-size:cover;}
/* div#container section#categories a.item {display:flex; flex-direction:column; justify-content:center; align-items:center;} */
div#container section#categories a.item {position:relative;}
div#container section#categories a.item {background-color:var(--blue); background-size:cover; background-position:center;}

div#container section#categories a.item.a {grid-area:a; background-image:url('pic/shoes.jpg');}
div#container section#categories a.item.b {grid-area:b; background-image:url('pic/hat.jpg');}
div#container section#categories a.item.c {grid-area:c; background-image:url('pic/tshirt.jpg');}
div#container section#categories a.item.d {grid-area:d; background-image:url('pic/sunglasses.jpg');}

div#container section#categories a.item div.caption {background-color:#000; color:#FFF; font-weight:bold; text-transform:uppercase; padding:.5em .5em .25em; border-radius:.5rem; font-size:1.5rem; white-space:nowrap;}
div#container section#categories a.item div.caption {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);}

div#container section#categories a.item::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%;}
div#container section#categories a.item:hover::after {background-color:#0003;}



/* Featured Products Section */

/* div#container section#products {} */
div#container section#products div.inner {display:flex; flex-direction:row; justify-content:stretch; align-items:stretch;}

div#container section#products div.inner main {flex-grow:1;}
div#container section#products div.inner main {display:grid; grid-template-columns:repeat(4,1fr); grid-gap:.5rem; padding:1rem;}

div#container section#products div.inner main div.item {border:1px solid var(--offwhite); border-radius:.25rem; display:flex; flex-direction:column; align-items:stretch;}
/* div#container section#products div.inner main div.item a.photo {text-decoration:none; color:inherit;} */
div#container section#products div.inner main div.item a.photo {background-color:var(--offwhite); background-size:cover; background-position:center; width:100%; padding-top:100%; border-bottom:1px solid var(--offwhite);}
div#container section#products div.inner main div.item div.content {display:flex; flex-direction:column; align-items:stretch; text-align:center; padding:.75rem;}
div#container section#products div.inner main div.item div.content h3.productname {font-size:1.25rem; margin:0; margin-top:.5rem;}
/* div#container section#products div.inner main div.item div.content h3.productname {text-align:left;} */
div#container section#products div.inner main div.item div.content h3.productname a.name {font-weight:300; color:inherit; text-decoration:none;}
div#container section#products div.inner main div.item div.content div.productdescription {color:#0008; margin-top:.5rem; display:none;}
div#container section#products div.inner main div.item div.content div.productrating {display:flex; flex-direction:row; justify-content:center; align-items:flex-end; margin-top:.5rem;}
/* div#container section#products div.inner main div.item div.content div.productrating {justify-content:flex-start;} */
div#container section#products div.inner main div.item div.content div.productrating div.rating {display:flex; flex-direction:row;}
div#container section#products div.inner main div.item div.content div.productrating div.rating {font-size:1.25rem; color:var(--blue);}
div#container section#products div.inner main div.item div.content div.productrating div.numratings {font-size:.9rem; color:var(--grey); margin-left:.25rem;}
div#container section#products div.inner main div.item div.content div.productrating div.numratings:before {content:'(';}
div#container section#products div.inner main div.item div.content div.productrating div.numratings::after {content:')';}
div#container section#products div.inner main div.item div.content div.productprice {display:flex; flex-direction:row; justify-content:center; align-items:flex-end; margin-top:.5rem;}
/* div#container section#products div.inner main div.item div.content div.productprice {justify-content:flex-start;} */
div#container section#products div.inner main div.item div.content div.productprice a.price {font-size:1.375rem; font-weight:500; color:var(--blue); text-decoration:none;}
div#container section#products div.inner main div.item div.content div.productprice a.price:before {content:'$';}
div#container section#products div.inner main div.item div.content div.productprice a.exprice {font-size:.85rem; font-weight:100; color:var(--grey); text-decoration:line-through; margin-bottom:.25em; margin-left:.375rem;}
div#container section#products div.inner main div.item div.content a.ctabtn {background-color:#000; color:#FFF; text-decoration:none; font-weight:600; text-align:center; text-transform:uppercase; padding:1rem 1rem .75rem; border:0 none; border-radius:.25rem; margin-top:.5rem;}

div#container section#products div.inner aside.refine {display:none;}
div#container section#products div.inner aside.refine {flex-grow:0; width:20rem; text-align:center;}




@media screen and (min-width:60rem) {

	/* Categories Section */
	div#container section#categories a.item {padding-top:96%;}
	div#container section#categories a.item.d {padding-top:32%;}

	/* Featured Products Section */
}

@media screen and (max-width:60rem) {

	/* Categories Section */
	div#container section#categories a.item {padding-top:96%;}
	div#container section#categories main {display:grid; grid-template-areas: 'a b' 'c d';}

	/* Featured Products Section */
	div#container section#products div.inner {flex-direction:column;}
	div#container section#products div.inner main {grid-template-columns:repeat(3,1fr);}
	div#container section#products div.inner main div.item div.content h3.productname {font-size:1.15rem;}
	div#container section#products div.inner main div.item div.content div.productrating div.rating {font-size:1rem;}
	div#container section#products div.inner main div.item div.content div.productrating div.numratings {font-size:.75rem;}
	div#container section#products div.inner main div.item div.content div.productprice a.price {font-size:1.125rem;}
	div#container section#products div.inner main div.item div.content div.productprice a.exprice {font-size:.75rem;}
	div#container section#products div.inner main div.item div.content a.ctabtn {font-size:.75rem;}
	div#container section#products div.inner aside.refine {width:auto;}
}

@media screen and (max-width:48rem) {

	/* Categories Section */

	/* Featured Products Section */
	div#container section#products div.inner main {grid-template-columns:repeat(2,1fr);}
}

@media screen and (max-width:32rem) {

	/* Categories Section */
	div#container section#categories main {display:grid; grid-template-areas: 'a' 'b' 'c' 'd';}

	/* Featured Products Section */
	div#container section#products div.inner main {grid-template-columns:1fr;}
}