/*
Theme Name:		Boutique
Theme URI:		https://woothemes.com/products/boutique/
Description:	A Storefront child theme designed for small WooCommerce stores / boutiques. Boutique features a simple, traditional design which you can customise using the settings available in the WordPress Customizer. Looking for a theme for your new WooCommerce store? Look no further than Storefront and Boutique!
Author:			WooThemes
Author URI:		http://woothemes.com
Template:		storefront
Version:		2.0.4
License: 		GNU General Public License v2 or later
License URI: 	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain:	boutique
*/


/* =Boutique styles starts here
-------------------------------------------------------------- */

@import 'bourbon';
@import 'susy';
@import '../storefront/assets/sass/utils/variables';

body {
	background: #303030;
	-webkit-font-smoothing: subpixel-antialiased;
}

// Typography
body,
button,
input,
select,
textarea {
	font-family: 'Lato', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Playfair Display', serif;
	font-weight: 400;
	letter-spacing: 0 !important;

	a,
	label {
		font-weight: 400;
	}
}

.widget {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-weight: 400;
	}
}

.site-branding h1 a {
	font-weight: 400;
}

// General Styles
.storefront-product-section {
	margin-bottom: 4.236em;
}

.storefront-product-section,
.hentry {
	border-bottom-style: double;
	border-bottom-width: 3px;
	border-bottom-color: rgba(0,0,0,.025);
}

.woocommerce-tabs ul.tabs li a,
.woocommerce-product-rating,
.woocommerce-breadcrumb {
	text-transform: uppercase;
}

.woocommerce-breadcrumb {
	border-bottom: 1px solid rgba(0,0,0,.05);

	a {
		text-transform: none;
	}
}

.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.woocommerce-noreviews,
p.no-comments {
	color: inherit;
	background: rgba(0,0,0,0.025);

	a,
	a:hover,
	.button,
	.button:hover {
		color: inherit;
		font-weight: normal;
	}

	a {
		text-decoration: underline;
	}
}

.woocommerce-error {
	border-left-color: $error;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
	border-left-color: $info;
}

.woocommerce-message {
	border-left-color: $success;
}

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
	margin-bottom: 0;
}

// Forms
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget-area .widget a.button,
.site-header-cart .widget_shopping_cart a.button {
	box-shadow:
		inset 0 -.327em 1.618em rgba(0,0,0,0.1);
}

// Navigation
button.menu-toggle {
	margin-bottom: 0;
}

.boutique-primary-navigation {
	@include clearfix;
	-webkit-font-smoothing: antialiased;
}

.main-navigation ul.menu > li > ul,
.main-navigation ul.menu ul,
.site-header-cart .widget_shopping_cart {
	background: #212121;
}

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

// Posts
.posted-on,
.byline {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: .7em;
}

.hentry .entry-header {
	border-bottom-width: 0;
	margin: 0 0 3.631em;
}

.widget h3.widget-title,
.widget h2.widgettitle {
	border-bottom-width: 1px;
	border-bottom-color: rgba(0,0,0,0.1) !important;
	font-style: italic;
	font-weight: 400;
}

.hentry .entry-header h1 {
	border-bottom: 4px double rgba(0,0,0,0.1);
	padding-bottom: .618em;
}

// Layout
.col-full,
.header-widget-region {
	box-sizing: content-box;
}

.header-widget-region {
	margin: 0;

	.col-full {
		background: #fff;
		padding: 0 1em;
	}

	.widget {
		padding-top: 2.244em;
	}
}

.site-content {
	.col-full {
		background: #fff;
		padding: 1.618em;
		box-shadow: inset 0 0 0 .53em #f6f6f6;
	}
}

.site-footer {
	padding: 0;

	.col-full {
		background: #f6f6f6;
		padding: 1.618em;
	}
}

.woocommerce-breadcrumb {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	background-color: transparent !important;
}

.site-header-cart {
	margin-bottom: 0;
}

