Basic WooCommerce Integration.

functions.php

@@ -155,3 +155,10 @@ require get_template_directory() . '/inc/customizer.php';
 if ( defined( 'JETPACK__VERSION' ) ) {
 	require get_template_directory() . '/inc/jetpack.php';
 }
+
+/**
+ * Load WooCommerce compatibility file.
+ */
+if ( class_exists( 'WooCommerce' ) ) {
+	require get_template_directory() . '/inc/woocommerce.php';
+}

inc/custom-header.php

@@ -8,6 +8,12 @@
  *
  * @link https://developer.wordpress.org/themes/functionality/custom-headers/
  *
+ * You can add the WooCommerce Mini Cart to header.php like so ...
+ *
+	if ( function_exists( '_s_woocommerce_header_cart' ) ) {
+		_s_woocommerce_header_cart();
+	}
+ *
  * @package _s
  */
 

inc/woocommerce.php

@@ -0,0 +1,238 @@
+<?php
+/**
+ * WooCommerce Compatibility File
+ *
+ * @link https://woocommerce.com/
+ *
+ * @package _s
+ */
+
+/**
+ * WooCommerce setup function.
+ *
+ * See: https://docs.woocommerce.com/document/third-party-custom-theme-compatibility/
+ *
+ * @return void
+ */
+function _s_woocommerce_setup() {
+	add_theme_support( 'woocommerce' );
+	add_theme_support( 'wc-product-gallery-zoom' );
+	add_theme_support( 'wc-product-gallery-lightbox' );
+	add_theme_support( 'wc-product-gallery-slider' );
+}
+
+add_action( 'after_setup_theme', '_s_woocommerce_setup' );
+
+/**
+ * WooCommerce specific scripts & stylesheets
+ *
+ * @return void
+ */
+function _s_woocommerce_scripts() {
+	wp_enqueue_style( '_s-woocommerce-style', get_template_directory_uri() . '/woocommerce.css' );
+}
+
+add_action( 'wp_enqueue_scripts', '_s_woocommerce_scripts' );
+
+/**
+ * Disable the default WooCommerce stylesheet
+ *
+ * Removing the default WooCommerce stylesheet and enqueing your own will 
+ * protect you during WooCommerce core updates.
+ *
+ * See: https://docs.woocommerce.com/document/disable-the-default-stylesheet/
+ */
+add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
+
+/**
+ * Add 'woocommerce-active' class to the body tag
+ *
+ * @param  array $classes css classes applied to the body tag.
+ * @return array $classes modified to include 'woocommerce-active' class
+ */
+function _s_woocommerce_active_body_class( $classes ) {
+	$classes[] = 'woocommerce-active';
+
+	return $classes;
+}
+
+add_filter( 'body_class', '_s_woocommerce_active_body_class' );
+
+/**
+ * Products per page
+ *
+ * @return integer number of products
+ */
+function _s_woocommerce_products_per_page() {
+	return intval( apply_filters( '_s_woocommerce_products_per_page', 12 ) );
+}
+
+add_filter( 'loop_shop_per_page', '_s_woocommerce_products_per_page' );
+
+/**
+ * Product gallery thumnbail columns
+ *
+ * @return integer number of columns
+ */
+function _s_woocommerce_thumbnail_columns() {
+	return intval( apply_filters( '_s_woocommerce_product_thumbnail_columns', 4 ) );
+}
+
+add_filter( 'woocommerce_product_thumbnails_columns', '_s_woocommerce_thumbnail_columns' );
+
+/**
+ * Default loop columns on product archives
+ *
+ * @return integer products per row
+ */
+function _s_woocommerce_loop_columns() {
+	return intval( apply_filters( '_s_woocommerce_loop_columns', 3 ) );
+}
+
+add_filter( 'loop_shop_columns', '_s_woocommerce_loop_columns' );
+
+/**
+ * Related Products Args
+ *
+ * @param array $args related products args.
+ * @return array $args related products args
+ */
+function _s_woocommerce_related_products_args( $args ) {
+	$args = apply_filters( '_s_woocommerce_related_products_args', array(
+		'posts_per_page' => 3,
+		'columns'        => 3,
+	) );
+
+	return $args;
+}
+
+add_filter( 'woocommerce_output_related_products_args', '_s_woocommerce_related_products_args' );
+
+if ( ! function_exists( '_s_woocommerce_product_columns_wrapper' ) ) {
+	/**
+	 * Product columns wrapper
+	 *
+	 * @return  void
+	 */
+	function _s_woocommerce_product_columns_wrapper() {
+		$columns = _s_woocommerce_loop_columns();
+		echo '<div class="columns-' . $columns . '">';
+	}
+}
+
+add_action( 'woocommerce_before_shop_loop', '_s_woocommerce_product_columns_wrapper', 40 );
+
+if ( ! function_exists( '_s_woocommerce_product_columns_wrapper_close' ) ) {
+	/**
+	 * Product columns wrapper close
+	 *
+	 * @return  void
+	 */
+	function _s_woocommerce_product_columns_wrapper_close() {
+		echo '</div>';
+	}
+}
+
+add_action( 'woocommerce_after_shop_loop', '_s_woocommerce_product_columns_wrapper_close', 40 );
+
+/**
+ * Remove default WooCommerce wrapper
+ */
+remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
+remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );
+
+if ( ! function_exists( '_s_woocommerce_wrapper_before' ) ) {
+	/**
+	 * Before Content
+	 * Wraps all WooCommerce content in wrappers which match the theme markup
+	 *
+	 * @return void
+	 */
+	function _s_woocommerce_wrapper_before() {
+		?>
+		<div id="primary" class="content-area">
+			<main id="main" class="site-main" role="main">
+		<?php
+	}
+}
+
+add_action( 'woocommerce_before_main_content', '_s_woocommerce_wrapper_before' );
+
+if ( ! function_exists( '_s_woocommerce_wrapper_after' ) ) {
+	/**
+	 * After Content
+	 * Closes the wrapping divs
+	 *
+	 * @return void
+	 */
+	function _s_woocommerce_wrapper_after() {
+		?>
+			</main><!-- #main -->
+		</div><!-- #primary -->
+		<?php
+	}
+}
+
+add_action( 'woocommerce_after_main_content', '_s_woocommerce_wrapper_after' );
+
+if ( ! function_exists( '_s_woocommerce_cart_link_fragment' ) ) {
+	/**
+	 * Cart Fragments
+	 * Ensure cart contents update when products are added to the cart via AJAX
+	 *
+	 * @param array $fragments Fragments to refresh via AJAX.
+	 * @return array Fragments to refresh via AJAX
+	 */
+	function _s_woocommerce_cart_link_fragment( $fragments ) {
+		global $woocommerce;
+
+		ob_start();
+		_s_woocommerce_cart_link();
+		$fragments['a.cart-contents'] = ob_get_clean();
+
+		return $fragments;
+	}
+}
+
+add_filter( 'woocommerce_add_to_cart_fragments', '_s_woocommerce_cart_link_fragment' );
+
+if ( ! function_exists( '_s_woocommerce_cart_link' ) ) {
+	/**
+	 * Cart Link
+	 * Displayed a link to the cart including the number of items present and the cart total
+	 *
+	 * @return void
+	 */
+	function _s_woocommerce_cart_link() {
+		?>
+			<a class="cart-contents" href="<?php echo esc_url( wc_get_cart_url() ); ?>" title="<?php esc_attr_e( 'View your shopping cart', '_s' ); ?>">
+				<span class="amount"><?php echo wp_kses_data( WC()->cart->get_cart_subtotal() ); ?></span> <span class="count"><?php echo wp_kses_data( sprintf( _n( '%d item', '%d items', WC()->cart->get_cart_contents_count(), '_s' ), WC()->cart->get_cart_contents_count() ) );?></span><?php echo _s_get_svg( array( 'icon' => 'expand' ) ); ?>
+			</a>
+		<?php
+	}
+}
+
+if ( ! function_exists( '_s_woocommerce_header_cart' ) ) {
+	/**
+	 * Display Header Cart
+	 *
+	 * @return void
+	 */
+	function _s_woocommerce_header_cart() {
+		if ( is_cart() ) {
+			$class = 'current-menu-item';
+		} else {
+			$class = '';
+		}
+		?>
+		<ul id="site-header-cart" class="site-header-cart">
+			<li class="<?php echo esc_attr( $class ); ?>">
+				<?php _s_woocommerce_cart_link(); ?>
+			</li>
+			<li>
+				<?php the_widget( 'WC_Widget_Cart', 'title=' ); ?>
+			</li>
+		</ul>
+		<?php
+	}
+}

