.categoryListings
{
margin: 0 auto;
padding: 0 .5rem;
max-width: 62.5rem;
/* 
display: grid;
column-gap: .75rem;
grid-template-columns: 1fr;
align-items: start;
grid-auto-rows: min-content;
 */
}

.learn-results .categoryListings
{
max-width: 48rem;
padding: 0 1rem;
}

.category-hero-image
{
display: block;
width: 100%;
height: auto;
max-width: 62.5rem;
margin: 0 auto 1.5rem;
}

.category-page h1
{
max-width: 62.5rem;
margin: 0 auto 1rem;
padding: 0 .5rem;
}

.category-page.learn-results h1
{
max-width: 48rem;
padding: 0 1rem;
}

.category-page h1.category-hero
{
position: relative;
width: 100%;
max-width: none;
height: 14rem;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-shadow: 0 0 .25rem rgba(0,0,0,.75);
background-color: #222;
font-size: 2.5rem;
margin-bottom: 2rem;
text-align: center;
}

.categoryItemInnerGrouping {
display: grid;
gap: .75rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
grid-auto-rows: min-content;
}

.categoryItem
{
text-align: center;
padding-bottom: 2.5rem;
position: relative;
}

.category-page .categoryItem
{
margin-bottom: 1rem;
}

.categoryItem a, #libraryContainer .categoryItem a
{
display: block;
text-decoration: none;
color: #444;
}

.productImageThumb {
width: 100%;
height: auto;
padding: .25rem;
}

.productColorOptions, .searchResults .productColorOptions {
display: flex;
flex-flow: row wrap;
justify-content: center;
list-style-type: none;
margin: 0 0 .5rem;
padding: 0;
}

.productColorOptions li
{
line-height: 0
}

.productColorOptions li img, .searchResults .productColorOptions li {
width: 1rem;
height: 1rem;
text-decoration: none;
margin: .125rem;
}

.categoryItem p:first-of-type {
line-height: 1.2;
margin: 0;
padding: 0
}


.categoryItem .reviewLinkBlock {
float: none;
display: flex;
flex-flow: row wrap;
justify-content: center;
margin: .25rem 0 0 0;
padding: 0
}

.categoryItemPricing {
font-size: .875rem;
margin-top: .25rem;
padding: 0
}

.categoryItemPricing del {
color: #666
}

.categoryItemPricing .sale {
color: #c00
}

.availableSizes {
font-size: .75rem;
line-height: 1.1;
color: #666;
margin-top: .5rem;
padding: 0;
}

.extended-sizing
{
color: #5e7f1f;
font-size: .5rem;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
line-height: .95;
letter-spacing: .0625rem;
position: absolute;
top: -2rem;
left: 0;
background-color: #fff;
background-color: rgba(255,255,255,.6);
padding: .375rem .375rem .375rem .125rem;
border-radius: 0 .375rem 0 .375rem;
text-shadow: 0 0 .0625rem #fff;
border-bottom: .0625rem dotted #adc72e;
border-left: .0625rem dotted #adc72e;
text-align: left;
vertical-align: middle;
transform: rotate(90deg);
transform-origin: left bottom;


display: flex;
flex-flow: row;
gap: .125rem;
align-items: center;
}

.extended-sizing svg
{
display: block;
fill: #5e7f1f;
width: 1.25rem;
height: 0.875rem;
margin: 0;
transform: rotate(-90deg);
}

.compareButton {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-flow: row wrap;
justify-content: center;
}

.compareButton button {
font-size: .75rem;
padding: .125rem .75rem;
margin: 0;
border: .0625rem solid #eee;
color: #444;
text-decoration: none;
border-radius: 10rem;
transition: background-color 200ms;
background-color: #fff;
line-height: 1.5;
}

.compareButton button:hover {
background-color: #efefef
}

.compareButton button.compareRemove:hover {
background-color: #fff
}

.compareBtn.compareRemove
{
border-right: 0;
}

.cancelCompare button {
background-color: #efefef;
border-radius: 0 10rem 10rem 0;
padding-left: .5rem;
padding-right: .625rem;
}

.cancelCompare button:hover {
background-color: #fff
}

