/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾*/
/*				  GENERIC				*/
/*______________________________________*/
:root { --filterwidth: 80px; }

body { background-color: var(--color1); }

button {
	background: unset;
	border: unset;
	cursor: pointer;
	user-select: none;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾*/
/*			  INTRO ELEMENTS			*/
/*______________________________________*/
.optionsholder, .extrafilters {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	gap: 10px;
	max-width: 1356px;
	margin: auto auto 20px;
}
.optionsholder:not(:has(> :nth-child(4))) { flex-direction: column; align-items: center; }

.OHouter {
	width: 100%;
	background-color: #9992;
	box-shadow: 0 3px 3px #0004;
	position: relative;
}

.OHouter[inert]:after, .OHouter[inert]:before {
	content: "Loading, please wait...";
	display: flex; justify-content: center; align-items: center;
	position: absolute; top: -1px; left: 0;
	width: 100%; height: calc(100% + 1px);
	background: #0014 url(/static/img/icons/loading.svg) center / 25% 80% no-repeat;
	color: white; text-shadow: 0 0 7px black;
	font-weight: 400; font-size: 32px;
	opacity: 0.75; z-index: 1; backdrop-filter: blur(0.5px);
}

#OHbutton {
	display: none;
	margin: 10px auto 5px;
	padding: 9px 0;
	width: 200px;
	text-align: center;
	background: var(--color3);
	color: var(--color1);
	font-size: 15px;
	border-radius: 15px;
	box-shadow: 0 0 3px 1px #0005;
	transition: background .15s, box-shadow .15s;
}

#OHbutton:hover, #OHbutton:focus-visible {
	background: var(--colorlink);
	box-shadow: 0 0 1px 1px #0005;
}

#OHclose {
	display: none; font-size: 52px;
	position: absolute; top: -60px; right: 0;
	background: inherit; width: 60px; height: 60px;
	box-shadow: -3px -3px 3px #0005;
	font-family: serif;
	transition: color .15s, filter .15s;
}

#OHback {
	display: none;
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾*/
/*			SCROLLING FILTERS			*/
/*______________________________________*/
.sidewaysscroller::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
.sidewaysscroller::-webkit-scrollbar-track {
	background-color: #9995; 
	border-radius: 10px;
}
.sidewaysscroller::-webkit-scrollbar-thumb {
	background-color: #999; 
	border-radius: 10px;
}
.sidewaysscroller::-webkit-scrollbar-thumb:hover {
	background-color: var(--coolcolorhover); 
}