sass/media/_galleries.scss

@@ -11,7 +11,7 @@
 	// Loops to enumerate the classes for gallery columns.
 	@for $i from 2 through 9 {
 		.gallery-columns-#{$i} & {
-			max-width: ( 100% / $i );
+			max-width: map-get( $columns, $i );
 		}
 	}
 }

sass/mixins/_mixins-master.scss

@@ -22,3 +22,8 @@
 @mixin clearfix-after() {
 	clear: both;
 }
+
+// Column width with margin
+@mixin column-width($numberColumns: 3) {
+	width: map-get( $columns, $numberColumns ) - ( ( $columns__margin * ( $numberColumns - 1 ) ) / 3 );
+}

sass/shop/_checkout.scss

@@ -0,0 +1,21 @@
+/**
+ * Checkout
+ */
+@media screen and (min-width: 768px) {
+	.col2-set {
+		.form-row-first {
+			float: left;
+			margin-right: $columns__margin;
+		}
+
+		.form-row-last {
+			float: right;
+			margin-right: 0;
+		}
+
+		.form-row-first,
+		.form-row-last {
+			@include column-width(2);
+		}
+	}
+}

sass/shop/_components.scss

@@ -0,0 +1,275 @@
+/**
+ * Header cart
+ */
+.site-header-cart {
+	position: relative;
+	margin: 0;
+	padding: 0;
+	@include clearfix;
+
+	.cart-contents {
+		text-decoration: none;
+
+		.icon {
+			display: none;
+		}
+	}
+
+	.widget_shopping_cart {
+		display: none;
+	}
+
+	.product_list_widget {
+		margin: 0;
+		padding: 0;
+	}
+}
+
+/**
+ * Star rating
+ */
+.star-rating {
+	overflow: hidden;
+	position: relative;
+	height: 1.618em;
+	line-height: 1.618;
+	font-size: 1em;
+	width: 5.3em;
+	font-family: 'star';
+	font-weight: 400;
+
+	&:before {
+		content: "\53\53\53\53\53";
+		opacity: .25;
+		float: left;
+		top: 0;
+		left: 0;
+		position: absolute;
+	}
+
+	span {
+		overflow: hidden;
+		float: left;
+		top: 0;
+		left: 0;
+		position: absolute;
+		padding-top: 1.5em;
+	}
+
+	span:before {
+		content: "\53\53\53\53\53";
+		top: 0;
+		position: absolute;
+		left: 0;
+		color: $color__link;
+	}
+}
+
+p.stars {
+	a {
+		position: relative;
+		height: 1em;
+		width: 1em;
+		text-indent: -999em;
+		display: inline-block;
+		text-decoration: none;
+		margin-right: 1px;
+		font-weight: 400;
+
+		&:before {
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 1em;
+			height: 1em;
+			line-height: 1;
+			font-family: "star";
+			content: "\53";
+			color: $color__text-main;
+			text-indent: 0;
+			opacity: .25;
+		}
+
+		&:hover {
+			~ a:before {
+				content: "\53";
+				color: $color__text-main;
+				opacity: .25;
+			}
+		}
+	}
+
+	&:hover {
+		a {
+			&:before {
+				content: "\53";
+				color: $color__link;
+				opacity: 1;
+			}
+		}
+	}
+
+	&.selected {
+		a.active {
+			&:before {
+				content: "\53";
+				color: $color__link;
+				opacity: 1;
+			}
+
+			~ a:before {
+				content: "\53";
+				color: $color__text-main;
+				opacity: .25;
+			}
+		}
+
+		a:not(.active) {
+			&:before {
+				content: "\53";
+				color: $color__link;
+				opacity: 1;
+			}
+		}
+	}
+}
+
+/**
+ * Tabs
+ */
+.woocommerce-tabs {
+	ul.tabs {
+		list-style: none;
+		margin: 0;		
+		padding: 0;
+		text-align: left;
+
+		li {
+			display: block;
+			margin: 0;
+			position: relative;
+
+			a {
+				padding: 1em 0;
+				display: block;
+			}
+		}
+	}
+
+	.panel {
+		h2:first-of-type {
+			margin-bottom: 1em;
+		}
+	}
+}
+
+/**
+ * Password strength meter
+ */
+.woocommerce-password-strength {
+	text-align: right;
+
+	&.strong {
+		color: $woocommerce__color-success;
+	}
+
+	&.short {
+		color: $woocommerce__color-error;
+	}
+
+	&.bad {
+		color: $woocommerce__color-error;
+	}
+
+	&.good {
+		color: $woocommerce__color-info;
+	}
+}
+
+/**
+ * Forms
+ */
+.form-row {
+	&.woocommerce-validated {
+		input.input-text {
+			box-shadow: inset 2px 0 0 $woocommerce__color-success;
+		}
+	}
+
+	&.woocommerce-invalid {
+		input.input-text {
+			box-shadow: inset 2px 0 0 $woocommerce__color-error;
+		}
+	}
+}
+
+.required {
+	color: red;
+}
+
+/**
+ * Notices
+ */
+.woocommerce-message,
+.woocommerce-info,
+.woocommerce-error,	
+.woocommerce-noreviews,
+p.no-comments {
+	@include clearfix;
+	background-color: $woocommerce__color-success;
+	clear: both;
+}
+
+.woocommerce-info,
+.woocommerce-noreviews,
+p.no-comments {
+	background-color: $woocommerce__color-info;
+}
+
+.woocommerce-error {
+	background-color: $woocommerce__color-error;
+}
+
+.demo_store {
+	position: fixed;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	margin: 0;
+	padding: 1em;
+	background-color: $woocommerce__color-info;
+	z-index: 9999;
+}
+
+@media screen and (min-width: 48em) {
+	/**
+	 * Header cart
+	 */
+	.site-header-cart {
+		.widget_shopping_cart {
+			position: absolute;
+			top: 100%;
+			width: 100%;
+			z-index: 999999;
+			font-size: ms(-1);
+			left: -999em;
+			display: block;
+			box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
+		}
+
+		.cart-contents {
+			.icon {
+				display: inline;
+			}
+		}
+
+		&:hover,
+		&.focus {
+			.widget_shopping_cart {
+				left: 0;
+				display: block;
+			}
+		}
+	}
+}

