html[data-theme="dark"] .galleryintro {
	box-shadow: inset 0 -30px 15px -20px #33425c;
}

.colorswap[value="0"] .clrwhite,
.colorswap[value="1"] .clryellow,
.colorswap[value="2"] .clrrose {
	outline: solid 1px #9ab;
	outline-offset: 2px;
}

.listedproduct:has(.instockicon):before {
	content: "IN-STOCK";
	position: absolute;
	top: 10px;
	left: 0;
	z-index: 1;
	background: var(--mainblue);
	color: white;
	padding: 3px 8px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.25em;
	pointer-events: none;
}

.vidbtn {
	position: absolute;
	top: 5px;
	right: 3px;
	width: 33px;
	aspect-ratio: 1 / 1;
	background: white;
	border-radius: 100%;
	box-shadow: 0 0 2px black;
	transition: filter .15s;
}
.vidbtn > img {
	/*filter: invert(0.8);*/
	margin: 5px 3px 0;
	width: 27px;
}

.vidbtn:hover, .vidbtn:focus-visible { filter: brightness(0.9); }

.vidbtn.v360 { background: var(--mainblue); }
.vidbtn.v360 > img { filter: invert(1) brightness(3); }

h4.productname {
	display: block;
	color: var(--mainblue);
	font-size: 15px;
	font-weight: 500;
	text-wrap: balance;
	padding-bottom: 2px;
	margin-bottom: -2px;
	text-transform: capitalize;
}

a.productnumber {
	width: unset;
	line-height: 1.25em;
	color: var(--mainblue);
	background: var(--coolcolor);
	padding: 2px 5px;
	border-radius: 50px;
	z-index: 1;
	font-size: 13px;
	font-weight: 400;
	cursor: copy;
	transition: color .15s;
	text-wrap: nowrap;
}
a.productnumber:hover, a.productnumber:focus-visible {
	color: black;
}
a.productnumber:after {
	content: " \f0c5";
	margin: 0 3px;
	opacity: .5;
	display: inline-block;
	transform: translateY(-1px);
	transition: opacity .15s;
	font: normal normal normal 12px / 1 FontAwesome;
}
a.productnumber:hover:after, a.productnumber:focus-visible:after {
	opacity: 1;
}

@media (min-width: 1201px) {
	#productlisting { max-width: 80%; }
	.listedproduct { width: 17.5vw; }
	.imgholder {
		width: clamp(180px, 14vw, 400px);
		height: clamp(180px, 14vw, 400px);
	}
	.productvars { top: clamp(158px, 13vw, 380px); }
	.mediarrows {
		top: clamp(30%, 5.5vw, 200px);
		font-size: clamp(28px, 2vw, 48px);
	}
}

@media (max-width: 1400px) {
	.listedproduct:has(.productsetting) .shoutLG > span:first-of-type { display: none; }
	.listedproduct:has(.productsetting) .shoutLG > span + span { display: inline; }
}

@media (max-width: 900px) {
	:root { --filterwidth: 50px; }
	.scrollerimgshrink > button > div:first-child { background-size: 70%; }
}

/* Responsive height queries for galleries: */

@media (min-width: 841px) {
	#shapesmenu { margin-top: -6px; }
	.optionsholder { gap: 0 10px; margin-bottom: 10px; }
	.scrollingfilterscontainer + .scrollingfilterscontainer { margin-top: 5px; }
	#productlisting { margin-top: 40px; }
	.colorpreference > label { top: 29px; }
	.colorpreference > .dropdownable { top: 27px; }
	.outerSOD { margin: 18px auto -6px; }
	.pagenav { min-height: 30px; }

	.galleryintro > img { max-height: 120px; }
	.galleryintro > img + h1 { margin: 44px auto 36px; }
}

@media (max-height: 900px) and (min-width: 841px) {
	:root { --filterwidth: 70px; }
	.filterstitle > h4 { font-size: 17px; }
	.filters.scrollerimgshrink h6 { margin: -10px 0 0; }
	.scrollingfilterscontainer { margin: 1.25dvh auto; }
	.checkboxescontainer { margin: 0 auto 1dvh; }
	.withimages > div > .sidewaysscroller > button > div:first-child { aspect-ratio: 1/1.2; }
	#shapesmenu { margin-top: -6px; }
	.filters button > h6 { font-size: 13px; }
	.withimages .filters button > h6 { font-size: 13px; }
	.outerSOD { margin: 13px auto; }
	#productlisting { margin-top: 35px; }

	.galleryintro > img { max-height: 100px; }
	.galleryintro > img + h1 { margin: 34px auto 26px; }
}

