/*
 * These styles are outputted both of the frontend and backend of the site
 * Please note any changes you do make may also make changes to the WP backend default styles.
 * Edit with caution
 */

/**Section title**/
.section-title-area{margin-bottom:5rem;}
.section-title-area .section-title{ }

/* Blocks */
section{position: relative; z-index: 1;}

/* Page Accent */

/* images */
.round-image{position: relative;}
.round-image img { border-radius: 100%; position: relative;}
.round-image:after { content:""; position: absolute; bottom: 2rem; right: 2rem; height: 10rem; width: 10rem; background: transparent url(http://moorish.builtbytoast.uk/wp-content/uploads/hessam-shape.png) center center no-repeat; background-size: cover; display: block; }

/* Buttons in cols */
.col.has-btn .button-block { /*position: absolute; bottom: 2rem; left: 2rem; right: 2rem;*/ text-align: left; margin-top: 4rem; }
.tac.has-btn .button-block { text-align: center; }
.col.has-btn { position: relative; padding-bottom: 8rem; }

/**Post listings**/
.post-listings{grid-template-columns:1fr 1fr 1fr;}
.post-listing{position: relative;box-shadow: 0 10px 10px var(--shadow);border-radius: 10px;overflow:hidden;}
.post-listing .post-listing-link{position:absolute;top:0;left:0;width:100%;height:100%;}
.post-listing .post-listing-content{padding:2rem;}

/**Pagination**/
.page-navigation { margin-top: 2rem;text-align:center;}

/* WYSIWYG Formats */
ul.boxed-list{ background: var(--shadow); padding: 4rem 4rem 3.5rem 4rem; list-style: inside; }
p.alert-paragraph { display: flex; align-items: center; background: var(--brand-1); color: #fff; padding: 2rem; border-radius: 2rem; margin: 4rem 0; position: relative; }
p.alert-paragraph:before { content:""; display: block; background: transparent url('/wp-content/themes/toast/assets/images/warning.svg') center center no-repeat; background-size: contain; height: 10rem; width: 16rem; margin-right: 2rem; }
section blockquote { padding: 0 0 0 6rem; border-left: 3rem solid var(--brand-1); margin: 0; margin: 3rem 0 4rem; }
section blockquote p { font-size: 4rem; line-height: 1.1; }
section blockquote p:last-of-type { margin-bottom: 0; }

/* Captions */
p.wp-caption-text { background: var(--brand-2); padding: 1rem 2rem; box-sizing: border-box; display: inline-block; color: #fff; width: 100%; border-radius: 0 0 2rem 2rem; }
div[id^="attachment_"] { max-width: 100% !important; width: 100% !important; }
div[id^="attachment_"] img { width: 100%; }
.alignleft .wp-caption-text, .alignright .wp-caption-text{margin-bottom:0 !important;}

/**NEVER REMOVE**/
.wp-block{font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;}

/* Woocommerce */
.woocommerce ul.products::after, .woocommerce ul.products::before{display: none !important;}
.products, .woocommerce ul.products{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 4rem;}
.products .product, .woocommerce ul.products li.product{width: 100%; margin: 0; background-color: #efefef;}
.products .product img, .woocommerce ul.products li.product img{width: 100%; object-fit: cover; margin-bottom: 0 !important;}
.products .product .product-content, .woocommerce ul.products li.product .product-content{padding: 2rem;}
.products .product .product-content .product-title, .woocommerce ul.products li.product .product-content .product-title{font-size: 3rem; font-weight: 600; padding: 0;}
.products .product .product-content .product-price, .woocommerce ul.products li.product .product-content .product-price .price{color: var(--text-color); font-size: 2rem; font-weight: 600; margin: 0 0 1rem 0;}

.product .quantity input[type="number"]{font-size: 2.5rem;}
.woocommerce select.orderby{font-size: 1.5rem;}

.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child{margin-bottom: 2rem;}
.woocommerce-notices-wrapper{margin: 0;}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals{float: unset;}

.woocommerce a.button.primary, .woocommerce div.product form.cart .button{border-radius: 5rem; font-weight: 500;}
.woocommerce a.button.primary:hover{color: #fff;}

.woocommerce div.product form.cart .button{padding: .5rem 2rem; font-family: "nassim-latin", sans-serif; font-size: 2rem;}

.related.products, .woocommerce ul.related.products{display: block; clear: both; grid-column: span 2;}
.related.products h2, .woocommerce ul.related.products h2{margin-bottom: 2rem; font-weight: 600;}
.related.products .products, .woocommerce ul.related.products .products{grid-template-columns: 1fr 1fr 1fr 1fr;}

.up-sells.products, .woocommerce .up-sells.products{display: block; clear: both; grid-column: span 2;}
.up-sells.products h2, .woocommerce .up-sells.products h2{margin-bottom: 2rem; font-weight: 600;}
.up-sells.products .products, .woocommerce .up-sells.products .products{grid-template-columns: 1fr 1fr 1fr 1fr;}

.woocommerce .generic-hero{margin-bottom: 5rem; text-align: center; padding: 5rem 0; position: relative; background-position: center; background-size: cover; background-repeat: no-repeat;}
.woocommerce .generic-hero .container{z-index: 2; position: relative;}
.woocommerce .generic-hero:before{content: ''; z-index: 1; pointer-events: none; background-color: rgba(0, 0, 0, 0.4); position: absolute; left: 0; top: 0; bottom: 0; right: 0; backdrop-filter: blur(0.5px);}
.woocommerce .generic-hero h1{color: #fff; font-size: 7.5rem; margin-bottom: 2rem;}
.woocommerce .generic-hero h2{font-size: 3rem; color: #fff; max-width: 75%; margin: 0 auto;}

.woocommerce .container > .product{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 4rem;}
.woocommerce .woocommerce-product-gallery{width: 100% !important;}
.woocommerce .product .summary.entry-summary{width: 100%;}

.woocommerce-cart table.cart img{width: 124px;}

@media(max-widtth: 1200px){
    .related.products .products, .woocommerce ul.related.products .products{grid-template-columns: 1fr 1fr !important;}
}

@media(max-width: 768px){
    .woocommerce .container > .product{grid-template-columns: 1fr !important;}
    .related.products, .woocommerce ul.related.products{grid-column: unset;}
    .products{grid-template-columns: 1fr !important;}
}