/*
Theme Name: Bitterne Box
Theme URI: https://www.themeisle.com/
Description: Bitterne Box theme based on an adapted verson of Hestia
Author: Ben Wheeler
URI: https://uniqcode.com/
Template: hestia
Version: 1.4
*/

/* Colours */
html {
	--card-background-color: #f1f1dd;
	--main-background-color: #fdf5e2;
	--main-accent-color: #006633;
	--main-accent-color-hover: #31791b;
	--navbar-background-color: #fff2cc;
	--navbar-hover-background-color: #fcf3d4;
	--header-search-bar-background-color: #fff7df;
}

/* Local Fonts */
@font-face {
	font-family: "Ostrich Sans Heavy";
	src: url("assets/fonts/ostrich-sans-heavy/OstrichSans-Heavy.eot") format("eot"),url("assets/fonts/ostrich-sans-heavy/OstrichSans-Heavy.woff") format("woff"),url("assets/fonts/ostrich-sans-heavy/OstrichSans-Heavy.ttf") format("truetype"),url("assets/fonts/ostrich-sans-heavy/OstrichSans-Heavy.svg#OstrichSans-Heavy") format("svg");
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: "Roboto Flex";
	src: url("assets/fonts/Roboto-Flex.woff2") format("woff2");
	font-style: normal;
	font-weight: 400 700;
}


/* Force the correct font families here, overriding Hestia's inline setting based on the Appearance */
body,h1,h2,h3,h4,h5,h6,ul,
.tooltip-inner, .products .shop-item .added_to_cart, 
.woocommerce-checkout #payment input[type=submit], .woocommerce-checkout input[type=submit],
.woocommerce-cart table.shop_table td.actions input[type=submit],
.woocommerce .cart-collaterals .cart_totals .checkout-button, .woocommerce button.button,
.woocommerce div[id^=woocommerce_widget_cart].widget .buttons .button, .woocommerce div.product form.cart .button,
.woocommerce #review_form #respond .form-submit , .added_to_cart.wc-forward, .woocommerce div#respond input#submit,
.woocommerce a.button {
	font-family: "Roboto Flex", "Helvetica", "Arial", sans-serif !important;
}
h1, h2, h3, h4, h5, h6, .hestia-title, .hestia-title.title-in-content, p.meta-in-content , .info-title, .card-title,
.page-header.header-small .hestia-title, .page-header.header-small .title, .widget h5, .hestia-title,
.title, .footer-brand, .footer-big h4, .footer-big h5, .media .media-heading,
.carousel h1.hestia-title, .carousel h2.title,
.carousel span.sub-title, .hestia-about h1, .hestia-about h2, .hestia-about h3, .hestia-about h4, .hestia-about h5,
.woocommerce.single-product h1.product_title, .woocommerce section.related.products h2, .woocommerce section.exclusive-products h2, 
.woocommerce span.comment-reply-title, .woocommerce ul.products[class*="columns-"] li.product-category h2 {
	font-family: "Roboto Slab", "Times", "Times New Roman", serif !important;
}

/* Tooltip background fix */
.tooltip-inner {
	background-color: var(--navbar-background-color);
}
.tooltip.top .tooltip-arrow {
	border-top-color: var(--navbar-background-color);
}
.tooltip.bottom .tooltip-arrow {
	border-bottom-color: var(--navbar-background-color);
}
.tooltip.left .tooltip-arrow {
	border-left-color: var(--navbar-background-color);
}
.tooltip.right .tooltip-arrow {
	border-right-color: var(--navbar-background-color);
}

/* Fix Font Awesome's required font weight being overridden by other stylesheets */
.fas {
	font-weight: 900 !important;
}

/* Buttons */
input#submit, a.button, button.button, input.button, .btn.btn-primary {
	background-color: var(--main-accent-color);
	color: white;
}
input#submit:hover, a.button:hover, button.button:hover, input.button:hover, .btn.btn-primary:hover {
	background-color: var(--main-accent-color-hover);
	color: white;
}
/* Don't use huge 18px font in various places */
.page-content-wrap, .page-content-wrap dl, .page-content-wrap ol, .page-content-wrap table, .page-content-wrap ul, .page-template-template-fullwidth article, .page-template-template-fullwidth article dl, .page-template-template-fullwidth article ol, .page-template-template-fullwidth article table, .page-template-template-fullwidth article ul, .single-post-wrap, .single-post-wrap dl, .single-post-wrap ol, .single-post-wrap table, .single-post-wrap ul {
	font-size: 16px;
}
/* But reinstate it in others */
.page-content-wrap .woocommerce-MyAccount-navigation ul {
	font-size: 18px;
}


/* Loading spinner carrot */
input.loading::after,
button.loading::after,
.woocommerce #respond input#submit.loading::after, .woocommerce a.button.loading::after, .woocommerce button.button.loading::after, .woocommerce input.button.loading::after {
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
	-webkit-animation: carrotspin 1s linear infinite !important;
	animation: carrotspin 1s linear infinite !important;
	-webkit-font-smoothing: antialiased !important;
	display: inline-block !important;
	position: static !important;
	content: "\f787" !important;
	margin-left: 1em !important;
}
/* This replaces the button text, so no margin */
button#Getstarted-Postcode-Submit.loading::after { 
	margin-left: 0 !important;
}

/* With a standard spin, the carrot was often spending most of its time on-screen upside-down, so we use a special one that starts it upside-down so that the bulk of its first half-second on screen is the right way up */
@-moz-keyframes carrotspin { 0% { -moz-transform: rotate(-120deg); } 100% { -moz-transform: rotate(240deg); } }
@-webkit-keyframes carrotspin { 0% { -webkit-transform: rotate(-120deg); } 100% { -webkit-transform: rotate(240deg); } }
@keyframes carrotspin { 0% { -webkit-transform: rotate(-120deg); transform: rotate(-120deg); } 100% { -webkit-transform: rotate(240deg); transform:rotate(240deg); } }


/* Don't fade it or pad it so much */
.woocommerce #respond input#submit.loading, .woocommerce a.button.loading, .woocommerce button.button.loading, .woocommerce input.button.loading {
	opacity: 0.6; /* was 0.25 */
	padding-right: 0;
}
.woocommerce a.button.btn-just-icon.loading::after {
	font-size: 1.4em;
	color: var(--main-accent-color) !important;
	margin-left: 1px !important;
}

/* Don't show a spinner on blocked content unless it also has .processing */
/* and replace standard Woo spinner with carrot */
.blockUI.blockOverlay::before {
	content: "" !important;
	background: none !important;
}
.processing .blockUI.blockOverlay::before, 
.woocommerce .loader::before {
	font-family: "Font Awesome 5 Free" !important;
	font-weight: 900 !important;
	content: "\f787" !important;
	background: none !important;
	color: var(--main-accent-color) !important;
	font-size: 40px !important;
	animation: carrotspin 1s ease-in-out infinite;
}

/* Ensure checkout form spinner area covers the whole form, by ensuring the form covers all its contents. Basically like a .clearfix */
.woocommerce-checkout::after {
	content: " ";
	display: table;
	clear: both;
}


/* h2s are too big */
.page-content-wrap h2, .single-post-wrap h2, h2 {
	font-size: 30px;
}

/* Navbar */

/* Larger font */
.navbar a {
	font-size: 16px;
}

/* Transparent navbar is not transparent anymore */
.navbar.navbar-transparent {
	color: #333;
	background-color: var(--navbar-background-color);
}
.navbar.navbar-transparent .navbar-nav > li > a:hover {
	color: #333;
}

/* A bit of space between the logo and the nav (or the bottom of the navbar on mobile) */
.navbar .title-logo-wrapper {
	margin-bottom: 15px;
}

/* Don't uppercase */
.navbar .navbar-nav > li > a {
	text-transform: none;
}

/* Make main nav wider on wide screens - reduces chance of wrapping */
@media (min-width: 992px) {
	.navbar .container {
		width: 98%;
	}
}
@media (min-width: 769px) {
	.navbar.hestia_left .title-logo-wrapper {
		min-width: 150px; /* Reduced from Hestia, again to try to discourage wrapping */
	}
	.navbar.hestia_left .navbar-collapse {
		margin-left: 0; /* override 'auto' so that nav menu does not justify to right */
	}
}

/* Since we now get rid of Hestia's adjustment, don't want a negative top margin on here anymore */
.main {
	margin-top: 0 !important;
}

/* Front Page Section Order */
/* Using technique from https://stackoverflow.com/a/54521415 */
/* Move Blog section up to just after Features */

.home .main {
	display: grid;
}

