@charset "utf-8";
/**
 * Products Archive styles for Sotlf
 *
 */

/**************************
 Shop Archives 
 *************************/

/* We don't need this until the biggest size but the polyfill won't pick up on this if it's inside a @media query */
:root {
	--sidebar_width: 22.5%;	
}

/* Added this wrapper in /inc/woocommerce.php */
.sotlf-wc-page-title {
	max-width: var(--max_width_wide);
	margin: 0 auto;	
}

.sotlf-shop-action-bar {
	display: flex;
	align-items: center;
	height: 60px;
	border-top: 1px solid var(--border_color);
	border-bottom: 1px solid var(--border_color);
	position: relative; 	
}
.sotlf-shop-action-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	bottom: 0;
	width: 1px;
	background-color: var(--border_color);
}

.sotlf-shop-filters,
.sotlf-shop-sorting {
	flex-basis: 50%;
	display: flex;
	justify-content: center;
}

/* These toggle buttons don't look like normal buttons, more like accordion buttons */
button.sidebar-toggle,
button.sotlf-wc-sortby-toggle {
	border-color: transparent;
	padding-top: var(--button_padding_h);
	padding-bottom: var(--button_padding_h);
	width: auto;
	margin: 0 var(--gutter_width);
	white-space: nowrap;
	/* 16/28 */
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
}
button.sidebar-toggle::after,
button.sotlf-wc-sortby-toggle::after {
	margin-left: 0.5em;
}


/* TODO: only hide this visually? */
.sotlf-sortby-toggle-text {
	display: none;
}


.sotlf-wc-sortby.toggled-on,
.collapsable-sidebar-shop.toggled-on {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: 1px;
	background-color: white;
	padding: var(--space_normal) var(--gutter_width);	
}



.sotlf-shop-active-filters {
	padding: 0 var(--gutter_width);
	margin: var(--space_xxsmall) 0;	
	/* 14/20 */
	font-size: 0.875rem;
	line-height: 1.42857142857;
}
.sotlf-shop-active-filters * {
	display: inline;
}

.sotlf-shop-active-filters ul {
	margin: 0;
	padding: var(--space_xxsmall) 0;
}
.sotlf-shop-active-filters ul li {
	display: inline-block;
	margin: 0;
	padding: var(--space_xxsmall) 0;
}



.sotlf-shop-active-filters a:not(.sotlf-filters-clear-all) {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	flex-direction: row-reverse;
	padding: 0 4px;
	background-color: var(--gray_xlight);
	border: 1px solid var(--border_color);
	margin-right: 0.5rem;
}
.sotlf-shop-active-filters a::before {
	margin-left: 0.5rem;
	font-size: 0.875em;	
}
.sotlf-filters-clear-all {
	color: inherit;	
}
.sotlf-filters-clear-all::before {
	display: none;
}



/* This should only show when filters are active */
.widget_layered_nav_filters.sotlf-clear-all {
	display: none;
}
.widget_layered_nav_filters + .widget_layered_nav_filters.sotlf-clear-all {
	display: inline;
}


/* This does not show until the biggest size :( */
.product-results {
	display: none;
}

.wc-result-count {
	padding: 0 var(--gutter_width);	
}
/* Site always shows just the total number of results. "Showing 56 results" instead of "Showing 1-12 of 56 results". */
.wc-result-count .word-1:not(.word-all),
.wc-result-count .word-of {
	position: absolute;
	left: -9999em;
}















@media(min-width: 37.5em){
	
	/* This text starts to show in the toggle button */
	.sotlf-sortby-toggle-text {
		display: inline;
	}
	
	/* These start to be half-width */
	.collapsable-sidebar-shop.toggled-on {
		right: 50%;
	}
	.sotlf-wc-sortby.toggled-on {
		left: 50%;	
	}
	
}























/* Collapsable widgets */

button.widget-toggle {
	padding: var(--field_padding);
	border: none;
}
.shop-widget-collapsable {
	padding: 0 10px;	
}
.collapsable-sidebar-shop .widget {
	position: relative;
	margin: var(--space_normal) 0;
	padding-bottom: var(--space_normal);
	/* 16/28 */
	font-size: 1rem;
	line-height: 1.75;
	
	border-bottom: 1px solid var(--border_color);
}



.widget-toggle h2.widget-title {
	margin: 0;
	font-family: var(--text_font);
	/* 18/22 */
	font-size: 1.125rem;
	line-height: 1.2222;	
}

