/*
	Attribute Page
	Default styling is for mobile screens. Desktop styling is below that (search for "DESKTOP SCREENS").
*/
:root {
	--att-mobile-mode: 1;
}
ol.breadcrumb {
	display: none;
}
#profile-body {
	display: flex;
	column-gap: 15px;
	clear: both;
	padding: 0 10px;
}
#attribute-products {
	width: 100%;
}
#attr-wrap > h1 {
	font-style: normal;
	width: 100%;
	text-align: center;
	display: inline-block;
	font-size: 1.5em;
	padding: 0 0;
	margin: 0 0 15px 0;
    font-family: Open Sans,sans-serif;
	letter-spacing: 1px;
	font-weight: normal;
}
#attr-wrap > h1 picture {
	display: block;
}
#attr-wrap .btm-banner img,
#attr-wrap > h1 picture img {
	max-height: 300px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 15px;
}
#attr-wrap > h1 {
	position: relative;
}
#attr-wrap > h1 picture + .att-name {
	font-family: 'Open Sans', sans-serif;
	font-weight: 100;
	text-align: center;
	font-size: 1.5em;
	text-transform: uppercase;
	color: #000;
	letter-spacing: .2em;
}
.prod_table_container {
	text-align: center;
	position: relative; /* To properly show an absolutely positioned loading overlay */
	flex-direction: column; /* Only for attribute pages which contain ul.product-list */
}
.prod_table_container > ul.product-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	column-gap: 6px;
}
#products-infinite-scroll .infinite-loading,
#products-infinite-scroll .infinite-next {
	text-align:center;
	display:block;
	width: 100%; /* So it will wrap onto its own line when in a flex box with flex-wrap */
}
/*.prod_table_container.loading::before,
.prod_table_container.loading-error::before,*/
.prod_table_container.loading .ajax-working-overlay {
	/*content: "";*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgb(255, 255, 255, .8) /*url('/images/ajax-loading-indicator-475x480.gif')*/ no-repeat center 2em;
	background-size: min(100%, 100px);
	padding: 2em 0 0;
	z-index: 1;
}
/*
.prod_table_container.loading-error::before {
	content: "Communication Error, Please Try Again";
	font-size: 2em;
	font-weight: bold;
	color: #333;
	text-align: center;
}
*/
.ajax-working-overlay img {
	max-width: 100px;
	height: auto;
}

/*********************************************************************************************************************
 * Filter Menu Overlay/Sidebar
 *********************************************************************************************************************/
/*
body {
	margin-top: 0;
}
header#page-header {
	margin-top: 90px;
}
*/
body.filter-menu-open {
	/* Prevent page from scrolling when filter menu overlay is open. This method jumps the page back to the top, but
	   since the filter menu activation button is only at the top anyway it shouldn't matter. */
	/* UPDATE: Removed as it prevents the menu from opening on iOS Safari if the page is not already at the top.
	           Instead, it jumps the page to the top then the filter button needs to be pressed again to open the menu.
	position: fixed;
	overflow: hidden;*/
}
#sidebar-wrapper {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	/*z-index: 2; /* One more than ".prod_table_container.loading .ajax-working-overlay" */
	z-index: 22; /* One more than #mobile-header */
}
/* This attribute is locked in and cannot be changed, so hide it */
#sidebar-wrapper li[data-lock] {
	display: none;
}
#sidebar,
#sidebar .accordion-header,
#sidebar .accordion-content,
#sidebar a {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 1.7;
	color: #404040;
	font-weight: 400;
	text-decoration: none;
}
#sidebar ul,
#sidebar li,
#sidebar input {
	padding: 0;
	margin: 0;
	list-style: none;
}
#sidebar button.apply-filters {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: 1.7;
	color: #404040;
	font-weight: 400;
	text-decoration: none;
	background-color: #333;
}
#sidebar button.apply-filters:hover {
	background-color: #FFF !important;
	border-color: #333 !important;
	color: #333 !important;
}
#sidebar button.apply-filters:disabled {
	display: none;
}
#sidebar button.apply-filters:not(:disabled) ~ span {
	display: none;
}
body.filter-menu-open #sidebar-wrapper {
	position: relative; /* Needed or the menu won't scroll on iOS */
}
#sidebar-toggle {
	/* Hide the checkbox that determines if the Filter Menu Overlay is active */
	display: none;
}
#sidebar {
	/* Hide this overlay */
	max-height: 0;
	height: 0;
	opacity: 0;
	transition: all .2s;
}
#sidebar-wrapper.hide,
#sidebar .hide,
#attribute-products .hide {
	display: none;
}