.home .main #blog {
	grid-row: 3;
}

.home .main #subscribe {
	grid-row: 1; /* was 2 */
}

/* Front Page main image area */

/* -- Don't grey out the main image */
.header-filter::before {
	background-color: rgba(0,0,0,0); /* Override default with transparent */
	background-image: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.1), rgba(0,0,0,0), rgba(0,0,0,0));
}

/* Main heading font */
.carousel h1.hestia-title {
	font-family: "Ostrich Sans Heavy", sans-serif !important;
	font-weight: normal;
	text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
}

.carousel .hestia-big-title-content .sub-title {
	text-shadow: 1px 3px 10px rgba(51, 55, 57, 0.6);
	font-weight: bold;
}

.where-available {
	font-weight: normal;
	font-size: small;
	margin-top: 2em;
}

/* Get Started buttons */
.home .btn-primary {
	font-size: 125%;
	text-shadow: 1px 3px 10px rgba(51, 55, 57, 0.6);
}

/* Front Page blog section */
/* Overlay the content on the image instead of putting it below */
.hestia-blog-item .content {
	position: relative;
}
.hestia-blog-item .content .card-description {
	position: absolute;
	top: 0;
	margin: 10px 5px 20px 15px;
	padding: 0 10px;
	text-shadow: 3px 3px 3px rgba(51, 55, 57, 0.9);
	overflow: scroll;
	background-color: rgba(0,0,0,0.5);
	width: 320px !important;
	color: white;
	font-size: 12px;
	opacity: 0;
	transition: 0.3s ease-in;
}
.hestia-blog-item .content .card-description ul {
	margin: 0;
	padding: 0;
	padding-left: 4px;
	column-count: 2;
}

.hestia-blog-item:hover .content .card-description {
	transition: 0.6s ease-out;
	opacity: 1;
}

/* Front Page Gallery */
.wp-block-gallery .blocks-gallery-item {
	/* Increase margins between images */
	margin-right: 32px;
	margin-bottom: 32px;
}
.wp-block-gallery.columns-3 .blocks-gallery-item {
	margin-right: 32px;
	width: calc((100% - 64px)/3);
}

/* Front page: Lose scrollbars on hover description in Picks Of The Week section*/
.hestia-blog-item .content .card-description {
	overflow: hidden;
}

/* My Account page */

/* Reduce wasted space */
.woocommerce-account .section {
	padding-top: 20px;
}

/* Fix badly wrapped nav in "My Account" screen by making it slightly bigger - only on larger screens */
@media (min-width: 992px) {
	.woocommerce-account .woocommerce-MyAccount-navigation {
		width: 27%;
	}

	.woocommerce-account .woocommerce-MyAccount-content {
		width: 68%;
	}
}

/* Fix the zone between 768px and 991px where Hestia inexplicably turns the My Account sidebar into a single horizontal row */
@media (max-width: 991px) {
	.woocommerce-account .woocommerce-MyAccount-navigation ul li {
		display: block;
		float: left;
		padding-right: 15px;
	}
}

/* Calm down the harsh white backgrounds*/
.woocommerce.archive .main {
	background-color: var(--main-background-color);
}
/* Ditto, but the original stylesheet calls it 'background' rather than 'background-color' */
.main, 
.woocommerce.single-product.header-layout-classic-blog .blog-post, 
.section-gray,
.header-widgets-wrapper .widget.widget_shopping_cart .cart_list
{
	background-color: var(--main-background-color);
}

/* Something slightly different for the non-transparent navbar */
.navbar {
	background: var(--navbar-background-color);
}
/* Even the transparent navbar is not transparent on small screens */
@media (max-width:768px) {
	.navbar.navbar-transparent {
		background: #ffeebe; /* was #ffedb9 */
	}
}

/* Nav Menu on phones and tablets - folds out within navbar instead of using position:fixed, so that it plays nicely with aws-search. Consequently it needs no margin-top. */
@media (max-width: 768px) {
  	.navbar.navbar-fixed-top .navbar-collapse {
		position: static;
		margin-top: 0;
	}
}
@media (max-width: 768px) {
  	body.admin-bar .navbar.navbar-default .navbar-collapse {
		margin-top: 0;
	}
}


/* Hamburger menu on phones and tablets */
/* Important needed so that it applies while folding/unfolding as well, otherwise it jumps around */
.navbar-collapse.collapse.in, 
.navbar-collapse.collapsing {
	background: var(--navbar-background-color) !important;
	border-radius-bottom-left: 4px;
	border-radius-bottom-right: 4px;
	padding-bottom: 10px;
	width: 100%;
	xposition: fixed;
}

@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar .navbar-collapse.collapse.in, 
	.admin-bar .navbar-collapse.collapsing {
		top: 113px !important; /* Lower when fixed admin bar present */
	}
}

.navbar-collapse.collapse.in ul.nav,
.navbar-collapse.collapsing ul.nav {
	background-color: var(--navbar-background-color);
	margin-left: auto;
	margin-right: auto;
	max-width: 300px;
	overflow-y: scroll;
	overflow-x: visible;
}

/* Product info boxes */
.card,
.woocommerce.single-product .blog-post .col-md-12 > div[id^="product"].product,
.woocommerce ul.products[class*="columns-"] li.product-category a {
	background-color: var(--card-background-color) !important;
}

/* Avoid issues with transparent images */
.woocommerce ul.products li.product a img {
	background-color: #fff;
}

.woocommerce .product .card-product .card-description p {
	color: #686;
}

/* Product info tabs - less margin between tabs and content */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin-bottom: 20px;
}
/* Kill the little white bits on the product tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after {
	box-shadow: none;
}
/* and near labels */
.label {
  background-color: inherit;
}

/* Don't make .control-label labels small or grey */
.form-group label.control-label {
	font-size: inherit;
	color: inherit;
}

/* Header / Navbar */

/* Move navbar styling to header where it should be */
nav.navbar {
	box-shadow: none;
	background: none;
	margin-top: 0 !important;
	margin-bottom: 0;
	position: static; 
}

header.header {
	background: var(--navbar-background-color);
	box-shadow: 0 1px 10px -6px rgba(0, 0, 0, 0.42), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px -2px rgba(0, 0, 0, 0.1);
	position: sticky; /* Keeps it in the flow for laying out subsequent elements, and ensures it moves up when the admin-bar scrolls off, which it does at certain screen sizes */
				/* The problem with doing that is it makes the menu unscrollable on mobile, so we need to pull that out into a modal */
	top: 0;
	z-index: 1001; /* .processing has 1000, so this avoids it overspilling the header */
	min-height: 69px; /* Avoids it starting smaller and then growing when the nav menu is loaded */
}

/* Move header down when fixed admin bar present */
.admin-bar header {
	top: 32px;
}
/* On small screens the admin bar is not fixed but scrolls away, so make the navbar sticky */
@media (max-width: 600px) {
	.admin-bar header {
		top: 0;
		z-index: 1;
	}
	.admin-bar .navbar {
		position: static;
	}
}
/* On medium screens the admin bar is taller but fixed */
@media (min-width: 601px) and (max-width: 782px) {
	.admin-bar header {
		top: 46px;
	}
}

/* Different header layout */

.navbar-header-image {
	width: 240px;
	margin: 0 auto;
}

.navbar-header-image .navbar-header,
.navbar-header-image .navbar-header .navbar-brand {
	float: none;
}

/* Larger font in navs and dropdown menus */
.navbar {
	font-size: 15px;
}
.navbar a {
	font-size: 15px;
}
.navbar .dropdown-menu li > a {
	font-size: 15px;
}

.navbar .container {
	padding-top: 2px;
	padding-bottom: 0;
}
/* Don't change that padding when the navbar is transparent (or not transparent but using that class because it's at the top of the front page */
.navbar.navbar-transparent > .container {
	padding-top: 2px;
}

/* Shave off 1px so that top of submenus line up with bottom of navbar */
.navbar .navbar-nav {
	margin-bottom: -1px;
}
.navbar li:hover > a, 
.navbar li:focus > a, 
.navbar li.active > a {
	font-variation-settings: "GRAD" 1; /* Make it bold without making it wider */
}

/* Less padding on top-level */
.navbar ul.navbar-nav > li > a {
	padding-top: 9px;
	padding-bottom: 9px;
}

/* Less padding within dropdown menus */
.navbar .navbar-nav > li .dropdown-menu li > a {
	padding: 7px 10px;
}

