/**
 * Theme Name:     Cardfront
 * Author:         Web Samurai Designs
 * Template:       storefront
 * Text Domain:	   cardfront
 * Description:    Your perfect theme for TCG and card related products!
 */

/* putting media query styles here so they aren't immediately overwritten by the general styling*/
/* screens less than 766px (mobile)*/
@media (max-width: 766px){
	.product{
		width: 100%;
	}
	
	ul.products.columns-3{
		padding: 0px;
	}
	
	.wcf-horizontal-grid{
		display: flex;
		flex-wrap: wrap !important;
	}	
	
	.woocommerce-result-count {
	display:none
	}
	
	#masthead{
		padding: 0;
	}
	
	button.wcf-button{
		margin-right: 1.5rem;
	}
}

/* mobile 3 columns layout */
@media only screen and (max-width:768px) {
li a img {
		height: 200px;
		width: 180px;
	}
		
.woocommerce-page ul.products li.product{
         flex: 4 4 30%;
         -webkit-box-flex: 0;
         padding: 5px;
				 margin-bottom: .5em !important;
				 margin-right: .5em !important;
    }
	
	.woocommerce-page ul.products li.product:nth-child(3n){
		 margin-right: 0em !important;
	}
	
h2.woocommerce-loop-product__title{
		font-size: .7rem !important;
	}

	span.price {
		font-size: .8rem;
		margin-bottom: .3rem !important;
	}
	
	ul.products li.product .button {
		font-size: .7rem !important;
	}
}

/* sets filter bar to be responsive when screensize is less than 966px (keeps bar from extending offscreen) */
@media (max-width: 966px){
	.wcf-horizontal-grid{
		display: flex;
		flex-wrap: wrap !important;
	}	
}

/* screens larger than 766px (not mobile) */
@media (min-width: 766px){
	.product{
		width: 100%;
	}
	
	.wcf-ag.wcf-ai{
		margin-right: 0px;
	}
	
	.site-main ul.products li.product{
		width: 272px;
	}
}

/* General styling (not media query) */

body{
	background-color: #FAF9F6
}
/* main content */
#content{
	margin-top: 6.25rem;
}

#masthead.site-header, div.storefront-breadcrumb{
	margin-bottom: 0px;
}

/* always show whole card picture */
img {
	object-fit: contain;
}

/* scoot the title of the product in gallery mode up a bit */
ul.products li.product img, ul.products .wc-block-grid__product img, .wc-block-grid__products li.product img, .wc-block-grid__products .wc-block-grid__product img {
	margin: 0 auto .5em;
}

/* always have 3 columns of products */
.woocommerce-page ul.products{
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
         flex-flow: row wrap;
}
.woocommerce-page ul.products li.product{
	flex: 0 0 30%;
	-webkit-box-flex: 0;
	padding: 5px;
	margin-bottom: 1em;
	margin-right: 1em;
}


/* pokemon background image tint*/
body.custom-background {
	background-size: 50%;
	box-shadow: inset 0 0 0 2000px rgba(199, 191, 178, 0.3);
}

/* yellow background surrouding product */
.product {
	padding: 2em;
	box-shadow: inset 0 0 0 2000px rgba(255, 255, 178, 0.5);
}


/* product section on main shop page */

.products.wcf-loop-template{
	padding-top: 0px;
}

/* product items */

ul.products{
	padding: calc(.25rem + 2vw);
}

li.product:hover{
	box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

li.product{
	width: 272px !important;
	background-color: #FAF9F6;
	border-radius: 5%;
	padding: 1rem;
	box-shadow: 0 5px 10px rgba(154,160,185,.05), 0 15px 40px rgba(166,173,201,.2);
}
	/* set all items to same size */
li a img{
	height: 300px;
	width: 243px;
}

li a h2{
	height: 40px;
	display: -webkit-box; 
	-webkit-line-clamp: 2; 
	-webkit-box-orient: vertical; 
	overflow: hidden;
}

/* main navbar */

.storefront-primary-navigation{
	background-color: black;
}

.main-navigation ul li a{
	color: white;
	font-weight: bold;
}

.cart-contents span{
	color: white;
}

	/* checkout page dropdown in main navbar	 */
.children .page_item{
	background-color: #353839;
	color: white;
	border-bottom-left-radius: .5rem;
	border-bottom-right-radius: .5rem;
}

/* hide title section of products (shop), cart, & checkout pages. Also hide triple dot block separator in cart page -- consider removing from html file instead if using copy of page in child theme*/

.woocommerce-products-header, .entry-header, .is-style-dots{
	display: none;
}

/* style for product filter navbar */

.wcf-horizontal-popover{
	font-weight: bold;
	height: 100%;
	align-content: center;
}

.wcf-horizontal-grid.wcf-af{
	flex-wrap: nowrap;
	column-gap: .25rem;
}

/* hide footer "built with WooCommerce" -- consider removing from html file instead if using copy of page in child theme */
.site-info{
	display: none;
}

/* smaller site logo */
.site-header .site-logo-anchor img,.site-header .site-logo-link img,.site-header .custom-logo-link img {
    width: 100%;
    max-width: 150px
}

/* empty cart page styling */
.wc-block-cart__empty-cart__title{
	margin-bottom: 15rem;
}

/* remove picture of product in card because it is too distorted */
img.attachment-woocommerce_thumbnail.size-woocommerce_thumbnail {
	display:none;
}

/* make filter dropdowns consistent size */
.wcf-ai{
	margin-right: 0px !important;
}

.wcf-aj{
	margin-bottom: 16px !important;
}