/*
 Theme Name:   Boutique
 Theme URI:    https://wordpress.org/themes/storefront
 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:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  boutique
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

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

body {
	background: #303030;
}

// 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,
.hentry {
	border-bottom-style: double;
	border-bottom-width: 3px;
}

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

.woocommerce-breadcrumb 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;
}

// 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 {
	clear: both;
	background: #222;
	@include clearfix;
}

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

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

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

.widget h1 {
	border-bottom-width: 1px;
	border-bottom-color: rgba(0,0,0,0.1) !important;
	font-style: italic;
}

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

.cat-links:before {
	content: "\f07b";
}

.comments-link:before {
	content: "\f075";
}

// Layout
.col-full,
.header-widget-region {
	@include box-sizing(content-box);
}

.header-widget-region {
	background: #fff;
	margin: 0;
}

.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;
}

.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);
		}
	}
}

// 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;
}

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

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

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

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

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

	.site-branding, .site-search, .site-header-cart, .site-logo-anchor {
		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;
	}

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

	.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: #222;
							margin-left: -.618em;
						}
					}
				}
			}
		}

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

	// 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 {
						h3,
						span,
						.button,
						.star-rating {
							display: none;
						}

						img {
							margin: 0;
						}
					}
				}
			}

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

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

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

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

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

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

		h1 {
			font-weight: 400;
		}
	}
}