input#sidebar-toggle:checked ~ label[for="sidebar-toggle"] ~ #sidebar,
input#sidebar-toggle:checked ~ #sidebar {
	position: fixed;
	top: 0; /*10px;*/
	bottom: 0; /*10px;*/
	left: 0;
	right: 0;
	z-index: 2; /* equal or greater than #mobile-header in global.css */
	margin: 0;
	background: #000C;
	padding: 10px 5%; /*0 5%;*/ /* give space on either side, remove to make it full width */
	width: auto;
	overflow: auto;
	display: flex;
	flex-direction: column;
	/* Display this overlay */
	box-sizing: border-box;
	max-height: none;
	height: auto; /*calc(100% - 10px - 10px); /* Subtract out the top and bottom fixed positioning */ /*100%*/
	opacity: 1;
	border-radius: 6px;
}
#sidebar #sidebar-header {
	height: 60px;
	background: #a5d7d6;
	padding: 0 20px;
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	color: #145d5b;
	margin: 0;
	line-height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-radius: 6px 6px 0 0;
}
#sidebar #sidebar-header label[for="sidebar-toggle"] {
	float: right;
	cursor: pointer;
	font-weight: bold;
	user-select: none;
}
#sidebar ul.accordion {
	max-width: 100%;
	margin: 0;
	width: 100%;
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	background: #FFF;
	transition: opacity .5s ease;
}
input#sidebar-toggle:checked ~ #sidebar > ul.accordion {
	border-radius: 0 0 6px 6px;
}
#sidebar .accordion-header {
	font-size: 14px;
	background: #efefef;
	border-left: 20px solid #efefef;
	border-right: 20px solid #efefef;
	border-bottom: 1px solid #efefef;
	padding-top: 13px;
	padding-bottom: 13px;
	/*position: relative;*/
	text-transform: uppercase;
	user-select: none;
	position: sticky;
	top: 0;
	z-index: 1;
}
#sidebar .accordion-header::before {
	content: '';
	display: block;
	width: 1em;
	height: 1em;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%23a5d7d6' d='M56 16.329c0 0.449-0.224 0.954-0.561 1.291l-26.148 26.148c-0.337 0.337-0.842 0.561-1.291 0.561s-0.954-0.224-1.291-0.561l-26.148-26.148c-0.337-0.337-0.561-0.842-0.561-1.291s0.224-0.954 0.561-1.291l2.806-2.806c0.337-0.337 0.786-0.561 1.291-0.561 0.449 0 0.954 0.224 1.291 0.561l22.052 22.052 22.052-22.052c0.337-0.337 0.842-0.561 1.291-0.561s0.954 0.224 1.291 0.561l2.806 2.806c0.337 0.337 0.561 0.842 0.561 1.291z'/%3E%3C/svg%3E"); /* downward chevron */
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
}
#sidebar .accordion-header.open::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%23a5d7d6' d='M56 39.671c0 0.449-0.224 0.954-0.561 1.291l-2.806 2.806c-0.337 0.337-0.786 0.561-1.291 0.561-0.449 0-0.954-0.224-1.291-0.561l-22.052-22.052-22.052 22.052c-0.337 0.337-0.842 0.561-1.291 0.561s-0.954-0.224-1.291-0.561l-2.806-2.806c-0.337-0.337-0.561-0.842-0.561-1.291s0.224-0.954 0.561-1.291l26.148-26.148c0.337-0.337 0.842-0.561 1.291-0.561s0.954 0.224 1.291 0.561l26.148 26.148c0.337 0.337 0.561 0.842 0.561 1.291z'/%3E%3C/svg%3E"); /* upward chevron */
}
#sidebar .attribute-filter div.brands {
	margin: 0;
	padding: 20px 20px calc(20px - 11.62px); /* 11.62pm is the default top margin for the h2.accordion-header */
}
/*
#sidebar .accordion-header.brands::before,
#sidebar .accordion-header.brands.open::before {
	background-image: none;
}
*/

/**
 * Filter Menu Sections
 */