.cancelCompare {
display: none
}

.compareBtn.compareRemove
{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}

.compareButton.disabled button {
	color: #666;
	border: none;
	background-color: #efefef;
}

.compareButton.disabled button::after {
	content: '\f05e';
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	font-size: .625rem;
	margin-left: .25rem;
	color: #ccc;
}

.compareButton.disabled button:hover {
	cursor: not-allowed;
}

.paginationSortBar
{
grid-column: 1/-1;
color: #555;
}

#paginationSortBar1 
{
font-size: 0.9375rem;
/* order: -1; */
font-size: 1rem;
border-bottom: .0625rem solid #eee;
padding-bottom: .25rem;
display: grid;
grid-template-columns: auto 1fr;
grid-template-areas:
"filter-button sort-count-container"
"active-filters active-filters";
row-gap: .75rem;
}

/* 
#paginationSortBar1 > *
{
border: 1px solid red;
}
 */

.learn-results #paginationSortBar1
{
margin-top: 2rem;
}

#paginationSortBar1 a
{
color: #555;
}

#category-filter-trigger
{
display: flex;
flex-flow: row;
align-content: center;
grid-gap: .1875rem;
align-items: center;
grid-area: filter-button;
}

#category-filter-trigger::before
{
content: '\e253';
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 6 Pro";
font-weight: 900;
}

#category-filter-trigger span
{
font-size: .875rem;
background-color: #555;
color: #fff;
padding: .375rem;
border-radius: 100%;
width: 1.25rem;
height: 1.25rem;
display: flex;
flex-flow: row;
align-items: center;
justify-content: center;
}

.active-filters
{
font-size: 0.8125rem;
grid-area: active-filters;
position: relative;
}

.active-filters > div
{
display: flex;
flex-flow: row wrap;
gap: .375rem;
align-items: center;
}

.active-filters a:not(:last-of-type)
{
border-radius: 10rem;
padding: .375rem .5rem .375rem .625rem;
color: #005380;
background-color: #efefef;
border: 0.09375rem solid #ddd;

display: flex;
align-items: center;
gap: .25rem;
}

.active-filters a:not(:last-of-type) span
{
max-width: 12rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.active-filters a:not(:last-of-type):hover
{
background-color: #fff;
}

.active-filters a:last-of-type
{
margin-left: .25rem;
}

#paginationSortBar1 .active-filters a:last-of-type:hover
{
text-decoration: underline;
color: #c00;
}

#paginationSortBar1 .sort-count-container
{
display: flex;
grid-gap: .5rem;
flex-flow: row wrap;
align-items: center;
margin-left: auto;
grid-area: sort-count-container;
}


#category-sort-wrapper, #category-count-wrapper
{
position: relative;
}

#category-sort-wrapper:after
{
margin-left: .25rem;
color: #ddd;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 6 Pro";
font-weight: 900;
content: "\f142";
font-size: .75rem;
align-content: center;
}

#category-sort-wrapper > a::after, #category-count-wrapper > a::after
{
content: '\f107';
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 6 Pro";
font-weight: 400;
margin-left: .1875rem;
vertical-align: -.0625rem;
}

.category-pagination-options
{
display: none;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 130%;
z-index: 1;
background-color: #f6f6f6;
padding: .5rem 1rem .75rem;
border: .0625rem solid #eee;
border-radius: .375rem;
box-shadow: 0 0 .5rem rgba(0,0,0,.1);
min-width: 12rem;
}

#category-sort-options
{
right: -2rem;
min-width: 10rem;
}

#category-count-options
{
right: 0;
}

.category-pagination-options.open
{
display: block;
}

.category-pagination-options li a
{
display: block;
padding: .5rem 0;
border-bottom: .0625rem solid #eee;
}

.category-pagination-options li:last-of-type a
{
display: block;
padding: .5rem 0 0;
border-bottom: none
}

#paginationSortBar1 .category-pagination-options li a
{
color: #005380;
}

#paginationSortBar1 .category-pagination-options li a:hover
{
text-decoration: underline;
}

#paginationSortBar1 .category-pagination-options li a.active 
{
font-weight: 700;
cursor: default;
color: #555;
}

#paginationSortBar1 .category-pagination-options li a.active:hover
{
text-decoration: none;
}

.category-pagination-options li a.active::after
{
content: '\f058';
font-style: normal;
/* font-variant: normal; */
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "Font Awesome 6 Pro";
font-weight: 900;
margin-left: .25rem;
}

#paginationSortBar2 {
display: flex;
justify-content: center;
order: 1;
}

