#comparePage
{
overflow-x: auto;
margin: 0 auto 2rem;
}

#comparePage h1
{
max-width: 62.5rem;
margin: 0 auto 2rem;
padding: 0 .5rem;
}

#comparePage table
{
width: 100%;
border-collapse: collapse;
text-align: left;
table-layout: fixed;
}

	#comparePage.compare-one
	{
	max-width: 48rem;
	}
	
	#comparePage.compare-one table
	{
	min-width: 23.25rem;
	}
	
	#comparePage.compare-two
	{
	max-width: 62.5rem;
	}
	
	#comparePage.compare-two table
	{
	min-width: 34.5rem;
	}
	
	#comparePage.compare-three
	{
	max-width: 71.25rem;
	}
	
	#comparePage.compare-three table
	{
	min-width: 45.75rem;
	}
	
	#comparePage.compare-four
	{
	max-width: 80rem;
	}
	
	#comparePage.compare-four table
	{
	min-width: 57rem;
	}

#comparePage th
{
padding: .5rem;
font-weight: 400;
vertical-align: top;
text-align: center;
position: relative;
padding-bottom: 6rem;
}

#comparePage th:first-of-type
{
text-align: left;
width: 12rem;
min-width: 12rem;
}

#toggleFeaturesBtn, #previousPage
{
display: grid;
gap: .375rem;
grid-template-columns: auto 1fr;
align-items: center;
line-height: .95;
text-transform: uppercase;
font-size: .875rem;
letter-spacing: .0625rem;
}

#toggleFeaturesBtn
{
position: absolute;
bottom: .75rem;
background-color: #efefef;
border-radius: 10rem;
border: .125rem solid #eee;
padding: .5rem .875rem;
margin-left: .5rem;
margin-right: .5rem;
}

#toggleFeaturesBtn i, #previousPage i
{
font-size: 1.125rem;
}

#toggleFeaturesBtn:hover
{
background-color: #fff;
}

#comparePage .compareItem a
{
display: block;
text-decoration: none;
color: #444;
}

#comparePage .compareItem a .productImageThumb
{
width: 100%;
height: auto;
max-width: 18rem;
}

#comparePage .productColorOptions
{
display: flex;
flex-flow: row wrap;
justify-content: center;
list-style-type: none;
margin: .5rem 0;
gap: .25rem;
}

#comparePage .productColorOptions li
{
line-height: 0
}

#comparePage .productColorOptions li img
{
width: 1rem;
height: 1rem;
}

#comparePage .compareItem a > p
{
line-height: 1.2;
margin: .5rem 0 0;
}

.categoryItemPricing
{
font-size: .875rem;
margin-top: .25rem;
padding: 0
}

.categoryItemPricing del
{
color: #666
}

.categoryItemPricing .sale
{
color: #c00
}

#comparePage .headingBottom
{
position: absolute;
bottom: .5rem;
left: 0;
right: 0;
margin: 0 auto;
}

#comparePage .headingBottom > div:first-of-type a
{
display: inline-block;
background-color: #5e7f1f;
border-radius: 10rem;
padding: .5rem .875rem;
margin-bottom: .75rem;
text-transform: uppercase;
color: #fff;
font-size: .875rem;
letter-spacing: .0625rem;
}

#comparePage .headingBottom > div:first-of-type a:hover
{
background-color: #adc72e;
color: #5e7f1f;
}

#comparePage table td
{
padding: .5rem;
vertical-align: top;
}

#comparePage table ul
{
list-style-type: none;
margin: 0;
padding: 0
}

#comparePage table li:not(:last-of-type)
{
margin-bottom: .5rem;
}

#comparePage .TTteaser__rating
{
display: block
}

#comparePage table tr
{
border-bottom: 0.0625rem dotted #ddd
}

#comparePage table tbody tr:last-of-type
{
border-bottom: none;
}

#comparePage table td:not(:last-of-type), #comparePage table th:not(:last-of-type)
{
border-right: 0.0625rem dotted #ddd
}

/* fix my legacy issue */
@media screen and (max-width:48rem)
{
	#comparePage table
	{
	overflow-x: initial;
	display: table;
	}
}