/* Way less padding on submenus on mobile */
@media (max-width: 768px) {
	.navbar-collapse {
		padding-left: 5px;
	}
	.navbar li a {
		background-color: #f7e7b9 !important;
		margin-top: 4px !important;
		margin-bottom: 4px !important;
		padding-top: 4px !important;
		padding-bottom: 4px !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
		border-radius: 6px !important;
	}
	.navbar .navbar-nav > li > a {
		margin-left: 5px;
	}
	.navbar .navbar-nav .dropdown .dropdown-menu li a {
		margin-left: 20px;
	}
	.navbar .navbar-nav .dropdown .dropdown-menu li li a {
		margin-left: 35px;
	}
	.navbar .navbar-nav .dropdown .dropdown-menu li li li a {
		margin-left: 50px;
	}
	.navbar-default .navbar-nav .open .dropdown-menu > li > a {
		color: #333;
	}
	/* Move the carets accordingly */
	.navbar .navbar-nav .dropdown a .caret {
		right: 2px;
		top: 2px;
		width: 26px;
		height: 26px;
		border: none;
		background-color: #e1ce97;
	}
	.navbar .navbar-nav .dropdown .dropdown a .caret {
		top: 5px;
	}
	
	.navbar .navbar-nav .dropdown a .caret svg {
		transform: translate(-3px, -3px) scale(0.90) ;
	}
	.navbar .navbar-nav .dropdown a .caret-open .caret svg {
		transform: translate(-3px, -3px) scale(0.90) rotate(-180deg);
	}
	
}


/* Navbar tabification, shadows, animation - not on mobile */

@media (min-width: 769px) {
	/* Top level nav items */
	.navbar .navbar-nav > li:not(.btn) > a::before, .navbar .navbar-nav > li:not(.btn) .hestia-toggle-search::before {
		border-radius: 4px;
		background-color: var(--navbar-hover-background-color); 
		color: #333;
        	box-shadow: 0 0 12px rgba(0,0,0,0.175);
		transform: scaleY(0);
		transform-origin: bottom;
		transition: all 75ms ease-in;
	}
	.navbar .navbar-nav > li:not(.btn) > a:hover::before, .navbar .navbar-nav > li:not(.btn) .hestia-toggle-search:hover::before {
		transform: scaleY(1);
		transition: all 75ms ease-out;
	}
	/* Top level nav items that have submenus - try to make them look joined on */
	.navbar ul.navbar-nav > li.menu-item-has-children > a::before {
        	border-bottom-left-radius: 0px !important;
        	border-bottom-right-radius: 0px !important;
		clip-path: inset(-12px -12px 0px -12px); /* Cut the shadow off the bottom */
	}
	
	/* Top-level submenu box shadow goes in a :before so that it can be z-indexed behind the parent nav item's box, so switch it off here and adjust position */
	.navbar ul.navbar-nav > li > ul.dropdown-menu {
		top: 38px;
		background-color: transparent;
		box-shadow: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		border-radius: none;
	}
	/* The submenu starts transformed to zero width, and grows when its parents is hovered. Note this applies to all levels of submenu */
	.navbar ul.navbar-nav li.menu-item-has-children .dropdown-menu::before {
		content: "";
		position: absolute;
		z-index: -1;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		transform: scaleY(0);
		transform-origin: top; 
		-moz-transition: all 350ms ease-in-out;
		-webkit-transition: all 350ms ease-in-out;
		transition: all 350ms ease-in;
		background-color: var(--navbar-hover-background-color);
		border-top-left-radius: 0 !important;
		border-top-right-radius: 4px !important;
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 4px !important;
        	box-shadow: 0 0 12px rgba(0,0,0,0.175);
		clip-path: inset(0px -12px -12px -12px); /* Cut the shadow off the top */
	}
	/* All levels of submenu transform when their parent is hovered */
	.navbar ul.navbar-nav li.menu-item-has-children:hover .dropdown-menu::before {
		transform: scaleY(1);
		-moz-transition: all 350ms ease-in-out;
		-webkit-transition: all 350ms ease-in-out;
		transition: all 350ms ease-out;
	}
	
	/* Nudge sub-submenus up slightly so they line up instead of being slightly offset */
	.dropdown-submenu .dropdown-menu {
		top: -0.3em;
	}

	/* Try to fix flickering when hovering on the top edge of a menu */
	.dropdown .dropdown-menu,
	#main-navigation ul.nav > li,
	.navbar .navbar-nav > li .dropdown-menu li > a {
		-moz-transition: all 350ms ease-in-out;
		-webkit-transition: all 350ms ease-in-out;
		transition: all 350ms ease-in-out;
	}
	
}

/* Advanced WooCommerce Search in header */

.aws-container {
	z-index: 10000; /* Ensure z-index is above nav menu (9999) when the search is popped out on small screens */
	position: relative;
	display: none; /* Hidden on mobile by default */
	max-width: 95%;
	margin: 0 auto 5px auto;
	/* Prevent it from floating outside the header on the front page. For some reason it gets inline CSS to do that. */
	float: none !important;
}

.aws-container .aws-search-form {
	background: var(--header-search-bar-background-color);
}

/* Hide it behind a search icon on mobile */
.header-search-toggle {
	font-size: 20px;
	cursor: pointer;
	position: absolute;
	top: 18px;
	right: 70px;
}

@media (min-width: 769px) {
	.aws-container {
		width: 100%;
		max-width: 600px;
		float: right;
		margin-right: 20px;
	}
	.header-search-toggle {
		position: static;
		margin-left: 10px;
		margin-right: 15px;
		flex: 1 0 auto;
		text-align: right;
	}
}

/* But on larger screens it stays open */
@media (min-width: 992px) {
	.aws-container {
		width: 30%;
		position: absolute;
		top: 15px;
		right: 10px;
		display: block;
	}
	.header-search-toggle {
		xdisplay: none;
	}
}

.aws-search-field:focus,
.aws-search-result {
	background-color: var(--header-search-bar-background-color);
}

.aws-container .form-group::before {
	position: absolute;
	left: 6px;
	top: 4px;
	content: '\f002'; /* Magnifying Glass */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	z-index: 3;
}
	
.aws-container .form-group {
	margin-bottom: 0;
	padding-bottom: 0;
}