sass/shop/_products.scss

@@ -0,0 +1,63 @@
+/**
+ * Products
+ */
+ul.products {
+	@include clearfix;
+	margin: 0;
+	padding: 0;
+
+	li.product {
+		list-style: none;
+		position: relative;
+		margin-bottom: 2em;
+
+		.woocommerce-loop-product__title {
+			font-size: 1rem;
+		}
+
+		img {
+			display: block;
+		}
+
+		.button {
+			display: block;
+		}
+	}
+}
+
+@media screen and (min-width: 48em) {
+	ul.products {
+		li.product {
+			@include column-width(3);
+			float: left;
+			margin-right: $columns__margin;
+
+			&.first {
+				clear: both;
+			}
+
+			&.last {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.columns-1 {
+		ul.products {
+			li.product {
+				float: none;
+				width: 100%;
+			}
+		}
+	}
+
+	@for $i from 2 through 6 {
+		.columns-#{$i} {
+			ul.products {
+				li.product {
+					@include column-width( $i );
+				}
+			}
+		}
+	}
+}

sass/shop/_single-product.scss

@@ -0,0 +1,83 @@
+/**
+ * Single Product
+ */
+.single-product {
+	div.product {
+		@include clearfix;
+		position: relative;
+
+		.woocommerce-product-gallery {
+			position: relative;
+
+			.woocommerce-product-gallery__trigger {
+				position: absolute;
+				top: 1em;
+				right: 1em;
+				display: block;
+				z-index: 99;
+			}
+
+			.flex-viewport {
+				margin-bottom: 1em;
+			}
+
+			.flex-control-thumbs {
+				@include clearfix;
+				margin: 0;
+				padding: 0;
+
+				li {
+					list-style: none;
+					cursor: pointer;
+					float: left;
+
+					img {
+						opacity: .5;
+
+						&.flex-active {
+							opacity: 1;
+						}
+					}
+
+					&:hover {
+						img {
+							opacity: 1;
+						}
+					}
+				}
+			}
+
+			@for $i from 2 through 5 {
+				&.woocommerce-product-gallery--columns-#{$i} {
+					.flex-control-thumbs {
+						li {
+							@include column-width($i);
+
+							&:nth-child(#{$i}n) {
+								margin-right: 0;
+							}
+
+							&:nth-child(#{$i}n+1) {
+								clear: both;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+.stock {
+	&:empty:before {
+		display: none;
+	}
+
+	&.in-stock {
+		color: $woocommerce__color-success;
+	}
+
+	&.out-of-stock {
+		color: $woocommerce__color-error;
+	}
+}

sass/shop/_tables.scss

@@ -0,0 +1,79 @@
+/**
+ * Shop tables
+ */
+table.shop_table_responsive {
+	thead {
+		display: none;
+	}
+
+	tbody {
+		th {
+			display: none;
+		}
+	}
+
+	tr {
+		td {
+			display: block;
+			text-align: right;
+			clear: both;
+
+			&:before {
+				content: attr(data-title) ': ';
+				float: left;
+			}
+
+			&.product-remove {
+				a {
+					text-align: left;
+				}
+
+				&:before {
+					display: none;
+				}
+			}
+
+			&.actions,
+			&.download-actions {
+				&:before {
+					display: none;
+				}
+			}
+
+			&.download-actions {
+				.button {
+					display: block;
+					text-align: center;
+				}
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 48em) {
+	table.shop_table_responsive {
+		thead {
+			display: table-header-group;
+		}
+
+		tbody {
+			th {
+				display: table-cell;
+			}
+		}
+
+		tr {
+			th, td {
+				text-align: left;
+			}
+
+			td {
+				display: table-cell;
+
+				&:before {
+					display: none;
+				}
+			}
+		}
+	}
+}

sass/shop/_widgets.scss

@@ -0,0 +1,64 @@
+/**
+ * WooCommerce Price Filter
+ */
+.widget_price_filter {
+	.price_slider {
+		margin-bottom: 1.5em;
+	}
+
+	.price_slider_amount {
+		text-align: right;
+		line-height: 2.4em;
+
+		.button {
+			float: left;
+		}
+	}
+
+	.ui-slider {
+		position: relative;
+		text-align: left;
+	}
+
+	.ui-slider .ui-slider-handle {
+		position: absolute;
+		z-index: 2;
+		width: 1em;
+		height: 1em;
+		cursor: ew-resize;
+		outline: none;
+		background: $color__link;
+		box-sizing: border-box;
+		margin-top: -.25em;
+		opacity: 1;
+
+		&:last-child {
+			margin-left: -1em;
+		}
+
+		&:hover,
+		&.ui-state-active {
+			box-shadow: 0 0 0 .25em rgba(#000, 0.1);
+		}
+	}
+
+    .ui-slider .ui-slider-range {
+		position: absolute;
+		z-index: 1;
+		display: block;
+		border: 0;
+		background: $color__link;
+	}
+
+	.price_slider_wrapper .ui-widget-content {
+		background: rgba(0,0,0,0.1);
+	}
+
+	.ui-slider-horizontal {
+		height: .5em;
+	}
+
+	.ui-slider-horizontal .ui-slider-range {
+		height: 100%;
+	}
+}

sass/variables-site/_columns.scss

@@ -0,0 +1,13 @@
+$columns: (
+	1: 100%,
+	2: 50%,
+	3: 33.33%,
+	4: 25%,
+	5: 20%,
+	6: 16.66%,
+	7: 14.28%,
+	8: 12.5%,
+	9: 11.11%
+);
+
+$columns__margin: 3.8%;

sass/variables-site/_variables-site.scss

@@ -1,3 +1,4 @@
 @import "colors";
 @import "typography";
 @import "structure";
+@import "columns";

sass/woocommerce.scss

@@ -0,0 +1,62 @@
+/*
+Theme Name: _s
+
+WooCommerce styles override
+*/
+
+/**
+ * WooCommerce color variables
+ */
+$woocommerce__color-error: #e2401c;
+$woocommerce__color-success: #0f834d;
+$woocommerce__color-info: #3D9CD2;
+
+/**
+ * Imports
+ */
+@import "variables-site/variables-site";
+@import "mixins/mixins-master";
+
+/**
+ * Fonts
+ */
+@font-face {
+	font-family: 'star';
+	src: url('../../plugins/woocommerce/assets/fonts/star.eot');
+	src: url('../../plugins/woocommerce/assets/fonts/star.eot?#iefix') format('embedded-opentype'),
+		url('../../plugins/woocommerce/assets/fonts/star.woff') format('woff'),
+		url('../../plugins/woocommerce/assets/fonts/star.ttf') format('truetype'),
+		url('../../plugins/woocommerce/assets/fonts/star.svg#star') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+/**
+ * Shop tables
+ */
+@import "shop/tables";
+
+/**
+ * Products
+ */
+@import "shop/products";
+
+/**
+ * Single product
+ */
+@import "shop/single-product";
+
+/**
+ * Checkout
+ */
+@import "shop/checkout";
+
+/**
+ * General WooCommerce components
+ */
+@import "shop/components";
+
+/**
+ * WooCommerce widgets
+ */
+@import "shop/widgets";

style.css

@@ -1,4 +1,4 @@
-/*
+/*!
 Theme Name: _s
 Theme URI: http://underscores.me/
 Author: Automattic
@@ -19,7 +19,6 @@ Underscores is distributed under the terms of the GNU GPL v2 or later.
 Normalizing styles have been helped along thanks to the fine work of
 Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
 */
-
 /*--------------------------------------------------------------
 >>> TABLE OF CONTENTS:
 ----------------------------------------------------------------
@@ -42,19 +41,16 @@ Nicolas Gallagher and Jonathan Neal http://necolas.github.io/normalize.css/
 	## Captions
 	## Galleries
 --------------------------------------------------------------*/
-
 /*--------------------------------------------------------------
 # Normalize
 --------------------------------------------------------------*/
 html {
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
-	-ms-text-size-adjust:     100%;
+  -ms-text-size-adjust: 100%; }
-}
 
 body {
-	margin: 0;
+  margin: 0; }
-}
 
 article,
 aside,
@@ -68,107 +64,86 @@ menu,
 nav,
 section,
 summary {
-	display: block;
+  display: block; }
-}
 
 audio,
 canvas,
 progress,
 video {
   display: inline-block;
-	vertical-align: baseline;
+  vertical-align: baseline; }
-}
 
 audio:not([controls]) {
   display: none;
-	height: 0;
+  height: 0; }
-}
 
 [hidden],
 template {
-	display: none;
+  display: none; }
-}
 
 a {
-	background-color: transparent;
+  background-color: transparent; }
-}
 
 a:active,
 a:hover {
-	outline: 0;
+  outline: 0; }
-}
 
 abbr[title] {
-	border-bottom: 1px dotted;
+  border-bottom: 1px dotted; }
-}
 
 b,
 strong {
-	font-weight: bold;
+  font-weight: bold; }
-}
 
 dfn {
-	font-style: italic;
+  font-style: italic; }
-}
 
 h1 {
   font-size: 2em;
-	margin: 0.67em 0;
+  margin: 0.67em 0; }
-}
 
 mark {
   background: #ff0;
-	color: #000;
+  color: #000; }
-}
 
 small {
-	font-size: 80%;
+  font-size: 80%; }
-}
 
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
-	vertical-align: baseline;
+  vertical-align: baseline; }
-}
 
 sup {
-	top: -0.5em;
+  top: -0.5em; }
-}
 
 sub {
-	bottom: -0.25em;
+  bottom: -0.25em; }
-}
 
 img {
-	border: 0;
+  border: 0; }
-}
 
 svg:not(:root) {
-	overflow: hidden;
+  overflow: hidden; }
-}
 
 figure {
-	margin: 1em 40px;
+  margin: 1em 40px; }
-}
 
 hr {
   box-sizing: content-box;
-	height: 0;
+  height: 0; }
-}
 
 pre {
-	overflow: auto;
+  overflow: auto; }
-}
 
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, monospace;
-	font-size: 1em;
+  font-size: 1em; }
-}
 
 button,
 input,
