/*
Theme Name:   Snowgoose Storefront
Description:  Storefront child theme recreating the Canvas + Fashionable look for Snowgoose Lace.
Template:     storefront
Version:      1.4.0
Text Domain:  snowgoose-storefront
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   Typography (Fashionable: PT Sans body, Vollkorn headings)
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: "PT Sans", sans-serif;
}

body {
	font-size: 0.85em;
	line-height: 1.45;
	color: #999;
}

p {
	margin-bottom: 1.3em;
}

.entry-content p {
	line-height: 1.8;
	margin-bottom: 1.4em;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title,
.page-title,
.widget-title,
.widgettitle,
.woocommerce-loop-product__title,
.product_title {
	font-family: "Vollkorn", serif;
	font-weight: 400;
	line-height: 1.2;
	color: #222;
	letter-spacing: 0;
}

h1 { font-size: 3.998em; }
h2 { font-size: 2.827em; }
h3 { font-size: 1.999em; }
h4 { font-size: 1.414em; }

.entry-title,
.page-title,
h1.entry-title,
.hentry .entry-header .entry-title {
	font-size: 1.999em;
	font-weight: 300;
}

a,
a:visited {
	color: #777;
	text-decoration: none;
}

a:hover,
a:focus {
	color: #5e5e5e;
	text-decoration: underline;
}

/* ==========================================================================
   960px layout, sidebar on the right at Canvas proportions (70 / 3.4 / 26.5)
   Totals stay just under 100% so sub-pixel rounding can't push the sidebar
   below the content.
   ========================================================================== */