#sidebar .accordion > li.brands {
	padding: 20px;
}
#sidebar .accordion-content {
	position: static;
	width: auto;
	opacity: 1;
	-webkit-transition: opacity 0.5s ease;
	-moz-transition: opacity 0.5s ease;
	-ms-transition: opacity 0.5s ease;
	-o-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding: 20px;
	display: none;
}
#sidebar .accordion-header.open + .accordion-content {
	display: block;
}
#sidebar .accordion-content a,
#sidebar .accordion-content label {
	display: inline-block;
	vertical-align: top;
	cursor: pointer;
}
#sidebar .accordion-content a:hover,
#sidebar .accordion-content label:hover {
	text-decoration: none;
	color: #145d5b;
}
#sidebar .accordion-content .count  {
	font-size: 10px;
	color: #8d8d8d;
}
#sidebar .accordion-content .count::before {
	content: "(";
}
#sidebar .accordion-content .count::after {
	content: ")";
}
#sidebar .accordion-content li.disabled .count  {
	display: none;
}
#sidebar .accordion-content li.disabled,
#sidebar .accordion-content li.disabled a,
#sidebar .accordion-content li.disabled a:hover {
	color: #757575;
	cursor: default;
	text-shadow: none;
	background-color: transparent;
}
#sidebar .attribute-filter .accordion-content li.disabled {
	display: none;
}
#sidebar .accordion-content li.disabled label:not(:has(.line-through)) {
	text-decoration: line-through;
	cursor: default;
}
#sidebar .accordion-content li {
	position: relative;
	margin: 0 0 5px 0;
}
#sidebar .accordion-content input {
	display: inline;
	vertical-align: baseline;
	cursor: pointer;
}
#sidebar .accordion-content li .att-filter-area {
	display: inline-flex;
	column-gap: .25em;
}
#sidebar .attribute-filter-875 li a label[for^="att-3"]::before,
#sidebar .attribute-filter-875 li a label[for="att-4172"]::before {
	content: "";
	border-radius: 50%;
	width: 12px;
	height: 12px;
	margin-right: 0.25em;
	display: inline-block;
	position: relative;
	top: 1px;
	background-color: currentColor;
	color: #FFF;
	aspect-ratio: 1;
}
/* Reds */
#sidebar .attribute-filter-875 li a label[for="att-3027"]::before {
	color: #D71F26;
}
/* Purples/Lilacs */
#sidebar .attribute-filter-875 li a label[for="att-3041"]::before {
	color: #89449B;
}
/* Blues */
#sidebar .attribute-filter-875 li a label[for="att-3043"]::before {
	color: #2C489E;
}
/* Greens */
#sidebar .attribute-filter-875 li a label[for="att-3044"]::before {
	color: #3C7E3B;
}
/* Yellows */
#sidebar .attribute-filter-875 li a label[for="att-3047"]::before {
	color: #FFE400;
}
/* Orange/Corals */
#sidebar .attribute-filter-875 li a label[for="att-3042"]::before {
	color: #F47721;
}
/* Pinks */
#sidebar .attribute-filter-875 li a label[for="att-3040"]::before {
	color: #F8A1A1;
}
/* Browns/Beige */
#sidebar .attribute-filter-875 li a label[for="att-3045"]::before {
	color: #A76F20;
}
/* Whites */
#sidebar .attribute-filter-875 li a label[for="att-3046"]::before {
	color: #F5F5F5;
	box-shadow: inset 0 0 1px 0 #000;
}
/* Clears */
#sidebar .attribute-filter-875 li a label[for="att-3049"]::before {
	color: #FFF;
	box-shadow: inset 0 0 1px 0 #666;
}
/* Blacks */
#sidebar .attribute-filter-875 li a label[for="att-3050"]::before {
	color: #000000;
}
/* Gray */
#sidebar .attribute-filter-875 li a label[for="att-3736"]::before {
	color: #989898;
}
/* Color Set */
#sidebar .attribute-filter-875 li a label[for="att-3053"]::before {
	background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(240,241,8,1) 33%, rgba(8,242,94,1) 66%, rgba(8,32,242,1) 100%);
}
/* Glitter */
#sidebar .attribute-filter-875 li a label[for="att-3837"]::before {
	/*
	background-image: radial-gradient(circle at 1px 1px, #2a94fb 1px, transparent 0);
	background-size: 3px 3px;
	background-position-x: 12%;
	clip-path: polygon(100% 50%,84.64% 70%,75% 93.3%,50% 90%,25% 93.3%,15.36% 70%,0% 50%,15.36% 30%,25% 6.7%,50% 10%,75% 6.7%,84.64% 30%);
	 */
	/*background: #2a94fb url('data:image/svg+xml,\ <svg xmlns="http://www.w3.org/2000/svg" width="2" height="2" fill-opacity="1">\ <rect x="0" width="1" height="1" />\ <rect y="0" width="1" height="1" fill="white"/>\ </svg>') center center;*/
	background: repeating-conic-gradient(#2a94fb 0% 25%, transparent 0% 50%) center / 2px 2px;
}
/* Metallic */
#sidebar .attribute-filter-875 li a label[for="att-3048"]::before {
	color: #ddd;
	background: linear-gradient(-45deg, silver 40%, #fafafa 50%, gold 60%);
}
/* Gel Polish */
#sidebar .attribute-filter-875 li a label[for="att-4172"]::before {
	color: #ddd;
	background: linear-gradient(-45deg, #EEE 40%, #E6E6E6 50%, #DDD 60%);
}
/* Expandable filter containing a secondary list of filters */
#sidebar .accordion-content li span.icon {
	display: inline;
	text-align: left;
	line-height: 20px;
	padding: 0 10px 0 0;
	position: relative;
	vertical-align: top;
}
#sidebar .accordion-content li span.icon::after {
	position: absolute;
	content: "";
	color: #757575;
	text-align: center;
	padding: 0;
	width: 10px;
	height: 20px;
	line-height: 20px;
	left: 16px;
	/*top: -2px; /* Not needed after making span.att-filter-area an inline-flex */
}
#sidebar .accordion-content li.parent span.icon:not(ul.sub-list *)::after {
	content: "+";
}
#sidebar .accordion-content li.parent.open span.icon:not(ul.sub-list *)::after {
	content: "-";
}
#sidebar .accordion-content li:hover span.icon::after {
	color: #000;
}
#sidebar .accordion-content ul {
	display: none;
}
#sidebar .accordion-content ul li {
	padding-left: 14px;
	background-image: url('/images/profile_left/tree-line.png');
	background-repeat: repeat-y;
	background-position: 5px -10px;
}
#sidebar .accordion-content ul li:last-child {
	background-repeat: no-repeat;
	background-position: 5px -28px;
}
/* Brand Dropdown Section */
input#sidebar-toggle:checked ~ #sidebar #attribute-dropdown-brands {
	margin-top: 0; /* Remove the top margin from the brand header on the overlay */
}
#sidebar li.brands select[name="brands"] option:disabled {
	display: none;
}

