:root { --ordericon: ''; }

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

table {
	border: none;
	border-spacing: 0px;
	width: 100%;
	max-width: 1000px;
	margin: 20px auto;
	position: relative;
	background: var(--color1);
	border-radius: 20px;
	box-shadow: 0 0 3px var(--color2), 0 0 6px 3px #BDF2;
	z-index: 0;
	overflow: clip;
	font-size: clamp(11px, 1.85vw, 16px);
}
#tableheader {
	position: sticky;
	top: 95px;
	z-index: 1;
	background: var(--BGlighter2);
	box-shadow: 1px 0 0 var(--BGlighter2), 0 -1px 4px var(--colortext);
	height: 40px;
}
@media (max-width: 700px) { #tableheader { top: 55px; } }

#tableheader:before {
	content: "";
	position: absolute; top: 0; left: 0;
	width: 100%; height: 40px;
	z-index: -1;
	background: var(--BGgradient1);
	display: inline;
	border-radius: 20px 20px 0 0;
	padding: 0;
}
/*table th:first-child{ border-radius: 20px 0 0 0px; }
table th:last-child{ border-radius: 0 20px 0px 0; }*/
table > tr:nth-last-child(2) .expander { border-radius: 0 0 20px 0; }

tr { height: 40px; position: relative; }
td, th {
	font-size: clamp(11px, 1.5vw, 15px);
	text-align: left;
	padding: 0 5px;
	border-top: solid 1px var(--coolcolor);
	max-width: 120px;
}
th { border: none; text-wrap: nowrap; font-weight: 500; }
th:not(:last-child) > a:hover:after, th:not(:last-child) > a:focus:after, th > a.underline:after {
	content: "\f0dc";
	font-family: 'FontAwesome';
	position: absolute;
	margin-left: 3px;
	margin-top: 1px;
	font-weight: normal;
	opacity: 0.75;
}
th > a.underline:after { content: var(--ordericon) !important; }
th > a.underline { margin-right: -5px; }

th:not(:last-child) > a {
	width: 100%;
	position: relative;
	display: block;
	padding: 10px 0;
}

/*.tdshape, .tdcarat, .tdsize, .tdcolor, .tdclarity,
#thshape, #thcarat, #thsize, #thcolor, #thclarity { padding-right: 20px; }*/

/*.tdcarat, .tdsize, .tdprice, #thcarat, #thsize, #thprice {
	text-align: left;
}
.tdcolor { max-width: 114px; }
.tdcut, .tdpolish { max-width: 60px; }*/

#thshape, .tdshape,
#thstatus, .tdstatus,
#thquantity, .tdquantity,
#thinvoice, .tdinvoice { text-align: center; }

.tdshape:not(:has(img)) { padding: 0; }

td > span { cursor: text; }
.tdsize > span > span { margin: -3px -1px; display: inline-block; transform: scale(0.8); }
.tdsize > span > span:last-child { margin: 0 -5px; transform: scale(0.75) translateY(-1.4px); transform-origin: bottom; }

