/* DROPDOWNS */

.dropdownable {
	background-color: var(--headercolor2);
	text-align: center;
	cursor: pointer;
	height: 0;
	border: none;
	border-radius: 20px;
	padding: 0;
	z-index: 0;
	box-shadow: 0 0 5px #0003;
	position: relative;
	display: inline-grid;
	font-weight: 400;
}
.dropdownable > * { background-color: var(--headercolor1); }
.dropdownable > .dropdowntitle {
	padding: 4px 0 3px 1px;
	margin: 0;
	border: solid 1px var(--coolcolor);
	border-radius: 15px;
	position: relative;
	z-index: 1;
	transition: border-radius .2s;
	display: inline-block;
	/*box-shadow: 0 0 5px #0003;*/
	font-weight: inherit;
	min-width: 47px;
}
.dropdownable:focus-visisble > .dropdowntitle, .btnopen:hover > .dropdowntitle,
	.btnopen:focus-visisble > .dropdowntitle { box-shadow: 0 0 5px var(--headertextcolor); }
.dropdownable > .dropdowntitle:after {
	content: "\f0d7";
	font-family: 'FontAwesome';
	margin-left: 5px;
	transition: transform .5s;
	display: inline-block;
}
span:has(+ .dropdownable) { padding-right: 3px; }
.dropdownable > a {
	display: block;
	pointer-events: none;
	user-select: none;
	position: relative;
	font-size: 0px;
	padding: 0;
	width: 98%;
	margin-left: 1%;
	height: 0;
	transition: height .2s, padding .2s, transform .2s, visibility .35s ease-out;
	transform: translateY(-20px);
	z-index: 0;
	box-shadow: 0 6px 5px #0003;
	visibility: hidden;
}
.dropdownable > i { background-color: unset; }
.dropdownable:has(i) { min-width: unset !important; }

.colorpreference > .dropdownable { position: absolute; right: 10px; top: 35px; }
.colorpreference > .dropdownable > .dropdowntitle { background-color: var(--color1); }
.colorpreference > .dropdownable > .dropdowntitle:after { transform: translate(-2px, -2px); }
.colorpreference > .btnopen > .dropdowntitle:after { transform: rotate(-180deg) translate(2px, 2px); }
#mirrorSOD .colorpreference > .dropdownable, #mirrorSOD .colorpreference > label { top: -42px; }
#colorprefbtn {
	width: 14px; height: 14px;
	display: inline-block; margin: -1px -1px -3px 1px;
	border: solid 2px #999; border-radius: 4px;
	background: linear-gradient(135deg, #feffff 0%, #feffff 28%, #ffcccc 45%, #ffcccc 55%, #feff8f 72%, #feff8f 100%);
}

.btnopen {
	z-index: 2;
}
.btnopen > .dropdowntitle {
	border-radius: 15px 15px 0 0;
	z-index: 3;
	box-shadow: 0 1px 6px #0008;
}
.btnopen > .dropdowntitle:after {
	transform: rotate(-180deg);
}
.btnopen > a {
	pointer-events: all;
	user-select: all;
	z-index: 2;
	height: unset;
	padding: 4px 0;
	font-size: inherit;
	font-weight: inherit;
	transform: unset;
	visibility: visible;
}

.dropdownable > a:last-child {
	border-radius: 0 0 15px 15px;
}
.dropdownable > a:hover, .dropdownable > a:focus, .dropdownable:hover > h4, .dropdownable:focus > h4 {
	background-color: var(--headercolor3);
}

.noselect {
	filter: saturate(.9);
	opacity: .6;
	pointer-events: none;
	box-shadow: 0 0 5px black;
}
.noselect > .dropdowntitle:after { content: none; }

.btnopen > .DDstoplabel { user-select: none; opacity: .9; color: var(--colortext); background-color: inherit; cursor: default; }
	
#backcloser {
	width: 100vw;
	height: 100dvh;
	position: fixed;
	z-index: 2;
	pointer-events: none;
	background-color: black;
	top: 0;
	left: 0;
	opacity: 0%;
	transition: opacity .2s;
}

.galleryintro {
	padding: 1px 0 15px;
	background: linear-gradient(90deg, var(--headercolor1) 0%, transparent 40%, transparent 60%, var(--headercolor1) 100%);
	/*border-bottom: solid 1px var(--BGlighter);*/
	box-shadow: inset 0 -10px 10px -10px #0006;
	position: relative;
}
.galleryintro a {
	font-size: 14px;
	font-weight: 500;
	opacity: .85;
	padding: 5px 10px;
	color: var(--headertextcolor);
	background: var(--headercolor3);
	border-radius: 50px;
	box-shadow: 0 0 5px var(--headericons);
	z-index: 1;
}
.galleryintro a:hover, .galleryintro a:focus { opacity: 1; text-decoration: underline; }