/* Brand Logos Section */
#sidebar ul.list-brands li {
	margin: 3px auto;
}
#sidebar ul.list-brands li label {
	cursor: pointer;
	padding: 2px 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	transition: all .25s ease !important;
}
#sidebar ul.list-brands.text-links li label {
	justify-content: start;
}
#sidebar ul.list-brands li label:hover {
	border-color: #a1d7d6;
	background-color: #a1d7d6;
	border-radius: 6px;
}
#sidebar ul.list-brands li input[type="radio"],
#sidebar ul.list-brands li input[type="checkbox"] {
	display: none;
}
#sidebar ul.list-brands li input[type="radio"]:checked ~ label {
	box-shadow: 0 0 0 1px #a1d7d6;
	border-radius: 6px;
}
/* Mobile Brand Filter, text-based (not logos), show the radio button */
input#sidebar-toggle:checked ~ #sidebar ul.list-brands.text-links li {
	display: flex;
	align-items: center;
}
input#sidebar-toggle:checked ~ #sidebar ul.list-brands.text-links li input[type="radio"],
input#sidebar-toggle:checked ~ #sidebar ul.list-brands.text-links li label {
	display: inline-block;
}

/* Clean Salon Section */
#sidebar ul.accordion-content li .cspip {
	margin: 0;
	font-style: normal;
	position: relative;
	top: 1px;
}

/* Rating Section */
#sidebar .rating-filter a.pw2-item-rating label {
	display: flex;
	column-gap: 0.25em;
	align-items: center;
	position: relative; /* For absolutely positioned .line-through */
}
#sidebar .rating-filter a.pw2-item-rating label .pw2-item-stars {
	margin-top: 3px;
	display: inline-block;
}
#sidebar .rating-filter ul.accordion-content li.disabled a.pw2-item-rating label .line-through {
	height: 1px;
	width: 100%;
	border-top: 1px solid #757575;
	position: absolute;
	left: 0;
	right: 0;
	top: 9px;
}

/* Clear Filters */
#sidebar .clear-filters {
	text-align: center;
	margin: .9em;
}

input#sidebar-toggle:checked ~ #sidebar > ul.accordion > li:last-child {
	height: 45px; /* Height of div.clear-filter */
}
input#sidebar-toggle:checked ~ #sidebar .clear-filters {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	z-index: 1;
}

/*********************************************************************************************************************
 * Current Filter Pills
 *********************************************************************************************************************/
.active-filters {
	list-style: none;
	margin: 0 0 1em 0;
	padding: 0;
	text-align: left;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}