.scrollingfilterscontainer, .dualsliderscontainer, .checkboxescontainer {
	display: inline-block;
	position: relative;
    width: max-content;
    max-width: 95%;
	margin: 15px 0;
	min-width: 60%;
}
.dualsliderscontainer { max-width: 840px; }
.checkboxescontainer {
	display: flex;
	justify-content: space-evenly;
	margin: 0 auto 10px;
	align-items: flex-start;
	gap: 7px;
}
.checkboxescontainer > label {
	border: solid 1px var(--headertextcolor);
	padding: 7px 10px;
	border-radius: 8px;
	color: var(--headertextcolor);
	cursor: pointer;
	text-align: center;
	text-wrap: pretty;
	background: none;
	min-height: 17px;
	transition: background 0.35s, min-height 0.35s, min-width 0.35s;
}
.checkboxescontainer > label:focus-within, .checkboxescontainer > label:hover { background: #9993; }
.checkboxescontainer > label > input {
	margin: 0 5px 0 0;
	transform: translateY(1px);
}
.checkboxescontainer > div {
	position: absolute;
	top: 0px;
	display: flex;
	gap: 15px;
	font-size: 14px;
	visibility: hidden;
	opacity: 0;
	border-top: solid 1px var(--coolcolorhover);
	padding-top: 4px;
	transition: opacity 0.35s, top 0.35s, visibility 0.25s;
}

.checkboxescontainer > label:has(input[name='in_stock'][type='checkbox']) { min-width: 193px; }
.checkboxescontainer > label:has(input[name='in_stock'][type='checkbox']:checked) {
	min-height: 48px;
	min-width: 260px;
}
.checkboxescontainer > label:has(input[name='in_stock'][type='checkbox']:checked) + div {
	visibility: visible;
	opacity: 1;
	top: 32px;
}

.scrollingfilterscontainer.disabled, .dualsliderscontainer.disabled { text-decoration: unset; }

.scrollingfilterscontainer.disabled button:not(.selectedfilter),
.scrollingfilterscontainer.disabled h4 *,
.dualsliderscontainer.disabled button, .dualsliderscontainer.disabled input {
	text-decoration: line-through;
	opacity: .5 !important;
}

.tilestockBG {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: clip;
	z-index: -1;
	top: 0;
	left: 0;
	visibility: hidden;
	opacity: 0;
	transition: opacity .35s, visibility .35s;
}
.tilestockBG:before {
	content: "";
	background: linear-gradient(90deg, transparent 30%, var(--color1) 45%, var(--color1) 55%, transparent 70%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.tilestockBG:after {
	content: "";
	background: url(/static/img/icons/header/instock.svg) center / 110px 90px;
	width: 200%;
	height: 500%;
	position: absolute;
	top: -180%;
	left: -50%;
	opacity: .1;
	transform: rotate(-8deg);
	backface-visibility: hidden;
	filter: var(--dayinvert);
}
.galleryintro:has(~ .OHouter .checkboxescontainer > label > input[name='in_stock'][type='checkbox']:checked) .tilestockBG,
.galleryintro:has(~ .OHouter .checkboxescontainer > label > input[name='diamond_type'][type='checkbox']:checked) .tilestockBG {
	opacity: 1;
	visibility: visible;
}

.shaker { animation: shook .4s ease; }

.soloinputfiltercontainer {
	min-width: 50%;
	margin: -5px 10% 0;
	padding: 20px 0;
	border-bottom: solid 1px var(--headertextcolor);
}
.soloinputfiltercontainer > h4 {
	text-align: center;
	margin: 0 auto 3px;
	font-size: 18px;
	font-weight: 400;
	color: var(--headertextcolor);
}
.soloinputdiv {
	margin: auto;
	width: fit-content;
	display: flex;
}
.soloinput {
	border-right: none; border-radius: 7px 0 0 7px;
	padding-left: 5px; margin-left: -5px;
	width: 100px;
}
.soloinput::placeholder { color: var(--headertextcolor); opacity: 0.65; }
.solosubmit {
	background: var(--headertextcolor);
	color: var(--headercolor1);
	border-radius: 0 7px 7px 0;
	font-size: 16px;
	padding-top: 0;
}
.solosubmit:hover, .solosubmit:focus-visible {
	color: var(--headertextcolor); background: var(--headercolor1);
	border: solid 1px; padding: 0 5.5px 1px; font-size: 15px;
}

.scrollleft, .scrollright {
	color: var(--headertextcolor);
	font-size: 36px;
	padding-bottom: calc(9/12 * var(--filterwidth));
	padding-top: calc(2.5/12 * var(--filterwidth));
	z-index: 1;
	transition: font-size .1s, margin .1s;
}
.withimages .scrollleft, .withimages .scrollright {
	padding-top: calc(5.5 / 12 * var(--filterwidth));
}

.scrollleft:hover, .scrollleft:focus-visible, .scrollright:hover, .scrollright:focus-visible {
	color: var(--headericonsaccent);
	font-size: 44px;
	margin: -7px 0;
}
.scrollleft:hover, .scrollleft:focus-visible { text-shadow: 3px 0 5px var(--color2); }
.scrollright:hover, .scrollright:focus-visible { text-shadow: -3px 0 5px var(--color2); }

.scrollleft > i, .scrollright > i {
	width: 50px;
    margin: 0 -50px;
}

.sidescrollingsection:has(.subdropdown) .scrollright > i { border-radius: 100px 0 0 0; }

.sidescrollingsection {
	display: flex;
	filter: drop-shadow(0 0 5px var(--shadowcolor));
	max-width: 100%;
	position: relative;
	justify-content: center; 
}
@supports not selector(::-webkit-scrollbar) {
	.sidescrollingsection { scrollbar-color: var(--headericons) #9995; }
	.checkboxescontainer > label > input { transform: translateY(-1px) !important; }
}

.sidewaysscroller {
	overflow: scroll clip;
	display: flex;
	padding: 0 1%;
	min-width: 300px;
	scroll-behavior: smooth;
	mask: linear-gradient(90deg,#000 97%,transparent 100%);
	-webkit-mask: linear-gradient(90deg,#000 97%,transparent 100%);
}

.sidewaysscroller > button {
	width: min-content;
	padding: calc(1/12 * var(--filterwidth));
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: 0;
	transition: translate .5s, opacity .5s, filter .1s;
}

.filters h6 {
	margin: 0;
	width: 100%;
	text-align: center;
	color: var(--headertextcolor);
	font-size: 14px;
	line-height: 14px;
	font-weight: 400;
	height: 26px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	text-wrap: balance;
	align-content: center;
}
.filters.scrollerimgshrink h6 { margin: -8px 0 6px; width: 130%; }

/* Better method of showing the button images: Using a background-image div for better zooming */
/* of the image, while keeping the images nested and fully transparent for right-clickability. */
.sidewaysscroller > button > div:first-child {
	width: var(--filterwidth);
	aspect-ratio: 1/1;
	padding: 0;
	background-color: white;
	background-position: center center;
	background-size: 100%;
    background-repeat: no-repeat;
	transition: background-size .35s, width .35s, background-position .35s;
}
/*.sidewaysscroller > button:hover > div:not(:has(a:focus, a:hover)),
.sidewaysscroller > button:focus > div:not(:has(a:focus, a:hover)) { background-size: 130%; }*/
.sidewaysscroller > button > div > img { height: var(--filterwidth); aspect-ratio: 1/1; opacity: 0; }

.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: 80%; }

/*.scrollerimgshrink > button.selectedfilter > div:first-child { outline: 2px #0006 auto; outline-offset: -9px; }*/
.scrollerimgshrink > button.selectedfilter > h6 { color: black; }

.scrollerimgshrink > button.selectedfilter:hover:not(:has(a:focus, a:hover)) > div:first-child,
.scrollerimgshrink > button.selectedfilter:focus-visible:not(:has(a:focus-visible, a:hover)) > div:first-child { background-size: 70%; }

#shapesmenu > button { width: 70px; }

#shapesmenu > button > div:first-child, .filterimg, #labsmenu > button > div:first-child {
	background-color: transparent;
	filter: var(--shapesfilter) saturate(0.1) contrast(1.25);
}
#shapesmenu > button.selectedfilter > div:first-child, #labsmenu > button.selectedfilter > div:first-child {
	filter: saturate(0.1) contrast(0.9);
}

#labsmenu { overflow: hidden; margin: -10px 0 -20px; }
#labsmenu > button > div:first-child { background-size: 70%; }
#labsmenu > button:hover > div:first-child, #labsmenu > button:focus-visible > div:first-child { background-size: 90%; }
#labsmenu > button.selectedfilter > div:first-child { background-size: 90%; outline-offset: -5px; }

.extrafilters {
	width: 100%;
	height: 0;
	overflow: clip;
	margin-bottom: -7px;
	transition: height .35s;
}
.extrafilters:not([inert]) { height: 220px; }

.extrafilters > .dualsliderscontainer { margin-top: 0; }

#showextras { margin-top: -10px; }
#showextras > label { width: 300px; }

/*@media (min-width: 841px) {
	.extrafilters[inert] ~ .postextra {
		margin-top: -20px;
		margin-bottom: 15px;
	}
}*/

/*.shapefilter {
	backdrop-filter: var(--shapesfilter);
	position: absolute; top: 8px; left: 0;
	width: 100%; aspect-ratio: 1/1;
}*/

.scrollerimgshrink > button:before {
	content: "";
	background-color: transparent;
	border-radius: 10px;
	display: block;
	width: 96%;
	height: 85%;
	position: absolute;
	top: 10px;
	z-index: -1;
	transition: background-color .35s;
}
.scrollerimgshrink > button.selectedfilter:before {
	background-color: white;
	box-shadow: 0 0 3px #055c8eBB;
}

.withimages button.selectedfilter { filter: drop-shadow(0 0 3px #055c8eBB); }
.arrowglow { filter: drop-shadow(0 0 3px var(--mainblue)); }
/*.arrowglow:before {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	background: white;
}*/

.scrolleft.turnedoff, .scrollright.turnedoff { pointer-events: none; opacity: 0.5; filter: none; }

.scrollingfilterscontainer:has(.namebox) { display: inline-flex; flex-direction: column; min-height: 100px; }
.namebox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	flex-grow: 1;
	gap: 5px;
	filter: drop-shadow(0 0 5px #0003);
}
.namebox > button { min-width: 15%; padding: 0; }
.namebox > button > h6 {
	color: var(--mainblue);
	margin: 0; border-radius: 3px;
	background: linear-gradient(110deg, #e9e9e9 0%, #fcfcfc 20%, #e5ebeb 50%, #fcfcfc 80%, #e9e9e9 100%);
}
/*.namebox > button > h6.colorful { background: linear-gradient(110deg, #feff8f 0%, #feffff 25%, #e5ebeb 50%, #feffff 75%, #ffcccc 100%) }*/
.namebox > button > h6.colorful:after {
	content: "";
	display: inline-block;
	width: 12px; height: 12px;
	border: solid 1px #AAA; border-radius: 4px;
	margin: 0px 1px 0px 6px;
	pointer-events: none;
	background: linear-gradient(135deg, #feffff 0%, #feffff 28%, #ffcccc 45%, #ffcccc 55%, #feff8f 72%, #feff8f 100%);
}
.namebox > button.selectedfilter > h6 { background: cyan; }


@media (min-width: 901px) {
	.nestlabel > button > h6 { transform: translateY(-50px); color: var(--mainblue); font-size: 13px; text-shadow: 0 0 5px white, 0 0 5px white, 0 0 5px white; }
	.nestlabel > button.selectedfilter > h6 { text-shadow: 0 0 5px cyan, 0 0 5px white, 0 0 5px white; }
}

.filterstitle { width: 100%; display: flex; justify-content: space-between; }
.filterstitle > h4 {
	font-size: 18px; font-weight: 400;
	width: 100px; text-wrap: nowrap;
	margin: 0 auto 0 15px;
	color: var(--headertextcolor);
}
.filterstitle > div {
	width: 201px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-wrap: nowrap;
	gap: 3px;
}
.filterstitle > h4 > a > span {
	position: absolute; top: -13px; left: 0;
	font-size: 12px; font-weight: 200;
	user-select: none;
}
.filterstitle > h4:has(select) { width: 200px; z-index: 1; }
.filterstitle > h4:has(select) > span {
	font-size: 15px;
	opacity: 0.75;
	font-style: italic;
	transition: opacity .15s ease;
}
.filterstitle > h4:has(select) > span:hover,
.filterstitle > h4:has(select) > span:focus-within,
.filterstitle:has(~ div .selectedfilter) > h4:has(select) > span { opacity: 1; }
.filterstitle > h4 > span > select {
	background: transparent;
	border: solid 1px #9999;
	padding: 0;
	font-size: 13px;
	margin: -3px 3px;
	border-radius: 7px;
	font-style: italic;
	color: var(--colortext);
}
.filterstitle > h4 > span > select:hover,
	.filterstitle > h4 > span > select:focus-visible { background: var(--headercolor1); }
.filterstitle > h4 > span > select > option { color: black; }

.swap { transition: opacity 0.25s; }

.resetbutton {
	font-size: 13px;
	width: 100px;
	padding: 0;
	margin: 0 15px 0 auto;
	text-align: right;
	color: var(--headertextcolor);
	opacity: .9;
}
.resetbutton:after {
	content: "\f0e2";
	font: normal normal normal 12px/1 FontAwesome;
	/*margin-right: 11px;*/
}
.resetbutton:hover, .resetbutton:focus-visible {
	text-decoration: underline;
}

.resetall, .lotsearch {
	margin: 0 30% 10px;
	text-align: center;
	text-wrap: nowrap;
	width: unset;
}

/* Shows the tab tip within, as long as an input box isn't selected: */
/* The div does not have input box focus, and the the inner focus is not on a reset button or the clickable pips: */
.tabtipenabler:not(:has(input:focus)):focus-within:not(:has(.resetbutton:focus, .pipward > a:focus)) .tabtip { display: block; }
.tabtip {
	display: none;
	font-size: 13px;
	font-style: italic;
	text-align: center;
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 20px;
	pointer-events: none;
}

/*.withimages { width: 93.5%; }*/
.withimages > div > .sidewaysscroller { padding: 0; }
.withimages > div > .sidewaysscroller > button { padding: 8px 4px; }
.withimages > div > .sidewaysscroller > button > div:first-child {
	width: calc(var(--filterwidth) + 30px);
	border-radius: 7px; position: relative;
	background-position-y: top;
	aspect-ratio: 1/1.25;
	overflow: hidden;
}
.withimages > div > .sidewaysscroller > button > div:first-child:after {
	content: "";
	background: #f4f9fc;
	transform: rotate(20deg);
	width: 130px;
	height: 50px;
	position: absolute;
	bottom: -35px;
	left: -20px;
	transition: transform .35s, background-color .35s;
}

.withimages > div > .sidewaysscroller > button.selectedfilter > div:first-child:after {
	background: #055c8e8c;
	transform: translateY(-15px) rotate(0deg);
}
.withimages > div > .sidewaysscroller > button.selectedfilter > h6 { color: white; }

/*.withimages > div > .sidewaysscroller > button > div:first-child:after {
	content: "";
	background: white;
	width: 100%; height: 50px;
	position: absolute; bottom: 7px; left: 0;
	border-radius: 7px;
	z-index: -1;
	transition: bottom .35s;
}*/

.withimages > div > .sidewaysscroller > button > div > img {
	height: calc(var(--filterwidth) + 30px);
	opacity: 1;
	object-fit: contain;
	transition: transform .35s;
	pointer-events: none;
}

.withimages > div > .sidewaysscroller > button:hover > div:first-child:not(:has(a:focus-visible, a:hover)) > img,
.withimages > div > .sidewaysscroller > button:focus-visible > div:first-child:not(:has(a:focus-visible, a:hover)) > img {
	transform: scale(1.5);
}
.withimages > div > .sidewaysscroller > button:has(.subdropdown.open) > div:first-child > img {
	transform: translateY(-25px) scale(1) !important;
}

/*.withimages > div > .sidewaysscroller > button:hover > div:first-child:not(:has(a:focus-visible, a:hover)),
.withimages > div > .sidewaysscroller > button:focus-visible > div:first-child:not(:has(a:focus-visible, a:hover)) {
	background-size: 150%;
	background-position-y: 80%;
}
.withimages > div > .sidewaysscroller > button:has(.subdropdown.open) > div:first-child {
	background-position: center -25px; background-size: 100% !important;
}*/

.withimages .filters button > h6 {
	font-size: 14px;
	width: fit-content;
	max-width: 91%;
	text-align: left;
	align-items: center;
	justify-content: left;
	position: absolute;
	left: 8px;
	bottom: 10px;
	gap: 0 2px;
	letter-spacing: -0.25px;
	color: black;
	transition: color .15s;
}

/*.withimages > div > .sidewaysscroller > button.selectedfilter > div:first-child:after { bottom: -30px; }*/
/*.withimages > div > .sidewaysscroller > button.selectedfilter > div:first-child > img { transform: scale(1.5); }*/

.subdropdown {
	display: block;
	width: 20px; height: 20px;
	position: absolute; top: calc(1/10 * var(--filterwidth)); right: calc(1/10 * var(--filterwidth));
	color: black; font-size: 16px;
	border-radius: 0 5px; border: solid 2px var(--mainblue);
	background: #f2f8f8;
	box-shadow: 0 0 2px 1px white;
	
	pointer-events: none;
	background: none;
	border: none;
	box-shadow: none;
	padding-right: 2px;
	z-index: 1;
}
.subdropdown:hover, .subdropdown:focus-visible { background: var(--mainblue); color: white; }

.withimages > div > .sidewaysscroller > button:has(.subdropdown) > div:before {
	content: "";
	background: #f4f9fc50;
	transform: rotate(20deg);
	width: 130px;
	height: 50px;
	position: absolute;
	top: -35px;
	right: -20px;
	transition: background-color .35s;
	z-index: 1;
}

.withimages > div > .sidewaysscroller > button:has(.subDDdiv > .selectedfilter) > div:before {
	background: #055c8e8c;
}

.withimages > div > .sidewaysscroller > button:has(.subDDdiv > .selectedfilter) > .subdropdown > img {
	filter: brightness(1);
	opacity: 1;
}

.scrollerimgshrink .subdropdown, .scrollerimgshrink .subDDdiv { right: 0; }

/*.subdropdown > i {
	position: absolute; top: -10px; right: -9px;
	width: 100%; height: 100%;
	padding: 12px 9px 2px 2px;
}*/
.subdropdown > i, .subdropdown > span { display: none; }
.subdropdown > img {
	position: absolute; top: 2px; right: 2px;
	width: 100%; height: 110%; opacity: .3;
	filter: invert(1);
	transition: filter .35s, opacity .35s;
}
.subDDdiv {
	/*width: calc(16px + var(--filterwidth));*/
	min-width: 83%; max-width: 135%; overflow: hidden;
	position: absolute;
	top: calc(1/10 * var(--filterwidth) + 20px);
	right: calc(1/10 * var(--filterwidth));
	background: #f2f8f8; border: solid 2px var(--mainblue); border-radius: 0 0 4px 7px;
	transform: scale(25%, 0%); transform-origin: top right; transition: transform 0.15s;
}
.subDDdiv:not(:has(a:not(.selectedfilter))) { border-color: #0BB; filter: drop-shadow(0 1px 3px cyan); }
/*.subdropdown > span { position: absolute; top: 0; left: 0; width: 100%; }

.subdropdown.open > i:nth-child(1), .subdropdown.open > span, .subdropdown > i:nth-child(3),
	.subdropdown:not(:has(+ .subDDdiv > .selectedfilter)) > span { display: none; }
.subdropdown.open + .subDDdiv, .subDDdiv > a, .subdropdown.open > i:nth-child(3) { display: block; }
.subdropdown.open > i:nth-child(3) { top: -12px; padding: 12px 9px calc(var(--filterwidth) + 32px) calc(var(--filterwidth) + 5px); }
*/

.subdropdown.open + .subDDdiv { transform: scale(100%); /*pointer-events: none;*/ }
.subDDdiv > a {
	pointer-events: all; transition: background-size 0.5s;
	background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
}
.subDDdiv > a > h6 {
	color: #074163; border-top: solid 1px var(--mainblue);
	font-size: 11.5px; text-wrap: nowrap;
	height: 22px; width: unset;
	margin: unset !important; padding: 0 2px;
	background: #ddda; animation: subreturn 0.5s forwards;
	text-shadow: 0 0 6px white, 0 0 6px white, 0 0 6px white, 0 0 6px white;
	transition: background .5s;
}
.subDDdiv > a > h6:has(br) {
	line-height: 11px;
	height: 25px;
}
.subDDdiv > a:first-child > h6 { border-top: none; }
.subDDdiv > a:hover, .subDDdiv > a:focus-visible { background-size: 125% 125%; }
.subDDdiv > a:hover > h6, .subDDdiv > a:focus-visible > h6 { animation: subimg 1.7s forwards; }

.subdropdown + .subDDdiv:has(:nth-child(4)) {
	max-height: calc(var(--filterwidth) - 2px);
	overflow-y: scroll; scroll-behavior: smooth;
	z-index: 1; transform-origin: 75% 0%;
}
.subdropdown + .subDDdiv:has(:nth-child(4)) > a { border-right: solid 1px var(--mainblue); }

/*.scrollerimgshrink > button:last-child:has(.open + .subDDdiv > :nth-child(4)) { margin-right: 8px; }*/

.subDDdiv > a.selectedfilter { color: var(--headertextcolor); }
.subDDdiv > a.selectedfilter > h6 {
	animation: none;
	text-decoration: underline;
	color: white; background: #0FF6;
	text-shadow: 0 0 3px black, 0 0 3px black, 0 0 3px black;
}
/*.subselected > .subdropdown, .subdropdown:has(+ .subDDdiv > .selectedfilter) {
	border-color: #0DD;
	background: cyan;
	filter: drop-shadow(0 0 3px cyan);
}*/
.subselected > .subdropdown:hover, .subselected > .subdropdown:focus-visible { background: #0DD; }
.subselected > .subDDdiv > a { color: black; font-size: 16px; }

@keyframes subimg {
	0% { opacity: 1; }
	25%, 75% { opacity: 0; background: transparent; }
	100% { opacity: 1; }/* text-shadow: 0 0 8px white, 0 0 8px white, 0 0 8px white, 0 0 8px white; }*/
}

@keyframes subreturn {
	0% { opacity: 1; background: transparent; } /*text-shadow: 0 0 8px white, 0 0 8px white, 0 0 8px white, 0 0 8px white; }*/
	100% { background: #ddda; } /* text-shadow: 0 0 8px white, 0 0 8px white; }*/
}

/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾*/
/*	COLOR BUTTONS: WHITE, YELLOW, PINK	*/
/*______________________________________*/
#colorbtns {
	/*background-color: #FFF9;
	padding: 5px 20px;*/
}
.colorbtn {
	border: solid 2px gray;
	width: 30px; height: 30px;
	/*transform: rotate(45deg);*/
	margin: 5px 5px 10px;
	cursor: pointer;
	border-radius: 5px;
}
.clrdefault {
	background: linear-gradient(90deg, #d9cda3 -5%, #fff0bc 10%, #e8e8e8 25%, #f1f0ee 35%, #f1f0ee 65%, #e8e8e8 75%, #fedcc5 90%, #d7baa7 105%);
	box-shadow: 0 -10px 10px -10px #0003 inset, 0 9px 10px -10px #0003 inset;
}
.clrwhite { background: linear-gradient(135deg, #ccc7c3 0%, #f1f0ee 45%, #f1f0ee 55%, #ccc7c3 100%); }
.clryellow, #colorprefbtn:before { background: linear-gradient(135deg, #d6c07c 0%, #fff0bc 45%, #fff0bc 55%, #d6c07c 100%); }
.clrrose, #colorprefbtn:after { background: linear-gradient(135deg, #c99c86 0%, #fedcc5 45%, #fedcc5 55%, #c99c86 100%); }
#chosencolor {
	box-shadow: 0 0 5px black;
	height: 25px;
}


/*‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾*/
/*	COLOR BUTTONS: DIAMONDS D-N, FANCY	*/
/*______________________________________*/
.colorholder {
	display: flex;
	width: 100%;
	min-width: 320px;
	margin: 7px auto 10px;
	align-items: flex-end;
	height: 29px;
	gap: 3px;
}
.fancyhover {
	width: 100%;
	height: 25px;
	text-align: center;
	display: block;
	color: var(--colortext);
	background: var(--coolcolorhover);
	display: flex;
	transition: height .15s;
	position: relative;
	padding: 0 4px;
}
.fancyhover:hover, .fancyhover:focus-visible { filter: brightness(0.8) saturate(1.5); }
.fancyhover > p { margin: auto; text-wrap: nowrap; display: flex; }
.fancyhover > span { margin: auto; margin-right: 0; }
.fancyhover:not(.selectedfilter) > span { display: none; }
.fancyhover.selectedfilter > p[data-coloramount], .fancyhover.subselected > p[data-coloramount] { margin-left: 0; }
#allStandard { /*background: linear-gradient(90deg, #FFF, #faf8dd);*/ width: 150%; border-radius: 5px 0 0 0; }
#allFancy { /*background: linear-gradient(90deg, #ffe8b5 0%, #fdffbd 25%, #c3ffc5 50%, #c8f3ff 75%, #ffc3ff 100%);*/ border-radius: 0 5px 0 0; }
.fancyhover.thismenu:after {
	content: "";
	width: 100%;
	position: absolute;
	height: 3px;
	bottom: -3px;
	left: 0;
	background: inherit;
}
.thismenu:has(+ .thismenu):after { content: unset; }
#Standard.showit:has(+ .showit) { display: none !important; }

/*.colorholder:has(~ #colormenu > #Standard > .selectedfilter) #allStandard { background: yellow }
.colorholder:has(~ #colormenu > #Fancy > .selectedfilter) #allFancy { background: yellow }*/

/*#Standard { background: linear-gradient(to top, #FFF, #faf8dd); }*/

#colormenu {
	background-color: #9994;
	border-radius: 0 0 10px 10px;
	margin-top: -7px;
	height: 64px;
	overflow: auto;
	position: relative;
}
#colortip { display: none; }
.scrollingfilterscontainer:not(:has(#Fancy.showit)) > #colormenu > .dualsliderscontainer {
	text-align: center;
	width: 100%;
	display: block !important;
	overflow: hidden;
	margin: 0 auto;
}
#colormenu > div {
	display: none;
	align-items: stretch;
	justify-content: space-around;
	flex-wrap: wrap;
	height: 100%;
	overflow-y: auto;
	scroll-behavior: smooth;
}

.colormenuoption {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	gap: 3px;
	min-height: 50%;
	flex-grow: 1;
	flex-direction: column;
}
a.colormenuoption:hover, a.colormenuoption:focus-visible { background-color: #0002; cursor: pointer; }
div.colormenuoption { opacity: 0.5; }
.colormenuoption > div {
	display: inline-block;
	width: 20px; height: 20px;
	border-radius: 5px;
	/*box-shadow: 2px 2px 2px #0006, 1px 2px 2px #FFF9 inset, -1px -1px 2px #0003 inset;*/
	box-shadow: 0 0 2px 1px white;
	border: solid 2px;
	border-color: attr(data-fclr type(<color>));
	background: white;
	transform: translateY(-1px);
	box-sizing: border-box;
	transition: border-width .15s; /*box-shadow .15s;*/
	margin: 5px 2px 0;
}
.colormenuoption:hover > div, .colormenuoption:focus-visible > div {
	box-shadow: 0 0 2px 1px white, 0 0 0 2px white inset, 0 0 0 15px #FFF8 inset;
	background-color: attr(data-fclr type(<color>));
}
.colormenuoption > p { font-size: 16px; margin: 0; }
.colormenuoption > p:first-of-type:has(~ p) { display: none; }

@supports not (border-color: attr(x)) {
	.colormenuoption:first-child > div { border-color: #df884d; }
	.colormenuoption:nth-child(2) > div { border-color: #e6c002; }
	.colormenuoption:nth-child(3) > div { border-color: #568791; }
	.colormenuoption:nth-child(4) > div { border-color: #7cb7d4; }
	.colormenuoption:nth-child(5) > div { border-color: #d69997; }
	.colormenuoption:last-child > div { border-color: #b9b7a7; }
	
	.colormenuoption:first-child:hover > div, .colormenuoption:first-child:focus-visible > div { background-color: #df884d; }
	.colormenuoption:nth-child(2):hover > div, .colormenuoption:nth-child(2):focus-visible > div { background-color: #e6c002; }
	.colormenuoption:nth-child(3):hover > div, .colormenuoption:nth-child(3):focus-visible > div { background-color: #568791; }
	.colormenuoption:nth-child(4):hover > div, .colormenuoption:nth-child(4):focus-visible > div { background-color: #7cb7d4; }
	.colormenuoption:nth-child(5):hover > div, .colormenuoption:nth-child(5):focus-visible > div { background-color: #d69997; }
	.colormenuoption:last-child:hover > div, .colormenuoption:last-child:focus-visible > div { background-color: #b9b7a7; }
	
	.colormenuoption.selectedfilter > div:before { top: -10px !important; }
}

.colormenuoption.selectedfilter > div { border-width: 10px; }
.colormenuoption > div:before {
	content: "\f00c";
	font-family: 'FontAwesome';
	width: 100%; height: 100%;
	position: absolute; top: 1.5px; left: 0.5px;
	color: white;
	text-align: center;
	text-shadow: 0 0 3px white;
	opacity: 0;
	transition: opacity .15s, top .15s, left .15s;
}
#Standard > .colormenuoption > div:before { color: black; text-shadow: none; }
.colormenuoption.selectedfilter > div:before {
	opacity: 1;
	top: -8px;
	left: -7.5px;
}
.fancyhover.selectedfilter {
	height: 100%;
	color: var(--color1);
	background: var(--headertextcolorhover);
}
.fancyhover.selectedfilter > span, .fancyhover.subselected > span {
	color: black;
	background: white;
	border-radius: 10px;
	display: inline-block;
	text-align: center;
	font-size: 12px;
	margin: auto 4px auto auto;
	padding: 2px 3px;
	min-width: 12px;
	box-shadow: 0 0 2px 2px darkcyan;
}
/*.fancyhover.selectedfilter > p + span { content: "All" !important; }*/
/*#colormenu > div:not(#Standard):not(#Other) > .colormenuoption:nth-child(-n+5) { width: 20%; }*/
/*#colormenu > div:not(#Standard) > .colormenuoption { width: 14%; }*/

.subcats {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-top: 15px;
	gap: 7px 14px;
	max-width: 800px;
	width: unset;
	min-width: unset;
	padding: 0 5px;
}

.subcats > label {
	border: none;
	background: var(--coolcolor);
	border-radius: 25px;
	transition: background .35s;
	min-height: unset;
	min-width: unset;
}

.subcats > label:hover, .subcats > label:focus-within {
	background: var(--coolcolorhover);
}

.subcats > label:has(input:checked) {
	border: solid 1px var(--headertextcolor);
	padding: 4px 9px;
}

@keyframes subcatdrop {
	0% { transform: translateY(-50px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}

.filterdisplay {
	margin: 3px;
	font-size: 13px;
}

.filterdisplay + div { text-wrap: balance; }

.filterdisplay:has(+ div:empty), .filterdisplay + div:empty,
body:has(.scrollingfilterscontainer[inert] #shapesmenu) .filterdisplay + div > a[onclick*="shape"],
body:has(.dualsliderscontainer[inert] #dslength) .filterdisplay + div > a[onclick*="length"],
body:has(.dualsliderscontainer[inert] #dswidth) .filterdisplay + div > a[onclick*="width"] { display: none; }

.filterdisplay + div > a {
	margin: 3px;
	font-size: 14px;
	text-transform: capitalize;
	background: var(--coolcolor);
	padding: 0 8px 0 0;
	border-radius: 10px;
	overflow: hidden;
	display: inline-block;
}

.filterdisplay + div > a > i {
	background: var(--coolcolor);
	padding: 2px 3px 2px 5px;
	margin-right: 2px;
}

.filterdisplay + div > a:hover, .filterdisplay + div > a:focus-visible { background: var(--coolcolorhover); }

#backtotop {
	position: fixed;
	bottom: 20px;
	left: 20px;
	width: 40px;
	height: 40px;
	padding: 5px;
	border-radius: 100px;
	background-color: var(--headercolor1);
	box-shadow: -2px -2px 5px #0006;
	opacity: 0.95;
	transition: opacity .35s ease .1s;
	z-index: 2;
}
#backtotop[inert] { opacity: 0; pointer-events: none; }
#backtotop:hover, #backtotop:focus-visible { opacity: 1; filter: brightness(1.1); }
#backtotop > div {
	opacity: 0;
	position: absolute;
	left: 60px;
	width: max-content;
	background-color: var(--color3);
	padding: 12px 10px;
	border-radius: 15px;
	font-size: 14px;
	color: var(--headercolor2);
	transition: opacity .35s ease;
	box-shadow: -1px -1px 5px #0003;
	pointer-events: none;
}
#backtotop:hover > div, #backtotop:focus-visible > div { opacity: 1; }
#backtotop > img {
	height: 30px;
	filter: var(--nightbright);
	margin: 5px;
}

.popupbox { width: unset; }
.popupbox > label + div { padding: 10px; }

@media (max-width: 1300px) {
	.fancyhover > p, .colormenuoption > p { font-size: clamp(14px, 1.35vw, 16px); }
	.fancyhover.selectedfilter > span, .fancyhover.subselected > span {
		font-size: clamp(10px, .9vw, 12px);
		margin: auto 3% auto auto;
	}
}

@media (max-width: 1000px), (max-height: 626px) {
	:root { --filterwidth: 70px; }
	.sidewaysscroller h6 { font-size: 13px; margin: 0 -5px; }
	.withimages .filters button > h6 {
		font-size: 13px;
		line-height: 11px;
		letter-spacing: normal;
		font-weight: 400;
		left: 12px;
		bottom: 10px;
	}
	.subDDdiv > a > h6 { font-size: 10px; }
	/*.withimages > div > .sidewaysscroller > button.selectedfilter > div:after { bottom: -28px; }*/
	#shapesmenu > button { width: 60px; }
	#colormenu { height: 58px; }
	.scrollingfilterscontainer:not(:has(.showit)) > #colortip { margin-top: 11px; }
	
	.extrafilters:not([inert]) { height: 216px; }
	.scrollingfilterscontainer { margin: 15px auto 6px; }
	.scrollingfilterscontainer, .dualsliderscontainer { width: 90%; /*max-width: fit-content;*/ }
	.dualsliderscontainer { margin: 15px auto; max-width: unset; }
	.dualsliderscontainer:has(.pipward) { margin: -3px auto 19px; }
	.dualslider { margin-top: 11px; }
	/*.pipward > a { text-wrap: wrap; }*/
	.filterstitle > h4, .soloinputfiltercontainer > h4 { font-size: 17px; }
	.soloinputfiltercontainer { margin-top: 0; }
	/*.defocuser.mobileonly { display: inline; }*/
	.scrollerimgshrink > button:before { top: 7px; height: 89%; }
}

@media (max-width: 900px) {
	.withimages .filters button > h6 { font-size: 12px; }
}

@media (max-width: 840px), (max-height: 626px) {
	#OHback.btnopen {
		width: 100%; height: 100%;
		position: fixed; top: 0; right: 0;
		background-color: #0005;
		display: block; z-index: 1;
	}
	#OHbutton, .OHouter.btnopen > #OHclose { display: block; }
	#OHclose:hover, #OHclose:focus-visible {
		color: var(--colorlink);
		filter: brightness(1.05);
	}
	.OHouter {
		position: fixed; bottom: 0;
		transition: height .5s ease-out, visibility .5s;
		background: var(--BGlighter);
		box-shadow: 0 0 5px #0009;
		max-height: 72.5vh;
		height: 0%;
		z-index: 5;
		visibility: hidden;
	}
	.OHouter.btnopen { visibility: visible; }
	.OHouter.btnopen:has(.optionsholder > :nth-child(2)) { height: 250px; }
	.OHouter.btnopen:has(.optionsholder > :nth-child(3)) { height: 400px; }
	.OHouter.btnopen:has(.optionsholder > :nth-child(4)) { height: 60%; }
	.OHouter[inert]:after, .OHouter[inert]:before { content: ""; }
	
	.optionsholder {
		height: 100%;
		overflow: hidden auto;
		flex-direction: column;
		flex-wrap: nowrap;
		scroll-behavior: smooth;
	}
	.resetall { margin: 0 auto 50px; }
	
	/*#showextras { margin: 10px auto -10px; }*/
	.extrafilters:not([inert]) { overflow: visible; height: 370px; margin-bottom: 0; }
	
	.dualsliderscontainer:has(#dscarat) { margin: 5px auto -5px; }
	.dualsliderscontainer:has(#dslength) { margin-bottom: 30px; }
	.dualsliderscontainer:has(#dsratio) { margin-bottom: 0; }
	.dualsliderscontainer:has(.pipward) .tabtip { bottom: 20px; }
	
	.scrollingfilterscontainer, .dualsliderscontainer { width: 90% !important; margin: 15px auto; }
	/*.sidewaysscroller { gap: 2px; }*/
	.filterimg { height: 25px; }
	.scrollleft, .scrollright { padding-bottom: calc(10/12 * var(--filterwidth)); padding-top: calc(2/12 * var(--filterwidth)); }
	
	#colorsmenu, #labsmenu { margin: -10px auto 10px; }
	/*.postextra { margin: -13px auto 39px !important; }*/
	
	.fancyhover > p, .colormenuoption > p { font-size: clamp(14px, 1.35vw, 16px); }
	.fancyhover.selectedfilter > span, .fancyhover.subselected > span {
		font-size: clamp(9px, 1.7vw, 12px);
		margin: auto 3% auto auto;
	}
	.soloinputfiltercontainer {
		order: -1;
		border-top: unset;
		border-bottom: solid 1px var(--headertextcolor);
		padding-top: unset;
		padding-bottom: 20px;
		margin: 20px auto -20px;
	}
	.defocuser.mobileonly { display: inline; }
	
	/*.checkboxescontainer { justify-content: space-evenly; gap: 14px; }*/
	.subcats { font-size: 13px; }
	
	.withimages .filters button > h6 { font-size: 11px; bottom: 8px; left: 11px !important; }
	.withimages > div > .sidewaysscroller > button > div:first-child:after { bottom: -39px; }
}
@media (max-width: 500px) {
	.listedproduct p { word-spacing: -1px; }
	.stocklore img {
		height: 17px;
		margin: -4px 1px -4px -1px;
	}
}
@media (max-width: 400px) {
	.filterstitle > h4:has(select) { font-size: 16px; }
	.filterstitle > h4:has(select) > span { font-size: 14px; }
	.filterstitle > h4:has(select) > span > select {
		font-size: 11px;
		margin: -3px 0;
		padding: 2px 0;
		transform: translateY(-1px);
	}
	.listedproduct .stocklore { font-size: 12px; }
}