@@ -177,85 +152,69 @@ select,
 textarea {
   color: inherit;
   font: inherit;
-	margin: 0;
+  margin: 0; }
-}
 
 button {
-	overflow: visible;
+  overflow: visible; }
-}
 
 button,
 select {
-	text-transform: none;
+  text-transform: none; }
-}
 
 button,
 html input[type="button"],
 input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
-	cursor: pointer;
+  cursor: pointer; }
-}
 
 button[disabled],
 html input[disabled] {
-	cursor: default;
+  cursor: default; }
-}
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
   border: 0;
-	padding: 0;
+  padding: 0; }
-}
 
 input {
-	line-height: normal;
+  line-height: normal; }
-}
 
 input[type="checkbox"],
 input[type="radio"] {
   box-sizing: border-box;
-	padding: 0;
+  padding: 0; }
-}
 
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-	height: auto;
+  height: auto; }
-}
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-	-webkit-appearance: none;
+  -webkit-appearance: none; }
-}
 
 fieldset {
   border: 1px solid #c0c0c0;
   margin: 0 2px;
-	padding: 0.35em 0.625em 0.75em;
+  padding: 0.35em 0.625em 0.75em; }
-}
 
 legend {
   border: 0;
-	padding: 0;
+  padding: 0; }
-}
 
 textarea {
-	overflow: auto;
+  overflow: auto; }
-}
 
 optgroup {
-	font-weight: bold;
+  font-weight: bold; }
-}
 
 table {
   border-collapse: collapse;
-	border-spacing: 0;
+  border-spacing: 0; }
-}
 
 td,
 th {
-	padding: 0;
+  padding: 0; }
-}
 
 /*--------------------------------------------------------------
 # Typography
@@ -270,36 +229,22 @@ textarea {
   font-family: sans-serif;
   font-size: 16px;
   font-size: 1rem;
-	line-height: 1.5;
+  line-height: 1.5; }
-}
 
-h1,
+h1, h2, h3, h4, h5, h6 {
-h2,
+  clear: both; }
-h3,
-h4,
-h5,
-h6 {
-	clear: both;
-}
 
 p {
-	margin-bottom: 1.5em;
+  margin-bottom: 1.5em; }
-}
 
-dfn,
+dfn, cite, em, i {
-cite,
+  font-style: italic; }
-em,
-i {
-	font-style: italic;
-}
 
 blockquote {
-	margin: 0 1.5em;
+  margin: 0 1.5em; }
-}
 
 address {
-	margin: 0 0 1.5em;
+  margin: 0 0 1.5em; }
-}
 
 pre {
   background: #eee;
@@ -310,110 +255,84 @@ pre {
   margin-bottom: 1.6em;
   max-width: 100%;
   overflow: auto;
-	padding: 1.6em;
+  padding: 1.6em; }
-}
 
-code,
+code, kbd, tt, var {
-kbd,
-tt,
-var {
   font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
   font-size: 15px;
-	font-size: 0.9375rem;
+  font-size: 0.9375rem; }
-}
 
-abbr,
+abbr, acronym {
-acronym {
   border-bottom: 1px dotted #666;
-	cursor: help;
+  cursor: help; }
-}
 
-mark,
+mark, ins {
-ins {
   background: #fff9c0;
-	text-decoration: none;
+  text-decoration: none; }
-}
 
 big {
-	font-size: 125%;
+  font-size: 125%; }
-}
 
 /*--------------------------------------------------------------
 # Elements
 --------------------------------------------------------------*/
 html {
-	box-sizing: border-box;
+  box-sizing: border-box; }
-}
 
 *,
 *:before,
