/*
Theme Name:		Deli
Theme URI:		http://www.woothemes.com/products/deli/
Description:	Deli is a Storefront child theme featuring a texturised, earthy design, perfect for stores selling natural, organic or hand made goods. As a Storefront child theme, Deli benefits from all of the tasty WooCommerce integration features that Storefront provides. Bon Appetit!
Author:			WooThemes
Author URI:		http://woothemes.com
Template:		storefront
Version:		2.0.2
License:		GNU General Public License v2 or later
License URI:	http://www.gnu.org/licenses/gpl-2.0.html
Tags:			light, blue, brown, two-columns, right-sidebar, left-sidebar, responsive-layout, accessibility-ready
Text Domain:	deli
*/


/* =Deli styles starts here
-------------------------------------------------------------- */

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

$orange: 	#b64902;
$blue: 		#0e7784;
$chocolate: #7D5D4E;
$jasper:	#D28779;
$sage:		#98a98b;
$camelot: 	#91385c;
$pink:		#c98db5;

$sans-serif: 'Lato', sans-serif;
$serif: 'Copse', sans-serif;
$condensed: 'Oswald', sans-serif;
$monospace: 'Anonymous Pro', monospace;
$handwritten: 'Kalam';

body {
	background-color: #645846;
	font-size: .857em;
	-webkit-font-smoothing: subpixel-antialiased;

	&:before,
	&:after {
		content: "";
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 1em;
		background-color: rgba(#000,.05);
		z-index: 99999;
	}

	&:after {
		top: auto;
		bottom: 0;
	}

	&.admin-bar:before {
		top: 32px;
	}
}

html {
	&:before,
	&:after {
		content: "";
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 1em;
		background-color: rgba(#000,.05);
	}

	&:after {
		left: auto;
		right: 0;
	}
}

// Typography
body,
button,
input,
select,
textarea {
	font-family: $monospace;
	font-weight: 400;
}

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

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

h1,
h2,
h3 {
	font-weight: 400;
}

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

.site-header,
.site-footer {
	background-color: transparent !important;
}

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

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: none;
	border-radius: 3px;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	font-family: $condensed;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
.input-text {
	border-radius: 0;
	border: 2px dashed rgba(#000,.15);
	padding-left: 1em;
	background: #f6f6f6;
	color: #777;
	box-shadow: none;
}

textarea.input-text {
	border-radius: 3px;
}

img {
	&.avatar {
		padding: 3px;
		background: #fff;
	}
}

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

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

.deli-primary-navigation {
	// clear: both;
	// background: $orange;
	@include clearfix;
	-webkit-font-smoothing: antialiased;
	margin-bottom: 1.618em;
	text-shadow: none;
	font-family: $condensed;

	a {
		font-weight: 400;
	}
}

.woocommerce-breadcrumb {
	border-bottom: 0;
	color: rgba(#fff,.7);
	text-shadow: 0 1px 1px rgba(#000,.2);
	margin-bottom: 2.618em;
	position: relative;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;

	&:before {
		content: "\f015";
		font-family: "FontAwesome";
		margin-right: .618em;
		font-weight: 400;
	}

	a {
		font-weight: 400;
		color: rgba(#fff,.9);

		&:hover {
			text-decoration: underline;
		}
	}
}

// Borders
.woocommerce-tabs {
	border-style: dotted;
	border-width: 2px 0;
}

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

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

.header-widget-region {
	margin-bottom: 1.618em;

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

	.widget {
		font-size: 1em;

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			border: 0;
			padding-bottom: 0;
		}
	}
}

.col-full {
	padding: 0;
}

.deli-content-wrapper {
	@include clearfix;
}

.storefront-product-section {
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: rgba(#000,.1);
	margin-bottom: 2.618em;
	padding-top: 1em;

	h2.section-title {
		&:before,
		&:after {
			display: inline-block;
			content: " - ";
			font-size: .618em;
			margin: 0 1em;
			opacity: 0.5;
			font-weight: 700;
		}
	}

	ul.products {
		margin-bottom: 0;
	}
}

.hentry {
	.entry-header {
		border: 0;
		position: relative;

		h1 {
			border-bottom-style: double;
			border-bottom-width: 4px;
			border-bottom-color: #ddd;
			font-size: 2.618em;
		}

		&:after,
		&:before {
			content: "";
			height: 4px;
			width: 4px;
			line-height: 1;
			position: absolute;
			bottom: 0px;
			left: 0;
			background: #ddd;
		}

		&:after {
			left: auto;
			right: 0;
		}
	}
}

.content-area {
	background: #f9f9f9;
	position: relative;
	margin-bottom: 3.631em !important;
	padding: 1em;

	&:after,
	&:before {
		content: "";
		display: block;
		border: 2.618em solid transparent;
		position: absolute;
		top: 0;
		right: 0;
		border-right-color: #eee;
		border-top-width: 0;
	}

	&:before {
		border-right-color: transparent;
		border-bottom-color: #fff;
		border-left-width: 0;
	}

	.site-main:before {
		content:"";
	    display:block;
	    position:absolute;
	    bottom:-9px;
	    left:0;
	    width:100%;
	    height:9px;
   		background: -webkit-linear-gradient(rgba(#000,0) 0%, transparent 0%), -webkit-linear-gradient(135deg, #f9f9f9 33.33%, transparent 33.33%) 0 0%, rgba(#000,0) -webkit-linear-gradient(45deg, #f9f9f9 33.33%, rgba(#000,0) 33.33%) 0 0%;
	    background-size: 0px 100%, 9px 9px, 9px 9px;
	    @include transform(rotate(180deg));
	}
}

.site-header {
	text-shadow: 0 1px 1px rgba(#000,.2);
	padding: 1.618em;
	padding-bottom: 0;
}

.site-search .widget_product_search input[type=search],
.site-search .widget_product_search input[type=text],
.header-widget-region .widget_product_search input[type=search],
.header-widget-region .widget_product_search input[type=text] {
	background: rgba(#000,.65);
	color: #fff;
	text-shadow: 0 1px 0 rgba(#000,.5);
	box-shadow:
		inset 0 1px 3px rgba(#000,.3),
		0 1px 1px rgba(#fff,.2);
}

.site-footer {
	padding: 0;

	.col-full {
		padding: 1.618em;
		background: transparent !important;
	}

	a {
		&:hover {
			text-decoration: underline;
		}
	}
}

.sprh-hero,
.sph-hero {
	.col-full {
		padding: 1.618em;
		-webkit-font-smoothing: antialiased;
	}
}

.page-template-template-homepage .site-main .sph-hero:first-child,
.page-template-template-homepage .site-main .sprh-hero:first-child {
	margin-top: 0;
}

// Comments / Reviews
.comment-text .description {
	padding: 1em;
	background: #f5f2e8;
	border: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	border-top: 1.618em solid rgba(#000,.025);
	font-family: $handwritten;
}

#reviews .commentlist li {
	border: 0;
}

// Products
.site-main {
	ul.products {
		li.product {
			h3 {
				font-size: 1.2em;
			}
		}
	}
}

.storefront-sorting {
	border-style: dotted;
	border-width: 2px 0;
	border-color: rgba(0,0,0,.1);
	padding-top: 1em;
	padding-bottom: 1em;
}

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

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

// Single product
.single-product {
	div.product {
		.summary {
			.price {
				font-weight: 400;
				background-color: $blue;
				color: #fff;
				display: inline-block;
				padding: .53em 2.244em .53em 1em;
				@include border-right-radius(2em);
				position: relative;

				&:after {
					display: block;
					position: absolute;
					content: "";
					top: 50%;
					right: 1em;
					height: 6px;
					width: 6px;
					margin-top: -3px;
					background-color: #fff;
					border-radius: 100%;
				}
			}
		}
	}
}

// cart
table.cart {
	td.actions {
		border: 0;
	}
}

// Widgets
.widget-area {
	.widget {
		padding: 2.618em 1em 1em 1em;
		position: relative;
		background: rgba(#fff,.85);
		font-family: $handwritten;

		&:after {
			content: "";
		    display: block;
		    position: absolute;
		    bottom: -7px;
		    left: 0;
		    width: 100%;
		    height: 7px;
	   		background: -webkit-linear-gradient(rgba(#000,0) 0%, transparent 0%), -webkit-linear-gradient(135deg, rgba(#fff,.85) 33.33%, transparent 33.33%) 0 0%, rgba(#000,0) -webkit-linear-gradient(45deg, rgba(#fff,.85) 33.33%, rgba(#000,0) 33.33%) 0 0%;
		    background-size: 0px 100%, 9px 9px, 9px 9px;
		    @include transform(rotate(180deg));
		}

		&:before {
			content: "";
			display: block;
			height: 2.618em;
			width: 30%;
			position: absolute;
			top: -1.309em;
			left: 35%;
			background: url(images/paper.png) rgba(#fff,.3);
			@include transform(rotate(1deg));
		}

		&:nth-child(2n):before {
			@include transform(rotate(2deg));
		}

		&:nth-child(3n):before {
			@include transform(rotate(-3deg));
			left: 30%;
		}

		&:nth-child(5n):before {
			left: 40%;
		}

		h3.widget-title {
			padding-bottom: .618em;
			border-bottom-width: 2px;
			border-bottom-style: dotted;
			border-bottom-color: rgba(#000,.2);
			text-align: center;

			&:before,
			&:after {
				display: inline-block;
				content: " - ";
				font-size: .618em;
				margin: 0 1em;
				opacity: 0.5;
				font-weight: 700;
			}
		}
	}
}

.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 {
	.deli-primary-navigation {
		display: none;
	}

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

#order_review {
	background-color: #f9f9f9;
}

// Storefront Parallax Hero compatibility
.sph-hero,
.sprh-hero {

	&.full {
		margin-left: - gutter(9) !important;
		margin-right: - gutter(9) !important;
	}

	font-size: 1.1em;

	font-weight: 700;

	.col-full {
		background: transparent !important;
		box-shadow: none;
	}
}

.page-template-template-fullwidth-php,
.page-template-template-homepage-php,
.storefront-full-width-content {
	.sph-hero,
	.sprh-hero {
		&.full {
			margin-left: - gutter() !important;
			margin-right: - gutter() !important;
		}
	}
}

// Storefront Designer compatibility
.sd-header-sticky {
	.site-header {
		padding-top: 5.236em;
	}
}

.sd-scale-larger {
	font-size: .9em;
}

.sd-scale-largest {
	font-size: 1em;
}

.sd-scale-smaller {
	font-size: .8em;
}

.sd-scale-smallest {
	font-size: .75em;
}

.sd-typography-lora {
	.deli-primary-navigation {
		font-family: "Lora", serif;
	}
}

.sd-typography-roboto-slab {
	.deli-primary-navigation {
		font-family: "Roboto Slab", sans-serif;
	}
}

.sd-typography-courier {
	.deli-primary-navigation {
		font-family: "Courier", sans-serif;
	}
}

// Storefront WooCommerce Customiser Compatibility
.swc-product-gallery-stacked {
	&.single-product,
	&.storefront-full-width-content.single-product {
		div.product {
			.images {
				margin: 0;

				> a {
					width: 100%;
				}

				.thumbnails {
					width: 100%;
					margin-bottom: 3.631em;

					a.zoom {
						@include span(1 of 9);

						&.first {
							clear: none;
						}
					}
				}
			}
		}
	}

	&.storefront-full-width-content.single-product {
		div.product {
			.images {
				.thumbnails {
					a.zoom {
						@include span(2 of 12);
					}
				}
			}
		}
	}
}

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

	body,
	html {
		&:before,
		&:after {
			display: block;
		}
	}

	.site {
		background-attachment: fixed;
		padding: 2.618em;
	}

	.home.blog .deli-content-wrapper,
	.home.page:not(.page-template-template-homepage) .deli-content-wrapper {
		padding-top: 3.631em;
	}

	.col-full {
		max-width: 85.999em;
	}

	.site-content {
		> .col-full {
			margin-bottom: 2.618em;
		}
	}

	.site-content {
		.col-full {
			padding: 0;
		}
	}

	.content-area {
		padding: 0;
	}

	.deli-primary-navigation {
		border-top: 3px double rgba(#000,.2);
		-webkit-font-smoothing: antialiased;
		@include span(12 wider);
		@include bleed(gutter());
		margin-top: 0;
		margin-bottom: 2.618em;
		padding-top: 0;
		padding-bottom: 0;
		box-shadow: 0 .327em 0 rgba(#000,.075);
		position: relative;
		clear: both;
		background: $orange;

		.smm-mega-menu {
			margin-left: 0;
			margin-right: 0;
			padding: gutter();
			box-shadow: inset 0 .327em 0 0 rgba(#000,.015);
		}
	}

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

	.site-header {
		padding: 0;
		padding-top: 2.618em;
	}


	.home {
		.site-header {
			margin-bottom: 2.618em;
		}
	}

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

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

	.site-footer {
		text-shadow: 0 1px 1px rgba(#000,0.3);

		.footer-widgets {
			padding-top: 0;
		}
	}

	.main-navigation {
		ul.menu,
		ul.nav-menu {
			@include clearfix;
			float: left;

			> li {
				border-right: 1px solid rgba(#fff,.1);
				float: left;

				> a {
					text-transform: uppercase;
				}

				&.current-menu-item {
					> a {
						background-color: rgba(0,0,0,0.1);
					}
				}

				&:first-child {
					margin-left: 0;
				}
			}

			ul.sub-menu {
				box-shadow: inset 0 .327em 0 0 rgba(#000,.015);
			}
		}
	}

	.site-header-cart {
		border-left: 1px solid rgba(#fff,.1);

		.cart-contents {
			font-weight: 400;
			padding-left: 1em;
			padding-right: 1em;
		}

		.widget_shopping_cart {
			box-shadow: inset 0 .46em 0 0 rgba(#000,.015);

			img {
				padding: .327em;
				background: #fff;
			}

			a.remove:before {
				color: #fff;
			}
		}
	}

	.woocommerce-active .site-header .site-header-cart,
	.main-navigation {
		padding-top: 0;

		> li,
		ul.menu > li,
		ul.nav-menu > li {
			> a,
			.cart-contents {
				padding-top: 1em;
			}
		}
	}

	.site-header-cart .cart-contents:after {
		top: 1em;
	}

	.woocommerce-pagination {
		a {
			font-weight: 700;
		}
	}

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

			.sprh-full-height {
				.overlay {
					padding-left: 4.236em !important;
					padding-right: 4.236em !important;
				}
			}
		}
	}

	.widget-area .widget {
		.sph-hero,
		.sprh-hero {
			text-shadow: none;

			&:last-child {
				margin: 0;
			}
		}
	}

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

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

	// Posts
	.post.type-post,
	.page:not(.woocommerce-page) .type-page {
		.entry-content {
			font-size: 1.2em;
		}
	}

	// Products
	.site-main {
		ul.products {
			li.product {
				@include span(2.25 of 9);
				overflow: visible;

				h3 {
					font-weight: 700;
				}

				.onsale {
					position: absolute;
					top: .618em;
					right: .618em;
				}

				a {
					display: block;
				}

				.button,
				.added_to_cart {
					display: inline-block;
				}
			}
		}

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

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

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

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

	.onsale {
		background: #fff;
		border: 0;
	}

	.page-template-template-fullwidth-php,
	.page-template-template-homepage-php,
	.storefront-full-width-content {
		.site-main {
			ul.products {
				li.product {
					@include span(3 of 12);
				}
			}

			.columns-2 {
				ul.products {
					li.product {
						@include span(6 of 12);
					}
				}
			}

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

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

			.columns-5 {
				ul.products {
					li.product {
						@include span(2.4 of 12);
					}
				}
			}
		}
	}

	// Single product
	.single-product {
		div.product {
			overflow: visible;

			> .onsale {
				position: absolute;
				top: 1em;
				left: 1em;
			}

			.images {
				@include span(5 of 9);

				> a {
					display: block;
					@include span(4 of 5);
				}

				.thumbnails {
					@include span(last 1 of 5);

					a.zoom {
						width: 100%;
						float: none;
					}
				}
			}

			.summary {
				@include span(last 4 of 9);
			}
		}
	}

	#reviews .commentlist li .description {
		padding: 1.618em;
	}

	.storefront-full-width-content.single-product {
		div.product {
			.images {
				@include span(6 of 12);

				> a {
					@include span(5 of 6);
				}

				.thumbnails {
					@include span(last 1 of 6);

					a.zoom {
						width: 100%;
						float: none;
					}
				}
			}

			.summary {
				@include span(last 4 of 12);
				@include post(1 of 12);
				padding-top: 1.618em;
			}
		}

		.related {
			ul.products {
				li.product {
					@include span(3 of 12);
				}
			}
		}
	}

	// Layout
	.right-sidebar {
		.content-area {
			@include span(9 of 12 wider);
			@include bleed(gutter());
			margin-top: 0;
		}

		.widget-area {
			@include span(last 3 of 12);
			position: relative;

			.widget {
				box-shadow: inset .53em 0 0 rgba(#000,.015);
			}
		}
	}

	.left-sidebar {
		.content-area {
			@include span(last 9 of 12 wider);
			@include bleed(gutter());
			margin-top: 0;
		}

		.widget-area {
			@include span(3 of 12);
			position: relative;

			.widget {
				box-shadow: inset -.53em 0 0 rgba(#000,.015);
			}
		}
	}

	.widget-area {
		.widget {
			padding: 2.618em 2.244em 2.244em 2.244em;
		}
	}

	// Footer
	.footer-widgets {
		border-bottom: 2px dotted rgba(#000,.1);
	}

	/**
	 * Full width & homepage template
	 */
	.page-template-template-fullwidth-php,
	.page-template-template-homepage-php,
	.storefront-full-width-content {
		.content-area {
			@include span(12 wider);
			@include bleed(gutter());
			margin-top: 0;
		}
	}
}

@media screen and (max-width: 65.141em) {
	.col-full {
		margin-left: 0;
		margin-right: 0;
	}
}