// Products
ul.products {
	li.product {
		overflow: visible;

		.price {
			position: absolute;
			top: .618em;
			right: 1px;
			padding: .53em .857em;
			background: #555;
			color: #fff;
			font-weight: 700;
			box-shadow:
				5px 0 0 0 #555;

			&:after {
				content: "";
				display: block;
				position: absolute;
				right: -5px;
				top: 100%;
				border: 5px solid transparent;
				border-top-color: darken(#555,20%);
				border-left-width: 0;
			}

			del {
				font-weight: 400;
				opacity: 0.5;
			}
		}

		.onsale {
			display: none;
		}

		img {
			border: 1px solid rgba(0,0,0,0.1);
		}
	}
}

.single-product {
	.images {
		img {
			border: 1px solid rgba(0,0,0,0.1);
		}
	}
}

// cart
table.cart {
	td.actions {
		border: 0;
		padding-top: 1.618em;
	}
}

// Widgets
.widget_product_categories ul li:before,
.widget_categories ul li:before {
	content: "\f07b" !important;
}

.widget_product_categories,
.widget_categories {
	ul {
		li.current-cat {
			&:before {
				content: "\f07c" !important;
			}
		}
	}
}

.widget_recent_comments ul li:before {
	content: "\f075" !important;
}

.widget_archive ul li:before {
	content: "\f07c" !important;
}

.widget_recent_entries ul li:before, .widget_pages ul li:before {
	content: "\f15c" !important;
}

// Homepage template
.page-template-template-homepage {
	.site-main {
		padding-top: 0;
	}
}

// Checkout Customiser compatibility
.woocommerce-checkout.scc-distraction-free-checkout {
	.boutique-primary-navigation {
		display: none;
	}

	.site-header {
		margin-bottom: 0;
	}
}

// Storefront Parallax Hero compatibility
.sph-hero {
	.col-full {
		background: transparent;
		box-shadow: none;
	}
}

@media screen and (min-width: 768px) {
	$horizontal_padding: 5.874em;

	.col-full {
		padding: 0 $horizontal_padding;
	}

	.boutique-primary-navigation {
		position: relative;
		margin: 0 -$horizontal_padding;
		padding: 0 $horizontal_padding;
		@include border-top-radius(.327em);
		box-shadow:
			inset 0 1px 0 rgba(#fff, 0.1),
			inset 0 -.53em  rgba(#000, 0.05);
		background: #212121;
		clear: both;
	}

	.site-branding,
	.site-search,
	.site-header-cart,
	.site-logo-anchor,
	.custom-logo-link {
		margin-bottom: 4.236em;
	}

	.site-header {
		padding-top: 4.236em;
	}

	.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a,
	.site-header-cart .cart-contents {
		padding-bottom: 1.618em !important;
		padding-top: 1.618em;
	}

	.site-content,
	.site-footer,
	.header-widget-region {
		.col-full {
			padding: 4.236em $horizontal_padding;
		}
	}

	.header-widget-region {
		.col-full {
			padding-top: 0;
			padding-bottom: 0;
		}
	}

	.site-footer {
		.col-full {
			padding: 2.618em $horizontal_padding;
		}
	}

	.main-navigation {
		ul.menu {
			li {
				&.current-menu-item {
					> a {
						position: relative;

						&:before {
							content: '';
							display: block;
							position: absolute;
							top: 100%;
							left: 50%;
							border: .618em solid transparent;
							border-top-color: #212121;
							margin-left: -.618em;
						}
					}
				}
			}
		}

		ul.menu,
		ul.nav-menu {
			ul {
				background: #212121;
			}
		}

		.smm-mega-menu {
			margin-left: 0;
			margin-right: 0;
			padding: 4.236em 5.874em;
			background-color: #212121 !important;

			ul {
				background-color: transparent !important;
			}
		}
	}

	.sd-sticky-navigation {
		.main-navigation {
			.smm-mega-menu {
				margin-left: -5.874em;
				margin-right: -5.874em;
			}
		}
	}

	// Homepage
	.page-template-template-homepage-php {
		.content-area {
			@include span(9 or 12);

			.columns-3 {
				ul.products {
					li.product {
						@include span(3 of 9);
					}
				}
			}
		}

		.boutique-featured-products {
			.storefront-product-section {
				margin-left: -$horizontal_padding;
				margin-right: -$horizontal_padding;
				padding: 0 $horizontal_padding;
				background: rgba(0,0,0,0.025);
				padding-top: 3.632em;
				padding-bottom: 1em;
				border-top: 1px solid rgba(0,0,0,0.1);
				border-bottom: 1px solid rgba(0,0,0,0.1);
				box-shadow:
					inset 0 0 0 .53em rgba(0,0,0,0.025);

				ul.products {
					li.product {
						span,
						.button,
						.star-rating {
							display: none;
						}

						h3,
						.price {
							display: block;
							position: absolute;
						}

						h3 {
							top: 0;
							left: 0;
							z-index: 99;
							-webkit-transition: all ease .2s;
							transition: all ease .2s;
							color: #f6f6f6;
							opacity: 0;
							width: 100%;
							text-align: left;
							padding: 1.618em;
							color: #303030;
							opacity: 0;
						}

						.price {
							bottom: 0;
							right: 0;
							top: auto;
							z-index: 99;

							span {
								display: block;
							}
						}

						img {
							margin: 0;
						}

						> a {
							display: block;

							&:after {
								content: "";
								display: block;
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								background: rgba(#fff,.9);
								border: 1px solid #fff;
								opacity: 0;
								-webkit-transition: all ease .2s;
								transition: all ease .2s;
								box-shadow: 0 1px 3px rgba(0,0,0,0.2);
							}

							&:before {
								content: "";
								display: block;
								position: absolute;
								top: .618em;
								left: .618em;
								right: .618em;
								bottom: .618em;
								border: 4px double rgba(0,0,0,0.1);
								z-index: 9;
								opacity: 0;
								-webkit-transition: all ease .2s;
								transition: all ease .2s;
							}

							&:hover {

								h3,
								&:after,
								&:before {
									opacity: 1;
								}
							}
						}
					}
				}
			}

			.hentry {
				padding-bottom: 0;
				border-bottom: 0;
			}

			.entry-header {
				h1 {
					text-align: center;
				}
			}
		}
	}

	// Parallax hero commpatibility
	.page-template-template-homepage {
		.content-area {
			.sph-hero,
			.sprh-hero {
				margin-top: 0 !important;

				&.full {
					margin-left: 0 !important;
					margin-right: 0 !important;
				}
			}
		}

		.boutique-featured-products {
			.sph-hero,
			.sprh-hero {
				&.full {
					margin-left: -$horizontal_padding;
					margin-right: -$horizontal_padding;
				}
			}
		}

		&.left-sidebar {
			.content-area {
				@include span(last 9 of 12);
			}

			.widget-area {
				@include span(3 of 12);
			}
		}
	}

	.sph-hero,
	.sprh-hero {
		.col-full {
			background-color: transparent;
			padding: 0;
		}

		h1 {
			font-weight: 400;
		}
	}

	.site-main {
		.sph-hero,
		.sprh-hero {
			.overlay {
				padding: 4.236em;
			}
		}
	}
}

@media screen and (max-width: 800px) {
	.col-full {
		padding: 0 1em;
		margin: 0 1em;
	}

	.boutique-featured-products .sph-hero.full,
	.boutique-featured-products .sprh-hero.full {
		margin-left: -1em;
		margin-right: -1em;
	}

	.boutique-featured-products .storefront-product-section,
	.boutique-primary-navigation {
		margin-left: -1em;
		margin-right: -1em;
		padding: 0 1em;
	}

	.boutique-primary-navigation {
		padding-top: 0;
		padding-bottom: 1em;

		button.menu-toggle {
			margin-top: 0;
		}
	}

	.site-content,
	.site-footer {
		.col-full {
			padding-left: 1em;
			padding-right: 1em;
		}
	}
}