-*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
+*:after {
-	box-sizing: inherit;
+  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
-}
+  box-sizing: inherit; }
 
 body {
-	background: #fff; /* Fallback for when there is no custom background color defined. */
+  background: #fff;
-}
+  /* Fallback for when there is no custom background color defined. */ }
 
-blockquote:before,
+blockquote, q {
-blockquote:after,
+  quotes: "" ""; }
-q:before,
+  blockquote:before, blockquote:after, q:before, q:after {
-q:after {
+    content: ""; }
-	content: "";
-}
-
-blockquote,
-q {
-	quotes: "" "";
-}
 
 hr {
   background-color: #ccc;
   border: 0;
   height: 1px;
-	margin-bottom: 1.5em;
+  margin-bottom: 1.5em; }
-}
 
-ul,
+ul, ol {
-ol {
+  margin: 0 0 1.5em 3em; }
-	margin: 0 0 1.5em 3em;
-}
 
 ul {
-	list-style: disc;
+  list-style: disc; }
-}
 
 ol {
-	list-style: decimal;
+  list-style: decimal; }
-}
 
 li > ul,
 li > ol {
   margin-bottom: 0;
-	margin-left: 1.5em;
+  margin-left: 1.5em; }
-}
 
 dt {
-	font-weight: bold;
+  font-weight: bold; }
-}
 
 dd {
-	margin: 0 1.5em 1.5em;
+  margin: 0 1.5em 1.5em; }
-}
 
 img {
-	height: auto; /* Make sure images are scaled correctly. */
+  height: auto;
-	max-width: 100%; /* Adhere to container width. */
+  /* Make sure images are scaled correctly. */
-}
+  max-width: 100%;
+  /* Adhere to container width. */ }
 
 figure {
-	margin: 1em 0; /* Extra wide images within figure tags don't overflow the content area. */
+  margin: 1em 0;
-}
+  /* Extra wide images within figure tags don't overflow the content area. */ }
 
 table {
   margin: 0 0 1.5em;
-	width: 100%;
+  width: 100%; }
-}
 
 /*--------------------------------------------------------------
 # Forms
@@ -426,30 +345,24 @@ input[type="submit"] {
   border-color: #ccc #ccc #bbb;
   border-radius: 3px;
   background: #e6e6e6;
-	color: rgba(0, 0, 0, .8);
+  color: rgba(0, 0, 0, 0.8);
   font-size: 12px;
   font-size: 0.75rem;
   line-height: 1;
-	padding: .6em 1em .4em;
+  padding: .6em 1em .4em; }
-}
-
   button:hover,
   input[type="button"]:hover,
   input[type="reset"]:hover,
   input[type="submit"]:hover {
-	border-color: #ccc #bbb #aaa;
+    border-color: #ccc #bbb #aaa; }
-}
+  button:active, button:focus,
-
-button:focus,
-input[type="button"]:focus,
-input[type="reset"]:focus,
-input[type="submit"]:focus,
-button:active,
   input[type="button"]:active,
+  input[type="button"]:focus,
   input[type="reset"]:active,
-input[type="submit"]:active {
+  input[type="reset"]:focus,
-	border-color: #aaa #bbb #bbb;
+  input[type="submit"]:active,
-}
+  input[type="submit"]:focus {
+    border-color: #aaa #bbb #bbb; }
 
 input[type="text"],
 input[type="email"],
@@ -470,13 +383,7 @@ textarea {
   color: #666;
   border: 1px solid #ccc;
   border-radius: 3px;
-	padding: 3px;
+  padding: 3px; }
-}
-
-select {
-	border: 1px solid #ccc;
-}
-
   input[type="text"]:focus,
   input[type="email"]:focus,
   input[type="url"]:focus,
@@ -493,12 +400,13 @@ input[type="datetime"]:focus,
   input[type="datetime-local"]:focus,
   input[type="color"]:focus,
   textarea:focus {
-	color: #111;
+    color: #111; }
-}
+
+select {
+  border: 1px solid #ccc; }
 
 textarea {
-	width: 100%;
+  width: 100%; }
-}
 
 /*--------------------------------------------------------------
 # Navigation
@@ -507,27 +415,15 @@ textarea {
 ## Links
 --------------------------------------------------------------*/
 a {
-	color: royalblue;
+  color: royalblue; }
-}
-
   a:visited {
-	color: purple;
+    color: purple; }
-}
+  a:hover, a:focus, a:active {
-
+    color: midnightblue; }
-a:hover,
-a:focus,
-a:active {
-	color: midnightblue;
-}
-
   a:focus {
-	outline: thin dotted;
+    outline: thin dotted; }
-}
+  a:hover, a:active {
-
+    outline: 0; }
-a:hover,
-a:active {
-	outline: 0;
-}
 
 /*--------------------------------------------------------------
 ## Menus
@@ -536,112 +432,66 @@ a:active {
   clear: both;
   display: block;
   float: left;
-	width: 100%;
+  width: 100%; }
-}
-
   .main-navigation ul {
     display: none;
     list-style: none;
     margin: 0;
-	padding-left: 0;
+    padding-left: 0; }
-}
-
-.main-navigation li {
-	float: left;
-	position: relative;
-}
-
-.main-navigation a {
-	display: block;
-	text-decoration: none;
-}
-
     .main-navigation ul ul {
       box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
       float: left;
       position: absolute;
       top: 100%;
       left: -999em;
-	z-index: 99999;
+      z-index: 99999; }
-}
-
       .main-navigation ul ul ul {
         left: -999em;
-	top: 0;
+        top: 0; }
-}
-
-.main-navigation ul ul a {
-	width: 200px;
-}
-
-.main-navigation ul ul li {
-
-}
-
-.main-navigation li:hover > a,
-.main-navigation li.focus > a {
-}
-
-.main-navigation ul ul :hover > a,
-.main-navigation ul ul .focus > a {
-}
-
-.main-navigation ul ul a:hover,
-.main-navigation ul ul a.focus {
-}
-
-.main-navigation ul li:hover > ul,
-.main-navigation ul li.focus > ul {
-	left: auto;
-}
-
       .main-navigation ul ul li:hover > ul,
       .main-navigation ul ul li.focus > ul {
-	left: 100%;
+        left: 100%; }
-}
+      .main-navigation ul ul a {
-
+        width: 200px; }
-.main-navigation .current_page_item > a,
+    .main-navigation ul li:hover > ul,
-.main-navigation .current-menu-item > a,
+    .main-navigation ul li.focus > ul {
-.main-navigation .current_page_ancestor > a,
+      left: auto; }
-.main-navigation .current-menu-ancestor > a {
+  .main-navigation li {
-}
+    float: left;
+    position: relative; }
+  .main-navigation a {
+    display: block;
+    text-decoration: none; }
 
 /* Small menu. */
 .menu-toggle,
 .main-navigation.toggled ul {
-	display: block;
+  display: block; }
-}
 
 @media screen and (min-width: 37.5em) {
   .menu-toggle {
-		display: none;
+    display: none; }
-	}
   .main-navigation ul {
-		display: block;
+    display: block; } }
-	}
-}
 