@media (min-width: 980px) {
	.col-full {
		max-width: 960px;
		padding-left: 0;
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	.right-sidebar .content-area {
		width: 70%;
		float: left;
		margin-right: 3.4%;
	}

	.right-sidebar .widget-area {
		width: 26.5%;
		float: right;
		margin-right: 0;
	}

	.left-sidebar .content-area {
		width: 70%;
		float: right;
		margin-right: 0;
	}

	.left-sidebar .widget-area {
		width: 26.5%;
		float: left;
		margin-right: 3.4%;
	}
}

/* ==========================================================================
   Black top bar (account menu, phone, cart)
   ========================================================================== */
.sg-top-bar {
	background: #000;
	color: #fff;
	font-size: 0.9em;
	text-transform: uppercase;
}

.sg-top-bar .col-full {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

/* Storefront's clearfix pseudo-elements would become flex items and
   push the right-hand group into the middle. */
.sg-top-bar .col-full::before,
.sg-top-bar .col-full::after {
	display: none;
}

.sg-top-bar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sg-top-nav > ul > li {
	display: inline-block;
	position: relative;
}

.sg-top-bar a,
.sg-top-bar a:visited {
	color: #fff;
	display: inline-block;
	padding: 1em 1em 1em 0;
}

.sg-top-bar a:hover {
	color: #ddd;
	text-decoration: none;
}

.sg-top-nav ul ul {
	display: none;
	position: absolute;
	left: 0;
	top: 100%;
	z-index: 9999;
	min-width: 12em;
	background: #fff;
	padding: 0.5em 1em;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.sg-top-nav li:hover > ul,
.sg-top-nav li:focus-within > ul {
	display: block;
}

.sg-top-nav ul ul a,
.sg-top-nav ul ul a:visited {
	color: #666;
	padding: 0.4em 0;
}

.sg-top-right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 1em;
}

.sg-phone {
	padding: 1em 0;
}

/* Font Awesome (bundled with Storefront) icons matching Canvas's top bar */
.sg-phone::before {
	content: "\f879"; /* phone-alt: same handset as Canvas's fa-phone */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 0.9em;
	margin-right: 0.618em;
	-webkit-font-smoothing: antialiased;
}

/* Cart in the top bar */
.sg-top-bar .site-header-cart {
	margin: 0;
	position: relative;
}

.sg-top-bar .site-header-cart .cart-contents {
	padding: 1em 0;
}

.sg-top-bar .site-header-cart .cart-contents::after {
	color: #fff;
}

/* Icon only, like Canvas; the total shows in the dropdown */
.sg-top-bar .site-header-cart .cart-contents .amount,
.sg-top-bar .site-header-cart .cart-contents .count {
	display: none;
}

.sg-top-bar .site-header-cart .widget_shopping_cart {
	background: #fff;
	color: #999;
	text-transform: none;
	right: 0;
	width: 300px;
	z-index: 9999;
}

.sg-top-bar .site-header-cart:hover .widget_shopping_cart,
.sg-top-bar .site-header-cart.focus .widget_shopping_cart {
	left: auto;
	right: 0;
}

.sg-top-bar .site-header-cart .widget_shopping_cart a,
.sg-top-bar .site-header-cart .widget_shopping_cart a:visited {
	color: #777;
	padding: 0;
}

.sg-top-bar .site-header-cart .widget_shopping_cart .buttons a {
	color: #fff;
	padding: 0.85em 2em;
}

@media (max-width: 767px) {
	/* Storefront shows the cart in the handheld footer bar on phones */
	.sg-top-bar .site-header-cart {
		display: none;
	}
}

/* ==========================================================================
   Header: centered logo, search on the right
   ========================================================================== */
.site-header {
	background: #fff;
	border-bottom: 0;
	padding-top: 40px;
	margin-bottom: 0;
}

.site-header .col-full {
	position: relative;
}

.site-header .site-branding,
.woocommerce-active .site-header .site-branding {
	float: none;
	width: 100%;
	margin-right: 0;
	text-align: center;
	margin-bottom: 1.5em;
}

.site-header .custom-logo-link {
	display: inline-block;
}

.site-header .custom-logo-link img {
	max-width: 100%;
	margin: 0 auto;
}

.site-branding .site-title {
	font-size: 3.1em;
	text-transform: uppercase;
}

.site-branding .site-description {
	font-family: "PT Sans", sans-serif;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 2px;
}

/* Storefront adds a large gap under the header on the home page and pages
   without breadcrumbs; the nav's own margin replaces it. */
.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header,
.no-wc-breadcrumb .site-header {
	margin-bottom: 0;
}

/* Header widget area (the Search widget), moved under the logo and
   right-aligned like Canvas's header widget. */
.site-header .header-widget-region {
	clear: both;
	margin-bottom: 1.5em;
}

.site-header .header-widget-region .col-full {
	max-width: none;
	margin: 0;
	padding: 0;
}

.site-header .header-widget-region .widget {
	padding: 0;
	font-size: 1em;
}

@media (min-width: 768px) {
	.site-header .header-widget-region {
		width: 37%;
		margin-left: 50%;
	}
}

.site-header .header-widget-region .widget-title,
.site-header .header-widget-region .widgettitle {
	font-size: 1.35em;
	margin: 0 0 0.3em;
}

.site-header .widget_product_search form,
.site-header .widget_search form {
	display: flex;
	align-items: stretch;
}

.site-header .widget_product_search form::before,
.site-header .widget_search form::before {
	display: none;
}

.site-header .widget_product_search input[type="search"],
.site-header .widget_product_search input[type="text"],
.site-header .widget_search input[type="search"],
.site-header .widget_search input[type="text"] {
	flex: 1 1 auto;
	width: auto;
	padding: 0.6em 0.7em;
	border: 1px solid #e6e6e6;
	background: #fff;
	box-shadow: none;
	border-radius: 0;
	line-height: 1.2;
}

/* Show the black search button that Storefront normally hides */
.site-header .widget_product_search form:not(.wp-block-search) button[type="submit"],
.site-header .widget_product_search form:not(.wp-block-search) input[type="submit"],
.site-header .widget_search form:not(.wp-block-search) button[type="submit"],
.site-header .widget_search form:not(.wp-block-search) input[type="submit"] {
	position: static !important;
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	margin: 0 0 0 0.3em;
	overflow: visible;
	padding: 0.6em 1.4em;
	background: #222;
	color: #fff;
	font-size: 0.85em;
	letter-spacing: 1px;
}

/* ==========================================================================
   Primary navigation: centered, uppercase, rule underneath (960px wide)
   ========================================================================== */
.storefront-primary-navigation {
	background: #fff;
	margin-bottom: 2.5em;
	text-transform: uppercase;
}

.storefront-primary-navigation > .col-full {
	border-bottom: 1px solid #e6e6e6;
}

@media (min-width: 768px) {
	.storefront-primary-navigation .main-navigation,
	.woocommerce-active .site-header .main-navigation {
		float: none;
		width: 100%;
		margin-right: 0;
		text-align: center;
	}

	.main-navigation ul.menu > li,
	.main-navigation ul.nav-menu > li {
		float: none;
		display: inline-block;
	}

	.main-navigation ul.menu ul,
	.main-navigation ul.nav-menu ul {
		text-align: left;
		background: #fff;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}
}

.main-navigation ul li a,
.main-navigation ul li a:visited {
	color: #222;
}

.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
	color: #666;
	text-decoration: none;
}

/* ==========================================================================
   Buttons (square, dark)
   ========================================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.site-header-cart .widget_shopping_cart a.button {
	background: #222;
	border: 0;
	border-radius: 0;
	color: #fff;
	font-size: 0.85em;
	font-weight: 400;
	letter-spacing: 1px;
	padding: 0.85em 2em;
	text-shadow: none;
	transition: background 0.15s ease-out;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.widget a.button:hover {
	background: #444;
	color: #fff;
	text-decoration: none;
}

button.alt,
input[type="button"].alt,
input[type="submit"].alt,
.button.alt,
.widget-area .widget a.button.alt {
	background: #222;
}

button.alt:hover,
.button.alt:hover {
	background: #444;
}

/* ==========================================================================
   Forms
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
	border: 1px solid #e6e6e6;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
}

/* ==========================================================================
   Sidebar widgets
   ========================================================================== */
.widget-area .widget {
	font-size: 1em;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.widget .widget-title,
.widget .widgettitle {
	font-size: 1.35em;
	font-weight: 300;
	color: #222;
	border: 0;
	padding: 0;
	margin: 0 0 0.5em;
}

/* Plain bulleted lists instead of Storefront's folder icons and bold links */
.widget-area .widget ul {
	margin-left: 1.2em;
}

.widget-area .widget ul li,
.widget-area .widget_product_categories ul li,
.widget-area .widget_categories ul li,
.widget-area .widget_pages ul li,
.widget-area .widget_nav_menu ul li {
	list-style: disc;
	padding-left: 0;
	margin-bottom: 0.3em;
	line-height: 1.45;
	text-transform: uppercase;
}

.widget-area .widget ul ul li {
	list-style: disc;
	text-transform: none;
}

.widget-area .widget ul li::before {
	display: none;
}

.widget-area .widget ul li::marker {
	color: #aaa;
}

.widget-area .widget a {
	font-weight: 400;
	text-decoration: none;
	color: #666;
}

.widget-area .widget a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Content tables
   ========================================================================== */
table th,
table thead th {
	background: rgba(0, 0, 0, 0.05);
}

table td,
table th {
	border-color: rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   WooCommerce: product grid
   ========================================================================== */
ul.products li.product {
	text-align: left;
	margin-bottom: 3em;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3 {
	font-size: 20px !important; /* from the old Additional CSS */
	color: #222;
}

ul.products li.product .price {
	color: #777;
	margin: 0 0 0.5em;
}

ul.products li.product img {
	margin-bottom: 1.5em;
}

.onsale {
	border: 1px solid #222;
	border-radius: 0;
	color: #222;
	background: #fff;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ==========================================================================
   WooCommerce: single product
   ========================================================================== */
.single-product div.product .product_title {
	margin-bottom: 0.5em;
}

.single-product div.product p.price {
	font-size: 1.5em;
	font-weight: normal;
	color: #777;
}

/* Horizontal grey tab box instead of Storefront's vertical tabs */
.woocommerce-tabs {
	background: #eee;
	padding: 1.618em !important;
	margin-bottom: 2.244em;
	border: 0;
}

.woocommerce-tabs ul.tabs,
.woocommerce div.product .woocommerce-tabs ul.tabs {
	float: none !important;
	width: 100% !important;
	margin: 0 0 0.618em;
	border: 0;
	text-align: left;
}

.woocommerce-tabs ul.tabs li {
	display: inline-block;
	border: 0 !important;
	margin-right: 1em;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	background: #d2d2d2;
	color: #222;
	padding: 0.6em 1.2em;
}

.woocommerce-tabs ul.tabs li a:hover {
	text-decoration: none;
}

.woocommerce-tabs ul.tabs li.active a {
	background: #444;
	color: #fff;
}

.woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs li.active::after {
	display: none;
}

.woocommerce-tabs .panel {
	float: none !important;
	width: 100% !important;
}

.woocommerce-tabs .panel h2 {
	font-size: 1.2em;
	margin-bottom: 0.7em;
}

.related > h2,
.upsells > h2 {
	font-size: 1.999em;
}

.quantity .qty {
	border-radius: 0;
}

.star-rating,
.star-rating span::before {
	color: #333;
}

/* ==========================================================================
   Footer: centered, rule across the 960px column only
   ========================================================================== */
.site-footer {
	background: #fff;
	border-top: 0;
	padding: 0 0 3em;
}

.site-footer > .col-full {
	border-top: 1px solid #e6e6e6;
	padding-top: 3em;
}

.site-footer .site-info {
	text-align: center;
	padding: 0;
	color: #999;
	line-height: 2.4;
}

.site-footer .site-info a,
.site-footer .site-info a:not(.button):not(.components-button) {
	color: #666;
	text-decoration: none;
}

.site-footer .sg-woothemes {
	display: inline-block;
	vertical-align: middle;
	margin-top: -3px;
}

/* ==========================================================================
   Small alignment fixes
   ========================================================================== */
/* Storefront reserves room for a search icon inside the field; the button replaces it */
.site-header .widget_product_search form:not(.wp-block-search) input[type="search"],
.site-header .widget_search form:not(.wp-block-search) input[type="search"] {
	padding-left: 0.7em;
}

/* Keep the cart icon on the same line as the phone number */
.sg-top-bar .site-header-cart .cart-contents::after {
	content: "\f07a"; /* shopping-cart, as in Canvas, instead of Storefront's basket */
	float: none;
	line-height: 1;
	height: auto;
	vertical-align: middle;
}

/* Magnifying-glass icon on the header search button, as in Canvas */
.site-header .widget_product_search form:not(.wp-block-search) button[type="submit"],
.site-header .widget_search form:not(.wp-block-search) button[type="submit"] {
	font-size: 0;
	padding: 0 22px;
	min-height: 34px;
}

.site-header .widget_product_search form:not(.wp-block-search) button[type="submit"]::before,
.site-header .widget_search form:not(.wp-block-search) button[type="submit"]::before {
	content: "\f002";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 12px;
	line-height: 1;
}

/* Sub-categories sit right under their parent */
.widget-area .widget ul .children,
.widget-area .widget ul ul {
	margin-top: 0.3em;
	margin-bottom: 0;
}

/* Storefront's Customizer CSS colors every "ul.menu li a" with the header
   link color; keep the top-bar links white. */
.sg-top-bar .sg-top-nav ul.menu li a,
.sg-top-bar .sg-top-nav ul.menu li a:visited {
	color: #fff;
}

.sg-top-bar .sg-top-nav ul.menu li a:hover,
.sg-top-bar .sg-top-nav ul.menu li.current-menu-item > a {
	color: #ddd;
}

.sg-top-bar .sg-top-nav ul.menu ul li a,
.sg-top-bar .sg-top-nav ul.menu ul li a:visited {
	color: #666;
}

/* Product grid buttons: larger, all caps, as in Canvas */
.site-main ul.products li.product .button,
ul.products li.product .button {
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0.85em 1.7em;
}