@media (max-height: 800px) and (min-width: 841px) {
	:root { --filterwidth: 60px; }
	.filterstitle > h4 { font-size: 16px; }
	.scrollerimgshrink > button > div:first-child { background-size: 60%; }
	.scrollerimgshrink > button:hover:not(:has(a:focus, a:hover), .selectedfilter) > div:first-child,
	.scrollerimgshrink > button:focus-visible:not(:has(a:focus-visible, a:hover), .selectedfilter) > div:first-child { background-size: 85%; }
	.withimages > div > .sidewaysscroller > button > div:first-child { aspect-ratio: 1/1.15; }
	.withimages .filters button > h6 { left: 5px; }
	.scrollingfilterscontainer + .scrollingfilterscontainer { margin-bottom: 0; }
	.checkboxescontainer { scale: .9; }
	#shapesmenu { margin: -7px 0 7px; }
	#shapesmenu > button { width: 60px; }
	#productlisting { margin-top: 30px; }

	.galleryintro > img { max-height: 70px; }
	.galleryintro > img + h1 { margin: 22px auto 18px; font-size: 25.5px; }
	.galleryintro > img + h1:before { -webkit-text-stroke: 4px var(--color1); }
	.galleryintro a { font-size: 13.5px; padding: 3px 10px 2px; margin-bottom: -5px; }
}

#categorydiv {
	width: 1300px;
	max-width: calc(100% - 20px);
	margin: 100px auto 15px;
}

#categorydiv ul {
	color: var(--headertextcolor);
	text-transform: uppercase;
	margin-bottom: 0;
	padding-left: 20px;
}

#catintro, #catcats {
	display: flex;
	justify-content: space-between;
	gap: 15px;
	margin-bottom: 10px;
}

#catintro > h2 {
	margin: 0;
	align-self: center;
	color: var(--headertextcolor);
	font-weight: 600;
	font-size: clamp(19px, 3vw, 36px);
}

#catintro > h2 > span {
	color: var(--color3);
}

#catintro > p {
	width: 300px;
	text-wrap: balance;
	text-align: right;
	font-size: 14px;
	opacity: .75;
	text-align: right;
	text-wrap: balance;
	align-self: center;
	color: var(--headertextcolorhover);
}

.catbox {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	border: solid 1px var(--coolcolorhover);
	background: white;
	padding: 10px;
	width: 300px;
	overflow: clip;
}

.catbox > h3 {
	color: #1d2940;
	font-weight: 500;
	text-wrap: nowrap;
	font-size: clamp(14px, 2vw, 24px);
	margin-bottom: 10px;
}

.catbox > p {
	color: black;
	opacity: .5;
	margin: auto;
	font-size: clamp(11px, 1.5vw, 13px);
	text-align: center;
	text-wrap: balance;
}

.catbox > img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	object-position: center;
	transition: transform .35s;
}

.catbox:hover > img, .catbox:focus-visible > img {
	transform: scale(1.1);
}

.listedproduct {
	overflow: visible;
}

.listedproduct h4 {
	color: var(--mainblue);
	line-height: 1.25em;
}

.listedpromo {
	padding-bottom: 0;
	min-height: 199px;
	border-radius: 0;
	justify-content: center;
}
.dualpromo { width: calc(35vw + 30px); }

.listedpromo div {
	height: 100%;
	background: var(--coolcolor);
	position: relative;
	overflow: clip;
	max-height: 370px;
	max-width: 340px;
}

.listedpromo .promotitle {
	margin: 14px 10px 7px 17px;
	color: var(--mainblue);
	font-weight: 600;
	font-size: clamp(17px, 1.25vw, 24px);
	text-wrap: balance;
}

.listedpromo .promotitle::first-line {
	color: var(--headertextcolor);
}

.listedpromo .promotext {
	margin-left: 17px;
	opacity: .65;
	font-size: clamp(12px, 0.75vw, 16px);
	text-wrap: balance;
}