.galleryintro > img {
	position: absolute;
	width: 100%;
	filter: url(#lighticons) saturate(0.5);
	max-height: 140px;
	opacity: 0.35;
}
.galleryintro > img.tallicon { max-height: 120px; margin-top: 10px; }

.galleryintro > img + h1 { margin: 49px auto 51px; max-width: 560px; text-wrap: balance; position: relative; z-index: 1; }
.galleryintro > img + h1:before {
	content: attr(data-text); -webkit-text-stroke: 5px var(--color1);
	position: absolute; z-index: -1; display: block;
	width: 100%; max-width: inherit;
}

.quickflex { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; }

.outerSOD, #mirrorSOD {
	width: 100%;
	margin: 20px auto;
	max-width: 1020px;
}

.sortoptionsdiv {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	width: calc(100% - 20px);
	max-width: 1200px;
	margin: auto;
	padding: 0 10px;
	font-size: 15px;
}

.flipper { padding: 4px 4px 4px 1px; border-radius: 5px; }
.flipper:hover, .flipper:focus { background: var(--coolcolor); }

.sortby, .perpage { width: 50%; }
.perpage { display: flex; justify-content: flex-end; align-items: baseline; gap: 3px; }

body:has(input[name="in_stock"][value="lab,natural"]:checked, input[name="diamond_type"]:checked) .colorpreference { display: none; }

#questionbtn {
	opacity: .5;
	font-size: 18px;
	top: 2px;
	position: relative;
}
#questionbtn:hover, #questionbtn:focus { opacity: 1; }

.pagenav {
	text-align: center;
	gap: 5px;
	display: flex;
	filter: drop-shadow(0 0 .85px var(--headericons));
	position: relative;
	z-index: 0;
}
.pagenav a > p { 
	margin: 0;
	background: var(--BGgradient2);
	min-width: 30px;
	height: 30px;
	border-radius: 3px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}
.pagenav a:hover > p, .pagenav a:focus > p { background: var(--BGgradient1); }
/*.pagenav a:first-child > p { clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); width: 55px; padding-right: 5px; }
.pagenav a:last-child > p { clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%); width: 55px; padding-left: 5px; }*/
.pagenav a:not(.ellipses) > p:before, .pagenav a:not(.ellipses) > p:after { content: " "; }
/*.pagenav > a.currentpage { filter: drop-shadow(0 0 2px #0003); }*/
.pagenav > a.currentpage > p { background-color: var(--headercolor3); }
.pagenav > h4 { margin: 0; margin-top: -7px; }

.ellipses { position: relative; }
.ellipses input {
	width: 29px;
	height: 100%;
	text-align: center;
	outline: none;
}
.ellipses input::placeholder { color: inherit; }
.ellipses input::-webkit-outer-spin-button, .pagenav input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; appearance: none; }
.ellipses input[type=number] { -moz-appearance: textfield; }

/* When the placeholder isn't visible on the focused inner element: */
.ellipses:has(input:not(:placeholder-shown)):before {
	content: "";
	display: block; border-radius: 4px;
	position: absolute; top: 33px;
	width: 100%; height: 13px;
	background: var(--headertextcolorhover);
	filter: brightness(1.8); box-shadow: 0 1px 4px #0006;
}
.ellipses:has(input:not(:placeholder-shown)):after {
	content: "\f178";
	display: block; width: 100%;
	position: absolute; top: 31px;
	color: var(--headercolor2);
	font-family: 'FontAwesome'; font-size: 17px;
	filter: brightness(1.8); cursor: pointer;
}
.ellipses:focus-within { filter: brightness(0.9); }

@keyframes shook {
	0%, 100% { }
	25%, 75% { transform: translateX(-5px) }
	50% { transform: translateX(5px) }
}

.btn {
	min-height: 33px;
	transition: filter .1s;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-grow: 1;
}

.bigbuttons {
	display: flex;
	justify-content: space-evenly;
	gap: 5px;
	overflow: hidden;
}
.bigbuttons > a {
	/*padding: 20px 0;*/
	min-height: 66px;
}

.choosebutton {
	background-color: #2c89d8;
	color: white;
	flex-grow: 1;
	font-size: unset;
	cursor: pointer;
	padding: 0;
	height: 66px;
	/*text-shadow: 0px 0px 3px #FFFA;*/
}
.choosebutton a:has(input) { background: white; border-radius: 5px; height: 20px; display: inline-block; padding-right: 3px; color: black; }
.choosebutton a > input { height: 100%; border-right: solid 2px gray; padding-left: 3px; }