-.site-main .comment-navigation,
+.site-main .comment-navigation, .site-main
-.site-main .posts-navigation,
+.posts-navigation, .site-main
-.site-main .post-navigation {
+.post-navigation {
   margin: 0 0 1.5em;
-	overflow: hidden;
+  overflow: hidden; }
-}
 
 .comment-navigation .nav-previous,
 .posts-navigation .nav-previous,
 .post-navigation .nav-previous {
   float: left;
-	width: 50%;
+  width: 50%; }
-}
 
 .comment-navigation .nav-next,
 .posts-navigation .nav-next,
 .post-navigation .nav-next {
   float: right;
   text-align: right;
-	width: 50%;
+  width: 50%; }
-}
 
 /*--------------------------------------------------------------
 # Accessibility
@@ -653,9 +503,8 @@ a:active {
   height: 1px;
   width: 1px;
   overflow: hidden;
-	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
+  word-wrap: normal !important;
-}
+  /* Many screen reader and browser combinations announce broken words as they would appear visually. */ }
-
   .screen-reader-text:focus {
     background-color: #f1f1f1;
     border-radius: 3px;
@@ -673,13 +522,12 @@ a:active {
     text-decoration: none;
     top: 5px;
     width: auto;
-	z-index: 100000; /* Above WP toolbar. */
+    z-index: 100000;
-}
+    /* Above WP toolbar. */ }
 
 /* Do not show the outline on the skip link target. */
 #content[tabindex="-1"]:focus {
-	outline: 0;
+  outline: 0; }
-}
 
 /*--------------------------------------------------------------
 # Alignments
@@ -687,21 +535,18 @@ a:active {
 .alignleft {
   display: inline;
   float: left;
-	margin-right: 1.5em;
+  margin-right: 1.5em; }
-}
 
 .alignright {
   display: inline;
   float: right;
-	margin-left: 1.5em;
+  margin-left: 1.5em; }
-}
 
 .aligncenter {
   clear: both;
   display: block;
   margin-left: auto;
-	margin-right: auto;
+  margin-right: auto; }
-}
 
 /*--------------------------------------------------------------
 # Clearings
@@ -720,8 +565,7 @@ a:active {
 .site-footer:after {
   content: "";
   display: table;
-	table-layout: fixed;
+  table-layout: fixed; }
-}
 
 .clear:after,
 .entry-content:after,
@@ -729,20 +573,16 @@ a:active {
 .site-header:after,
 .site-content:after,
 .site-footer:after {
-	clear: both;
+  clear: both; }
-}
 
 /*--------------------------------------------------------------
 # Widgets
 --------------------------------------------------------------*/
 .widget {
   margin: 0 0 1.5em;
-}
+  /* Make sure select elements fit in widgets. */ }
-
-/* Make sure select elements fit in widgets. */
   .widget select {
-	max-width: 100%;
+    max-width: 100%; }
-}
 
 /*--------------------------------------------------------------
 # Content
@@ -751,52 +591,44 @@ a:active {
 ## Posts and pages
 --------------------------------------------------------------*/
 .sticky {
-	display: block;
+  display: block; }
-}
 
 .hentry {
-	margin: 0 0 1.5em;
+  margin: 0 0 1.5em; }
-}
 
 .updated:not(.published) {
-	display: none;
+  display: none; }
-}
 
 .page-content,
 .entry-content,
 .entry-summary {
-	margin: 1.5em 0 0;
+  margin: 1.5em 0 0; }
-}
 
 .page-links {
   clear: both;
-	margin: 0 0 1.5em;
+  margin: 0 0 1.5em; }
-}
 
 /*--------------------------------------------------------------
 ## Comments
 --------------------------------------------------------------*/
 .comment-content a {
-	word-wrap: break-word;
+  word-wrap: break-word; }
-}
 
 .bypostauthor {
-	display: block;
+  display: block; }
-}
 
 /*--------------------------------------------------------------
 # Infinite scroll
 --------------------------------------------------------------*/
 /* Globally hidden elements when Infinite Scroll is supported and in use. */