.sortBar + .active-filters {
	margin: 1em 0 25px 0;
}
.active-filters li.caption {
	text-transform: uppercase;
	letter-spacing: .1em;
}
.active-filters li:not(.caption) {
	/*margin: 0 2.5px 9px 2.5px;*/
	display: inline-block;
	position: relative;
	color: #145d5b;
	background: #a5d7d6;
	border-radius: 3px;
	padding: 5px 10px 5px 0;
}
.active-filters li a {
	font-family: "Open Sans", sans-serif;
	font-size: 12px;
	color: #145d5b;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
}
.active-filters li a:hover {
	text-decoration: none;
	color: #000;
}
.active-filters li a.close {
	padding-left: 28px;
}
.active-filters li a.close::before {
	content: '';
	display: block;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%23145d5b' d='M56 5.638l-22.362 22.362 22.362 22.362-5.638 5.638-22.362-22.362-22.362 22.362-5.638-5.638 22.362-22.362-22.362-22.362 5.638-5.638 22.362 22.362 22.362-22.362z'/%3E%3C/svg%3E") no-repeat center center;
	position: absolute;
	top: 10px;
	left: 10px;
	width: 8px;
	height: 8px;
}
.active-filters li a.close:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%23000' d='M56 5.638l-22.362 22.362 22.362 22.362-5.638 5.638-22.362-22.362-22.362 22.362-5.638-5.638 22.362-22.362-22.362-22.362 5.638-5.638 22.362 22.362 22.362-22.362z'/%3E%3C/svg%3E");
}
/*
.active-filters li a.close i:first-of-type {
	cursor: pointer;
	font-weight: bold;
	font-size: 1.1em;
	font-style: normal;
	padding: 0 10px;
}
*/
.active-filters li a .cspip {
	margin: 0;
	position: relative;
	top: 1px;
	font-style: normal;
}

/*********************************************************************************************************************
 * Attribute Description
 *********************************************************************************************************************/
.prod_table_container .attribute-description {
	text-align: left;
	border-radius: 5px;
	background: #d1ebea;
	padding: 1em 2em;
	line-height: 1.5;
	margin: 1em 0 2em 0;
	font-size: 12px;
	order: 5; /* 1: .prod-table-top, 2: .product-list, 3: .pagination, 4: .infinite-scroll-load-more, 5: .attribute-description */
	flex: 1 1100%; /* To ensure full width when .prod_table_container is a flex box */
}
.prod_table_container .attribute-description > ul > li {
	margin: 0 0 0.5em 0;
}
.prod_table_container .attribute-description .read-more {
	font: inherit;
}
.prod_table_container .attribute-description .read-more a[data-ctrl] {
	text-shadow: 0 0 6px #a4d7d6;
	font-style: italic;
	font-size: smaller;
}
.prod_table_container .attribute-description .read-more.show-class a[data-ctrl] {
	display: none; /* Don't show the "Show less" button */
}
.prod_table_container .attribute-description .read-more.show-class a[data-ctrl]::before {
	content: "–\A0";
	display: inline-block;
}

/*********************************************************************************************************************
 * Clean Salon Sub-Attribute Description
 *********************************************************************************************************************/