.aws-container .aws-search-form {
	box-shadow: 0px 0px 15px -5px rgba(0,0,0,0.2);
}
.aws-container .aws-search-form.form-group,
.aws-container .aws-search-form.form-group input.form-control {
	border-radius: 6px !important /* ! override AWS common.css */;
	background-image: none; /* get rid of ugly underline */
}
.aws-container .aws-search-form.form-group.aws-focus,
.aws-container .aws-search-form.form-group.aws-focus input.form-control {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.aws-container .aws-search-form input.aws-search-field {
	font-size: 16px;
	padding-left: 30px !important;
	z-index: 2;
}

header .aws-container .aws-search-field {
	border-bottom: none;
}

.aws-search-result {
	font-size: 14px;
	box-shadow: 0px 5px 15px -5px rgba(0,0,0,0.2);
	border-bottom-left-radius: 4px !important;
	border-bottom-right-radius: 4px !important;
}

aws-search-result .aws_result_item:hover, .aws-search-result .aws_result_item.hovered {
	background-color: #d2dcbb;
}

	
/* Shop Pages */

/* ...on larger screens */
@media (min-width: 992px) {
	.woocommerce .before-shop-main {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* When using .container-fluid for main content area, leave gutters at the sides on larger screens */
	.main .container-fluid .row {
		margin-left: 0;
		margin-right: 0;
	}
	.post-type-archive-product .content-area,
	.archive.tax-product_cat .content-area {
		margin-top: 0px;
	}
	.post-type-archive-product .container-fluid,
	.archive.tax-product_cat .container-fluid {
		padding-top: 20px;
	}
} 
/* ...on very large screens */
@media (min-width: 1660px) {
	/* Sidebar cart fixed width, and adjust container width accordingly */
	.post-type-archive-product .content-sidebar-right {
		width: calc(100vw - 500px);
	}
	.post-type-archive-product .shop-sidebar-wrapper {
		max-width: 380px;
	}
}

/* ...on small screens */
@media (max-width: 991px) {
	/* Mobile slideout sidebar cart on right, not left */
	.woocommerce .before-shop-main {
		margin-bottom: 0;
	}
	.woocommerce .card-product {
		margin-top: 15px; /* Reduce from 30 */
	}
	.woocommerce .products[class*="columns-"] li {
		margin-top: 0 !important; /* ! override Hestia */
		margin-bottom: 0 !important; /* ! override Hestia */
	}
	.shop-sidebar-wrapper {
		left: 100%;
	}
	.shop-sidebar-wrapper.sidebar-open {
		left: 0;
	}
	.archive.woocommerce .row-sidebar-toggle {
		float: right;
		text-align: right;
		margin-top: 20px;
	}
	.archive.woocommerce .row-sidebar-toggle .hestia-sidebar-open {
		margin-top: 0;
		padding: 10px 15px 8px 15px;
	}
	.archive.woocommerce .row-sidebar-toggle .hestia-sidebar-open a.wpmenucart-contents {
		color: inherit;
	}

}

/* Don't show breadcrumbs on archive pages */
.woocommerce.archive .woocommerce-breadcrumb {
	display: none;
}

.row-sidebar-toggle .hestia-sidebar-close {
	float: right;
}

/* Kill the wasted space in the shop sidebar cart */
.shop-sidebar.card {
	padding-top: 0;
}

.shop-sidebar .widget-shopping-cart {
	margin-bottom: 5px;
}
/* The sidebar cart */
@media (min-width: 992px) {
	/* Prevent the shop sidebar cart from scrolling off screen when the main area is scrolled */
	.shop-sidebar-wrapper {
		position: sticky;
		top: 83px;
		margin-bottom: 0;
	}
	.admin-bar .shop-sidebar-wrapper {
		top: 120px;
	}

	/* Make it no taller than the available viewport height (minus a 30px buffer, and the height of the subtotal and button area so those are always shown), and internally scrollable. */
	.woocommerce-mini-cart.cart_list {
		max-height: calc(100vh - 180px - 30px - 150px);
		overflow-y: scroll;
		overflow-x: hidden;
	}
	/* In case we don't have a scroll bar (MacOS, mobile) use gradients to clue that there's more */
	.widget_shopping_cart::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		height: 26px;
		width: 100%;
		margin-top: 46px;
		background: linear-gradient(0deg, rgba(241,241,221,0) 0%, rgba(241,241,221,1) 100%);
		z-index: 1;
	}
	.widget_shopping_cart::after {
		content: '';
		position: absolute;
		bottom: 110px;
		left: 0;
		width: 100%;
		height: 40px;
		background: linear-gradient(0deg, rgb(241,241,221) 0%, rgb(241,241,221) 40%, rgba(241,241,221,0) 100%);
	}
	/* To ensure the gradients don't make a mess when the cart is empty, it needs a minimum height */
	.widget_shopping_cart {
		min-height: 250px;
	}
	/* And an empty message with padding to clear it of the fades */
	.woocommerce-mini-cart__empty-message {
		padding: 30px 0;
	}
	/* Ensure that the first item on the list does not fade out until it scrolls up */
	.woocommerce-mini-cart.cart_list li:first-child {
		margin-top: 10px !important;
		border-top: 2px double #333 !important;
	}
	/* Ensure that the last item on the list scrolls up past the faded out area */
	.woocommerce-mini-cart.cart_list li:last-child {
		padding-bottom: 5px !important;
		margin-bottom: 20px !important;
		border-bottom: 2px double #333 !important;
	}
	/* Ensure that the totals sit below the bottom fadeout area, which mysteriously moves depending on whether it's an initial page load or an ajax load */
	.woocommerce.widget_shopping_cart .total {
		padding-top: 10px;
	}
}
@media (max-width: 991px) {
	.shop-sidebar-wrapper {
		background: var(--main-background-color);
	}
	.row-sidebar-toggle {
		margin: 10px 0 15px;
		text-align: left;
	}
}


/* Use Grid to make product cards equal height */
.woocommerce ul.products {
	align-items: stretch; 
}

/* Move the Sale box over to the left so it doesn't interfere with the NEW banner. Give it a star background. */
.woocommerce ul.products li.product .onsale {
	display: block;
	right: auto;
	width: 50px;
	height: 50px;
	position: absolute;
	top: -30px;
	left: -20px;
	background: url(assets/icons/sale.svg);
	background-size: cover;
	padding-top: 20px;
	color: white;
	font-size: 10px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	line-height: 100%;
	transform: rotate(-30deg);
}


/* Override the 1 column layout for narrow screens with a 2 column one, omit category, add some space after the title */
@media (max-width:768px) {
  	.woocommerce .products[class*="columns-"] {
		grid-template-columns: repeat(2,1fr) !important;
  	}
  	.card-product .content .category {
		display: none;
	}
	.card-product .content .card-title {
		margin-bottom: 30px;
	}
}
/* And keep 3 columns on tablet widths where there would normally be only 2 */
@media (min-width:769px) and (max-width: 991px) {
  .woocommerce .products[class*="columns-"] {
	grid-template-columns: repeat(3,1fr) !important;
  }
  .woocommerce .product .card-product h4.card-title {
	font-size: 16px;
  }
}

/* On wide screens, add more columns of products */
@media (min-width: 1400px) {
  	.woocommerce .products[class*="columns-"] {
		grid-template-columns: repeat(4,1fr) !important;
	}
}
@media (min-width: 1800px) {
  	.woocommerce .products[class*="columns-"] {
		grid-template-columns: repeat(5,1fr) !important;
	}
}
@media (min-width: 2200px) {
  	.woocommerce .products[class*="columns-"] {
		grid-template-columns: repeat(6,1fr) !important;
	}
}
	

/* .product is the grid item. We ensure this is full height by using align-self: stretch. But then the .card inside it has to stretch too, so we need a flexbox */
.woocommerce ul.products .product {
	display: flex;
	align-items: stretch;
}
.woocommerce ul.products .product .card-product {
}

.woocommerce ul.products .product .card-product .card-image {
	display: block;
	height: auto;
	max-height: 230px; /* Prevent tall images from being tall */
	margin-top: -15px; /* Don't stick up so much */
}

.card-product.pop-and-glow .card-image {
	overflow: hidden !important;
}


/* Align footer to the bottom of the card */
.woocommerce .product .card-product .footer {
	position: absolute;
	padding: 0 6px 0 12px;
	bottom: 5px;
}

/* Don't bother with tickmark when adding to cart */
.woocommerce #respond input#submit.added::after, .woocommerce a.button.added::after, .woocommerce button.button.added::after, .woocommerce input.button.added::after {
	display: none;
}
/* Instead, change colour of basket when added to cart */
.woocommerce #respond input#submit.added i, .woocommerce a.button.added i, .woocommerce button.button.added i, .woocommerce input.button.added i {
	color: var(--main-accent-color);
}

/* Leave space for it below the product name/description - necessary because position:absolute takes it out of the card size calculation */
.woocommerce .product .card-product .content {
	padding-bottom: 40px !important;
}


/* Make price bigger on cards */
.card-product .price, .card-product .price h4 {
	font-size: 18px;
}

/* Don't allow add-to-cart and info icons to wrap */
.card-product .stats {
	white-space: nowrap !important;
}

/* Don't show View Basket button on card after AJAXly adding to cart from a card */
.product .added_to_cart.wc-forward {
	display: none;
}


/* Sold Out badge on product loop */
.soldout {
        text-align: center;
        background: #444;
        color: yellow;
        font-weight: bold;
	width: 100%;
        border-radius: 0 0 6px 6px; /* to match bottom of .card */
	position: absolute;
	bottom: 0;
	font-size: 14px;
	padding: 8px 0;
}


/* On small screens allow image to get bigger, don't show description, shrink text slightly */
@media (max-width:768px) {
	.woocommerce ul.products .product {
		padding: 0 8px !important;
	}
	.woocommerce .product .card-product .card-description {
		display: none;
	}
	.woocommerce .product .card-product h4.card-title {
		font-size: 14px;
	}
	.woocommerce .product .card-product .price h4 {
		font-size: 14px;
		line-height: 1.1rem;
		padding-top: 3px;
	}
	.woocommerce .product .card-product .content {
		padding-bottom: 20px !important;
	}
	.woocommerce .product .card-product .footer {
		bottom: -5px;
	}
	.soldout {
        	font-size: 12px;
		padding: 4px 0;
	}
	.priced-per {
		font-size: 8px !important;
	}
}

/* Make the category titles match the main title font */
.page-header.header-small .hestia-title, .page-header.header-small .title {
	font-family: "Ostrich Sans Heavy", sans-serif !important;
	font-weight: normal;
	font-size: 60px;
	text-shadow: 1px 1px 20px rgba(0, 0, 0, 0.5);
	color: #f4efe0;
	background-color: #337136d9;
	border-radius: 4px;
	box-shadow: 1px 1px 12px 2px #3338;
	width: max-content;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0px !important;
	margin-bottom: 30px !important;
	padding: 0 0.5em;
}
@media (max-width: 991px) {
	.page-header.header-small .hestia-title, .page-header.header-small .title {
		font-size: 45px;
	}
}
@media (max-width: 768px) {
	.page-header.header-small .hestia-title, .page-header.header-small .title {
		font-size: 35px;
	}
}