.pagination-nav {
list-style: none;
margin: 0;
padding: 0;
}

.pagination-nav li {
display: inline;
padding-left: .25rem;
padding-right: .25rem
}

ul.pagination-nav li.previous a, ul.pagination-nav li.next a {
font-size: 1.45rem;
text-decoration: none
}

.productsPerPage
{
display: inline-block; margin-left: .25rem;
}

#searchTabs {
width: 100%;
border-bottom: .0625rem solid #005380;
margin-bottom: 1rem;
grid-column: 1/-1;
order: -2;
display: flex;
flex-flow: row;
font-size: .875rem;
}

#searchTabs div {
border: .0625rem solid #005380;
background-color: #005380;
color: #fff;
padding: .5rem 1rem;
margin-right: .375rem;
text-align: center;
border-radius: .25rem .25rem 0 0;
}

#searchTabs div.active {
background-color: #fff;
color: #005380;
margin-bottom: -.0625rem;
padding-bottom: .0625rem;
border-bottom: none;
}

#searchTabs a:hover {
text-decoration: underline;
color: #fff;
}

.infoPageListingHeading {
margin: 0;
font-weight: 700;
}

.infoPageListingDescription {
border-bottom: .0625rem dotted #ddd;
padding-bottom: 1rem;
margin-bottom: 1rem;
margin-top: .5rem;
}

.infoPageListingHeading:first-of-type {
padding-top: 1rem;
}

.infoPageListingDescription:last-of-type
{
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}

.brand-page-img
{
display: block;
margin: 0 auto 1rem;
width: 100%;
max-width: 15rem;
height: auto;
padding: 0 1rem;
}

.brand-page-header p
{
max-width: 42rem;
text-align: center;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
line-height: 1.5;
}

.category-page-header-copy
{
max-width: 62.5rem;
padding: 0 .5rem;
margin: 0 auto 2rem;
text-align: center;
line-height: 1.5;
}

.category-page-header-copy p
{
max-width: 42rem;
text-align: left;
line-height: 1.5;
}

.category-page-footer-copy
{
max-width: 50rem;
margin: 1rem auto;
}

.category-page-footer-copy p
{
margin: 0 1rem 1rem;
line-height: 1.5;
text-align: center;
padding: 0 1rem;
}

.category-page-footer-copy p:first-of-type
{
border-top: .0625rem solid #eee;
padding-top: 2rem;
}

#filterNav h2
{
font-size: 1.625rem;
text-transform: uppercase;
border-bottom: .0625rem solid #eee;
padding-bottom: .75rem;
display: flex;
align-items: center;
gap: .25rem;
}

#filterNav h2 span
{
font-size: .875rem;
background-color: #555;
color: #fff;
border-radius: 100%;
width: 1.25rem;
height: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
font-family: proxima-nova,Arial,Helvetica,sans-serif;
font-weight: 400;
margin-bottom: .1875rem;
}


#filterNav ul li.sectionHeader
{
padding-top: 1rem;
}

.non-product-url
{
fill: #005380;
}

.categoryItem:hover .non-product-url
{
fill: #27aae1;
}

/* j filterNav play */
html
{
position: relative;
}

#filterNav
{
position: fixed;
z-index: 3;
top: 0;
left: -20rem;
width: 20rem;
height: 100vh;
background-color: #fafafa;
box-shadow: .125rem 0 .1875rem rgba(0,0,0,.15);
transform: translateX(-100%);
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
padding: 1.25rem;
transition: all .3s ease-in-out;
margin-top: 0;
}

#filterNav.open
{
transform:translateX(100%);
}

#filterNav .filterNav-content {
	display: none;
}
#filterNav.open .filterNav-content {
	display: block;
}

#close-filter-trigger {
	display: block;
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	font-size: 1.625rem;
}