td > img {
	height: 30px;
	vertical-align: middle;
}
td:has(.expander), th:has(#thexpander) { width: 45px; padding: 0; text-align: center; }
.expander, #thexpander {
	height: 40px;
	background-color: #0003;
	display: block;
	font-size: 33px;
	width: 100%;
	font-weight: 300;
	user-select: none;
	line-height: 1.15em;
}
#thexpander { font-size: 26px; box-shadow: 1px 0 0 #0003; line-height: 1em; }
.expander:hover, .expander:focus, #thexpander:hover, #thexpander:focus { background-color: #0005; }
.expander:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: transparent;
	left: 0;
	pointer-events: none;
}
tr:hover .expander:before, .expander:hover:before { background-color: #9992; }

.underline { color: var(--colorlink); }

.extrainfo {
	width: 100%;
	height: 0px;
	overflow: hidden;
	transition: height .35s ease-out;
	visibility: hidden;
	background-color: #00000006;
	box-shadow: 0 -1px 2px -1px var(--coolcolorhover) inset;
}
.extrainfo > * {
	display: table-cell;
	height: 0px;
	transition: height .35s ease-out, visibility .35s ease-out;
	padding: 0 clamp(5px, 3vw, 45px);
}
.extrainfo > th > div {
	height: 0px;
	overflow-y: clip;
	transition: height .35s ease-out, visibility .35s ease-out;
}

.unhide { height: 200px; visibility: visible; }
.unhide > * { display: table-cell; height: unset; border: none; border-radius: 0 !important; }
.unhide > th > div { height: 200px; }

.previewdiv {
	height: 181px;
	float: left; position: relative;
	margin: 0 10px 0 0;
	display: block;
	overflow: visible hidden;
	width: 150px;
}
.previewdiv > img, .previewdiv > iframe, .previewdiv > video, .sourceless, .medialess {
	width: 148px; height: 149px;
	border: solid 1px var(--headericons);
	border-radius: 15px 15px 0 0;
	margin-top: 5px;
	object-fit: contain;
	position: relative;
	/*background: #abafb2;*/
}
.previewdiv > img { cursor: zoom-in; }
.previewdiv:has(> img:not([style='display: none;'])) > a,
.previewdiv:has(> video:not([style='display: none;'])) > a,
.previewdiv:has(> iframe:not([style='display: none;'])) > a {
	position: absolute;
	top: 6px; right: 1px;
	border-radius: 0 14px 0 7px;
	width: 20px; height: 20px; padding: 5px;
	background: url(/static/img/icons/vid_popout.png) center / 75% no-repeat, #6669;
	filter: invert(1);
	box-shadow: -1px 1px 3px #FFF4;
	transition: background-color .15s;
}
.previewdiv:has(> img:not([style='display: none;'])) > a { background-image: url(/static/img/icons/img_popout.png); }
.previewdiv > iframe[style='display: inline-block;'][src^='https://drive.google'] + a { display: none; }
.previewdiv > a:hover, .previewdiv > a:focus { background-color: #faa37199 !important; }

video[controlslist]::-webkit-media-controls { transform: translateY(10px); --gradient-steps: none; }
video[controlslist]::-internal-media-controls-overflow-button,
video[controlslist]::-webkit-media-controls-mute-button { display: none; }
video[controlslist]::-webkit-media-controls-current-time-display,
video[controlslist]::-webkit-media-controls-time-remaining-display { text-shadow: none; }
video[controlslist]:picture-in-picture { text-shadow: none; }

.previewdiv:has(.loadedframe):before, .popupbox:has(.loadedframe):before {
	content: 'Failed to Load Video';
	position: absolute;
	width: 100%;
	height: 75%;
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: pre;
	text-wrap: balance;
	text-align: center;
	font-size: 17px;
	top: 5px;
	left: -1px;
	color: transparent;
	animation: delaytext 0.5s ease-out 1s forwards;
}
.loadedframe { background: #0003; }

@keyframes delaytext {
	0% { color: transparent; }
	100% { color: var(--colortext); }
}

.popupbox:has(.loadedframe):before {
	top: 34px;
	height: 82px;
}

.previewdiv > .magnifier {
	z-index: 1;
	width: 100px; height: 100px;
	background: #abafb2 url('/static/img/icons/loading.svg') center/50% no-repeat;
}
.popupbox > .magnifier {
	z-index: 2;
	background: #abafb2 url('/static/img/icons/loading.svg') center/50% no-repeat;
}

.sourceless, .medialess {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	width: 150px; height: 149px;
	border: 0;
	/*border-bottom: solid 1px var(--headericons);*/
	background-color: #0003;
	margin-bottom: 4px;
	font-size: 17px;
	font-weight: 500;
	text-wrap: balance;
	word-spacing: 2px;
	line-height: 1em;
}
.medialess { border-radius: 20px; height: 181px; border: 0; }

.sourceless:has(~ .swapbuttons > button[style="display: none;"] + button[style="display: none;"]) > a { margin-top: 30px; }

/* If .certbtn is not instead .nocert, tell the user to see images at the certificate link: */
.extrainfo:has(.certbtn) .medialess:after {
	content: "(Check the certificate)";
	font-size: 13px;
	opacity: .75;
	margin-top: 10px;
	text-wrap: auto;
	word-spacing: 1px;
	letter-spacing: -0.15px;
}

.shapedecor {
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0.05;
	z-index: -1;
	filter: var(--shapesfilter);
}
	
.swapbuttons {
	display: flex;
	width: 148px;
	border-radius: 0 0 15px 15px;
	overflow: hidden;
	border: solid 1px var(--headericons);
	background-color: var(--headericons);
	gap: 1px;
	position: absolute;
	top: 154px;
}
.previewdiv > .swapbuttons:has(button[style]:nth-of-type(2)) {
	height: 30px;
	background: #0003;
	border-color: transparent;
}

.mediaopts > .swapbuttons {
	position: relative;
	display: inline-flex;
	top: unset;
	border-radius: 15px;
	margin: 0 5px 10px;
}

.swapbuttons > button {
	background: var(--BGgradient2);
	flex-grow: 1;
	height: 30px;
	min-width: 50%;
}

.swapbuttons > button > img {
	height: 100%;
	filter: var(--dayinvert);
}

.swapbuttons > button:hover, .swapbuttons > button:focus { filter: brightness(.9); }
.swapbuttons > button:active { filter: brightness(.8); }

.extrainfonest { display: flex; }

.extrainfonest > div { height: 185px; }
.extrainfonest > div:has(.certificateimglink) { display: none; flex-grow: 0; margin: 4px 10px 0; }

.certificateimglink {
	display: flex;
	position: relative;
	margin: auto;
	width: 138px;
	height: 185px;
	border-radius: 10px;
	background-color: #0003;
}
.certificateimglink > img {
	width: 100%; height: 100%;
	background-color: #0003;
	position: relative;
	border-radius: 10px;
	filter: grayscale(.35);
}
.certificateimglink > div {
	position: absolute; top: 0; width: 100%; height: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; color: black;
	filter: drop-shadow(0 0 2px #FFF) drop-shadow(0 0 4px #FFF) drop-shadow(0 0 4px #FFF) drop-shadow(0 0 4px #FFF) drop-shadow(0 0 4px #FFF);
}
.certificateimglink > div > img { width: 40%; }
.certificateimglink > p { margin: auto; text-align: center; }

button:has(.lotnum) { padding: 0; position: absolute; top: -28px; }
button:has(.lotnum):hover, button:has(.lotnum):focus { border-bottom: dashed 1px var(--colortext); }
.lotnum { margin: 0; font-size: 18px; }
.lotnum:after {
	content: " \f0c5";
	font: normal normal normal 14px/1 FontAwesome;
	margin-left: 5px;
}

.extrainfonest > div:first-child {
	/*margin-top: 35px;*/
	align-self: center;
	height: fit-content;
	background-color: #9993;
	border-radius: 0 5px 5px 0;
	position: relative;
	flex-grow: 1;
	margin-right: 16px;
	margin-left: -10px;
	padding-left: 5px;
}

.extrainfonest > div:first-child > p { margin: 5px 5px 5px 4px; font-weight: normal; text-transform: capitalize; }

.extrainfonest > div:last-child { margin-left: auto; display: flex; align-items: center; gap: 15px; }

.extrainfonest > div > div:has(.cartbtn) { display: flex; gap: 15px; flex-wrap: wrap; max-width: 200px; }

/*.extrainfonest > div:has(.cartbtn) { max-width: 200px; }*/

.othercartnotif {
	font-size: 12px;
	font-weight: 500;
	text-wrap: balance;
	margin: -12px 0 -10px;
	padding: 0 0 3px 2px;
	border-bottom: dashed 1px;
	color: var(--headertextcolor);
}

.centernotif {
	border: darkcyan dashed 1px;
	background: #008b8b22;
	text-wrap: balance;
	font-size: 14px;
	width: 100%;
}

.cartbtn { flex-direction: row; }
.cartbtn:after {
	content: url(/static/img/icons/header/nav_cart_modified.svg);
	width: 1.4em;
	margin: 4px 0 0 .35em;
}

.btn:has(~ .othercartnotif), .othercartnotif ~ .btn { min-height: 52px; }

.certbtn {
	display: flex;
	width: 100%;
	background: #f4e08e;
	color: black;
}
.certbtn:not(:first-child):after {
	content: url(/static/img/icons/badge_popout.svg);
	width: 1.65em;
	margin: -7px 0 -14px .5em;
}
.certbtn:first-child {
	background: url(/static/img/certificate_example.jpg);
	background-size: cover;
	background-position: 0 30%;
	height: 145px;
	width: 120px;
	text-wrap: wrap;
	flex-direction: column;
	text-shadow: 0 0 10px white, 0 0 10px white, 0 0 10px white;
}
.certbtn:first-child:before {
	content: url(/static/img/icons/badge_popout.svg);
	width: 50px;
	filter: drop-shadow(0 -2px 10px white);
}

.certbtn.GIA:first-child {
	background-image: url(/static/img/certificate_example_GIA.jpg);
}
.certbtn.GCAL:first-child {
	background-image: url(/static/img/certificate_example_GCAL.jpg);
}

.eisize, .eireport, .eicut, #diamond2cart, .girdleguarder + span, .choosebtn.showit ~ .ringbtn { display: none; }

.nocert {
	text-align: center;
	width: 100%;
	color: #0007;
	background: #f9e9ad66;
	border: dashed 2px #eadb93;
	box-shadow: none;
}
.nocert:first-child {
	height: 141px;
	width: 116px;
	text-wrap: wrap;
	flex-direction: column;
}

.choosebtn {
	display: none;
	width: 100%;
	overflow: visible;
	outline: solid;
	/*position: absolute;*/
	animation: strokepulse 5s ease-out infinite;
	flex-direction: column;
}
.choosebtn span {
	font-size: 13px;
	margin: 2px 0 -2px;
	border-top: 1px solid #FFF6;
	padding: 0 15px;
}
.showit { display: flex !important; }
.ringbtn { background-color: #64748B; color: white; }
.ringbtn:after {
	content: url(/static/img/icons/header/ER_Hidden_Halo.svg);
	width: 2.4em;
	margin: 4px -10px 0 0;
	filter: brightness(1.25);
	transform: scale(1);
}

.btn {
	box-shadow: -1px 1px 2px #0003;
	font-weight: 500;
	min-height: 65px;
	max-width: 100%;
	text-wrap: balance;
	border-radius: 2px;
}
.btn[inert], .centernotif { opacity: .75; filter: contrast(0.8); }

.ringbtn[inert] { opacity: .5; }

@keyframes strokepulse {
	0% { outline-color: transparent; outline-offset: -11px; outline-width: 15px; }
	4% { outline-color: #FFF8; }
	8% { outline-color: #FFF8; outline-width: 1px; }
	16% { outline-color: #2c89d8; }
	/*26% { outline-color: unset !important; }*/
	32%, 100% { outline-color: transparent; outline-offset: 13px; }
}

.nosize {
	text-decoration: underline transparent;
	transition: color .25s, text-decoration-color .25s;
}

.loadingtable { min-height: 510px; }
.loadingtable:after, .loadingtable:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: #0004 url(/static/img/icons/loading.svg) center 100px/35% no-repeat;
	border-radius: 20px;
}

#sender {
	position: fixed; top: 0; left: 0;
	width: 100%; height: 100%;
	display: none;
	flex-direction: column; justify-content: center; align-items: center;
	background: #444D url(/static/img/icons/loading.svg) center / 100px no-repeat;
	z-index: 1;
	color: white;
	font-size: 24px;
	border-radius: 8px;
	gap: 110px;
}
#sender > span > a { color: lightcyan; text-decoration: underline; }

.galleryfav {
	position: absolute;
	top: -33px; right: 0;
	padding: 7px;
	font-size: 16px;
	opacity: .25;
}
.productprice { margin: auto 0 5px; font-weight: normal; }

.galleryfav:hover, .galleryfav:focus, .galleryfav.favorite { opacity: 1; }
.colorswap:hover > div, .colorswap:focus > div { border-color: #777; }

.favorite { color: #fcc; }
.favorite:hover, .favorite:focus { color: #f99; }
.favorite {
	-webkit-text-stroke: 1px #9ab;
	font-size: 18px;
	top: -34px;
	right: -1px;
}
.favorite:hover, .favorite:focus {
	-webkit-text-stroke: 1px #777;
}

.popdiamondmedia > .popupbox {
	width: unset;
	max-width: 95vw;
}

.popdiamondmedia img, .popdiamondmedia iframe, .popdiamondmedia video {
	border: none;
	width: fit-content;
	margin: 0 auto 10px;
	max-height: 60dvh;
	width: 100%;
	object-fit: contain;
	z-index: 1;
}
.popdiamondmedia iframe { min-height: 440px; }

.popdiamondmedia img[style="display: none;"] ~ div > a:first-child,
.popdiamondmedia img + [style="display: none;"] + div > a + a,
.popdiamondmedia .sourceless + * + div > a:first-child { display: none; }

.mediaopts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.popupcancel {
	background-color: #edf2fd;
	display: inline-block;
	height: unset;
	box-shadow: 0 0 3px #0005;
}

.filters.scrollerimgshrink h6 { text-wrap: nowrap; }
.filters.scrollerimgshrink h6 > font { text-wrap: wrap; text-transform: capitalize; }

.widthtitle {
	position: absolute;
	margin-top: -9px;
	/*transition: margin-top .35s;*/
}

.shapeshower {
	display: none;
	padding-top: 7px;
	text-align: center;
}

@media (min-width: 1280px) and (min-height: 627px) {
	:root {
		--filterwidth: 60px !important;
	}
	
	.leftrightwrapper {
		display: flex;
		max-width: 1655px;
		margin: auto;
		justify-content: center;
		box-shadow: -2500px 1000px 0 1000px #9992;
	}
	.resultsarea { flex-grow: 1; max-width: 1220px; }
	.OHouter { width: 26% !important; z-index: 1; }
	.optionsholder, .extrafilters { max-width: unset; }
	.optionsholder {
		position: sticky;
		top: 100px;
		max-height: 90vh;
		overflow: hidden auto;
		margin-bottom: 0 !important;
	}
	.extrafilters:not([inert]) { height: 393px !important; }
	.scrollingfilterscontainer, .dualsliderscontainer { width: 95% !important; }
	.resetall { margin-bottom: 300px !important; }
	#colorsmenu, #labsmenu { margin: -10px auto 10px; }
	.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; }
	
	.shapeshower { display: block; }
	div.sidewaysscroller {
		padding: 0;
		min-width: 107%;
		overflow: clip;
		flex-wrap: wrap;
		justify-content: center;
		mask: none;
		-webkit-mask: none;
	}
	.sidescrollingsection { 
		max-height: 160px;
		transition: max-height .35s;
	}
	.sidescrollingsection:has(~ .shapeshower.hidden) { max-height: unset; }
	.scrollleft, .scrollright { display: none; }
	#shapesmenu > button { padding-top: 0; }
	/*.scrollerimgshrink > button > div:first-child { background-size: 50%; }*/
	div.filters.scrollerimgshrink h6 { margin-bottom: 0; }
	.pipward > a { font-size: clamp(10.5px, 0.7vw, 12px); }
	.pipward, .pipward > a { border-color: #9999; }
}

@media (max-width: 800px) {
	.extrainfonest > div { height: unset; }
	.extrainfonest > div:has(.cartbtn) { max-width: 180px; }
	.extrainfonest > div > div:has(.cartbtn) { gap: 7px; }
	.extrainfonest > div > div:has(.othercartnotif) { gap: 5px; }
	.extrainfonest { font-size: 14px; }
	.othercartnotif { font-size: 10.75px; margin: -2px -3px 0px; }
	.centernotif { font-size: 13px; }
	.btn { min-height: 50px; }
	.btn:has(~ .othercartnotif), .othercartnotif ~ .btn { min-height: 38px; }
}

@media (max-width: 650px) {
	.extrainfonest { font-size: 13px; }
	/*.expander, tr { height: 35px; }*/
	.expander { font-size: 31px; }
	.sourceless, .medialess, .previewdiv:has(.loadedframe):before { font-size: 14px; }
	.btn { min-height: 35px; font-size: clamp(12px, 2.25vw, 14px); }
	.choosebtn { height: 56px; }
	.choosebtn:has(~ .othercartnotif) { height: 40px; }
	
	.unhide, .unhide > th > div { height: 150px; }
	.previewdiv { width: 110px; margin-right: 5px; }
	.previewdiv > img, .previewdiv > iframe, .previewdiv > video, .sourceless, .medialess {
		width: 108px;
		height: 109px;
		border-radius: 15px 15px 0 0;
	}
	.previewdiv:has(> img) > a, .previewdiv:has(> iframe:not([src^='https://drive.google'])) > a, .previewdiv:has(> video) > a {
		border-radius: 0 15px 0 7px;
		width: 16px; height: 16px; padding: 3px;
		background-size: 73%;
	}
	.sourceless { width: 110px; } 
	.previewdiv > .swapbuttons { width: 108px; border-radius: 0 0 15px 15px; top: 114px; }
	.previewdiv > .swapbuttons > button, .previewdiv > .swapbuttons:has(button[style]:nth-of-type(2)) { height: 25px; }
	.medialess { width: 110px; border-radius: 15px; height: 136px; }
	/*.lotnum { font-size: 16px; }
	.lotnum:after*/ button:has(.lotnum), .girdleguarder { display: none; }
	.extrainfonest > div:first-child { /*margin-top: 4px;*/ margin-left: -5px; }
	.extrainfonest > div:first-child > p { margin: 0px 3px 1px; }
	.extrainfonest > div:last-child { margin-left: auto; }
	.extrainfonest > div > div:has(.cartbtn) { gap: 5px; }
	button:has(.lotnum) { margin: 5px 5px 5px 0; }
	
	#thsize, .tdsize, #threport, .tdreport { display: none; }
	.eisize, .eireport, .girdleguarder + span { display: block; }
	.girdleguarder + span { height: 1px; }
	
	.galleryfav { font-size: 15px; top: -28px; }
	.favorite { font-size: 17px; top: -29px; }
	.othercartnotif { margin: -3px -3px -2px; }
	.btn:has(~ .othercartnotif), .othercartnotif ~ .btn { min-height: 32px; }
	
	/*th:not(:last-child) > a:hover:after, th:not(:last-child) > a:focus:after, th > a.underline:after {
		width: 110%;
		bottom: 0; right: 0;
		text-align: center;
	}*/
}

@media (max-width: 520px) {
	.extrainfonest { font-size: 12px; }
	.extrainfonest > div:first-child > p { margin-bottom: 2px; }
	.extrainfonest > div:first-child { margin-right: 7px; /*margin-top: 10px;*/ padding-left: 3px; }
	.extrainfo > * { padding: 0 5px; }
	/*.extrainfonest > div:last-child:has(.choosebtn.showit) { margin-top: 5px; }*/
	.btn { width: 100%; text-wrap: balance; }
	/*.certbtn { text-wrap: wrap; text-align: left; padding: 0 5px; }
	.certbtn:after { position: absolute; top: 2px; right: 5px; }
	.certbtn > br { display: block; }*/
	
	/*.choosebtn { height: 40px; }*/
	
	.mediaopts > .swapbuttons { margin: 0 25vw 10px; }
	
	.popupcancel { order: 2; }
	
	.othercartnotif { font-size: 10.5px; }
	
	#thsize > a { text-wrap: wrap; padding: 0; }
	#thsize > a, .tdsize { line-height: 12px; }
}

@media (max-width: 440px) {
	td, th { padding: 0 2px; }
	td { box-shadow: -1px 0 0 0 #9995; }
	th { box-shadow: -1px 0 0 0 #9993; }
	.extrainfonest { font-size: 11px; }
	.extrainfonest > div:first-child { padding-left: 1px; }
	
	.cartbtn:after {
		width: 1.7em;
		margin: 4px 4px 0 2px;
	}
	.certbtn:not(:first-child):after {
		width: 1.5em;
		margin: 4px 4px 0 2px;
	}
	.ringbtn:after {
		width: 3.35em;
		margin: 4px -2px 0 0;
	}
}

#productlisting:not(:has(tr:nth-child(16), .unhide ~ .unhide ~ .unhide)) + #mirrorSOD { display: none; }