/* Smaller header on shop pages */
.page-header.header-small .container {
	padding-bottom: 50px;
}


/* Breadcrumbs */
.woocommerce .woocommerce-breadcrumb {
	font-size: 16px !important;
	margin-top: 1em !important;
	color: #333;
}
.woocommerce .woocommerce-breadcrumb a {
	color: #35861c !important;
}
@media (max-width: 600px) {
	.woocommerce .woocommerce-breadcrumb {
		margin-bottom: 5px !important;
		font-size: 0.8em !important;
	}
}

/* Result count ends up being misleading if using Infinite Scroll */
.woocommerce-result-count {
	display: none;
}

/* Single Product Pages */

/* Slide out sidebar on mobile */
@media (max-width: 991px) {
	.shop-sidebar-wrapper {
		z-index: 3000; /* Make sure it goes over everything, including uniq-checkout-countdown which is 2000  */
	}
}

.pwb-single-product-brands {
	padding-top: 0;
}

/* Product Pages: Don't fade out the images... */
.woocommerce div.product div.images .flex-control-thumbs li img {
	opacity: 1;
}

/* Or links */
.woocommerce-product-gallery__image a:not(.btn):not(.button):not(.added_to_cart):hover {
	opacity: 1;
}

/* more generally */
a:not(.btn):not(.button):not(.added_to_cart):hover {
	opacity: 1;
}

/* ...use a zoom icon instead */
.woocommerce-product-gallery__image {
	position: relative; 
	/* There is already a position:relative on an ancestor (.woocommerce.single-product.header-layout-classic-blog .hestia-product-image-wrap) */
	/* but it gets spoiled by .flex-viewport when there is more than 1 image, causing the icon to be positioned outside the viewport */
}
.woocommerce-product-gallery__image a:hover::after { 
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	content: '\f00e'; /* Zoom In */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 20px;
	color: black;
	background-color: transparent;
}
.woocommerce-product-gallery__image a:hover img {
	cursor: zoom-in;
}

/* Add box shadow to the image to match the sidebar */
.woocommerce-product-gallery .flex-viewport {
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);	
	border-radius: 4px;
}

/* Ensure the thumbs' box shadow doesn't get clipped, and arrange them using flexbox so they all fit into a single row */
.woocommerce div.product div.images .flex-control-thumbs {
	overflow: visible;
	display: flex;
	margin-top: 20px;
}
.woocommerce div.product div.images .flex-control-thumbs li {
	width: auto; /* Allow Flexbox to size them */
	flex: 0 1 auto; /* Let them shrink, but not grow, as that looks bad if there's less than 3 thumbnails */
	float: none;
}
/* Because 4 or more thumbs now go onto a single row, don't set every 3n+1'th to have no left margin */
.woocommerce div.product div.images .flex-control-thumbs li:nth-child(3n+1) {
        margin-left: 8%;
}
/* Except the first one */
.woocommerce div.product div.images .flex-control-thumbs li:first-child {
        margin-left: 0;
}
/* Space between */
.woocommerce div.product div.images .flex-control-thumbs li + li {
        margin-left: 8%;
}

/* This applies to both single images (which don't use Flexslider) as well as both images and thumbs in Flexslider */
.woocommerce div.product div.images img {
	width: 100%;
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
/* But don't apply them to images within the flexslider viewport, otherwise they're visible when sliding */
.woocommerce div.product div.images .flex-viewport img {
	border-radius: 0;
	box-shadow: none;
}

/* Use our standard light background, not black, on the zoomed product image view. Otherwise some transparent images look awful. */
.pswp__bg {
	background: #fff6da;
}

/* Don't let Related Products get funneled into the middle channel */
.related.products {
	clear: left;
}

/* The Get Started button sits atop a green pepper, so needs to darker to show up better */
.btn-getstarted {
	font-weight: bold;
	box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0 rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2) !important;
}

/* After adding a product to basket on the single product page, make the view basket button the same size */
.product .added_to_cart.wc-forward {
	font-size: 12px;
	line-height: 12px;
	padding: 15px 33px;
	margin-left: 1em;
}

/* "Get Started" postcode form */
#Getstarted-Postcode-Popup {
	text-align: center;
}
#Getstarted-Postcode-Input {
	font-size: 200%;
	font-weight: bold;
	width: 6em;
	height: 2em;
	text-align: center; 
	border: 1px solid #006633;
	background-color: #f4efe0;
	border-radius: 6px;
	margin: 0 auto;
}
#Getstarted-Postcode-Submit {
	margin-left: 1ex;
}
#Getstarted-Postcode-Error-Invalid {
	padding: 2em 0;
}
#Getstarted-Postcode-Error-Notserved {
	padding: 1em 0;
}

/* Postcode check forms in FAQs */
.uniq-postcode-check-form .postcode {
	font-size: 150%;
	font-weight: bold;
	width: 6em;
	height: 2em;
	padding: 1ex;
	border: 1px solid #006633;
	background-color: #f4efe0;
	border-radius: 6px;
	float: left;
}

.uniq-postcode-check-form .button {
	float: left;
	padding: 1ex;
	margin: 3px 1ex;
}

.uniq-postcode-check-form .result {
	float: left;
	font-size: larger;
	font-weight: bold;
	padding: 1ex 1em;
}


/* Contact Page */
.contactus .hestia-info .icon {
	margin-top: 0;
	color: #6daa6b;
}
.contactus .hestia-info .info-title {
	margin-top: 0;
}
.contactus .hestia-info {
	margin-top: 10px;
}

/* My Account */

/* Add icon for Subscriptions option on My Account sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--subscriptions a::before {
    	content: "\f2f9";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	width: 25px;
	display: inline-block;
}

/* Add icon for Gift Cards option on My Account sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--giftcards a::before {
    	content: "\f06b";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	width: 25px;
	display: inline-block;
}

/* Add icon for Refer A Friend option on My Account sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--myreferrals a::before {
	content: "\f500";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	width: 25px;
	display: inline-block;
}



/* Fix excessive margin */
.woocommerce-account .woocommerce-MyAccount-navigation ul li a::before {
	margin-right: 10px !important;
}

/* Don't underline text on buttons */
.woocommerce-account .my_account_orders .button {
	text-decoration: none;
}
/* Less padding on buttons within My Account */
.woocommerce .woocommerce-MyAccount-content .btn,
.woocommerce .woocommerce-MyAccount-content .button {
	padding: 8px 16px;
	background-color: var(--main-accent-color);
}

.page-content-wrap {
	margin-top: 10px;
}
	
/* Plugin: WooCommerce Menu Cart - change icon to basket */
.wpmenucart-icon-shopping-cart-0::before {
	content: "\f291";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 18px;
	position: relative;
	bottom: 2px;
}

/* Likewise for Add To Basket buttons */
.woocommerce div.product form.cart .button.added:not(.loading)::after {
	background-image: none;
	content: "\e017";
	vertical-align: bottom;
	background-size: auto;
	height: auto;
}
.woocommerce div.product form.cart .button:not(.loading):not(.added)::after {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	font-size: 12px;
	position: relative;
	bottom: 2px;
	content: "\f291";
	background-image: none !important;
}

/* Make the new Add To Existing Subscription button match the Add To Basket button, except for the icon */
.woocommerce .single_add_to_subscription_button {
	float: left;
}
.woocommerce div.product form.cart .button.single_add_to_subscription_button:not(.loading):not(.added)::after {
	content: '\f2f9';
}

.woocommerce .quantity .qty {
	font-size: 2rem;
}

/* Use smaller font on mobile - this corresponds to the approximate width where the text of our message starts to flow onto 3 lines */
@media (max-width: 768px) {
	.zhours_alertbar {
  		font-size: 14px !important;
	}
}

/* Order Again and Edit Order buttons */
.woocommerce-order-details .order-again, 
.woocommerce-order-details .edit-order {
	float: right;
	margin-left: 10px;
}
.woocommerce-order-details + .woocommerce-customer-details {
	clear: right;
}

/* New suffix on prices */
.priced-per {
	font-size: smaller;
}

/* Fix vertical alignment of checkbox, particularly Mailchimp Subscribe checkbox */
/* This was correct in WooCommerce but gets overridden by Hestia, and loaded late so needs !important */
.woocommerce form .form-row .input-checkbox {
    margin: -2px 8px 0 0 !important;
}

/* Cart & Checkout */

/* No header image */
.woocommerce-cart #hero,
.woocommerce-checkout #hero {
	display: none;
}
.woocommerce-cart .main,
.woocommerce-checkout .main {
	margin-top: 5px;
}