.listedpromo img {
	position: absolute;
	bottom: 0;
	right: 0;
	height: 50%;
	filter: drop-shadow(3px -3px 6px #0003);
}

.listedpromo a {
	display: block;
	position: relative;
	margin: 14px 17px;
	padding: 12px 17px;
	width: fit-content;
	align-self: flex-start;
	font-size: clamp(12px, .75vw, 14px);
	font-weight: bold;
	color: var(--mainblue);
	border: solid 1px var(--mainblue);
	background: transparent;
	transition: background .35s, color .35s;
}

.listedpromo a:hover, .listedpromo a:focus-visible {
	background: var(--mainblue);
	color: white;
}

.pegheadicon {
	height: 18px;
	width: 18px;
	margin: -1px -30px;
	background: url(/static/img/icons/shapes/strokes/Modifiable_Peg.svg) center 70% / 100% no-repeat;
	filter: drop-shadow(0 0 0 #000A) !important;
	box-shadow: unset;
	border-radius: 0;
}

a.productnumber .fa-check-circle, a.productnumber .fa-circle-xmark {
	position: absolute;
	margin: 1px 27px;
	text-wrap: nowrap;
	color: #01B549;
	pointer-events: none;
	font-size: 14.5px;
}

a.productnumber .fa-circle-xmark {
	color: var(--color-slate-500) !important;
}

a.productnumber .fa-check-circle > span, a.productnumber .fa-circle-xmark > span {
	font-family: 'Manrope';
}

.listedproduct .mediarrows { display: none; }

a.productnumber:has(.pegheadicon):not(:has(.instockicon)) { margin-left: unset; }

a.productnumber:has(.fa-check-circle, .fa-circle-xmark):not(:has(.pegheadicon)) { margin-right: 80px; }

a.productnumber:has(.pegheadicon):has(.fa-check-circle) { margin-left: -50px; }

a.productnumber:has(.pegheadicon):not(:has(.fa-check-circle)) { margin-left: 23px; }

.checkboxescontainer > label, .subcats > label { border-radius: 0; }

.listedproduct:has(.vidbtn.v360) .imgholder img {
	opacity: 0;
	visibility: hidden;
}

/*
#filterwrapper {
	position: sticky;
	top: -5px;
	z-index: 1;
	margin-bottom: 0;
	box-shadow: 0 -5px 5px 5px transparent;
	animation-name: shrinkfilter;
	transition: transform .35s;
}

@keyframes shrinkfilter {
	5%, 100% {
		margin-bottom: -10px;
		box-shadow: 0 -5px 5px 5px var(--color1);
	}
}
*/

@media (max-width: 670px) {
	/*@keyframes shrinkfilter {
		5%, 100% { margin-bottom: 50px; box-shadow: 0 -5px 5px 5px var(--color1); }
	}*/

	#catcats {
		flex-wrap: wrap;
	}

	#catintro {
		display: block;
	}

	#catintro > h2 {
		font-size: clamp(19px, 6vw, 36px);
		margin-top: 15px;
		text-align: left;
	}

	#catintro > p {
		width: unset;
		text-align: left;
		text-wrap: pretty;
	}

	.catbox {
		width: 40%;
		flex-grow: 1;
	}

	.catbox > h3 {
		font-size: clamp(15px, 4vw, 24px);
	}

	.catbox > p {
		font-size: 13px;
	}

	.listedpromo .promotitle {
		margin: 10px 0 7px 7px;
		font-size: clamp(15px, 1.25vw, 24px);
	}

	.listedpromo .promotext {
		margin-left: 7px;
		font-size: clamp(12px, 0.75vw, 16px);
	}

	.listedpromo img {
		height: 40%;
		filter: drop-shadow(2px -2px 4px #0003);
	}

	.listedpromo a {
		margin: 14px 7px;
		padding: 10px 12px;
		font-size: clamp(11px, .75vw, 14px);
	}
}

/*
.galleryintro h1 {
	animation-name: shrinkh1;
}

@keyframes shrinkh1 {
	0% { font-size: 36px; }
	5%, 100% { font-size: 21px; margin: 20px auto 0; }
}

.galleryintro > *:not(h1), .scrollingfilterscontainer:has(~ .OHouter) {
	animation-name: shrinkothers;
}

@keyframes shrinkothers {
	0% { scale: 100%; }
	5%, 100% { scale: 0%; height: 0; margin-top: 0; margin-bottom: 0; opacity: 0; }
}

.withimages > div > .sidewaysscroller > button > div:first-child {
	animation-name: shrinkimgs;
}

@keyframes shrinkimgs {
	5%, 100% { width: clamp(calc(var(--filterwidth) + 8px), 1.1vw, calc(var(--filterwidth) + 50px)); }
}

.withimages > div > .sidewaysscroller > button > div > img {
	animation-name: shrinkimg;
}

@keyframes shrinkimg {
	5%, 100% { height: clamp(var(--filterwidth), 1.1vw, calc(var(--filterwidth) + 50px)); }
}

.withimages .filters button > h6 {
	animation-name: shrinktexts;
}

@keyframes shrinktexts {
	5%, 100% { font-size: clamp(11px, 1.1vw, 13px); }
}

@supports (animation-timeline: scroll()) {
	#filterwrapper,
	.galleryintro > *,
	.scrollingfilterscontainer:has(~ .OHouter),
	.withimages > div > .sidewaysscroller > button > div:first-child,
	.withimages > div > .sidewaysscroller > button > div > img,
	.withimages .filters button > h6 {
		animation-timeline: scroll(root);
		animation-duration: 1ms;
	}
}
*/