#clean-salon-header:not(.hidden) ~ #products-infinite-scroll .prod_table_container .attribute-description {
	display: none;
}
/* Put the icon in ::after and reverse the flex-direction so that the icon is overlaid on top of the description background without having to use z-index */
#clean-salon-header {
	display: flex;
	margin: 0 0 2em 0;
	padding: 0;
	align-items: stretch;
	flex-direction: row-reverse;
	--iconWidth: 114px;
}
@media only screen and (max-width: 480px) {
	#clean-salon-header {
		--iconWidth: 75px;
	}
}
#clean-salon-header.hidden {
	display: none;
}
#clean-salon-header[data-cs-id]::after {
	content: "";
	background: none no-repeat left center;
	aspect-ratio: 1;
	background-size: contain;
	width: var(--iconWidth);
	flex-shrink: 0;
	filter: drop-shadow(2px 2px 0 #FFF) drop-shadow(-2px 2px 0 #FFF) drop-shadow(2px -2px 0 #FFF) drop-shadow(-2px -2px 0 #FFF);
}
#clean-salon-header .description {
	border-radius: 5px;
	display: flex;
	align-items: center;
	margin: 1em auto;
	padding: 1em 2em;
	line-height: 1.5;
	font-size: 12px;
}
#clean-salon-header[data-cs-id] .description {
	margin-left: calc(0px - (var(--iconWidth) / 2));
	padding-left: calc((var(--iconWidth) / 2) + 2em);
}
#clean-salon-header[data-cs-id="3839"]::after { background-image: url("/images/cleansalon/3839.png"); }
#clean-salon-header[data-cs-id="3851"]::after { background-image: url("/images/cleansalon/3851.png"); }
#clean-salon-header[data-cs-id="3840"]::after { background-image: url("/images/cleansalon/3840.png"); }
#clean-salon-header[data-cs-id="3841"]::after { background-image: url("/images/cleansalon/3841.png"); }
#clean-salon-header[data-cs-id="3852"]::after { background-image: url("/images/cleansalon/3852.png"); }
#clean-salon-header[data-cs-id="3842"]::after { background-image: url("/images/cleansalon/3842.png"); }
#clean-salon-header[data-cs-id="3843"]::after { background-image: url("/images/cleansalon/3843.png"); }
#clean-salon-header[data-cs-id="3845"]::after { background-image: url("/images/cleansalon/3845.png"); }
#clean-salon-header[data-cs-id="3846"]::after { background-image: url("/images/cleansalon/3846.png"); }
#clean-salon-header[data-cs-id="3854"]::after { background-image: url("/images/cleansalon/3854.png"); }
#clean-salon-header[data-cs-id="3848"]::after { background-image: url("/images/cleansalon/3848.png"); }
#clean-salon-header[data-cs-id="3850"]::after { background-image: url("/images/cleansalon/3850.png"); }
#clean-salon-header[data-cs-id="4082"]::after { background-image: url("/images/cleansalon/4082.png"); }
#clean-salon-header[data-cs-id="3839"] .description { background: #772b53; color: #FFF; }
#clean-salon-header[data-cs-id="3851"] .description { background: #6a3800; color: #FFF; }
#clean-salon-header[data-cs-id="3840"] .description { background: #78a9da; color: #FFF; }
#clean-salon-header[data-cs-id="3841"] .description { background: #be8844; color: #FFF; }
#clean-salon-header[data-cs-id="3852"] .description { background: #3e618d; color: #FFF; }
#clean-salon-header[data-cs-id="3842"] .description { background: #d97e9f; color: #FFF; }
#clean-salon-header[data-cs-id="3843"] .description { background: #efa81f; color: #FFF; }
#clean-salon-header[data-cs-id="3845"] .description { background: #97ac65; color: #FFF; }
#clean-salon-header[data-cs-id="3846"] .description { background: #8ab3a0; color: #FFF; }
#clean-salon-header[data-cs-id="3854"] .description { background: #cb9983; color: #FFF; }
#clean-salon-header[data-cs-id="3848"] .description { background: #5f4da0; color: #FFF; }
#clean-salon-header[data-cs-id="3850"] .description { background: #53853f; color: #FFF; }
#clean-salon-header[data-cs-id="4082"] .description { background: #54c6df; color: #FFF; }

/*********************************************************************************************************************
 * Sort Bar (includes filter toggle button)
 *********************************************************************************************************************/