/* Cart page quantity field is centred, but the heading wasn't */
.woocommerce-cart th.product-quantity {
	text-align: center;
}

/* Checkout: More obvious "Ship to different address" */
h3#ship-to-different-address {
	margin-top: 1em;
}
h3#ship-to-different-address label span {
	font-weight: bold;
	color: #4c754b;
}

/* Checkout: Don't show County and Country fields. County should always be ignored (and we have JS to force it to an empty hidden field). Country should always be a preset hidden field anyway. */
/* Country needs to be submitted, but fields inside display:none are still submitted */
/* 2021-12-04 BW Start displaying it again because one customer has an overseas billing address! */
#billing_country_field, 
#shipping_country_field,
#billing_state_field,
#shipping_state_field {
	/* display: none; */
}

/* Empty Cart button should be red to indicate danger */
#EmptyCartBtn {
	background-color: #ca1010;
}

/* Checkout page coupon block that is moved by Hestia - to avoid layout shift, render it hidden initially, we've modified Hestia to show it after it's moved */
.woocommerce-checkout div.woocommerce-info {
	display: none;
}

/* Make the recurring totals header on the cart and checkout pages more obvious */
.recurring-totals th {
  font-size: 23px !important;
  font-weight: 500 !important;
  text-transform: none !important;
}

/* Fix alignment of Shipping and Total headers in checkout */
.woocommerce table.shop_table tfoot th {
	vertical-align: top;
}

/* Make the expected delivery date (from my plugin) more obvious */
.expected-delivery-day {
	font-size: 2rem;
}
.expected-delivery-date {
	font-size: 1.6rem;
}
/* But smaller for the bakery items delivery date */
.expected-delivery-day.bakery {
	font-size: 1.6rem;
}
.expected-delivery-date.bakery {
	font-size: 1.4rem;
}
/* Better bulletting for the list of products that will be delivered on a different day */
ul.special-shipping-products {
	margin-top: 10px;
	padding-left: 10px; /* down from default 40 */
}
ul.special-shipping-products li {
	list-style: circle outside !important; 
}

.loop-available-on-subscription {
  color: #999999;
  padding-left: 10px;
}

/* Ensure line break between multiple brands on a single product */
.pwb-brands-in-loop span {
	display: block;
}

.new-product-thumbnail-badge {
	position: absolute;
	display: inline-block;
	top: -11%;
	right: -10%;
	overflow: hidden;
	white-space: nowrap;
	transform: rotate(45deg) translate(30%, 0);
	min-width: 65%;
	background-color: #3fab4b;
	color: yellow;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 90%;
	border-top: 2px solid yellow;
	border-bottom: 2px solid yellow;
}

@media (max-width: 991px) {
	.new-product-thumbnail-badge {
		top: -5%;
		right: -5%;
		min-width: 60%;
		font-size: 80%;
	}
}

/* Make textareas look like textareas again (override Hestia with Bootstrap defaults) */
textarea.form-control, 
.form-group textarea.form-control {
	border: 1px solid #ccc;
	border-radius: 4px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
	padding: 5px 10px;
	background-color: #ffffed;
}

/* Remove the excessive space between paragraphs on product pages */
.blog-post .section-text p {
	margin-bottom: 10px; /* Hestia 30px */
}

/* And at the end of archive pages */
.woocommerce.archive .blog-post .section {
	padding-bottom: 20px;
}

/* Reduce space and lines between header and description for extra product options, and delineate whole section with a box */
.woocommerce.single-product .product form.cart {
	margin-top: 0 !important;
}
form.cart table.thwepo-extra-options {
	background-color: #ffffcd;
	border-radius: 4px;
	margin-top: 10px;
}
form.cart table.thwepo-extra-options > tbody > tr {
	border-bottom: none;
}
form.cart table.thwepo-extra-options > tbody > tr > td {
	padding: 0 20px 0 20px !important;
}
form.cart table.thwepo-extra-options > tbody > tr > td > textarea {
	margin: 0 20px !important;
	width: 90%;
}
	
/* Move tabs with description, ingredients etc, into the blank space below the thumbnail */
.woocommerce div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
	clear: left;
	float: left;
	width: 45%;
}
@media (max-width: 768px) {
	.woocommerce div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs {
		width: 100%;
	}
}

/* Don't waste so much space at the sides on medium screens. Bootstrap sets this to 750px fixed. */
@media (min-width: 769px) and (max-width: 991px) {
	.container {
		width: auto;
	}
}

/* Subscription options on product page */
.wcsatt-options-wrapper {
	background-color: #ffffed;
	padding: 10px 20px;
	margin: 10px 0;
	border-radius: 4px;
}

ul.wcsatt-options-product { 
	margin-bottom: 10px;
}

.wcsatt-options-wrapper label.control-label {
	margin-top: 0;
	margin-bottom: 8px;
}

.form-group .wcsatt-add-to-subscription-wrapper {
	margin-bottom: 20px;
	background-color: #ddddc7;
	border-radius: 4px;
	padding: 0px 10px 10px;
}
.form-group .wcsatt-add-to-subscription-wrapper label.control-label {
	font-weight: bold;
	font-size: 110%;
}
.form-group .wcsatt-add-to-subscription-wrapper .woocommerce-button.button.view {
	display: none; /* Having the View button is not very helpful - we replace it with the Quantity selector */
}

/* Quantity fields everywhere (at least, where they use the standard styling provided by Qty Increment Buttons plugin */
/* Quite why the plugin specifies :not(#qib_id) twice, I don't know, but because it does, we must too if we're to override without !important */
.woocommerce .qib-container .qib-button:not(#qib_id):not(#qib_id) {
	background: var(--main-accent-color);
	border-color: var(--main-accent-color);
	-webkit-box-shadow: 0 2px 2px 0 rgba(53,134,28,0.14),0 3px 1px -2px rgba(53,134,28,0.2),0 1px 5px 0 rgba(53,134,28,0.12);
	-moz-box-shadow: 0 2px 2px 0 rgba(53,134,28,0.14),0 3px 1px -2px rgba(53,134,28,0.2),0 1px 5px 0 rgba(53,134,28,0.12);
	box-shadow: 0 2px 2px 0 rgba(53,134,28,0.14),0 3px 1px -2px rgba(53,134,28,0.2),0 1px 5px 0 rgba(53,134,28,0.12);
}

.woocommerce .qib-container .qib-button.minus:not(#qib_id):not(#qib_id) {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}
.woocommerce .qib-container .qib-button.plus:not(#qib_id):not(#qib_id) {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.woocommerce .qib-container .qib-button:not(#qib_id):not(#qib_id):hover {
	background: var(--main-accent-color);
	border-color: var(--main-accent-color);
	opacity: 0.9;
	-webkit-box-shadow: 0 2px 4px -2px rgba(53,134,28,0.42),0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px rgba(53,134,28,0.2);
	-moz-box-shadow: 0 2px 4px -2px rgba(53,134,28,0.42),0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px rgba(53,134,28,0.2);
	box-shadow: 0 2px 6px -2px rgba(53,134,28,0.42),0 4px 23px 0 rgba(0,0,0,0.12),0 8px 10px -5px rgba(53,134,28,0.2);
	transition: 0.1s all;
}
.woocommerce .qib-container .quantity input.qty:not(#qib_id):not(#qib_id) {
	border-color: var(--main-accent-color);
	-webkit-box-shadow: 0 2px 2px 0 rgba(53,134,28,0.14),0 3px 1px -2px rgba(53,134,28,0.2),0 1px 5px 0 rgba(53,134,28,0.12);
	-moz-box-shadow: 0 2px 2px 0 rgba(53,134,28,0.14),0 3px 1px -2px rgba(53,134,28,0.2),0 1px 5px 0 rgba(53,134,28,0.12);
	box-shadow: 0 2px 2px 0 rgba(53,134,28,0.14),0 3px 1px -2px rgba(53,134,28,0.2),0 1px 5px 0 rgba(53,134,28,0.12);
}

/* Quantity field on product page */
.woocommerce form.cart .qib-container .qib-button.minus:not(#qib_id) {
	border-top-left-radius: 3px !important;
	border-bottom-left-radius: 3px !important;
}
.woocommerce form.cart .qib-container .qib-button.plus:not(#qib_id) {
	border-top-right-radius: 3px !important;
	border-bottom-right-radius: 3px !important;
}
	
.woocommerce form.cart .qib-container::before {
	float: left;
	display: inline-block;
	padding: 4px 8px 0 0;
	content: 'Quantity';
	font-weight: bold;
}

/* Reduce space between tabs in product page description area to reduce chance of them wrapping */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	margin-bottom: 20px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	padding-right: 0 !important;
}