-.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
+.infinite-scroll .posts-navigation,
-.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
+.infinite-scroll.neverending .site-footer {
-	display: none;
+  /* Theme Footer (when set to scrolling) */
-}
+  display: none; }
 
 /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
 .infinity-end.neverending .site-footer {
-	display: block;
+  display: block; }
-}
 
 /*--------------------------------------------------------------
 # Media
@@ -807,89 +639,61 @@ a:active {
   border: none;
   margin-bottom: 0;
   margin-top: 0;
-	padding: 0;
+  padding: 0; }
-}
 
 /* Make sure embeds and iframes fit their containers. */
 embed,
 iframe,
 object {
-	max-width: 100%;
+  max-width: 100%; }
-}
 
 /* Make sure logo link wraps around logo image. */
 .custom-logo-link {
-	display: inline-block;
+  display: inline-block; }
-}
 
 /*--------------------------------------------------------------
 ## Captions
 --------------------------------------------------------------*/
 .wp-caption {
   margin-bottom: 1.5em;
-	max-width: 100%;
+  max-width: 100%; }
-}
-
   .wp-caption img[class*="wp-image-"] {
     display: block;
     margin-left: auto;
-	margin-right: auto;
+    margin-right: auto; }
-}
-
   .wp-caption .wp-caption-text {
-	margin: 0.8075em 0;
+    margin: 0.8075em 0; }
-}
 
 .wp-caption-text {
-	text-align: center;
+  text-align: center; }
-}
 
 /*--------------------------------------------------------------
 ## Galleries
 --------------------------------------------------------------*/
 .gallery {
-	margin-bottom: 1.5em;
+  margin-bottom: 1.5em; }
-}
 
 .gallery-item {
   display: inline-block;
   text-align: center;
   vertical-align: top;
-	width: 100%;
+  width: 100%; }
-}
-
   .gallery-columns-2 .gallery-item {
-	max-width: 50%;
+    max-width: 50%; }
-}
-
   .gallery-columns-3 .gallery-item {
-	max-width: 33.33333%;
+    max-width: 33.33%; }
-}
-
   .gallery-columns-4 .gallery-item {
-	max-width: 25%;
+    max-width: 25%; }
-}
-
   .gallery-columns-5 .gallery-item {
-	max-width: 20%;
+    max-width: 20%; }
-}
-
   .gallery-columns-6 .gallery-item {
-	max-width: 16.66667%;
+    max-width: 16.66%; }
-}
-
   .gallery-columns-7 .gallery-item {
-	max-width: 14.28571%;
+    max-width: 14.28%; }
-}
-
   .gallery-columns-8 .gallery-item {
-	max-width: 12.5%;
+    max-width: 12.5%; }
-}
-
   .gallery-columns-9 .gallery-item {
-	max-width: 11.11111%;
+    max-width: 11.11%; }
-}
 
 .gallery-caption {
-	display: block;
+  display: block; }
-}

woocommerce.css