.prod_table_container .prod-table-top {
	flex: 1 1 100%; /* To ensure full width when .prod_table_container is a flex box */
}
#attribute-products .sortBar,
#attribute-products .sortBar .sortArea select {
	font-size: 1.167em;
	margin-bottom: 25px;
}
#attribute-products .sortBar {
	background: #FFF;
	display: flex;
	justify-content: space-between;
}
#attribute-products .sortBar .title {
	font-size: 1em;
	font-weight: normal;
	color: #4D4D4D;
	margin: 0 .5em;
}
@media only screen and (max-width: 560px) {
	#attribute-products .sortBar .title {
		display: none;
		font-size: min(.8vh, 1em);
	}
}
#attribute-products .sortBar label[for="sidebar-toggle"] {
	background: #a4d7d6;
	/*color: #ffffff; /* Doesn't have enough contrast with the background color */
	color: #3B3B3B;
	font-family: "Open Sans", sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: .5em 1em;
	font-size: 1rem;
	cursor: pointer;
	border-radius: 6px;
}
#attribute-products .sortBar label[for="sidebar-toggle"]::before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%233B3B3B' d='M25.519 21.889c0 0-0.241-4.089-0.241-4.089s0-13.471 0-13.471c0.002-1.162-0.005-2.636 0.825-3.553 1.104-1.224 3.156-0.929 4.022 0.435 0.498 0.787 0.443 1.744 0.445 2.636 0 0 0 25.258 0 25.258s-5.052 0-5.052 0c0 0 0-7.217 0-7.217zM42.358 3.848c0.019-1.576 0.281-3.476 2.165-3.794 2.798-0.471 3.125 2.24 3.127 4.275 0 0 0 11.546 0 11.546s-2.646-0.233-2.646-0.233c0 0-2.646 0.233-2.646 0.233s0-12.028 0-12.028zM8.44 3.848c0.014-1.181 0.147-2.442 1.229-3.163 1.484-0.986 3.286-0.156 3.825 1.479 0.322 0.984 0.238 2.545 0.238 3.608 0 0 0 6.014 0 6.014s-2.646-0.197-2.646-0.197c0 0-2.646 0.197-2.646 0.197s0-7.938 0-7.938zM13.010 13.556c5.509 1.855 5.477 10.377-1.203 11.551-5.121 0.902-8.455-5.015-5.867-9.23 0.907-1.475 2.314-2.151 3.943-2.535 1.176-0.166 1.985-0.171 3.127 0.214zM46.207 28.993c-5.564 1.051-8.874-4.833-6.348-9.028 1.046-1.737 2.533-2.357 4.424-2.774 7.57-0.883 9.36 10.399 1.924 11.802zM13.732 26.46c0 0 0 24.536 0 24.536-0.002 1.215-0.067 3.079-0.844 4.063-1.066 1.352-3.094 1.222-3.984-0.226-0.496-0.808-0.462-1.958-0.464-2.875 0 0 0-25.499 0-25.499s5.292 0 5.292 0zM33.219 33.436c1.936 3.286-0.019 8.15-3.851 8.821-1.169 0.207-3.019 0.135-4.089-0.402-4.71-2.355-4.39-9.803 1.443-11.193 2.673-0.375 5.056 0.33 6.497 2.774zM45.004 30.77c0 0 2.646-0.221 2.646-0.221s0 21.409 0 21.409c-0.002 1.034 0.034 2.215-0.649 3.074-0.977 1.224-3.017 1.224-3.993 0-0.637-0.799-0.645-1.867-0.649-2.834 0 0 0-21.65 0-21.65s2.646 0.221 2.646 0.221zM27.684 43.998c0 0 2.887-0.219 2.887-0.219s0 8.66 0 8.66c-0.022 1.758-0.654 3.861-2.887 3.517-1.912-0.296-2.384-2.114-2.406-3.757 0 0 0-8.419 0-8.419s2.406 0.219 2.406 0.219z'/%3E%3C/svg%3E");
	position: relative;
	top: -2px;
	margin: 0 10px 0 0;
}
#attribute-products .sortBar .sortArea {
	border: 1px solid #a4d7d6;
	background: #FFF;
	display: block;
	padding: 0 .5em;
	white-space: nowrap;
	border-radius: 6px;
	margin-left: auto;
}
#attribute-products .sortBar .sortArea .label {
	font-weight: bold;
}
#attribute-products .sortBar .sortArea .label::after {
	content: ":";
}
#attribute-products .sortBar .sortArea select {
	margin: 5px 3px 5px 0;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding: 3px 1.5em 3px 0;
	background-color: #FFF;
	/*background-image: url("data:image/svg+xml,%3Csvg width='292.4' height='292.4' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Cpath id='svg_1' d='m287,69.4a17.6,17.6 0 0 0 -13,-5.4l-255.6,0c-5,0 -9.3,1.8 -12.9,5.4a17.6,17.6 0 0 0 -5.5,12.8c0,5 1.8,9.3 5.4,12.9l128,127.9c3.6,3.6 7.8,5.4 12.8,5.4s9.2,-1.8 12.8,-5.4l128,-128c3.5,-3.5 5.4,-7.8 5.4,-12.8c0,-5 -1.9,-9.2 -5.5,-12.8l0.1,0z' opacity='undefined' fill='%23a4d7d6'/%3E%3C/g%3E%3C/svg%3E"); /* Downward Triangle */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' preserveAspectRatio='xMinYMid'%3E%3Cpath fill='%23a5d7d6' d='M56 16.329c0 0.449-0.224 0.954-0.561 1.291l-26.148 26.148c-0.337 0.337-0.842 0.561-1.291 0.561s-0.954-0.224-1.291-0.561l-26.148-26.148c-0.337-0.337-0.561-0.842-0.561-1.291s0.224-0.954 0.561-1.291l2.806-2.806c0.337-0.337 0.786-0.561 1.291-0.561 0.449 0 0.954 0.224 1.291 0.561l22.052 22.052 22.052-22.052c0.337-0.337 0.842-0.561 1.291-0.561s0.954 0.224 1.291 0.561l2.806 2.806c0.337 0.337 0.561 0.842 0.561 1.291z'/%3E%3C/svg%3E"); /* Downward Chevron */
	linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
	background-repeat: no-repeat, repeat;
	background-position: right .7em top 50%, 0 0;
	background-size: .65em auto, 100%;
}
/* Hide the old button that's fixed to the bottom of the screen */
#page-main #profile-body #sidebar-wrapper label.toggle-sidebar-button {
	display: none !important;
}

/*********************************************************************************************************************
 * DESKTOP SCREENS
 *********************************************************************************************************************/