.notesbtn {
	background-color: #fdfdff;
	color: var(--colortext);
}
[data-theme="dark"] .notesbtn { background-color: #383e5c; }
.cartbtn {
	background-color: var(--mainblue); /*#8fff87*/
	color: white;
	flex-direction: column;
}
.heartbtn {
	background-color: #ff5050;
	color: white;
}
.btn:hover, .btn:focus { filter: brightness(.94); }
.btn:active { filter: brightness(.8); }

.popuphaver > #systemmessages {
	top: 0; left: 0;
}

dialog {
	background: none;
	border: none;
	padding: 0;
	max-width: unset;
	max-height: unset;
	box-shadow: 2px 2px 10px #999;
	border-radius: 20px 20px 15px 15px;
	animation: popup .3s cubic-bezier(0.32, 2.27, 0.66, 0.95);
	overflow: visible;
}

dialog::backdrop {
	background-color: #1119;
	top: 0; left: 0;
	width: 100%; height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	pointer-events: all; opacity: 1;
	animation: backdrop .2s cubic-bezier(0, 0, 0.2, 1);
}
.popupbox {
	border: solid 5px var(--mainblue);
	display: flex; flex-direction: column;
	text-align: center; width: 300px;
	color: black; background-color: white;
	border-radius: 20px 20px 15px 15px;
	max-height: 85%;
	min-height: fit-content;
}

@keyframes popup {
	0% { transform: scale(0.9); opacity: .7; }
	100% { transform: scale(1); opacity: 1; }
}

@keyframes backdrop {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

.popupbox > label {
	background-color: var(--mainblue);
	color: white;
	padding: 2px 0 7px;
	border-radius: 10px 10px 0 0;
	display: block;
	cursor: auto;
	text-wrap: balance;
	font-size: 15px;
	line-height: 1.25em;
}

.popupinput { resize: vertical; font: inherit; margin: 10px; }
.popupsubmit, .popupcancel {
	padding: 10px; margin: 0 7px 10px; border-radius: 5px;
	cursor: pointer; font-size: 15px; height: 38px;
}													/* Lone button, full-width: */
.popupbox > .popupcancel, .popupbox > .popupsubmit { margin: -20px 0 0px; border-radius: 0 0 10px 10px; }
.popupsubmit:hover, .popupcancel:hover, .popupsubmit:focus, .popupcancel:focus { filter: saturate(1.25); text-decoration: underline; }
.popupwordcount { text-align: right; margin: -10px 10px -7px; font-size: 14px; opacity: 0.75; pointer-events: none; }

.disabled { opacity: .5; text-decoration: line-through; user-select: none; pointer-events: none; }
.disabled :before, .disabled :after { text-decoration: line-through; }
.disabledtitle, .defocuser { display: none; }
.disabled .disabledtitle {
	display: block;
	position: absolute; bottom: 0;
	width: 100%; height: 100%;
	pointer-events: all;
	cursor: help;
}

.defocuser:has(+ .btnopen), .btnopen + .defocuser { display: inline; position: absolute; }

.hovfocopac:hover, .hovfocopac:focus { opacity: .65; }
.hovfoclink:hover, .hovfoclink:focus { color: var(--colorlink); text-decoration: underline; }
.strokefocus:hover, .strokefocus:focus { outline: auto; outline-offset: 3px; }

.magnifier {
	position: absolute;
	border: 2px solid black; border-radius: 20%;
	width: 200px; height: 200px;
	cursor: none;
	background-color: white;
	background-repeat: no-repeat;
	box-shadow: 10px 10px 10px #0002 inset, -10px -10px 10px #FFF4 inset;
	transition: transform .15s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%), opacity .15s ease-out;
}

@media (max-width: 831px) {
	.sortoptionsdiv { flex-wrap: wrap; font-size: 14px; }
	.pagenav:not(:empty) { order: 3; margin-top: 15px; width: 100%; justify-content: center; }
	.outerSOD:has(.pagenav:not(:empty)) ~ #productlisting { margin: auto; }
	
	#mirrorSOD:has(.pagenav:not(:empty)) { margin-top: 70px; }
	#mirrorSOD .pagenav:not(:empty) { margin-top: -63px; }
}

@media (max-width: 580px) {
	.perpage { width: unset; margin-left: auto; }
	.sortby { width: unset; }
}

@media (max-width: 449px) {
	#mirrorSOD:has(.pagenav:not(:empty)) { margin: 60px auto 10px; }
	
	.pagenav:not(:empty) { width: 84%; }
	body:has(.checkboxescontainer > label > input[name='in_stock'][type='checkbox']:checked) .pagenav:not(:empty),
	body:has(.checkboxescontainer > label > input[name='diamond_type'][type='checkbox']:checked) .pagenav:not(:empty) { width: 100%; }
	
	.perpage > span + span { right: unset; text-align: left; }
	.pagenav.largenums { font-size: 13px; }
	.pagenav > a > p { min-width: 28px; height: 28px; }
	.ellipses input { width: 28px; }
}