#close-filter-trigger:hover
{
color: #c00;
}

#filterNav a
{
color:#444;
text-decoration:none
}

#filterNav a:hover
{
text-decoration:underline
}

#filterNav .filter-block
{
margin:0;
padding:0;
border-bottom:.0625rem solid #eee
}

#filterNav .filter-block .sectionHeader
{
display:flex;
align-items:center;
justify-content:space-between;
text-transform:uppercase;
font-weight:700;
padding:1rem 0;
margin:0;
font-size:.875rem;
line-height:1;
cursor:pointer;
text-decoration:none
}

#filterNav .filter-block .sectionHeader::after
{
font-style:normal;
font-variant:normal;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
font-family:"Font Awesome 6 Pro";
font-weight:900;
content:"\f078"
}

#filterNav .filter-block.open .sectionHeader::after
{
content:"\f077"
}

#filterNav .filter-block > ul
{
width:100%;
opacity:0;
height:0;
overflow:hidden;
transition:opacity 250ms ease;
margin:0 auto
}

#filterNav .filter-block.open > ul
{
opacity:1;
height:auto;
margin-bottom:.5rem
}

#filterNav ul
{
list-style-type:none;
margin:0;
padding:0
}

#filterNav>ul
{
margin:0 0 .5rem 0;
padding:0 0 1rem 0;
border-bottom:.0625rem solid #eee
}

#filterNav ul li
{
padding:0 .25rem 0 0;
margin:0;
font-size:.875rem;
display:block;
line-height:1
}

#filterNav ul li a
{
padding:.5rem 0;
display:block
}

#filterNav ul li:first-child a
{
padding-top:.0625rem
}

#filterNav ul li.sectionHeader
{
text-transform:uppercase;
font-weight:700;
padding-top:0;
padding-bottom:.5rem
}

#filterNav ul li.sectionHeader a
{
font-weight:700;
padding-bottom:0
}

#filterNav ul.filterTags li.sectionHeader
{
padding-top:1rem;
padding-bottom:.75rem;
display:flex;
flex-flow:row wrap;
justify-content:space-between;
align-items: center;
}

#filterNav ul.filterTags li a#resetFilters
{
font-size: .625rem;
color: #fff;
font-weight: 400;
padding: .25rem .5rem;
border-radius: 10rem;
background-color: #444;
letter-spacing: .0625rem;
}

#filterNav ul.filterTags li a:hover#resetFilters
{
background-color: #c00;
text-decoration: none;
}

#filterNav ul.filterTags li a
{
padding:0
}

#priceSlider ul {
border-bottom: none
}

#filterNav .filterTags li:not(:first-of-type)
{
padding: .5rem .5rem .5rem .75rem;
margin: 0 0 .5rem 0;
background-color: #fff;
border-radius: 10rem;
position: relative;
color: #444;
display: flex;
justify-content: space-between;
border: 0.09375rem solid #aaa;
}
   
#filterNav .filterTags li a:hover
{
color: #c00;
}


#filterNav ul li a.filter-checkbox
{
display: grid;
grid-gap: .25rem;
grid-template-columns: auto 1fr;
align-content: center;
}