/* Category / Filter by attribute widgets */
ul.product-categories, 
ul.product-categories ul/*, 
ul.woocommerce-widget-layered-nav-list */ {
	padding-left: 1rem;
	
}

/*
.site-aside.widget-area.sidebar-shop li {
	margin: var(--space_xsmall) 0;	
}
*/

/* 11-16-20 Site now has subcategories :( */
button.caticon {
	padding: 0;
	background-color: transparent;
	color: inherit;
	border: 0;
	width: 28px;
	height: 28px;
	margin-left: 0.5em;
}



ul.product-categories a, 
ul.woocommerce-widget-layered-nav-list a {
	color: inherit;
	text-decoration: none;	
}
/* Site does not use checkboxes, so I guess we'll bold? */
/* 11-3-20 Categories won't use checkboxes, but other attribute filters will :/ */
ul.product-categories .current-cat > a/*, 
ul.woocommerce-widget-layered-nav-list .chosen a*/ {
	font-weight: bold;	
}


ul.woocommerce-widget-layered-nav-list a::before { 
	border-color: var(--red);
}

ul.woocommerce-widget-layered-nav-list .chosen a::before { 
	background-color: var(--red);
}

ul.woocommerce-widget-layered-nav-list .chosen a::after, 
ul.woocommerce-widget-layered-nav-list a.loading::after {
	top: 0.25em;
	font-family: "WooCommerce" !important;
	content: "\e017";
	color: white;
	/* text-shadow: 1px 1px 0px var(--blue); */
}






@media (min-width: 45em) {
	

	
	
	
}



@media (min-width: 64em) {
	
	/* Added these wrappers in /inc/woocommerce.php */
	.sotlf-shop-loop {
		padding: 0 var(--gutter_width);	
	}
	.sotlf-shop-loop-inner {
		max-width: var(--max_width_wide);
		margin: 0 auto;
	}
	.sotlf-shop-loop-inner::after {
		content: '';
		clear: both;
	}
	/* Shop sidebar starts to be on left side */
	.site-aside.sidebar-shop {
		float: left;
		width: var(--sidebar_width);
		position: sticky;
		top: 0;
	}
	
	.sidebar-shop .sidebar-toggle {
		display: none;	
	}
	
	/* We use a different sorting form at the biggest sizes :( */
	.sotlf-action-bar .sotlf-shop-sorting {
		display: none;	
	}
	
	
	.sotlf-shop-action-bar {
		display: block;
		border: none;
		height: auto;
		position: static;
	}
	.sotlf-shop-action-bar::after {
		display: none;	
	}
	
	
	button.widget-toggle {
		padding-left: 0;
		padding-right: 0;	
	}
	
	.collapsable-sidebar-shop,
	.collapsable-sidebar-shop.toggled-on,
	.collapsable-sidebar-shop.toggled-off {
		visibility: visible;
		position: static;
		opacity: 1;	
		border: none;
	}
	
	.shop-widget-collapsable {
		padding: 0;	
	}
	
	.product-results {
		display: block;
		padding: 0;
		width: calc( 100% - var(--sidebar_width) );
		margin-left: var(--sidebar_width);
		padding-left: var(--space_xlarge);
	}
	
	.product-results-inner {
		flex-wrap: nowrap;
		padding: var(--space_big) 0;
	}
	
	
	.wc-result-count {
		display: none;
	}
	
	.product-results .wc-result-count {
		display: block;	
		padding: 0;
	}
	
	
	
	p.woocommerce-result-count {
		margin: 0;	
	}
	
	
	
	.wc-catalog-ordering {
		flex-basis: auto;
	}
	
	.wc-product-columns {
		/*clear: right;*/
		margin-left: var(--sidebar_width);
		padding-left: var(--space_xlarge);	
		padding-right: 0;
	}
	
	
	.sotlf-shop-filters {
		display: block;
	}
	
	.sotlf-shop-active-filters {
		padding: 0;
	}
	
	.sotlf-shop-sorting {
		display: none;
	}
	
	
	
	
	/* This is the only product list that stays 3 columns */
	.wc-product-columns ul.products {
		grid-template-columns: repeat(3, 1fr);
		row-gap: var(--space_xxxxxlarge);
	}
	
	
	
}





/* This is as soon as we can go to three product rows? */
@media (min-width: 86.875em) {
	
	/*
	.wc-product-columns ul.products {
		grid-template-columns: repeat(3, 1fr);
		grid-row-gap: var(--space_xxxxxlarge);
	}
	*/
	
}