/* 
Theme Name: Sapphire Carpets
Theme URI: 
Author: Michael Rosser
Version: 2.0 
Tags: Simple, effective 
*/ 
 /* Global Styles - Start */

	body {
		margin: 0;
		padding: 0;
		background-color: #143233;
		line-height: 1.8;
		font-size: 16px;
		color: white;
		font-family: "open-sans", sans-serif;
	}

img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.woocommerce ul.products li.product h2.woocommerce-loop-product__title {
    color: #c6a459; /* change to your desired color */
}

.woocommerce ul.products li.product .price {
    color: white; /* change to your desired color */
}

.woocommerce ul.products li.product .button {
    background-color: #c6a459; /* button background */
    color: #ffffff; /* text color */
    border-color: #ff0000;
	display: block;
	width: 89%;
}


.single-product .product .summary button.single_add_to_cart_button {
    background: #c6a459 !important;
}

/* Change background and text color of variation dropdowns */
.single-product form.variations_form select {
    background-color: #ff6600;  /* dropdown background */
    color: #ffffff;             /* text color */
    border: 1px solid #cc5200;  /* optional border */
    border-radius: 5px;         /* rounded corners */
    padding: 8px 12px;
}

/* Change hover/focus */
.single-product form.variations_form select:focus {
    background-color: #cc5200;
    outline: none;
    color: #ffffff;
}

.wc-block-components-button:not(.is-link) {
    align-items: center;
    display: inline-flex;
    height: auto;
    justify-content: center;
    position: relative;
    text-align: center;
    transition: box-shadow .1s linear;
    background-color: white;
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    display: block;
    font-size: var(--wp--preset--font-size--small, 14px);
    font-weight: 500;
    line-height: 1.4;
    max-width: max-content;
    color: #c6a459;
}