.filter-checkbox span {
width: 1rem;
height: 1rem;
margin-top: -.0625rem;
background: url(https://dh36nblqpps8a.cloudfront.net/assets/site-layout/filter-checkbox-open.png) no-repeat;
background-size: cover;
align-self: flex-start;
}

.filter-checkbox.active span {
background: url(https://dh36nblqpps8a.cloudfront.net/assets/site-layout/filter-checkbox-active.png) no-repeat;
background-size: cover
}

.filter-checkbox.inactive span {
background: url(https://dh36nblqpps8a.cloudfront.net/assets/site-layout/filter-checkbox-mixed.png) no-repeat;
background-size: cover
}

.no-results .compareButton
{
display: none;
}

.no-results h2
{
margin-bottom: 1rem;
}

.no-results h2::before
{
content: "";
display: block;
margin: 1.875rem 0;
height: 0.1875rem;
width: 100%;
max-width: 40%;
background-color: #adc72e;
border-radius: 10rem;
}

.soldout
{
padding: 1rem;
background-color: #efefef;
background-color: rgba(239,239,239,.5);
border: .1875rem solid #f1c21b; 
border-radius: .375rem;
display: grid;
grid-template-columns: auto auto;
grid-gap: 1rem;
align-items: center;
max-width: 34rem;
margin-top: .125rem;
}

.soldout i
{
display: block;
font-size: 2rem;
color: #f1c21b;
}

.soldout p
{
margin: 0;
}

.popular-search-container
{
display: flex;
flex: 1;
flex-flow: row wrap;
gap: .75rem;
}

.popular-search-container a
{
padding: .75rem 1.25rem;
background-color: #eee;
border-radius: 10rem;
border: .125rem solid #eee;
}

.popular-search-container a:hover
{
background-color: #fff;
}

.new-colors-badge
{
display: inline-flex;
gap: .375rem;
align-items: center;
padding: .42rem .75rem .42rem .5rem;
margin-bottom: .5rem;
font-size: .626rem;
color: #fff;
font-weight: 700;
text-transform: uppercase;
border-radius: 10rem;
text-decoration: none;
line-height: 1;
letter-spacing: .1rem;
background-color: #005380;
background: linear-gradient(90deg, rgba(252,176,69,1) 0%, rgba(253,29,29,1) 50%, rgba(131,58,180,1) 100%);
text-shadow: 0 0 .125rem rgba(0,0,0,.75);
}

.new-colors-badge > div
{
width: .5rem;
height: .5rem;
background-color: #27aae1;
border-radius: 10rem;
border: .0625rem solid #fff;
box-shadow: 0 0 .1875rem rgba(0,0,0,.5);
}

@media screen and (min-width: 25rem) {

	.soldout i
	{
	font-size: 3rem;
	}

}

@media screen and (min-width: 40rem)
{
    
    .category-page h1
	{
	margin-top: 1.5rem;
	}
    
    .category-page h1.category-hero
	{
	height: 20rem;
	font-size: 4rem;
	margin-top: 0;
	}
	
	.category-page .categoryItem
	{
	margin-bottom: 2rem;
	}
	
	.category-page-footer-copy p
	{
	padding: 0 4rem;
	}
	
	.no-results h2::before
	{
	margin: 3rem 0;
	}
	
	.soldout
	{
	margin-top: .875rem;
	}
	
	.extended-sizing svg
	{
	width: 1.4375rem;
	height: 1rem;
	}
	
	
	
}

@media screen and (min-width: 48rem)
{
	
	.category-page h1.category-hero
	{
	font-size: 5rem;
	height: 26rem;
	}
	
	.itemCountInfo > div
	{
	display: inline;
	}
	
	.categoryListings #filterNav
	{
	border-top: .0625rem solid #eee;
	}
	
	.category-page-header-copy
	{
	font-size: 1.125rem;
	}
	
	.categoryItemInnerGrouping {
	grid-template-columns: repeat(4, 1fr);
	}
	
	#paginationSortBar1 
	{
	grid-template-columns: auto 1fr auto;
	grid-template-areas:
	"filter-button active-filters sort-count-container";
	row-gap: 0;
	column-gap: .5rem;
	}
	
	.has-active-filters:after
	{
	color: #ddd;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	content: "\f142";
	font-size: .75rem;
	align-content: center;
	margin-left: .375rem;
	}
	
	#paginationSortBar1 .sort-count-container
	{
	grid-gap: .75rem;
	}
	
	#category-sort-wrapper:after
	{
	margin-left: .5rem;
	}
	
	.active-filters
	{
	flex-flow: row nowrap;
	overflow: hidden;
	}
	
	.active-filters > div
	{
	overflow: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	flex-flow: row nowrap;
	padding: .375rem 0 .375rem .375rem;
	}
	
	.active-filters a:last-of-type
	{
	padding-right: 2.5rem;
	text-wrap: nowrap;
	}

	
	.active-filters > div:after
	{
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	height: 3.25rem;
	width: 3rem;
	background: rgb(255,255,255);
	background: linear-gradient(270deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
	}

	

}

@media screen and (min-width: 62.5rem)
{

	.category-hero-image
	{
	border-radius: .375rem;
	}

}