@@ -0,0 +1,445 @@
+/*
+Theme Name: _s
+
+WooCommerce styles override
+*/
+/**
+ * WooCommerce color variables
+ */
+/**
+ * Imports
+ */
+/**
+ * Fonts
+ */
+@font-face {
+  font-family: 'star';
+  src: url("../../plugins/woocommerce/assets/fonts/star.eot");
+  src: url("../../plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("../../plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("../../plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("../../plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
+  font-weight: normal;
+  font-style: normal; }
+
+/**
+ * Shop tables
+ */
+/**
+ * Shop tables
+ */
+table.shop_table_responsive thead {
+  display: none; }
+
+table.shop_table_responsive tbody th {
+  display: none; }
+
+table.shop_table_responsive tr td {
+  display: block;
+  text-align: right;
+  clear: both; }
+  table.shop_table_responsive tr td:before {
+    content: attr(data-title) ": ";
+    float: left; }
+  table.shop_table_responsive tr td.product-remove a {
+    text-align: left; }
+  table.shop_table_responsive tr td.product-remove:before {
+    display: none; }
+  table.shop_table_responsive tr td.actions:before, table.shop_table_responsive tr td.download-actions:before {
+    display: none; }
+  table.shop_table_responsive tr td.download-actions .button {
+    display: block;
+    text-align: center; }
+
+@media screen and (min-width: 48em) {
+  table.shop_table_responsive thead {
+    display: table-header-group; }
+  table.shop_table_responsive tbody th {
+    display: table-cell; }
+  table.shop_table_responsive tr th, table.shop_table_responsive tr td {
+    text-align: left; }
+  table.shop_table_responsive tr td {
+    display: table-cell; }
+    table.shop_table_responsive tr td:before {
+      display: none; } }
+
+/**
+ * Products
+ */
+/**
+ * Products
+ */
+ul.products {
+  content: "";
+  display: table;
+  table-layout: fixed;
+  margin: 0;
+  padding: 0; }
+  ul.products li.product {
+    list-style: none;
+    position: relative;
+    margin-bottom: 2em; }
+    ul.products li.product .woocommerce-loop-product__title {
+      font-size: 1rem; }
+    ul.products li.product img {
+      display: block; }
+    ul.products li.product .button {
+      display: block; }
+
+@media screen and (min-width: 48em) {
+  ul.products li.product {
+    width: 30.7966666667%;
+    float: left;
+    margin-right: 3.8%; }
+    ul.products li.product.first {
+      clear: both; }
+    ul.products li.product.last {
+      margin-right: 0; }
+  .columns-1 ul.products li.product {
+    float: none;
+    width: 100%; }
+  .columns-2 ul.products li.product {
+    width: 48.7333333333%; }
+  .columns-3 ul.products li.product {
+    width: 30.7966666667%; }
+  .columns-4 ul.products li.product {
+    width: 21.2%; }
+  .columns-5 ul.products li.product {
+    width: 14.9333333333%; }
+  .columns-6 ul.products li.product {
+    width: 10.3266666667%; } }
+
+/**
+ * Single product
+ */
+/**
+ * Single Product
+ */
+.single-product div.product {
+  content: "";
+  display: table;
+  table-layout: fixed;
+  position: relative; }
+  .single-product div.product .woocommerce-product-gallery {
+    position: relative; }
+    .single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
+      position: absolute;
+      top: 1em;
+      right: 1em;
+      display: block;
+      z-index: 99; }
+    .single-product div.product .woocommerce-product-gallery .flex-viewport {
+      margin-bottom: 1em; }
+    .single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
+      content: "";
+      display: table;
+      table-layout: fixed;
+      margin: 0;
+      padding: 0; }
+      .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
+        list-style: none;
+        cursor: pointer;
+        float: left; }
+        .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
+          opacity: .5; }
+          .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
+            opacity: 1; }
+        .single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
+          opacity: 1; }
+    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
+      width: 48.7333333333%; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
+        margin-right: 0; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
+        clear: both; }
+    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
+      width: 30.7966666667%; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
+        margin-right: 0; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
+        clear: both; }
+    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
+      width: 21.2%; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
+        margin-right: 0; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
+        clear: both; }
+    .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
+      width: 14.9333333333%; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
+        margin-right: 0; }
+      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
+        clear: both; }
+
+.stock:empty:before {
+  display: none; }
+
+.stock.in-stock {
+  color: #0f834d; }
+
+.stock.out-of-stock {
+  color: #e2401c; }
+
+/**
+ * Checkout
+ */
+/**
+ * Checkout
+ */
+@media screen and (min-width: 768px) {
+  .col2-set .form-row-first {
+    float: left;
+    margin-right: 3.8%; }
+  .col2-set .form-row-last {
+    float: right;
+    margin-right: 0; }
+  .col2-set .form-row-first,
+  .col2-set .form-row-last {
+    width: 48.7333333333%; } }
+
+/**
+ * General WooCommerce components
+ */
+/**
+ * Header cart
+ */
+.site-header-cart {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  content: "";
+  display: table;
+  table-layout: fixed; }
+  .site-header-cart .cart-contents {
+    text-decoration: none; }
+    .site-header-cart .cart-contents .icon {
+      display: none; }
+  .site-header-cart .widget_shopping_cart {
+    display: none; }
+  .site-header-cart .product_list_widget {
+    margin: 0;
+    padding: 0; }
+
+/**
+ * Star rating
+ */
+.star-rating {
+  overflow: hidden;
+  position: relative;
+  height: 1.618em;
+  line-height: 1.618;
+  font-size: 1em;
+  width: 5.3em;
+  font-family: 'star';
+  font-weight: 400; }
+  .star-rating:before {
+    content: "\53\53\53\53\53";
+    opacity: .25;
+    float: left;
+    top: 0;
+    left: 0;
+    position: absolute; }
+  .star-rating span {
+    overflow: hidden;
+    float: left;
+    top: 0;
+    left: 0;
+    position: absolute;
+    padding-top: 1.5em; }
+  .star-rating span:before {
+    content: "\53\53\53\53\53";
+    top: 0;
+    position: absolute;
+    left: 0;
+    color: royalblue; }
+
+p.stars a {
+  position: relative;
+  height: 1em;
+  width: 1em;
+  text-indent: -999em;
+  display: inline-block;
+  text-decoration: none;
+  margin-right: 1px;
+  font-weight: 400; }
+  p.stars a:before {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    font-family: "star";
+    content: "\53";
+    color: #404040;
+    text-indent: 0;
+    opacity: .25; }
+  p.stars a:hover ~ a:before {
+    content: "\53";
+    color: #404040;
+    opacity: .25; }
+
+p.stars:hover a:before {
+  content: "\53";
+  color: royalblue;
+  opacity: 1; }
+
+p.stars.selected a.active:before {
+  content: "\53";
+  color: royalblue;
+  opacity: 1; }
+
+p.stars.selected a.active ~ a:before {
+  content: "\53";
+  color: #404040;
+  opacity: .25; }
+
+p.stars.selected a:not(.active):before {
+  content: "\53";
+  color: royalblue;
+  opacity: 1; }
+
+/**
+ * Tabs
+ */
+.woocommerce-tabs ul.tabs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: left; }
+  .woocommerce-tabs ul.tabs li {
+    display: block;
+    margin: 0;
+    position: relative; }
+    .woocommerce-tabs ul.tabs li a {
+      padding: 1em 0;
+      display: block; }
+
+.woocommerce-tabs .panel h2:first-of-type {
+  margin-bottom: 1em; }
+
+/**
+ * Password strength meter
+ */
+.woocommerce-password-strength {
+  text-align: right; }
+  .woocommerce-password-strength.strong {
+    color: #0f834d; }
+  .woocommerce-password-strength.short {
+    color: #e2401c; }
+  .woocommerce-password-strength.bad {
+    color: #e2401c; }
+  .woocommerce-password-strength.good {
+    color: #3D9CD2; }
+
+/**
+ * Forms
+ */
+.form-row.woocommerce-validated input.input-text {
+  box-shadow: inset 2px 0 0 #0f834d; }
+
+.form-row.woocommerce-invalid input.input-text {
+  box-shadow: inset 2px 0 0 #e2401c; }
+
+.required {
+  color: red; }
+
+/**
+ * Notices
+ */
+.woocommerce-message,
+.woocommerce-info,
+.woocommerce-error,
+.woocommerce-noreviews,
+p.no-comments {
+  content: "";
+  display: table;
+  table-layout: fixed;
+  background-color: #0f834d;
+  clear: both; }
+
+.woocommerce-info,
+.woocommerce-noreviews,
+p.no-comments {
+  background-color: #3D9CD2; }
+
+.woocommerce-error {
+  background-color: #e2401c; }
+
+.demo_store {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: 0;
+  padding: 1em;
+  background-color: #3D9CD2;
+  z-index: 9999; }
+
+@media screen and (min-width: 48em) {
+  /**
+	 * Header cart
+	 */
+  .site-header-cart .widget_shopping_cart {
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 999999;
+    font-size: ms(-1);
+    left: -999em;
+    display: block;
+    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); }
+  .site-header-cart .cart-contents .icon {
+    display: inline; }
+  .site-header-cart:hover .widget_shopping_cart, .site-header-cart.focus .widget_shopping_cart {
+    left: 0;
+    display: block; } }
+
+/**
+ * WooCommerce widgets
+ */
+/**
+ * WooCommerce Price Filter
+ */
+.widget_price_filter .price_slider {
+  margin-bottom: 1.5em; }
+
+.widget_price_filter .price_slider_amount {
+  text-align: right;
+  line-height: 2.4em; }
+  .widget_price_filter .price_slider_amount .button {
+    float: left; }
+
+.widget_price_filter .ui-slider {
+  position: relative;
+  text-align: left; }
+
+.widget_price_filter .ui-slider .ui-slider-handle {
+  position: absolute;
+  z-index: 2;
+  width: 1em;
+  height: 1em;
+  cursor: ew-resize;
+  outline: none;
+  background: royalblue;
+  box-sizing: border-box;
+  margin-top: -.25em;
+  opacity: 1; }
+  .widget_price_filter .ui-slider .ui-slider-handle:last-child {
+    margin-left: -1em; }
+  .widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
+    box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1); }
+
+.widget_price_filter .ui-slider .ui-slider-range {
+  position: absolute;
+  z-index: 1;
+  display: block;
+  border: 0;
+  background: royalblue; }
+
+.widget_price_filter .price_slider_wrapper .ui-widget-content {
+  background: rgba(0, 0, 0, 0.1); }
+
+.widget_price_filter .ui-slider-horizontal {
+  height: .5em; }
+
+.widget_price_filter .ui-slider-horizontal .ui-slider-range {
+  height: 100%; }