/* A better Store Notice */
p.demo_store {
	position: static;
	background-color: #2e6018;
	font-size: 1.7rem;
	padding: 0.8em 0;
	z-index: 100;
}

@media (max-width: 768px) {
	p.demo_store {
		font-size: 1.4rem;
	}
}
.navbar a.woocommerce-store-notice__dismiss-link {
		font-size: 1.4rem;
}

/* Don't do the silly multi-colour thing with category headers in the loop */
.hestia-blogs article .category a,
.related.products ul li .category a,
.woocommerce.archive .blog-post .products li .category a,
.woocommerce .products li .category a,
.shop-item .category a,
.related-posts div .category a {
  color: #4caf50 !important;
  xcolor: #89229b !important;
}

/* WooCommerce Sidebar */
/* Make product categories select2 much taller */
.select2-container--default .select2-results > .select2-results__options {
	max-height: 600px !important;
}

/* Brands Filter */
.widget_pwb_filter_by_brand_widget ul li {
	line-height: 1.2em;
}
.widget_pwb_filter_by_brand_widget ul li label {
	margin-bottom: 0;
	font-weight: normal;
}

/* Mini Cart */

.woocommerce .widget_shopping_cart .cart_list li.woocommerce-mini-cart-item {
	border-bottom: 1px solid #ccc6;
	padding-bottom: 0;
	padding-top: 8px;
	padding-right: 8px;
}

.woocommerce .widget_shopping_cart .buttons, .woocommerce.widget_shopping_cart .buttons {
	display: flex;
	justify-content: space-between;
	margin-left: -10px;
	margin-right: -10px;
}

.woocommerce .widget_shopping_cart .buttons a, .woocommerce.widget_shopping_cart .buttons a {
	margin: 0 10px 0 10px;;
	padding: 12px 6px; /* 6px is the minimum for the left and right, it will usually be more than that because of flex-grow */
	flex: 1 1 auto;
	text-align: center;
}

.woocommerce ul.product_list_widget li {
	font-size: 12px;
}

.woocommerce ul.product_list_widget li a {
	margin-bottom: 3px;
}

/* Rearrange contents - quantity and image (slightly larger) on left, text and delete on right */
.woocommerce ul.woocommerce-mini-cart li.woocommerce-mini-cart-item img {
	float: left;
	margin-left: 0;
	margin-right: 8px;
	margin-bottom: 8px;
	width: 61px;
	height: 61px;
}
.woocommerce .widget_shopping_cart .cart_list li a.remove {
	left: auto;
	right: 5px; 
}
	
/* Quantity fields in Mini Cart */
.woocommerce .widget_shopping_cart .qib-container .qib-button:not(#qib_id):not(#qib_id) {
	background-color: transparent;
	border-color: var(--main-accent-color);
	color: var(--main-accent-color);
	border-radius: 3px;
	position: absolute;
	left: 0px;
	height: 20px;
	opacity: 0.3;
}

.woocommerce .widget_shopping_cart .qib-container .qib-button.plus:not(#qib_id) {
	top: 8px;
}
.woocommerce .widget_shopping_cart .qib-container .qib-button.minus:not(#qib_id) {
	top: 50px;
}
.woocommerce .widget_shopping_cart .qib-container .qib-button:hover:not(#qib_id) {
	background-color: var(--main-accent-color);
	color: white;
	opacity: 1;
}

.woocommerce .widget_shopping_cart .qib-container .quantity input.qty:not(#qib_id):not(#qib_id) {
	border-color: transparent;
	position: absolute;
	left: -5px;
	top: 24px;
	font-size: 12px;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.woocommerce .widget_shopping_cart .cart_list li a.remove {
	top: 6px;
}

/* Pulse item that has just been added. The class is removed after a couple of seconds. */
@keyframes colorpulse {
	0% {
		background-color: inherit;
	}
	20% {
		background-color: #fbe9a4;
	}
	100% {
		background-color: inherit;
	}
}
.pulse {
	animation: colorpulse 4s ease-in-out;
}


/* Checkout button */

.woocommerce-cart .blog-post .woocommerce .cart-collaterals .cart_totals .checkout-button {
	margin-top: 10px;
}



/* WooCommerce Gift Cards plugin */

/* NB By default .add_gift_card_form is used in both cart and checkout, but we instead modify the coupon form on checkout, so this only applies to cart pages */
/* Gift Card entry box in cart: Reduce size of header */
.add_gift_card_form h4 {
	font-size: 1.8rem;
}

/* Gift Card entry box in cart: demarcate it with different background color */
.add_gift_card_form {
	background-color: #cdca;
	padding: 10px;
	border-radius: 3px;
}

.woocommerce-cart .add_gift_card_form #wc_gc_cart_redeem_form input[type="text"] {
	max-width: 14em;
}
/* Gift Card entry box button and Coupon Code button */
.woocommerce-cart table.shop_table td.actions button[type="submit"], .woocommerce-cart table.shop_table td.actions input[type="submit"],
#wc_gc_cart_redeem_form button {
	background: none;
	border: 1px solid var(--main-accent-color);
	color: var(--main-accent-color);
	box-shadow: none;
}
.woocommerce-cart table.shop_table td.actions button[type="submit"]:hover, .woocommerce-cart table.shop_table td.actions input[type="submit"]:hover,
#wc_gc_cart_redeem_form button:hover {
	background-color: var(--main-accent-color);
	box-shadow: none;
	color: white;
}
/* But the Gift Card one needs less padding */
#wc_gc_cart_redeem_form button {
	padding: 6px 16px;
}

/* Gift Card entry box in checkout - don't make it full width */
.place-order .add_gift_card_form #wc_gc_cart_redeem_form input[type="text"], .place-order .add_gift_card_form #wc_gc_cart_redeem_form button {
	display: inline-block;
	width: auto;
}

/* Fixes for Gift Card datepicker styles that were being overridden by jquery-ui.css */
.wc_gc_datepicker {
	width: 40em !important;
	font-size: 10px !important;
	background-color: #d6f2d0 !important;
	color: #060606 !important;
	z-index: 9999 !important;
	font-family: inherit !important;
}

.wc_gc_datepicker .ui-datepicker-header {
	background-image: linear-gradient(0deg, #77a782 0%, #dcffd8 100%);
}
.wc_gc_datepicker .ui-datepicker-calendar .ui-state-default {
	background-image: linear-gradient(325deg, #bce7c6 0%, #f3fff2 100%);
}
.wc_gc_datepicker .ui-datepicker-calendar .ui-state-default.ui-state-active {
	background-image: linear-gradient(325deg, #f1e949 0%, #ffffff 100%);
}


/* Place Order button bigger and separated from Gift Card area */
button#place_order {
	display: block;
	margin-top: 20px;
	font-size: 18px;
	font-weight: bold;
}

/* Prevent Popup Maker's weird 15px padding on the whole body */
html.pum-open.pum-open-overlay.pum-open-scrollable body > [aria-hidden] {
	padding-right: 0;
}

/* Plugin: WooCommerce Store Hours */
/* Don't show the alertbar when the store is closed, now that uniq-checkout-countdown is in use. Astonishingly there's no switch for it within Store Hours itself. */
.zhours_alertbar {
	display: none !important;
}

/* Filter widget area */
#bitternebox-filterbar {
	display: block; /* Override .card's inline-block */
	max-width: 1170px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}
@media (min-width: 992px) {
	#bitternebox-filterbar {
		position: static !important; /* ! Override the inline style that renders it off-canvas */
	}
}

/* Plugin: Annasta WooCommerce Filters */

.awf-preset-wrapper {
	padding: 10px;
}

.awf-preset-wrapper.awf-4-column-preset {
	xdisplay: block; /* Not flex, which harms our ability to lay out the header elements */
}

.awf-preset-title {
	width: 100%;
}

.awf-filter-title {
	color: #71767e;
	font-family: "Roboto Slab", "Times", "Times New Roman", serif;
	font-size: 16px;
	font-weight: bold;
}

.awf-active-badges-container .awf-active-badge {
	padding: 2px 6px;
	background-color: #e1e3d1;
	border-radius: 4px;
	box-shadow: 1px 1px 8px -4px rgba(0, 0, 0, 0.5);
}

.awf-preset-wrapper.awf-4-column-preset {
	margin-top: 0;
	padding-top: 0;
}