@media only screen and (min-width: 980px) {
	:root {
		--att-mobile-mode: 0;
	}
	ol.breadcrumb {
		display: block;
	}
	#attr-wrap > h1 {
		margin: 0 0 1em 0;
	}
	#attr-wrap > h1 > .h1-overlay-text {
		font-size: 3.5em;
	}

	#attr-wrap > h1 picture + .att-name {
		font-family: 'Open Sans', sans-serif;
		font-weight: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 30%;
		left: 30%;
		bottom: 0;
		text-align: center;
		font-size: 2.5em;
		line-height: 1em;
		text-transform: uppercase;
		color: #333;
		/*font-weight: bold;*/
		/* Hard stroke */
		/*
		text-shadow:
			-1px -1px 0 #FFF,
			0   -1px 0 #FFF,
			1px -1px 0 #FFF,
			1px  0   0 #FFF,
			1px  1px 0 #FFF,
			0    1px 0 #FFF,
			-1px  1px 0 #FFF,
			-1px  0   0 #FFF,
			0 0 4px #000
		;
		*/
		/* Soft stroke */
		/*text-shadow: 0 0 2px #FFF, 0 0 4px rgba(0,0,0,0.7);*/
	}

	/******************************************************************************************************************
	 * Filter Menu Overlay/Sidebar (Desktop)
	 *****************************************************************************************************************/
	#sidebar-wrapper {
		position: static; /* Make it a sidebar instead of an overlay */
	}
	#sidebar,
	input#sidebar-toggle:checked ~ #sidebar {
		box-sizing: content-box;
		position: relative;
		min-width: 1px;
		flex: 0 1 auto;
		width: 230px;
		max-height: none;
		height: auto;
		opacity: 1;
		padding: 0; /* Undo value set by #sidebar-toggle:checked */
		background: none; /* Undo value set by #sidebar-toggle:checked */
	}
	input#sidebar-toggle:checked ~ #sidebar ul.list-brands.text-links li {
		display: list-item; /* Undo value set by #sidebar-toggle:checked */
	}
	input#sidebar-toggle:checked ~ #sidebar ul.list-brands.text-links li label {
		display: flex; /* Undo value set by #sidebar-toggle:checked */
	}
	input#sidebar-toggle:checked ~ #sidebar ul.list-brands.text-links li input[type="radio"],
	#sidebar #sidebar-header,
	#sidebar button.apply-filters {
		display: none;
	}
	#sidebar .accordion-header {
		transition: none;
		letter-spacing: 2px;
		cursor: pointer;
		border: 0 solid #FFF;
		background: transparent;
		border-bottom: 1px solid #a5d7d6;
		position: relative;
		margin: 0 0 20px 0;
		padding: 0 20px 5px 0;
		user-select: none
	}
	#sidebar .accordion {
		padding: 0;
		margin: 0 0 1em 0;
	}
	#sidebar .accordion > li.brands {
		margin: 0 0 30px 0;
		padding: 0;
	}
	/*
	#sidebar .accordion > li .accordion-item {
		clear: both;
	}
	#sidebar .attribute-filter div.brands {
		margin: 0 0 30px 0;
		padding: 0;
	}
	*/
	#sidebar .accordion-content {
		background-color: #fff;
		line-height: 20px;
		padding: 5px;
		margin: 0 0 30px 0;
		max-height: 160px;
		box-sizing: border-box;
		overflow-x: hidden;
		overflow-y: auto;
	}
	#sidebar .reset-button {
		display: block;
		text-align: center;
		background-color: #aaa;
		color: #fff;
		clear: both;
		border: 1px solid #757575;
		font-weight: bold;
		margin: 0 auto 0 auto;
		padding: 0 5px 0 5px;
		height: 36px;
		line-height: 36px;
		cursor: pointer;
		font-size: 14px;
		text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
		max-width: 200px;
		transition: background-color .33s;
	}
	#sidebar .reset-button:hover {
		text-decoration: none;
		background-color: #eee;
		border: 1px solid #aaa;
		color: #444;
		text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
	}

	/*****************************************************************************************************************
	 * Attribute Description
 	******************************************************************************************************************/
	.prod_table_container .attribute-description .read-more.show-class a[data-ctrl] {
		display: none;
	}

	/*****************************************************************************************************************
    * Sort Bar (includes filter toggle button)
    ******************************************************************************************************************/
	#attribute-products .sortBar {
		background: #a4d7d6;
		align-items: center;
	}
	#attribute-products .sortBar .title {
		display: block;
		margin: 0;
		padding: 0 10px;
		font-weight: bold;
		color: #000;
		width: auto;
		order: 0;
	}
	#attribute-products .sortBar label[for="sidebar-toggle"] {
		display: none;
	}
	#attribute-products .sortBar .sortArea {
		background: transparent;
	}
	#attribute-products .sortBar .sortArea select {
		padding-left: 6px;
		margin-left: 3px;
	}
}