.reset_variations {
	color: white;
}

	.container {
    margin: auto;
		padding: 20px;
  }

  /* Categories */
  .categories {
    margin-bottom: 20px;
	  overflow: hidden;
	  color: black;
  }

  .category-btn {
    padding: 10px 15px;
    cursor: pointer;
    background: #eee;
    border-radius: 5px;
	  float: left;
	  width: 40%;
	  margin:5px;
  }

  .category-btn.active {
    background: #007BFF;
    color: white;
  }

  /* Accordion */
  .accordion-item {
    background: #fff;
    margin-bottom: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	  width: 100%;
	  color: black;
  }

  .accordion-header {
    padding: 15px;
    cursor: pointer;
    background: #eaeaea;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Arrow */
  .arrow {
    transition: transform 0.3s ease;
    font-size: 18px;
  }

  .accordion-item.active .arrow {
    transform: rotate(180deg);
  }

  .accordion-content {
    display: none;
    padding: 15px;
  }

  .accordion-item.active .accordion-content {
    display: block;
  }
	
	img {
		max-width: 100%;
		height: auto;
	}
	p {
		margin: 0;
		padding: 0;
	}
	

	h2 {
		margin: 0;
		padding: 0;
		font-family: "adobe-caslon-pro", serif;
font-weight: 700;
font-style: normal;
	}
	

			/*GridCols*/
	*,
	*:before,
	*:after {
		box-sizing: inherit;
	}
	
	.col {
		padding:1em;
		margin: 8px;
	}
	
	
	[class*='col-'] {
		width:100%;
		float: left;
		min-height: 1px;
	}
	
	.col-mob-1 {width:8.33333%;}
	.col-mob-2 {width:16.66667%;}
	.col-mob-3 {width:25%;}
	.col-mob-4 {width:33.33333%;}
	.col-mob-5 {width:41.66667%;}
	.col-mob-6 {width:50%;}
	.col-mob-7 {width:58.33333%;}
	.col-mob-8 {width:66.66667%;}
	.col-mob-9 {width:75%;}
	.col-mob-10 {width:83.33333%;}
	.col-mob-11 {width:91.66667%;}
	.col-mob-12 {width:100%;}
	
	
	.section_container, .related, .post_container {
		margin: 0 auto;
		max-width: 1100px;
		height: auto;
		overflow: hidden;
		width: 100%;
	}


	
	.row_container{
		margin: 0 auto;
		max-width: 1100px;
		height: auto;
		padding: 10px;
	}

.shop {
	height: auto;
	overflow: hidden;
	padding: 10px;
}

.post_row_container {
		margin: 0 auto;
		max-width: 1100px;
		height: auto;
		overflow: hidden;
		width: 100%;
}

.paragraph a:link, .paragraph a:visited {
	color: #c6a459;
}

.post_image {
	height: 350px;
	background-position: center;
	background-size: cover;
}
	

.post_link:link, .post_link:visited {
	color: white;
	text-decoration:none;
}
	.header {
		border-bottom: thin rgba(134,106,1,1.00) solid;
		padding: 10px;
		overflow: hidden;
	}

.logo {
	width: 40%;
	margin: 0 auto;
}
	
	.welcome_text {
		padding: 20px;
	}
	
	.welcome_text h1 {
		text-align: center;
		font-size: 40px;
		color: #c6a459;
		font-family: "open-sans", sans-serif;
font-weight: 400;
font-style: normal;
		margin: 0;
		padding: 0;
	}
	
	.welcome_text h2 {
		font-size: 82px;
		text-align: center;
		color: white;
		font-family: "adobe-caslon-pro", serif;
font-weight: 700;
font-style: normal;
margin: 0;
		padding: 0;
		line-height: 1.3;
	}
	
.two_cols_text h2 {
	border-bottom: thin solid #c6a459;
	width: 50%;
	margin: 0 auto;
	margin-bottom: 10px;
}

.section_text h2 {
color: #c6a459;
	width: 100%;
	margin: 0 auto;
	margin-bottom: 10px;
}

	.button:link, .button:visited {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5ce70+0,f7eaaa+50,e5cd6b+100 */
background: linear-gradient(to right,  #e5ce70 0%,#f7eaaa 50%,#e5cd6b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
padding-top:30px;
		padding-bottom: 30px;
		padding-left: 60px;
		padding-right: 60px;
		border-radius: 30px;
		text-align: center;
		margin: 0 auto;
	display: block;
		width: 50%;
		color: #143233;
		text-decoration: none;
	}
	
	.hero {
		height: auto;
		background-image: url("hero.jpg");
		background-position: center;
		background-size: cover;
		padding-top: 160px;
		padding-bottom: 160px;
		border-bottom: rgba(160,132,0,1.00) thin solid;
				border-top: rgba(160,132,0,1.00) thin solid;

	}

.box_text {
	color: white;
}

.box_text h2 {
	color: #c6a459;
}

.section_text {
	color: white;
}
	
	.row1 {
			height: auto;
		overflow: hidden;
		padding: 10px;
	}
	
	.row2 {
		height: auto;
		overflow: hidden;
		padding: 10px;
	}
	
	
	.hero h1 {
		font-size: 30px;
		margin: 0;
		padding: 0;
	}
	
	.hero h2 {
		font-size: 20px;
		margin: 0;
		padding: 0;
	}
	
	.box_one {
		height: 217px;
		background-image: url("box_one.jpg");
		background-size: cover;
	}
	
	.box_two {
		height: 217px;
		margin-left: 10px;
		margin-right: 10px;
			background-image: url("box_one.jpg");
		background-size: cover;
	}
	
	.box_three {
		height: 217px;
		background-image: url("box_one.jpg");
		background-size: cover;
	}
	
	
	.overlay {
		height: 100%;
		background-color: rgba(69, 226, 202, 0.5);
	}

.title {
	color: #c6a459;
	padding: 10px;
}
	
.google_logo {
	width: 30%;
	margin: 0 auto;
text-align: center;
}

	.footer {
		margin-top: 20px;
		padding-bottom: 20px;
		border-top: thin solid #c6a459;
	}
	
	.contact_us {
	color: white;
		text-align: center;
	}
	
	.opening_times {
		color: white;
		padding: 10px;
	}
	
	.footer-logo {
		width: 60%;
		margin: 0 auto;
	}
	.quick_links {
		text-align: right;
		padding: 10px;
	}
	
	.footer h2 {
		color: #A08400;
	}
	
	.footer_info {
		color: white;
		overflow: hidden;
		padding: 10px;
	}

.quick_links a:link, .quick_links a:visited {
	display: block;
	color: white;
	text-align: right;
	text-decoration: none;
}
	
	 @media only screen and (min-width: 768px) {
        		.col-dt-1 {width:8.33333%;}
	.col-dt-2 {width:16.66667%;}
	.col-dt-3 {width:25%;}
	.col-dt-4 {width:33.33333%;}
	.col-dt-5 {width:41.66667%;}
	.col-dt-6 {width:50%;}
	.col-dt-7 {width:58.33333%;}
	.col-dt-8 {width:66.66667%;}
	.col-dt-9 {width:75%;}
	.col-dt-10 {width:83.33333%;}
	.col-dt-11 {width:91.66667%;}
	.col-dt-12 {width:100%;}
			 
		 	.header {
		height: 120px;
		border-bottom: thin rgba(134,106,1,1.00) solid;
		padding: 10px;
				overflow: initial;
	}
		 
		 .logo {
			 width: 255px;
			 
		 }
		 
		 .nav {
			 margin-top: 20px;
		 }
		 
		 .welcome {
			 width: 400px;
			 height: auto;
			 margin: 0 auto;
			 padding: 10px;
		 }
		 
		 
		   .category-btn {
    padding: 10px 15px;
    cursor: pointer;
    background: #eee;
    border-radius: 5px;
	  float: left;
	  width: 21%;
	  margin:5px;
  }
	}