.awf-preset-wrapper.awf-4-column-preset > .awf-active-badges-container {
	width: 50%;
	flex: 1 0 auto;
	order: 10;
}
.awf-preset-wrapper.awf-4-column-preset > .awf-reset-btn-container.awf-top-reset-btn-container {
	flex: 0 1 content;
	order: 20;
}

/* The button to open the filters */
.awf-togglable-preset-btn {
	/* Move it */
	/*
	position: fixed;
	top: 115px;
	left: 10px;
	*/
	padding: 4px 12px !important;
	margin-top: 0;
	display: none; /* Otherwise .btn makes it inline-block and visible when it shouldn't be */
	color: white;
}
/* Filter icon instead of hamburger */
.awf-togglable-preset-btn i.fa-bars::before {
	content: '\f0b0' !important;
}

/* Remove 'Close Filters' text when open */
.awf-togglable-preset-close-btn span {
	display: none;
}

.awf-reset-btn,
.awf-reset-btn:hover {
	padding: 2px 6px;
	background-color: #ebd2c5;
	border-radius: 4px;
	font-size: 13px;
	color: black;
	text-transform: none;
	box-shadow: 1px 1px 8px -4px rgba(0, 0, 0, 0.5);
	margin: 0 4px;
}
	
.awf-filters-form {
	margin-bottom: 0;
	padding-bottom: 0;
}

.awf-filter-wrapper {
	margin-bottom: 0;
	border-bottom: 2px double rgba(0, 0, 0, 0.1);
}
.awf-filter-wrapper + .awf-filter-wrapper {
	border-left: 2px double rgba(0, 0, 0, 0.1);
	padding-left: 10px;
}

.awf-filters-container {
	margin-bottom: 0;
}


/* Prevent folding onto multiple lines */
.awf-preset-wrapper.awf-4-column-preset > form.awf-filters-form {
	flex-wrap: nowrap;
	flex-shrink: 1;
}

.awf-style-labels .awf-filter-container.awf-active label {
	/* Don't use bold to highlight current selection, use GRAD so it doesn't change size */
	font-weight: normal;
	font-variation-settings: "GRAD" 1;
	color: var(--main-accent-color);
}

input[type="text"].awf-terms-search {
	background-color: #f7f7eb;
	border: 1px inset #ccc;
	border-radius: 4px;
}

.awf-terms-search-container {
	margin: 0 10px 10px 0;
}

.awf-filter-container input[type='checkbox'] + label, 
.awf-filter-container input[type='radio'] + label {
	margin-bottom: 4px;
}

.awf-collapsible-children .awf-parent-container::after {
	/* Move the disclosure triangle away from the scrollbar and make it bigger */
	padding-right: 20px;
	font-size: 16px;
}


/* Popout filters on mobile */

/* Slide in from left instead of just appearing */
/* awf-togglable-preset-mode-on = We're in popout mode but not popped out. */
/* awf-togglable-preset-on = We're popped out */
/* Who named these classes? */

.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode {
	transition: 0.5s ease;
	display: block;
	left: -100%;
	/* Copy .card style */
	border-radius: 6px;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
	/* Over header */
	z-index: 2000; 
	margin-top: 60px;
	padding-left: 30px;
	padding-right: 10px; /* Only the close button goes that far, the filters have a margin */
}

/* Translucent pattern to help identify the area where you can touch to scroll the whole thing rather than the individual filter */
/* Doesn't work great 
.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode::before {
	content: '';
	position: absolute;
	top: 60px;
	right: 0;
	width: 20%;
	height: 100%;
	z-index: -1;
	opacity: 0.4;
	background: url(assets/patterns/p2.png);
}
*/

.awf-togglable-preset-on .awf-togglable-preset.awf-left-popup-sidebar-mode, 
.awf-togglable-preset-on.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode {
	left: 0;
}

.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-active-badge {
	margin-bottom: 6px;
}

.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-filters-container {
	background-color: var(--main-background-color);
	margin-right: 40px;
	padding: 5px;
	border-radius: 4px;
	border: 1px solid var(--main-accent-color);
}

.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-filter-wrapper {
	border-bottom: 0;
}

.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-filter-wrapper + .awf-filter-wrapper {
	border-left: none;
	padding-left: 0;
}

.awf-togglable-preset.awf-left-popup-sidebar-mode, .awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode {
	background-color: var(--card-background-color);
}

.awf-togglable-preset-close-btn {
	background-color: transparent;
	border: none;
	float: right;
	color: #888;
	box-shadow: none;
}
.awf-togglable-preset-close-btn i {
	font-size: 18px;
}

/* Prevent multiple columns in popout */
.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-filters-form {
	flex-wrap: wrap;
	flex-shrink: 0;
}
.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-filter-wrapper {
	margin-right: 0 !important;
	width: 100% !important;
}

.awf-togglable-preset-mode-on .awf-togglable-on-s-preset.awf-left-popup-sidebar-mode .awf-filter-title-container {
	margin-top: 8px;
}

/* Blog */

.single-post .boxed-layout-header h4 {
	text-shadow: 1px 1px 4px rgba(0,0,0,0.8);
}

.single-post-wrap.entry-content p {
	font-size: 18px;
}

.single-post-wrap.entry-content .wp-block-image {
	margin: 30px 0;
}

/* Blog Archive Page */

.card-blog .posted-by {
	font-size: 12px;
}

/* My Account Orders Lists need more sensibly sized buttons */
.woocommerce table.shop_table.my_account_orders .button {
	padding: 8px 16px;
	margin: 6px;
}

/* My Account Orders and Subscriptions Item Table */

.woocommerce table.shop_table {
	font-size: 14px;
}

.woocommerce table.shop_table td {
	vertical-align: top;
	padding-bottom: 10px;
}
.woocommerce table.shop_table td ul {
	font-size: 14px;
}

/* Subscription details (that is, details about the subscription as a whole */
.woocommerce table.shop_table.subscription_details .button {
	/* Ensure buttons are spaced out nicely whether they're in a row or collapsed into a single column */
	margin: 5px;
}

/* My Account Order Details and Subscriptions Items Tables */

.woocommerce table.shop_table.order_details thead tr:first-child th:first-child {
	border-top-left-radius: 4px;
}
.woocommerce table.shop_table.order_details thead tr:first-child th:last-child {
	border-top-right-radius: 4px;
}
.woocommerce table.shop_table.order_details tfoot tr:last-child th:first-child {
	border-bottom-left-radius: 4px;
}
.woocommerce table.shop_table.order_details tfoot tr:last-child td:last-child {
	border-bottom-right-radius: 4px;
}
.woocommerce table.shop_table.order_details thead tr th {
	background-color: rgba(127,127,127,0.3);
}
.woocommerce table.shop_table.order_details tbody tr:nth-child(2n) td {
	background-color: rgba(127,127,127,0.1);
}
.woocommerce table.shop_table.order_details tbody tr:nth-child(2n+1) td {
	background-color: rgba(127,127,127,0.15);
}
.woocommerce table.shop_table.order_details thead tr:last-child th,
.woocommerce table.shop_table.order_details thead tr:last-child td {
	border-bottom: 2px double black;
}
.woocommerce table.shop_table.order_details tfoot tr:first-child th,
.woocommerce table.shop_table.order_details tfoot tr:first-child td {
	border-top: 4px double black;
}
.woocommerce table.shop_table.order_details tfoot tr:nth-child(2n) th,
.woocommerce table.shop_table.order_details tfoot tr:nth-child(2n) td {
	background-color: rgba(0,0,0,0.13);
}
.woocommerce table.shop_table.order_details tfoot tr:nth-child(2n+1) th,
.woocommerce table.shop_table.order_details tfoot tr:nth-child(2n+1) td {
	background-color: rgba(0,0,0,0.15);
}
/* Special div shown in place of the Active Subscription Items table when all items are paused. Designed to look a bit like the above table even though it's not a table. */
.woocommerce .subscription-no-active-items {
	border-radius: 4px;
	background-color: rgba(127,127,127,0.2);
	min-height: 10rem;
	font-size: 1.4rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}
.woocommerce .subscription-no-active-items p {
	text-align: center;
	width: 100%;
}

.woocommerce .subscription-items-tables h5 {
	text-align: center;
}

/* Reduce space between item meta and Edit Options button */
.woocommerce table.shop_table.order_details .wc-item-meta {
	margin-bottom: 0;
}
/* Edit Options button */
.woocommerce table.shop_table.order_details.subscription_items .button.wc-item-edit-meta {
	padding: 5px 10px;
	font-size: 11px;
	margin-left: 40px;
}
/* Edit Options page */
.uniq-edit-meta .product-info {
	font-size: 80%;
}