/*
SHOP: Styles shop items, cart and product page

*/
.woocommerce-LoopProduct-link>h2, .wc-block-grid__product-title>a{
    color:black !important;
    font-size: 15px !important;
}

thead{
    display: none;
}
/*
 * Shop Page
 * 
 *  - Shop Results
 *  - Container
 *  - Cell (Product)
 *  - Pagenation
 * */

/* Shop Results 

Centers the content of the page title, result count, and sorting tag. */
.woocommerce-products-header__title, .woocommerce-result-count, .woocommerce-ordering{
    display: flex;
    justify-content: center;
}

.woocommerce-ordering{
    margin-bottom: 2em;
}

/* Container 

Added max width to make design more consitent in bigger screens. Margin is used to center the content.*/
ul.products{
	padding: .25em;
	max-width: 1300px;
	margin:auto !important;
}

/* Cell (Product)*/
.products{
    margin: 0 auto;
}
/* Product Card
    - Container
    - Title
    - Pricing
    - On Hover
    - Button
    - Thumbnail
    - Out of Stock

Adds Padding to give space for elements inside it. Adds a width to make the design consitent in smaller screens. */
.products > .product.type-product{
    padding: .5em;
    max-width: 275px;
    border:1px solid;
	border-radius: 8px;
}

/*Title

Adds a min-height value to give cards a similar height, making the design more consistent. */
.woocommerce-loop-product__title{
    min-height: 70px;
	text-align:center;
}

/* Price

Centers the pricing so it's more consistent with the design. */
.price{
    display:block;
	text-align:center;
    color:black;
}

/* On Hover

Adds a box shadow when the user hovers on the Product Card.  */
.products>.product:hover, .wc-block-grid__product.wc-block-layout:hover{
    box-shadow: 0px 0px 5px black;
}

/* Button

Alters spacing of the button for the Product Card */
.add_to_cart_button, .woocommerce-loop-product__title, .price{
    margin: .5em .25em;
}
.products>.product, .wc-block-grid__product.wc-block-layout {
    grid-template-columns: auto;
    transition: .1s ease;
}

/* Product Thumbnail

Gives a width and height for product thumbnails making the design consistent with different image sizes.*/
.attachment-woocommerce_thumbnail{
    width: 250px;
	height: 250px;
}

.size-woocommerce_thumbnail{
    object-fit: cover;
    margin:auto;
}

/* Out of Stock 

Adds a before element that let's the user know when a card's outof stock before clicking it.*/
.outofstock:before{
    content: 'OUT OF STOCK';
	font-weight: bold;
	position:absolute;
	top: 0%;
	width: 100%;
	text-align:center;
	color: red;
	background: white;
	border-radius: 8px;
	font-size: 12px;
}


/* 
 * Pagenation
 * 
 * - Container
 * - Child
 * */

 /* Container
 
 Centers the links and adds top and bottom spacing. Flex box spaces out links responsively.*/
.page-numbers{
    margin: 3em auto;
    padding: 0;
    display: flex;
    justify-content: space-evenly;
    max-width: 600px;
    width: calc(100% - 2em);
}

/* Pagenation Cell*/
.page-numbers > li{
    list-style: none;
}

li > .page-numbers{
    color: #232323;
}

/* Make sure user knows where they are in Shop Page */
.current{
    color:black !important;
    text-decoration:underline;
}

/* The Arrows */
.prev, .next{
    color:black !important;
    font-size: 2rem;
    line-height:0;
}



/* 
* PRODUCT PAGE
* 
* - Layout
* - Thumbnail
*/

/* Layout 

Uses grid so that elements would*/
.product{
    display: grid;
    justify-content: center;
    margin:auto; 
    max-width: 900px;
	width: calc(100vw - 2em);
    grid-template-columns: 1fr 1fr;
}

/* Goes through grid width */
.woocommerce-tabs.wc-tabs-wrapper{
    grid-column:1/ -1;
}

/*Makes Quantity fill the container*/
.quantity>input{
    width: 100%;
}

/* Product Add to Cart

Formats the quantity and button in a column*/
.woocommerce-variation-add-to-cart{
    display: flex;
    flex-direction:column;
    gap: 20px;
}

/*  Thumbnail */
.woocommerce-product-gallery__wrapper{
	margin-top: 5em;
}

/*Pricing 

Overrides .price so the price isn't centered */
.entry-summary > p > span > bdi{
	display:block;
	text-align: left;
}

@media screen and (max-width: 500px){
	.product_title{
		font-size: 1.5em;
	}
	.woocommerce-product-gallery{
		line-height:0
	}
	.woocommerce-product-gallery-wrapper{
		margin-top:0;
	}
	.woocommerce-product-gallery__trigger{
		display:none !important;
	}
}


/*
CART PAGE
*/
table.shop_table_responsive thead{
    display: none !important;
}
table{
    border-spacing: 1em 6px;
}
.product-thumbnail>a>.size-woocommerce_thumbnail{/*Cart Image*/
    width: 100px;
    height: 100px;
}

/* Removes The before elements, getting rid of unnessesary space. */
table.shop_table_responsive tr .product-name::before,
table.shop_table_responsive tr .product-thumbnail::before
{
	content: "";
}

@media screen and (max-width:768px){
    table.shop_table_responsive tr td::before{
        content: "";
	}
    /*Algins the card table to make it more consistent. */
	.shop_table > tbody > tr{
		display:flex;
		align-items:flex-start;
	}
    /* Changes width. */
	table.shop_table_responsive tr .product-thumbnail > a > img{
		width: 100px;
	}
}


@media screen and (max-width:500px){
/*  Makes the remove element bigger for smaller screens. */
.product-remove{
	font-size: 40px;
	position: relative;
}
	/* Put's each table element in a column */ 
	.shop_table > tbody > tr{
			display:flex;
			flex-direction:column;
	}

}


/*
    CHECKOUT PAGE
*/
.form-row{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    
}
.col2-set .form-row-last{
    float: none !important;
}

.wc_payment_methods{
	list-style-type:none;
	margin:0;
	padding:0;
	max-width: 800px;
}

.form-row > .woocommerce-input-wrapper{
	max-width: 700px;
	width: 100%;
}

/*Image*/
.wp-post-image{
    width: 300px;
    height: 300px;
    object-fit: cover;
}
.product_title.entry-title{
    display:block !important;
}
#tab-description > div > ul{
    margin:0;
}
.woocommerce-Tabs-panel--description.panel.entry-content{
    max-width: 700px;
}
.input-text{
    padding: .5em 1em !important;
}
/*Clear Unnessesary Sections */
.related{
    display:none;
}

.tabs.wc-tabs{
    display: none;
}
/*
WOOCOMMERCE MESSAGE
*/
.woocommerce-message, .woocommerce-info{
    background-color: #eee;
    color:var(--dark-color);
    padding: 1em;
    border-radius: 4px;
    font-weight: bold;
}


@media screen and (max-width:768px) {
    /* Adds a little spacing to the table to indicate separation*/
    table{
        border-spacing: 2px;
    }


    .product-thumbnail>a>.size-woocommerce_thumbnail{
        width: 100%;
        height: auto;
    }
}