/* PRODUCT PAGE CSS */

#overview * { color: var(--colortext); text-shadow: 0 0 10px var(--shadowcolor); }

#product-display {
	display: flex; flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	background: var(--BGgradient1);
	width: 100%;
	padding-top: 20px;
	gap: 0 20px;
}

#back2gallery {
	margin: 0 0 -10px 35px;
	width: 100%;
	text-decoration: underline; 
	font-size: 14px; font-style: italic;
}
#back2gallery > a {
	opacity: 0.8;
	width: fit-content;
	display: block;
	padding: 2px 3px 4px;
	margin: -2px auto -4px -3px;
	max-width: 1070px;
	border-radius: 3px;
}

.cartadder, .selectedCinfo { display: flex; gap: 20px; padding: 10px; }
.cartadder > div > * { margin: 12.5px 0; text-align: left; color: black; }
.status { color: green; animation: fadebounce 2s ease infinite; }
.error .status { color: red; animation: none; }
.done .status { color: green; animation: none; }
.status > span, .cartadder.disabled { display: none; }

@keyframes fadebounce {
	0%, 100% { opacity: 1; }
	50% { opacity: .75; }
}

.popcartadd[open] ~ #product-display { filter: blur(5px); }

.popuphaver[open]:has(~ .popuphaver[open]) { display: none; }

	/* OVERVIEW */

#overview, #bigmediaholder {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
	z-index: 1;
}

#bigmediaholder {
	filter: drop-shadow(-3px 3px 5px #0002);
	position: relative;
	margin: 0;
}
#bigmediaholder.loadingprice:before,/* { content: unset; }*/
#bigmediaholder.loadingprice:after {
	top: 4px;
	left: 4px;
	border-radius: 5px;
	width: calc(100% - 8px);
	height: calc(100% - 8px);
	opacity: 0;
	animation: delayloader .5s linear 1s forwards;
}

@keyframes delayloader {
	0% { opacity: 0%; }
	100% { opacity: 55%; }
}

#overview > .holder {
	display: flex; align-items: baseline;
	justify-content: space-between;
	max-width: 508px; width: 100%;
}

#productinfo1 {
	display: inline-block; opacity: 0.8;
	margin: -5px 5px 0; padding: 9px 0;
	overflow-x: hidden; font-size: 15px;
	text-overflow: ellipsis; text-align: left;
	text-wrap: nowrap; max-width: 97vw;
	/*white-space: -moz-pre-space;*/
}
#productinfo2:before { content: "#"; margin: 0 3px -1px 0; font-family: sans-serif; }
#productinfo2 {
	display: inline-flex; align-items: flex-end;
	cursor: copy; padding: 5px 2px; font-size: 24px;
}
#productinfo2 > h1 { margin: 0; text-wrap: nowrap; font-size: inherit; font-weight: 400; }
#productinfo2:after, #pegheadtable tr:first-child > td:first-of-type:after {
	content: " \f0c5"; margin: 0 5px 5px;
	font: normal normal normal 14px/1 FontAwesome;
} 
#pegheadtable tr:last-child { height: 20px; }
#productinfo3, #productvideo {
	width: 500px;
	max-width: 100%;
	border: solid 4px var(--color1);
	border-radius: 10px 10px 0 0;
	object-fit: scale-down;
	aspect-ratio: 1/1;
	background: white;
}
#productinfo3 { cursor: zoom-in; }
.imgcornerbtn {
	position: absolute;
	top: 4px;
	right: 4px;
	border-radius: 4px;
	width: 30px;
	height: 30px;
	padding: 5px;
	opacity: .3;
	background: url(/static/img/icons/img_popout.png) center / 70% no-repeat, #fdfdfd;
	transition: background-color .15s, opacity .15s;
}
.imgcornerbtn:hover, .imgcornerbtn:focus {
	opacity: 1;
	background-color: #0002;
}
#fullscreenbtn[href$=".mp4"] { background-image: url(/static/img/icons/vid_popout.png); }
#mobileoptsbtn { background-image: url(/static/img/icons/gear-solid-full.svg); }

#mobileopts {
	display: none;
	flex-direction: column;
	position: absolute;
	top: 46px;
	right: 0;
	background: #FFF9;
	border-radius: 0 0 0 15px;
	text-align: right;
	box-shadow: 0 0 3px black;
	overflow: clip;
}
#mobileopts > a {
	flex-grow: 1;
	color: #444;
	padding: 5px;
	font-size: 13px;
}
#mobileopts > a:hover, #mobileopts > a:focus {
	color: black;
	background: #0002;
}
#mobileopts.open { display: flex; }

/*#nocolor {
	display: none;
	position: absolute; top: 37.5%;
	width: calc(100% - 20px); left: 10px;
	color: var(--mainblue); text-align: center;
	background: white; box-shadow: 0 0 5px 5px white; 
	opacity: 0; user-select: none; pointer-events: none;
}
body:has(.coloropts:not([onclick]):checked) #nocolor { display: block; animation: colorless 3s; }*/

@keyframes colorless {
	0%, 100% { opacity: 0; }
	20%, 80% { opacity: 1; }
}

#productinfo5 {
	display: flex;
	width: 100%;
	max-width: 500px;
	justify-content: center;
	max-height: 80px;
	margin-top: 0px;
	background-color: var(--color1);
	padding: 4px;
	padding-top: 0;
	border-radius: 0 0 10px 10px;
	gap: 4px;
}
#productinfo5 > a > img { width: 100%; height: 100%; object-fit: contain; }
#productinfo5 > a > img{ backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
@supports (-moz-appearance: none) { #productinfo5 > a > img { backdrop-filter: none !important; } }

#productvideo:has(source[src=""]), #fullscreenbtn[href=""], #mobileoptsbtn { display: none; }
#productvideo::-webkit-media-controls { filter: invert(1); }
#productvideo:not(:fullscreen)::-webkit-media-controls-fullscreen-button, #productvideo::-webkit-media-controls-mute-button,
#productvideo::-webkit-media-controls-current-time-display, #productvideo::-webkit-media-controls-time-remaining-display { display: none; }
#productvideo::-webkit-media-controls-timeline { background: #000; filter: brightness(0.5) contrast(2) sepia(1) saturate(1.5); }
#productvideo::picture-in-picture { text-shadow: none; filter: invert(1); border-color: #020202; background: black; }
[data-theme='dark'] #productvideo::picture-in-picture { filter: none; border-color: unset; background: none; }

.thumb360 { filter: blur(1px); }

#productinfo5 > a {
	background-color: white;
	background-size: 100% 100%;
	overflow: hidden;
	aspect-ratio: 1/1;
	height: 80px;
	flex-grow: 1;
	position: relative;
}
#productinfo5 > a:hover, #productinfo5 > a:focus {
	box-shadow: 0 0 3px #0007; opacity: .87;
}

#productinfo5 > a[data-vidlink]:before {
	content: '';
	width: 100%; height: 100%;
	display: block; z-index: 1;
	position: absolute;
	overflow: hidden;
	background: url(/static/img/icons/360.png) center/contain no-repeat;
}

#productinfo5 > a[data-vidlink] ~ a:not([data-vidlink]) { display: none !important; }

#productinfo5 > a.soloshapevid[data-vidlink]:before { top: 0; transition: top .65s; }
#productinfo5 > a.soloshapevid[data-vidlink]:after {
	content: "Round view";
	display: block;
	bottom: 2px;
	position: absolute;
	width: 100%;
	text-align: center;
	font-style: italic;
	font-size: 13px;
	color: black;
	opacity: 0;
	text-shadow: 0 -2px 3px white, 0 -2px 3px white;
	transition: opacity .65s, bottom .65s;
}
#previewshape.showshapes:has(#selectedshape:not([onclick*='rd'])) ~ #productinfo5 > a.soloshapevid[data-vidlink]:before { top: -5px; }
#previewshape.showshapes:has(#selectedshape:not([onclick*='rd'])) ~ #productinfo5 > a.soloshapevid[data-vidlink]:after { opacity: 1; bottom: 10px; }

#productinfo5 > a:has(#selectedthumb) {
	/*outline: var(--color1) solid 4px;*/
	box-shadow: 0 0 3px black; opacity: .75;
}
#productinfo5 > a:has(#selectedthumb):hover, #productinfo5 > a:has(#selectedthumb):focus {
	box-shadow: 0 0 3px 1px black;
}

#productinfo5 > a:first-child, #productinfo5 > a.showit, #productinfo5 > .hidden + a:not(.hidden, [data-vidlink]) { border-radius: 0 0 0 5px; }
#productinfo5 > a.showit ~ a.showit:not([data-vidlink]) { border-radius: 0; }
#productinfo5 > a:last-child, #productinfo5 > a[data-vidlink] { border-radius: 0 0 5px 0; position: relative; }
#productinfo5 > a:only-child, #productinfo5 > a:nth-child(n+8):not(.showit, .hidden, [data-vidlink]) { display: none; }
#productinfo5:has(a:only-child):before, #productinfo5:not(:has(a)):before, #productinfo5:not(:has(a ~ a:not(.hidden))):before {
	content: "";
	display: block; margin: 8px 0;
	width: 100%; height: 66px; opacity: 0.15;
	filter: brightness(0) drop-shadow(0 1.5px 0 white);
	background: url(/static/img/OMI_Logo_clean.png) center/contain no-repeat;
}

/* Hides duplicate images for shape images that share image angle names: */
/*#productinfo5 > a:not(:first-child, [class='hidden'], :has(img[src*='.side'], img[src*='.cat'])):has(~ a img[src*='.side']),*/
#productinfo5 > a:not([class='hidden']):has(img[src*='.side']) + a:not([class='hidden']):has(img[src*='.side']),
#productinfo5 > a:not([class='hidden']):has(img[src*='.set']) + a:not([class='hidden']):has(img[src*='.set']),
#productinfo5 > a:not([class='hidden']):has(img[src*='.angle']) + a:not([class='hidden']):has(img[src*='.angle']),
#productinfo5 > a:not([class='hidden']):has(img[src*='.ver']) + a:not([class='hidden']):has(img[src*='.ver']),
#save2zip > .lastphrase {
	display: none;
}

.bottompanel {
	width: 100%;
	max-width: 508px;
	position: relative;
	border-radius: 0 0 10px 10px;
	z-index: 1;
}

#save2zip {
	position: absolute; bottom: -33px;
	cursor: pointer; pointer-events: all;
	padding: 10px; max-height: 33px;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 5px 5px -5px #0006 inset;
	background: var(--color1);
}
#save2zip:hover, #save2zip:focus { filter: brightness(1.15); }

#colorbtns {
	background-color: var(--color1);
	margin-left: auto;
	position: relative;
	padding-right: 10px;
	display: inline-block;
	float: right;
	border-radius: 0 0 5px 0;
}
#colorbtns:before {
	content: ""; display: inline-block;
	position: absolute; left: -45px;
	width: 0; height: 0;
	border-top: 45px solid var(--color1);
	border-left: 45px solid transparent;
}

.centertoggle { margin: 5px 0 10px auto; height: 30px; cursor: pointer; }

	/* OPTIONS */
	
#options { display: flex; flex-direction: column; gap: 5px; }
#options h3 { font-size: 16px; }
#options h3, #options p {
	margin: 0 auto 6px;
	width: 380px; max-width: 100%;
	position: relative;
}

.dropbox:has(option:only-child), .dropbox:not(:has(option[value]:not(:disabled) ~ option[value]:not(:disabled))) {
	border-color: #9996;
	appearance: none;
	min-width: 128px;
}

.dropbox:disabled {
	background: url(/static/img/icons/roselock.svg) calc(100% - 5px) center / 14px no-repeat;
	filter: brightness(0) contrast(0.5);
	border-color: var(--shadowcolor);
	color: var(--colortext);
	appearance: none;
}

#optionstop {
	background-color: var(--color1);
	padding: 10px; margin: 4px auto 0;
	width: 420px; height: fit-content;
	position: relative; z-index: 1;
	border-radius: 10px 10px 0 0;
	display: flex; flex-wrap: wrap; align-content: flex-start;
	justify-content: space-around; flex-grow: 1;
	/*filter: drop-shadow(3px 1px 5px #0003); Suddenly breaks spacing in select dropdowns?! */
	box-shadow: 3px 1px 10px #0002;
	max-width: calc(100vw - 20px);
}

.optionsection {
	display: flex; flex-direction: row;
	gap: 12px 0; /*overflow: clip auto;*/
	margin: -5px; padding: 10px 5px;
	flex-wrap: wrap;
}

.optionsection > div {
	width: 45%;
	position: relative;
	flex-grow: 1;
}

#optionstop #variblock, 
#optionstop .meleeinfo,
#optionstop #personalization { width: 100%; }

#optionstop .meleeinfo {
	max-width: 380px;
	margin: auto;
}

#personalization { gap: 7px 0; }
#personalization label {
	font-size: 15px;
	text-align: center;
	flex-grow: 1;
}
#personalization input {
	font-size: 13px;
	margin: 3px auto 0;
	width: 90%;
	padding: 0;
	border: solid 1px gray;
}

#infoblock4 { display: none; }
#infoblock4 > div { margin-bottom: -10px; }

#infoblock1 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	max-width: 440px;
	margin-bottom: 2px;
}
#infoblock1 > .popupbox {
	border: solid 2px var(--color2);
	border-radius: 7px;
	background: var(--color1);
	flex-grow: 1;
	width: unset;
	min-width: 86px;
	text-decoration: none;
}
#infoblock1 > .popupbox > label {
	background-color: var(--color2);
	color: var(--colortext);
	border-radius: 0;
	padding: 2px 0 1px;
}
#infoblock1 > .popupbox > p {
	width: unset;
	margin: 1px auto 2px;
	color: var(--colortext);
	font-size: 14px;
	flex-grow: 1;
	align-content: center;
}
#infoblock1 > .popupbox:first-child { display: none; }

#duedate > #notify530 {
	display: block;
	font-size: 12px;
	color: orangered;
	font-weight: 600;
	letter-spacing: -0.1px;
}
#duedate > #notify530:before {
	content: '';
	font-family: 'FontAwesome';
	font-weight: 300;
	margin-right: 5px;
	transform: scale(1.35);
	display: inline-block;
}
/*#duedate > span:has(+ #notify530) { text-decoration: line-through; opacity: .75; }*/

#optionstop > * { min-width: 45%; }

#optionstop > .dropdownable { margin-bottom: 70px; }

#varidropdown { position: absolute; top: -40px; }

.pressinginfo { margin-bottom: 20px; }

.choosebutton > div, #quickbtns > div { flex-grow: 1; }
.choosebutton > div > a { color: black; }

.choosebtn {
	display: none;
	background-color: #2c89d8;
	color: white; flex-grow: 1;
	overflow: visible;
	border-bottom-left-radius: 10px;
}
.choosebtn:before {
	content: "";
	width: 230px; width: -webkit-fill-available;
	height: inherit;
	position: fixed;
	overflow: visible;
	outline: solid;
	animation: strokepulse 5s ease-out infinite;
	z-index: 1;
	border-bottom-left-radius: 10px;
}
.showit { display: flex !important; }
.choosebtn.showit + #modbtn { display: none; } /* Hide notes, show select button */

.middlepanel.bigbuttons {
	position: relative;
	display: flex; gap: 5px;
	z-index: 1;
	overflow: clip;
}
.middlepanel.bigbuttons:not(:has(*)) { display: none; }
.middlepanel:not(:has(*)) + .bottompanel { flex-direction: column; }
.middlepanel:not(:has(*)) + .bottompanel > .choosebtn:before { border-bottom-left-radius: 0; width: 100%; }

.bigbuttons {
	overflow: visible;
	filter: drop-shadow(3px 3px 5px #0002);
}
.bigbuttons > .unavailable {
	opacity: .5;
	pointer-events: none;
	min-height: 56px;
	font-size: 15px;
}

@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: 15px; }
}

.strokeblast:not([src^='data:image']) { animation: strokeblast 1s ease-out forwards; }

@keyframes strokeblast {
	0% { outline-color: transparent; outline-offset: -20px; outline-width: 20px; }
	30% { outline-color: white; }
	31% { outline-width: 3px; }
	60% { outline-color: black; outline-width: 1px; }
	100% { outline-color: transparent; outline-offset: 20px; }
}
	/* DETAILS */

#details {
	width: 100%;
	display: none;
}

.noteadded:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	border-top: 35px solid var(--color2);
	border-left: 35px solid transparent;
	filter: drop-shadow(-2px -2px 1px #0006);
}
.noteadded:after {
	position: absolute;
	top: 2px;
	right: 3px;
	content: "\f013";
	font-family: 'FontAwesome';
	color: var(--headericons);
	/*transform-origin: 7px 8.25px;
	animation: gearspin .5s;
}

@keyframes gearspin {
	100% { transform: rotate(180deg); }*/
}

/* NEW info */
.dropbox {
	height: 30px;
	border-radius: 12px;
	display: block;
	margin: auto;
	font-size: 15px;
	padding: 0 3px;
	border: solid 1px gray;
	background: var(--color1);
	color: var(--colortext);
	text-align: center;
	width: 86%;
	max-width: 201px;
}

.dropbox:hover, .dropbox:focus {
	border: solid 1px var(--headericonsaccent);
	box-shadow: 0 0 0 500px #9992 inset;
}
option {
	text-align: center;
	color: var(--colortext);
	font-size: 15px;
}
option:disabled	{ background: var(--headercolor2); }
[data-theme="dark"] option:disabled	{ background: #bcdd; }
@-moz-document url-prefix() {
	option { font-weight: 300; }
	option:disabled { color: var(--headericons); background: var(--headercolor2) !important; }
}

#varianttable { width: 100%; }
#varianttable:not(:has(.earring)) ~ div:not(.stonequality), #varianttable:has(#varitbody:empty),
#variantinfo:has(+ #varianttable #varitbody:empty), #item2cart { display: none; }

.nextbtn {
	display: none; flex-direction: column;
	background: var(--color3); color: var(--headercolor1);
}
.cartbtn + div {
	display: flex; flex-direction: column; gap: 2px;
	width: 30px; margin-left: -3px;
	overflow: hidden;
	border-radius: 0 0 10px 0;
}
.cartbtn + div[title] { opacity: .65; cursor: not-allowed; }
.cartbtn + div > a { min-height: unset; font-size: 26px; /*justify-content: flex-start;*/ }
#loginbtn { display: flex; border-radius: 0 0 10px 10px; }
/*#options:has(#tab2.chosentab, #tab3.chosentab) .cartbtn, #options:has(#tab2.chosentab, #tab3.chosentab) .cartbtn + div { display: none; }*/

.cartbtn[data-instock]:after {
	content: '';
	background: url(/static/img/icons/instock.png) -13% 35% / 45% no-repeat;
	position: absolute;
	height: 100%;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 25%;
}

.bottompanel > .cartbtn {
	overflow: clip;
	min-width: 150px;
}
.bottompanel > .cartbtn:before {
	content: '';
	background: transparent;
	position: absolute;
	height: 400%;
	top: -150%;
	left: -50%;
	width: 200%;
	opacity: 0;
	background: linear-gradient(45deg, transparent 35%, white, transparent 65%);
	animation: cartattract 15s linear infinite;
}

@keyframes cartattract {
	0% { transform: rotate(0deg); }
	35% { opacity: 0; }
	50% { transform: rotate(360deg); opacity: .25; }
	65% { opacity: .25; }
	100% { transform: rotate(720deg); opacity: 0; }
}

/*[data-theme='dark'] .cartbtn[data-instock]:after { filter: invert(1); }
.cartbtn > span { z-index: 1; }*/

.namebox {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	flex-grow: 1;
	gap: 7px;
	position: relative;
}
.namebox a:hover, .namebox a:focus { opacity: .5; }

#colorselect > .namebox {
	max-width: 200px;
	margin: auto;
}
#colorselect > .namebox:has(.colorlabel:nth-child(6) input:not([value^="P"], [value="Silver"])) > .colorlabel {
	width: 27.5px;
}

#levelselect:has(+ #inlinefingdisplay), div:has(+ div + #levelselect + #inlinefingdisplay) {
	width: 130px; /* Targets level dropdown AND metal dropdown for better color alignment. */
}
#options:has(#chosencenter[value]) #levelselect:has(+ #inlinefingdisplay) .dropbox:has([value='Semi-Mount']:checked, [value='Polished']:checked) {
	width: 100%; /* Targets level dropdown for width containing the "w/ Center" text. */
}

#options input[type="radio"] { appearance: none; margin: 0; }
#options hr { display: none; width: 75%; margin: 15px auto 0; border: solid 1px var(--coolcolorhover); }

.colorlabel {
	display: flex; justify-content: center; align-items: center;
	font-size: 0; background: #feffff;;
	position: relative; margin: 0;
	width: 30px; aspect-ratio: 1 / 1;
	cursor: pointer; border-radius: 100%;
	box-shadow: 0 0 2px #000B; overflow: hidden;
	transform: scale(1);
}
.colorlabel:has(.coloropts:checked) { transform: scale(1.1); box-shadow: 0 0 2.5px 1px #0009; }
.colorlabel:has(.coloropts[value="White"]) { background: linear-gradient(135deg, #ccc7c3 15%, #f1f0ee 45%, #f1f0ee 55%, #ccc7c3 85%); }
.colorlabel:has(.coloropts[value="Yellow"]) { background: linear-gradient(135deg, #d6c07c 15%, #fff0bc 45%, #fff0bc 55%, #d6c07c 85%); }
.colorlabel:has(.coloropts[value="Rose"]) { background: linear-gradient(135deg, #c99c86 15%, #fedcc5 45%, #fedcc5 55%, #c99c86 85%); }
.colorlabel:has(.coloropts[value="White/Yellow"]) { background: linear-gradient(135deg, #ccc7c3 15%, #f1f0ee 35%, #f1f0ee 40%, #d7d4d0 48%, #e4d091 52%, #fff0bc 60%, #fff0bc 65%, #d6c07c 85%); }
.colorlabel:has(.coloropts[value="White/Rose"]) { background: linear-gradient(135deg, #ccc7c3 15%, #f1f0ee 35%, #f1f0ee 40%, #d7d4d0 48%, #d5aa94 52%, #fedcc5 60%, #fedcc5 65%, #c99c86 85%); }
.colorlabel:has(.coloropts[value="Tricolor"]) {
	/*(Old) background: conic-gradient(#feff8f 32%, #fcc 33%, #fcc 66%, #feffff 67%);*/
	/*background: conic-gradient(#d6c07c 0%, #fff0bc 14%, #fff0bc 19%, #d6c07c 32%, #c99c86 33%, #fedcc5 47%, #fedcc5 52%,  #c99c86 66%, #ccc7c3 67%, #f1f0ee 81%, #f1f0ee 86%, #ccc7c3 100%);*/
	/*(More even, but more jarring) background: conic-gradient(#d6c07c 0%, #fff0bc 11%, #fff0bc 22%, #d6c07c 32%, #c99c86 33%, #fedcc5 44%, #fedcc5 55%,  #c99c86 66%, #ccc7c3 67%, #f1f0ee 78%, #f1f0ee 89%, #ccc7c3 100%);*/
	background: conic-gradient(#e4d091 0%, #fff0bc 14%, #fff0bc 19%, #e4d091 32%, #d5aa94 33%, #fedcc5 47%, #fedcc5 52%,  #d5aa94 66%, #d7d4d0 67%, #f1f0ee 81%, #f1f0ee 86%, #d7d4d0 100%);
	/* ^ Lighter dark colors */
}
.colorlabel:has(.coloropts[value="Platinum"]):not(:only-child), .colorlabel:has(.coloropts[value="Palladium"]):not(:only-child),
.colorlabel:has(.coloropts[value="Silver"]):not(:only-child) { display: none; }
.colorlabel:has(.coloropts[value="Black"]) { background: linear-gradient(135deg, #484848 15%, #9f9f9f 45%, #9f9f9f 55%, #484848 85%); }

/*body:has(.coloropts:not([onclick]):checked) .colorlabel:after {
	content: "";
	background: url(/static/img/icons/no_preview.svg) center / 65% no-repeat;
	width: 100%; height: 100%;
	opacity: .23;
	position: absolute;
}
body:has(.coloropts:not([onclick]):checked) .colorlabel[title='Black']:after { filter: invert(1); }*/

#optionstop:has(option[value="10 KT"]:checked) .coloropts[value*="Rose"]:before,
#optionstop:has(option[value="10 KT"]:checked) .coloropts[value="Tricolor"]:before {
	content: "";
	top: 0;
	left: 0;
	background: url(/static/img/icons/roselock.svg) center / 72% no-repeat;
	opacity: .75;
	width: 100%; height: 100%;
	position: absolute;
}

#nocolorpreviews { font-size: 14px; }

.scrollsidebox {
	overflow-x: visible; overflow-y: hidden;
	display: block; margin: -5px auto 0;
}
.scrollinfo { overflow-x: scroll; width: 85%; padding: 0 10px 4px; mask: var(--fademask); -webkit-mask: var(--fademask); }

@supports not selector(::-webkit-scrollbar) { .scrollbox { scrollbar-color: #bdbdbd #cecece45; scrollbar-width: thin; } }
.scrollbox::-webkit-scrollbar { width: 10px; height: 8px; }
.scrollbox::-webkit-scrollbar-track { background-color: #cecece45; border-radius: 10px; }
.scrollbox::-webkit-scrollbar-thumb { background-color: #bdbdbd; border-radius: 10px; }
.scrollbox::-webkit-scrollbar-thumb:hover { background-color: #aaa; }
.scrollsidebox > div { display: flex; margin: auto; width: fit-content; }

.scrollboxarrows { position: relative; z-index: 1; } 
.scrollboxarrows  + .scrollsidebox { margin: -10px auto 0; } 
.scrollleft, .scrollright { position: absolute; height: 85px; font-size: 32px; width: 6%; cursor: pointer; text-shadow: 0 0 5px #0003; }
.scrollleft:hover, .scrollright:hover, .scrollleft:focus, .scrollright:focus { opacity: .6; }
.scrollleft { left: 0; } .scrollright { right: 0; }

:root {
	--fingpos: 33%;
	--cachedpos: var(--fingpos);
}

@supports not (-moz-appearance: none) {
	input[type='range'][list='fsizes'] { -webkit-appearance: none; }
	
	input[type='range'][list='fsizes']::-webkit-slider-runnable-track {
		height: 10px;
		-webkit-appearance: none;
		color: #13bba4;
		border-radius: 25px;
		background: linear-gradient(90deg, var(--headericons) var(--fingpos), var(--color2) 0%);
		outline: solid 1px #0002;
		outline-offset: -1px;
	}
	
	body:has(.popfingers[open]) #inlinefingdisplay input[type='range'][list='fsizes']::-webkit-slider-runnable-track {
		background: linear-gradient(90deg, var(--headericons) var(--cachedpos), var(--color2) 0%);
	}

	input[type='range'][list='fsizes']::-webkit-slider-thumb {
		width: 20px;
		-webkit-appearance: none;
		height: 20px;
		margin-top: -5px;
		border-radius: 100%;
		cursor: ew-resize;
		background: var(--headertextcolor);
		border: solid 2px var(--headercolor3);
		box-shadow: 0 0 2px var(--colortext);
		mix-blend-mode: luminosity;
	}

	input[type='range'][list='fsizes']:hover { filter: brightness(0.9); }
}

select[name=quality]:has(option[value="Lab Grown VS-SI1, E/F/G"]:checked) { font-size: 13px; }

select[name=quality] > option { background-color: #fff; }
select[name=quality] > option[value*=", G"] { background-color: #fffefa; }
select[name=quality] > option[value*=", H"] { background-color: #fefdf7; }
select[name=quality] > option[value*=", I"] { background-color: #fefbee; }
select[name=quality] > option[value="Champagne"] { background-color: #fec; }
select[name=quality] > option[value="Black Diamonds"] { background-color: #eee; }
[data-theme="dark"] select[name=quality] > option { background-color: var(--color1) !important; }
[data-theme="dark"] select[name=quality] > option[value*=", G"] { color: #fffefa; }
[data-theme="dark"] select[name=quality] > option[value*=", H"] { color: #fefdf7; }
[data-theme="dark"] select[name=quality] > option[value*=", I"] { color: #fefbee; }
[data-theme="dark"] select[name=quality] > option[value="Champagne"] { color: #fec; }
[data-theme="dark"] select[name=quality] > option[value="Black Diamonds"] { color: #ddd; }

#sidebyside { display: flex; justify-content: center; }
#sidebyside > div { width: 50%; }

.optionstable {
	width: 50%; margin: -8px auto -12px;
	text-align: center; text-wrap: nowrap;
	border-spacing: 0 8px; font-size: 15px;
	line-height: 1.25em;
}
#meleetable { margin: -15px auto -5px; }
.meleeinfo { margin-top: -15px; }

.optionstable > thead > tr { text-shadow: 0 0 5px var(--shadowcolor), 0 0 5px var(--shadowcolor); transform: translateY(4px); }
.optionstable td, #pegheadtable th { background: #0000001B; }
.optionstable td, .optionstable th {
	height: 25px; padding: 0 5px;
	position: relative;
}
.optionstable th {
	height: 20px;
	font-weight: 300;
	vertical-align: bottom;
}
.optionstable td > font { vertical-align: top !important; }
.optionstable > tbody > tr > td:first-child:not(:has(img)) { border-radius: 50px 0 0 50px; }
.optionstable > tbody > tr > td:first-child:has(img) {
	background: linear-gradient(90deg, var(--color1) 50%, #0000001B 70%);
	padding: 1px 0;
	line-height: 1px;
}
.optionstable td:first-child > img {
	position: absolute; top: -10%; left: 0;
	width: 100%; height: 120%;
	filter: unset; opacity: 0.75;
}
[data-theme="dark"] .optionstable td:first-child > img { filter: contrast(0.35) brightness(2) drop-shadow(0 0 4px #000A); }

.optionstable td:first-child:before, .optionstable td:first-child:after {
	content: attr(data-shape);
	z-index: 1;
	position: relative;
	font-size: 16px;
	pointer-events: none;
}
.optionstable td:first-child:before {
	position: absolute;
	-webkit-text-stroke: 3px var(--color1);
	opacity: .85;
	/*background: var(--color1);
	border-radius: 100%;*/
}

.optionstable td:nth-child(2) { width: 30px; }
#meleetable td, #meleetable th { padding: 0 9px; }
#meleetable .qty:before { font-size: 14px; content: "x"; position: absolute; left: 2px; top: 4.5px; }
/*.optionstable td > span { font-size: 12px; }*/
td.last, #meleetable td:last-child { border-radius: 0 50px 50px 0; /*padding: 1px 2px 1px 0;*/ min-width: 50px; }
#meleetable thead:has(+ tbody:empty) { visibility: collapse; }

#meleetable:has(tr:nth-child(5)) + #meleecollapser {
	width: 100%;
	background: var(--color1);
	display: block;
	text-align: center;
	box-shadow: 0 -7px 10px 5px var(--color1);
	z-index: 1;
	position: relative;
	font-size: 13px;
	margin: -15px 0 6px;
}
#meleetable:has(+ #meleecollapser) tr:nth-child(n + 5), #meleecollapser { display: none; }

/*.defaultstone, #options:not(:has(#chosenpeghead)):has([name=level] [value=Complete]:checked)*/ .semistone { display: none; }
#options:not(:has(#chosenpeghead)):has([name=level] [value=Complete]:checked) .defaultstone {
	display: table-cell;
	margin: auto;
	width: 500px !important;
	font-weight: 300;
}

.assembly { text-align: center; color: var(--colorlink); display: none; cursor: pointer; }
input[type="hidden"][value] + .assembly { display: block; }
.assembly:hover, .assembly:focus-within {
	color: var(--headertextcolorhover);
	text-decoration: underline;
}
.editpeg > a:hover, .editpeg > a:focus,
.selectedCinfo td > a:hover, .selectedCinfo td > a:focus {
	color: var(--mainblue);
	text-decoration: underline;
}

#pegheadtable { border-spacing: 0 3px; font-size: 15px; }
#pegheadtable th { text-align: right; border-radius: 50px 0 0 50px; padding: 2px 7px; }
#pegheadtable tr:not(:last-of-type) td { text-wrap: nowrap; border-radius: 0 50px 50px 0; padding: 2px 7px; border: solid 2px #0000001B; }
#pegheadtable tr:first-child > td:first-of-type { cursor: copy; }
.editpeg { position: absolute; left: 0; width: 100%; margin-top: 5px; text-align: center; }
.editpeg > a { opacity: 0.9; padding: 6px; }

.pressingvalue { border-top: solid 1px #FFF4; min-width: 83%; margin-top: 2px; padding-top: 2px; position: relative; }
.nextbtn > .pressingvalue { border-color: var(--headercolor1); }
#costtable.loadingprice { border-width: 0 1px; }
.loadingprice:before, .loadingprice:after {
	content: "";
	width: calc(100% - 2px); height: calc(100% - 2px);
	position: absolute; top: 1px; left: 1px;
	opacity: .55; filter: invert(1); z-index: 1;
	background: black url(/static/img/icons/loading.svg) center 50% / 25% no-repeat;
}
#costtable.loadingprice:before, #costtable.loadingprice:after { background-position-y: 60%; background-size: 14%; }
/*#stockholder .loadingprice:before, #stockholder .loadingprice:after { background-position-y: 10%; background-size: 40%; }*/

.asterisk {
	position: absolute; bottom: -20px;
	font-size: 12px; text-align: center;
	width: 100%; opacity: .9; z-index: 1;
}

.metalsheen {
	background: linear-gradient(110deg, #ccc7c3 0%, #f1f0ee 20%, #d7d4d0 50%, #f1f0ee 80%, #ccc7c3 100%);
	border: solid 1px gray; border-radius: 7px;
	text-align: center; color: #000D;
	max-height: 20px; padding: 3px 0;
}
.flexit { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 10px; margin: auto; padding: 10px; }

.flexit:has(+ #engraving) { overflow-y: scroll; height: 105px; }
.popupbox:has(#engraving) { width: 350px; }
.popupbox:has(#engraving) .fontlabel { width: 15%; }

.fontlabel {
	width: 20%; height: 38px; margin: 0;
	color: black; background-color: #0001;
	border-radius: 5px; flex-grow: 1;
	display: flex; align-items: center; justify-content: center;
}
.fontlabel > label { pointer-events: none; }
.fontlabel > label > input {
	position: absolute;
	appearance: none;
	margin: 0;
}
.fontlabel:hover, .fontlabel:focus { background-color: #0002; }
.fontlabel:has(input:checked) { background-color: #2c89d8; color: white; }
.fontlabel:has(input:checked):hover, .fontlabel:has(input:checked):focus-visible { background-color: #2c89d8cc; }

#copycattext { margin: auto; user-select: none; pointer-events: none; opacity: 0; height: 0; white-space: pre; }

.popmediaDL .fontlabel:has(input:checked) { background-color: #2c89d855; color: black; }
.popmediaDL .fontlabel:has(input:checked):hover, .popmediaDL .fontlabel:has(input:checked):focus-visible { background-color: #2c89d8cc; color: white; }
.popmediaDL .fontlabel > label > input {
	appearance: auto;
	margin-right: 7px;
	position: relative;
}
.popmediaDL .flexit { padding-top: 0; width: 90%; }
.popmediaDL:has(input[value="images"]:not(:checked)) .fontlabel:has(input[value="cat"]),
	.popmediaDL .flexit:not(:has(:checked)) + .flexit > .fontlabel:has(input[value="cat"]) { text-decoration: line-through; opacity: .5; }

.redownload { width: fit-content; margin: -15px auto 10px; cursor: pointer; }

.popmediaDL ul {
	margin: 0;
	text-align: left;
	font-size: 14px;
}

.zstatus {
	background: #f2f8f8;
	width: fit-content;
	margin-left: auto;
	margin-right: auto;
	padding: 0 10px;
	border-radius: 25px;
}

.stonepreview, #pegheadpreview {
	position: relative;
	width: 130px;
	border: solid 1px gray;
	background-color: gray;
	border-radius: 7px;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	margin: 3px auto;
}

.stonepreview > a:not(.pegview), #pegheadpreview > a:not(.pegview) {
	flex-grow: 1;
	text-align: center;
	font-size: 13px;
	background-color: var(--color1);
	width: 30%;
}

.stonepreview i, #pegheadpreview i {
	font-size: 18px;
	opacity: .75;
	padding-bottom: 2px;
}

.stonepreview:not(:has(> [src])), .stonepreview > .placeholderBG:not([src]) { display: none; }
.stonepreview > img[src^='data:image'] ~ div ~ a, .stonepreview > img[src^='data:image'] ~ a { display: none; }
/*.stonepreview { top: 4px; right: 4px; border-radius: 0 0 0 7px; box-shadow: -3px 3px 4px #00000009; border-left-width: 4px; }
#pegheadpreview { top: 4px; left: 4px; border-radius: 0 0 7px; box-shadow: 3px 3px 4px #00000009; border-right-width: 4px; }*/
.stonepreview > p, #pegheadpreview > p {
	font-size: 16px;
	margin: 0 !important;
	padding-bottom: 1px;
	text-wrap: nowrap;
	text-align: center;
	background: var(--color1);
	border-radius: 6px 6px 0 0;
}
.stonepreview > .placeholderBG, #pegheadpreview > img {
	width: 130px; height: 110px; outline: solid 0 transparent; object-fit: contain; border: 0; z-index: 1;
}
.cartadder > .placeholderBG, .selectedCinfo > .placeholderBG, .selectedPinfo > .placeholderBG {
	width: 80px; height: 80px; outline: solid 0 transparent; object-fit: contain; border: 0;
}
.stonepreview > .placeholderBG[src*="nostone.jpg"] { background: white; }
#pegheadpreview > img {
	background: white;
	animation-delay: -0.35s;
}

/*#pegheadpreview > img:has(+ .pegview) { display: none; }*/

.pegview {
	position: absolute;
	left: 0;
	top: 22px;
	width: 130px;
	height: 110px;
	z-index: 1;
}
.pegview > img {
	width: 28px;
	opacity: 1;
	padding: 1px 2px 3px 4px;
	filter: invert(1) drop-shadow(0 0 2px white) drop-shadow(0 0 2px white);
	float: right;
}
.pegview:hover > img, .pegview:focus > img { opacity: 0.5; }
.stonepreview > a[href]:not(.pegview):hover, #pegheadpreview > a[href]:not(.pegview):hover,
.stonepreview > a[href]:not(.pegview):focus, #pegheadpreview > a[href]:not(.pegview):focus { background-color: var(--color2); }
.stonepreview > a[href]:not(.pegview):hover > i, #pegheadpreview > a[href]:not(.pegview):hover > i,
.stonepreview > a[href]:not(.pegview):focus > i, #pegheadpreview > a[href]:not(.pegview):focus > i { opacity: 1; }

#previewshape {
	position: absolute;
	left: 4px; bottom: 88px;
	height: 55px; /*clamp(45px, 13vw, 55px)*/
	background-color: var(--color1);
	border: solid 0 var(--color1);
	border-top-right-radius: 7px;
	width: 95px;
	
	display: flex;
	
	overflow: hidden;
	transition: width .5s;
}
#previewshape > * {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
#previewshape span, #previewshape a {
	width: 61px;
	margin-left: 3px;
	font-size: 14px;
	pointer-events: none;
}
#previewshape span:after { content: ':'; }
#previewshape > button:hover, #previewshape > button:focus-visible,
#shapeopts > button:hover, #shapeopts > button:focus-visible { background-color: var(--color2); }
#previewshape > button:last-child { cursor: pointer; }
#previewshape > button:not(:last-child) {
	cursor: pointer;
	padding: 0 3px;
	transition: visibility .5s;
	visibility: hidden;
	border-radius: 5px;
}
#previewshape > button > img, #shapeopts > button > img {
	height: 35px; /*clamp(27px, 8vw, 35px)*/
}
[data-theme='dark'] #previewshape > button > img { filter: contrast(0.35) brightness(2) drop-shadow(0 0 4px #000A); }

#previewshape:not(:has(button:nth-of-type(3))), body:not(:has(#previewshape button:nth-of-type(3))) #shapeDL {
	display: none;
}

#selectedshape { box-shadow: 0 0 0 2px var(--mainblue) inset; }
#PSexpand {
	position: absolute;
	right: 0; top: 0;
	height: 100%;
	width: 30px;
	
	background-color: var(--color1);
	box-shadow: 0 0 0 100px #BBB1 inset;
}
/*#PSexpand:hover, #PSexpand:focus { box-shadow: 0 0 0 100px #0003 inset; }*/
#PSexpand:before {
	content: "\f105";
	font-family: 'FontAwesome';
	font-size: 32px;
	transition: transform .5s;
}
.showshapes > #PSexpand:before {
	/*content: "\f104";*/
	transform: scaleX(-1);
}
#previewshape.showshapes > button:not(:last-child) { visibility: visible; }
#previewshape.showshapes { width: 441px; z-index: 1; }

#shapeopts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 10px auto 25px;
	gap: 10px;
}
#shapeopts > button { padding: 7px 6px 4px; border-radius: 5px; cursor: pointer; }
#shapeopts:not(:has(:nth-child(9))) { width: 260px; }
#shapeopts:not(:has(:nth-child(7))) { width: 200px; }
#shapeopts:not(:has(:nth-child(6))) { width: 300px; }

#previewcolorstone {
	display: flex;
	align-items: center;
	position: absolute;
	height: 55px;
	bottom: -45px;
	left: 4px;
	/*background-color: var(--color1);
	border-top-left-radius: 7px;*/
}
#previewcolorstone > label {
	font-size: 14px;
	cursor: pointer;
}
#previewcolorstone > label > input {
	vertical-align: top;
}

/*#productvideo[style="display: block;"] ~ #previewshape,*/
/*#productinfo3[style="display: none;"] ~ #previewcolorstone { display: none; }*/
#productvideo:has(~ #previewshape:not(.showshapes) button:nth-of-type(3))::-webkit-media-controls-enclosure {
	width: calc(100% - 98px);
	margin-left: auto;
}
#productvideo:has(~ #previewshape.showshapes)::-webkit-media-controls-enclosure {
	margin-bottom: 50px;
}

.behind { z-index: -1; position: absolute; }

.popupcancel { background-color: #edf2fd; color: black; }

.fings {
	text-align: center; font-size: 24px;
	margin: 10px auto 0; width: 100px;
	border: solid 1px gray; border-radius: 10px;
}
select.fings { margin: 8px auto; padding-left: 10px; }
.popupbox select.fings:hover, .popupbox select.fings:focus { outline: 1px solid black; }
select.fings > option { font-size: 18px; color: inherit; }
select.fings > option:disabled { color: #999; background: lightgray; }
.disabledtext {
	display: none;
	margin: 5px auto 0 !important;
	font-size: 14px;
	opacity: .8;
	text-align: center;
}
.disabledtext:has(+ select > option:disabled) { display: block; }
#fingerrange { width: 280px; margin: 2.5px 10px 10px; }
#sizes {
	display: flex; justify-content: space-between;
	font-size: 14px; margin-right: 17px;
}
#sizes > option { width: 30px; }
#sizes + div { margin-top: 10px; }
.popupbox > div + p { margin-top: 0px; }
.fings::-webkit-outer-spin-button, .fings::-webkit-inner-spin-button { margin-left: -15px; }

.onlyonevari { margin: -15px auto; }
.onlyonevari, .onlyonevari > h3, .onlyonevari > select { display: none; }
.onlyonevari:has(#variloading[style]) { display: block; }

/*#inlinefingdisplay {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}*/

#fingernumberopts { /*margin: 0 0 0 30px; }
#fingernumberopts, #fingernumberopts + a.restart {*/
	margin-top: 0;
	position: relative;
	display: block;
	font-size: 19px;
}
#fingerrangeopts {
	width: 96%;
	max-width: 300px;
	display: block;
	margin: 3px auto 8px;
}

#calibutton { opacity: .5; }
#calibutton:hover, #calibutton:focus { opacity: 1; }

.cardbox {
	background: #edf2fd;
	font-size: 14px; text-align: left;
	padding: 3px 10px; border-radius: 0 0 15px 15px;
}
#cardholder { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 5px; }
#cardholder > *:not(.nothalf) { /*width: 50%;*/ margin: 10px 0 0; flex-grow: 1; }
#cardref {
	aspect-ratio: 1.586; object-fit: contain; transform-origin: top;
	border: solid 4px #edf2fd; border-radius: 15px; background: #edf2fd;
	width: 275.32216146322287px;
}
.nothalf { margin: 0; }

.popfingers *:not(label):has(~ .cardbox > #cardholder:not(.hidden)) { display: none; }

.ringholder {
	display: flex; justify-content: center; align-items: center;
	margin: 0 5px; height: 280px; overflow: visible;
	pointer-events: none;
}
#fingerring {
	aspect-ratio: 1/1; font-size: 18px;
	border: solid 4px #9da3bf; border-radius: 100%;
	display: flex; justify-content: center; align-items: center;
}
#fingerring:before {
	content: "";
	position: absolute; top: -15px;
	width: 26px; height: 15px;
	background: #9da3bf;
	clip-path: polygon(25% 0, 75% 0, 100% 25%, 50% 100%, 0 25%);
}
.popupbox .underline {
	text-decoration: underline;
	color: var(--mainblue);
	text-align: center;
	display: block;
}
.popupbox .underline:focus, .popupbox .underline:hover {
	color: darkcyan;
	filter: saturate(2);
}
.popupbox .status .underline { display: inline; }

input + .restart {
	color: black;
	position: absolute;
	margin: 10px 0 0 5px;
	padding: 5px 10px 8px 5px;
}
.restart:hover, .restart:focus {
	color: #0006;
}

#diffs > div > div {
	font-style: italic; font-size: 15px;
	padding: 5px 0 10px; margin: 0 auto 5px;
	border: solid 2px var(--coolcolorhover);
	border-radius: 10px; position: relative;
	overflow: hidden; width: 90%;
}
#diffs > div > div:before {
	content: '\f0da'; font: 36px 'FontAwesome', normal;
	position: absolute; top: 40%;
}
#diffs > div > div > h3 { font-size: 17px; margin: 0; }
#diffs > div > div > span {
	position: absolute; top: 0; background: var(--coolcolorhover);
	text-overflow: ellipsis; text-wrap: nowrap; overflow: hidden;
	padding: 0 5px 2px; max-width: 95px;
}
#diffs > div > div > span:first-of-type { left: 0; opacity: .75; font-size: 14px; border-radius: 0 0 4px 0; }
#diffs > div > div > span:last-of-type { right: 0; border-radius: 0 0 0 4px; }
#diffs > div > div > *:nth-child(4) { opacity: .75; }
#diffs > div > div > div { max-width: 50%; margin: 0 auto; position: relative; }
#diffs #meleetable { max-width: 50%; width: unset; border-spacing: 0 7px; height: fit-content; margin-left: 13px; }
#diffs #meleetable tbody { position: relative; top: -4px; }
#diffs #meleetable td { width: unset; height: 20px; padding: 1px 5px; }
#diffs #meleetable td:nth-child(2):before { left: 1.5px; top: 4px; font-size: 11px; }

.formbtn {
	background: #f8fcff;
	color: var(--mainblue);
	height: 46px;
	/*width: 161px;*/
	cursor: pointer;
	border: solid 1px var(--mainblue);
	border-radius: 7px;
	display: flex;
	align-items: center;
	margin: 0 auto -2px;
	padding: 0 6px;
	font-size: 14px;
	line-height: 16px;
	transition: opacity .35s, filter .35s;
}
.formbtn:before {
	content: "+";
	font-size: 28px;
	font-weight: bold;
	margin: 0 4px 0 -6px;
	padding: 12px 3px 16px 4px;
	background: #055c8e29;
	border-radius: 5px 0 0 5px;
}
.formbtn:hover, .formbtn:focus { border-width: 2px; filter: saturate(1.5) brightness(0.95); }
/*.formbtn:hover:before, .formbtn:focus:before { margin: 0 5px 0 -7px; }*/
.formbtn > span { flex-grow: 1; }
.formbtn > span > span { font-weight: 600; /*font-size: 14px;*/ }
.formbtn:has(span[data-count="0"]) {
	pointer-events: none;
	filter: saturate(0);
	opacity: .65;
}

.formbtn[onclick*="outerredirect"]:before {
	content: url(/static/img/icons/popout.svg);
	height: 14px;
	width: 17px;
	padding-bottom: 18px;
	filter: contrast(0.25) sepia(3) hue-rotate(165deg) contrast(2);
}

#nopegedit {
	border-radius: 0 0 6px 6px;
	line-height: 14px;
	padding: 4px 0;
}

#nomelee, #nocolorpreviews {
	color: var(--headertextcolorhover);
	display: none;
}

#nocenter { color: var(--headertextcolorhover); }

/*#options:has([name=level] [value=Semi-Mount]:checked, [name=level] [value=Polished]:checked) #centertable,
#options:has([name=level] [value=Semi-Mount]:checked, [name=level] [value=Polished]:checked) #centertable2, #pegheadtable,*/
#options:not(:has([name=level] [value=Complete]:checked)) #centerguide,
#options:not(:has([name=level] [value=Complete]:checked, [name=level] [value='Clip & Ship']:checked)):has(#chosencenter[value]) #centerguide2 {
	display: block;
	margin: 7px auto 0;
}

#options:has(#chosenpeghead:not([value]), .centerinfo:not(.disabled) #chosencenter[value]) #centerguide,
#options:has(.centerinfo:not(.disabled) #chosencenter2[value]) .centerinfo #centerguide2,
#options:has(#chosenpeghead:not([value]), #chosencenter[value] ~ .stonepreview:not(.disabled)) #centertable,
#options:has(#chosenpeghead:not([value])) [name="level"]:has([value="Complete"]:checked) #centertable,
#options:has(#chosencenter2[value] ~ .stonepreview:not(.disabled)) #centertable2,
#options:has(#chosenpeghead:not([value])) [name="level"]:has([value="Complete"]:checked) #centertable2,
#options:has(#chosencenter[value]) #centerstonebtn,
#options:has(#chosencenter2[value]) #centerstonebtn2,
#options:has(#chosencenter[value]) .lvlmsg > span:first-of-type,
.centerinfo.disabled > hr,
.centerinfo.disabled > .optionstable,
.centerinfo:not(:has(h3)), #pegweight, #centerweight, #center2weight,
#options:has([name=level] [value=Polished]:checked, [name=level] [value='Clip & Ship']:checked) .meleeinfo .middlephrase:has(+ #nomelee) { display: none; }

#pegheadpreview:has(> [src]) ~ #pegweight,
.stonepreview:not(.disabled):has(> [src]:not([src^='data:image'])) ~ #centerweight,
.stonepreview:not(.disabled):has(> [src]:not([src^='data:image'])) ~ #center2weight { display: flex; }

.lotnum { cursor: copy; color: var(--headertextcolorhover); }

#options:has([name=level] [value=Polished]:checked, [name=level] [value='Clip & Ship']:checked) #nomelee,
#colorselect:has(div > :nth-child(3)):not(:has(.coloropts[onclick])) > h3 > #nocolorpreviews { display: inline; }

.lvlmsg > span + span { display: none; }
#options:has(#chosencenter[value]) .lvlmsg > span + span { display: inline; }

#quickbtns {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin: 6px 5px 25px 0;
	width: 100%;
}

#quickbtns > *:hover, #quickbtns > *:focus, #back2gallery > a:hover, #back2gallery > a:focus { opacity: 1; }
#back2gallery > a:focus-visible { outline: solid 1px var(--headertextcolor); }
#productinfo2:focus-visible {
	outline: solid 1px var(--headertextcolor);
	border-radius: 8px;
	padding-left: 8px;
	margin-left: -6px;
	outline-offset: -2px;
}

#errbtn:hover:after, #errbtn:focus:after { content: "Report"; }
.favbtn:hover:after, .favbtn:focus:after { content: "Save"; }
#QRbtn:hover:after, #QRbtn:focus:after { content: "Share"; }
.favbtn:last-child:hover:after, .favbtn:last-child:focus:after { content: "Reset"; }

#quickbtns > a:after {
	position: absolute; bottom: -15px; left: -50%;
	width: 200%; text-align: center;
	display: block;
	color: var(--colortext);
	filter: var(--dayinvert);
	font-size: 12px;
}

#QRbtn, #errbtn, .centerexpander:not(.pegview) {
	width: 24px; height: 24px;
	color: transparent;
	background-image: url(/static/img/icons/QR.png);
	background-size: 100% 100%;
	filter: var(--dayinvert);
	opacity: 0.5;
	position: relative;
}

.centerexpander:not(.pegview) {
	background-image: url(/static/img/icons/more_info.png);
	display: none;
	opacity: .5;
	width: 22px; height: 22px;
	margin-left: 5px;
	vertical-align: bottom;
	cursor: pointer;
}
#options:not(:has([value="Complete"]:checked)) .semistone.lotnum:not(:empty) + .centerexpander:not(.pegview) { display: inline-block; }
/*product-display:has(.semistone.lotnum:not(:empty)) .reviewtable .centerexpander {*/
#options:not(:has([value="Complete"]:checked)) #RTcenter > span:not(:empty) + .centerexpander:not(.pegview),
#options:not(:has([value="Complete"]:checked)) #RTcenter2 > span:not(:empty) + .centerexpander:not(.pegview) {
	display: inline-block;
	width: 19px; height: 19px;
	margin: -1px 7px;
}
.centerexpander:not(.pegview):hover, .centerexpander:not(.pegview):focus { opacity: 1; }
.selectedPinfo { margin: 10px auto 35px; }
.selectedCinfo { margin: 0 0 30px; }
.selectedCinfo h3 { margin: 0 0 5px; text-align: left; color: black; }
.selectedCinfo td > a { color: darkcyan; text-decoration: underline; }

.centerinfo {
	display: flex;
	opacity: 1;
	text-decoration: none;
	margin-bottom: 10px;
}
#options:not(:has(#chosenpeghead)):has(option[value="Complete"]:checked) .centerinfo { margin-bottom: 10px; }
body:has(#chosencenter2) #options:has(option[value="Complete"]:checked) .centerinfo { margin-bottom: 40px; }
.centerinfo > div {
	width: 49%;
	flex-grow: 1;
}
#options:has(option[value="Complete"]:checked) .stonepreview.disabled,
#options:not(:has(#chosenpeghead)):has(option[value="Complete"]:checked) .assembly,
#options:not(:has(#chosenpeghead)):has(option[value="Complete"]:checked) #centerweight,
#options:not(:has(#chosenpeghead)):has(option[value="Complete"]:checked) #centerstonebtn,
#options:has(#centertable td[data-shape="PL"]) #centerstonebtn,
#options:has(option[value="Complete"]:checked) #center2weight,
#options:has(option[value="Complete"]:checked) #centerstonebtn2,
.centerinfo.disabled #centerstonebtn, .centerinfo.disabled #centerstonebtn2,
.centerinfo.disabled #setcenter, .centerinfo.disabled #setcenter2,
.centerinfo.disabled #centerweight, .centerinfo.disabled #center2weight,
.centerinfo.disabled .stonepreview {
	display: none;
}

#errbtn { background-image: url(/static/img/icons/flag.png); }
.favbtn { font-size: 20px; opacity: 0.5; position: relative; }
#quickbtns > .favbtn:after { filter: unset; }

/*#instockbtn.matchingstock {
	font-size: 18px;
	outline-color: var(--colorlink);
}
#instockbtn.matchingstock:before {
	outline-color: var(--colorlink);
}*/

a#instock {
	color: var(--colorlink);
	text-decoration: underline;
	text-underline-offset: 2px;
	margin-top: -1px;
	display: block;
}

#infoblock1 > .popupbox > p:has(#instock) { transition: opacity .25s; }

#totalprice { font-weight: bold; }
#options:has(input[name="quantity"][value="1"]) #totaltext > span:last-child,
#options:has(input[name="quantity"]:not([value="1"])) #totaltext > span:first-child { display: none; }

#QRframe { resize: none; margin: 5px auto 30px; border: none; width: 100%; }

.goaddnotes {
	font-size: 13px; text-align: center;
	width: 100%; display: none;
}
#options #stonenote, #options #pegnote, p.defaultstone { display: none; text-align: center; font-size: 14px; margin: -10px auto 0; }
#options #pegcenternote, #options #pegcenterguide, #options #centerguide, #options #centerguide2 {
	text-align: center;
	font-size: 14px;
	margin: 13px auto -13px;
	text-wrap: balance;
	width: 100%;
}
#options:has(#chosenpeghead[value]) #pegcenternote, #pegcenterguide, #centerguide, #centerguide2 { display: none; }
#options:has(#chosenpeghead[value]):not(:has(#chosencenter[value])) #pegcenterguide,
#options:not(:has(#chosenpeghead[value], #chosencenter[value]))) #centerguide,
#options:not(:has(#chosencenter2[value])) #centerguide2 {
	display: block;
	margin: 13px auto 0;
}

p.defaultstone {
	width: 420px !important;
	font-size: 18px;
	text-wrap: balance;
}

#centertable.incompatible img {
	filter: var(--dayinvert);
	transform: scale(0.9);
}
#centertable.incompatible .defaultstone > span {
	position: absolute;
	left: 2px;
	top: 5px;
	font-size: 14px;
}

#options:has([name=level] [value='Clip & Ship']:checked) #centerguide { margin: 0 auto; }
#options:has([name=level] [value='Clip & Ship']:checked) #pegnote { display: block; margin-top: -20px; }
#options:has([name=level] [value='Clip & Ship']:checked) .pegdiv > *:not(h3),
#options:has([name=level] [value='Clip & Ship']:checked) .centerinfo > div > *:not(h3) { display: none !important; }

#options:has(#chosencenter2) p.defaultstone { position: absolute; }
#options:has(#chosencenter2:not([value])) #centerguide,
#options:has(#chosencenter2) .centerinfo:has(.stonepreview.disabled) #centerguide { position: absolute; }
#options:has(#chosencenter2):not(:has([name=level] [value=Complete]:checked, #chosencenter[value], #chosencenter2[value])) .optionstable:not(#meleetable),
#options:has(#chosencenter2) #optionstop:has([name=level] [value="Clip & Ship"]:checked) .centerinfo:has(.stonepreview.disabled) .optionstable:not(#meleetable) { margin-top: 15px; }
#options:not(:has(#chosenpeghead)):has([name=level] [value=Complete]:checked) .centerinfo:has(.defaultstone) .optionstable { margin: -12px auto 0; }

.colorlabel:has(.coloropts[value*='White/']:checked, .coloropts[value='Tricolor']:checked) ~ .goaddnotes,
#options:not(:has(#pegcenternote)) .disabled:has(h3) + #stonenote, #options #stonenote:has(+ .disabled) { display: block; }

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

textarea.popupinput {
	resize: both;
	min-height: 100px; max-height: 300px;
	min-width: 274px; max-width: 424px;
}

#options .weight { font-size: 14px; font-weight: 500; margin: 3px auto 0; gap: 25px; }
/*#options .weight:not(:has(:only-child)) { justify-content: space-between; }*/
.weight > span > span:first-child { opacity: .85; font-size: 13px; }
#levelweight > span > span:last-child { opacity: .7; font-size: 13px; }
#levelweight > span:last-child, #IW2holder, label[for="IW2holder"] { display: none; }

#options:has(option[value='Clip & Ship']:checked) #IWholder,
#options:has(option[value='Clip & Ship']:checked) label[for="IWholder"],
[name=level]:has([value='Clip & Ship']:checked) + #levelweight > span:first-child { display: none; }

#options:has(option[value='Clip & Ship']:checked) #IW2holder,
#options:has(option[value='Clip & Ship']:checked) label[for="IW2holder"],
[name=level]:has([value='Clip & Ship']:checked) + #levelweight > span:last-child { display: block; }

/*variant and in-stock tables */
.varitable, .stocktable {
	min-width: 95%;
	text-align: center;
	text-wrap: nowrap;
	border-collapse: collapse;
	font-weight: 300;
	font-size: 14px;
	line-height: 14.5px;
	position: relative;
}
.varitable:has(tr:nth-child(11)) { font-size: 13px; line-height: 12px; }
.varitable:has(tr:nth-child(11)) td > a { padding-top: 3px; }
.varitable:has(tr:nth-child(21)) { line-height: 11.5px; }
/*.varitable tr:not(:first-child) { height: 26px; }*/
.varitable td, .varitable th {
	padding: 3px 3.5px;
	position: relative;
	border-top: solid 1px #999;
	border-bottom: solid 1px #999;
	min-width: 16px;
}
.varitable td:first-child, .varitable.earring th:first-child { border-left: solid 1px #999; }
.varitable:not(.earring) th:first-child { border-top: none; }
.varitable td:last-child, .varitable td:first-child,
	.varitable th:last-child, .varitable th:first-child { border-right: solid 1px #999; }

.butmensbands:not(:has([data-weight="Light"])) .emptyL,
.butmensbands:not(:has([data-weight="Standard"])) .emptyS,
.butmensbands:not(:has([data-weight="Heavy"])) .emptyH { display: none; }

.varitable td:has(a) {
	padding: 0;
	border-left: solid 1px #9999;
	border-right: solid 1px #9999;
}
.varitable td > a {
	padding: 4px 0 3px;
	width: 100%;
	height: 100%;
	display: block;
	background-image: linear-gradient(hsla(0, 0%, 100%, 0.6), hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 0%, 0.15) 75%, hsla(0, 0%, 100%, 0));
}
.varitable td > a > span {
	font-size: 9px;
	line-height: 0;
	margin-left: 1px;
}
[data-clr="W"], [data-clr="Y"], [data-clr="R"] { color: black; }
[data-clr="W"] { background-color: white; }
[data-clr="Y"] { background-color: #feff8f; }
[data-clr="R"] { background-color: #fcc; }
.varitable.loadingprice:before { opacity: .75; width: calc(100% - 1px); }
.varitable.loadingprice:after {
	content: "Checking center stone size against the selected variation...";
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	background: unset;
	text-wrap: balance;
	font-size: 18px;
	line-height: 19px;
	top: 52px;
	opacity: .75;
	text-shadow: 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black, 0 0 4px black;
}
.varitable #currentvari {
	outline: solid 1px var(--mainblue);
	background-color: #9ae5ff;
	color: var(--mainblue);
	text-shadow: 0 1px 4px white, 0 1px 4px white;
	background-image: linear-gradient(0deg, #ffffff99, #ffffff00 35%, #00000026 85%, #ffffff00);
	position: relative;
	z-index: 1;
}
#variantinfo { width: 100%; text-align: center; }
#variantinfo > #currentvariinfo {
	width: fit-content;
	min-width: 100px;
    border: solid 1px var(--color2);
    border-radius: 25px;
    padding: 3px 10px;
    background: var(--BGlighter);
	outline: solid 0px var(--color2);
}
.stocktable {
	margin: 10px auto;
}
.stocktable > thead { font-size: 15px; }
.stocktable th:not(:last-child) { border: solid 1px #999; padding: 2px 3px 3px; font-weight: 500; }
.stocktable > thead > tr > th:last-child { position: relative; }
.stocktable > thead > tr > th:last-child:before {
	content: "";
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	position: absolute;
	bottom: 0;
	left: 0;
	background: white;
}
.stocktable > tbody { font-size: 14px; font-weight: 400; }
.stocktable > tbody > tr { border: solid 1px #999; }
.stocktable > tbody > tr:nth-of-type(even) { background: #EEE; }
.stocktable > tbody > tr > td:last-child {
	padding: 2px 3px;
	/*border-left: solid 1px #999;
	padding: 2px 0 2px 3px;
	background: white;*/
}
.stocktable td:not(:last-child) {
	padding: 1px 2px;
	/*border-top: solid 1px #999;
	border-bottom: solid 1px #999;*/
}
.stocktable .choosebutton {
	height: unset;
	padding: 1px 7px 2px;
	font-size: 14px;
	margin: 1px 0;
}

.reviewtable { width: 100%; text-align: left; border-collapse: collapse; border-color: var(--colortext); position: relative; }
.reviewtable th, .reviewtable td { padding: 1px 5px 2px; font-size: 14px; font-weight: 600; }
.reviewtable th { text-wrap: nowrap; font-weight: 500; width: 38.2%; }
.reviewtable tr:nth-of-type(even) { background: #0001; }
.reviewtable td:empty:after, .reviewtable td > span:empty:after { content: "( None )"; opacity: .65; }
.clamp {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	border: none;
}
#costtable tr:first-of-type > td, #costtable tr:first-of-type > th { font-size: 17px; }
#costtable tr > td > span:nth-child(2), #addontable th > span {
	color: var(--headericonsaccent);
	font-size: 15px;
	font-style: italic;
	font-weight: 600;
	padding-left: 4px;
}
#options:has(#chosenpeghead[value] + #assemble > input:checked, #chosenpeghead:not([value])) #addontable th > #noassembletext,
#options:has(#chosencenter[value] + #setcenter > input:checked:not(:disabled), #chosencenter:not([value])) #addontable th > #nosettext,
#options:has(#chosencenter2[value] + #setcenter2 > input:checked:not(:disabled), #chosencenter2:not([value])) #addontable th > #nosettext2 { display: none; }

.assembly:has(input:disabled) {
	text-decoration: line-through;
	color: var(--colortext);
	opacity: .35;
}
/*.assembly:not(#assemble) { text-wrap: balance; }*/

#related {
	width: 100%; margin-top: 50px; padding-bottom: 50px;
	background: var(--headercolor1); box-shadow: 0 5px 5px 0 #0003 inset;
}
[data-theme="dark"] #related { background: var(--BGlighter); }

#productlisting {
	flex-wrap: nowrap; overflow: auto hidden;
	max-width: 1120px; margin: -5px auto; padding: 5px;
}
.listedproduct { flex-shrink: 0; padding-bottom: 10px; }

#productlisting:has(> :nth-child(3)) {
	justify-content: unset;
	padding: 5px 5px 10px;
}

#productlisting::-webkit-scrollbar {
	width: 7px;
	height: 7px;
}
#productlisting::-webkit-scrollbar-track {
	background-color: #9995; 
	border-radius: 10px;
}
#productlisting::-webkit-scrollbar-thumb {
	background-color: var(--coolcolorhover);
	border-radius: 10px;
}
#productlisting::-webkit-scrollbar-thumb:hover {
	background-color: var(--headericons);
}
#productlisting.loadingtable:after { content: unset; }

.companionproduct { border-top: solid 2px gray; margin: 0 10px; padding: 10px 0; }
.companionproduct a:after {
	content: url(/static/img/icons/popout.svg);
	width: 14px;
	display: inline-block;
	transform: translate(5px, 2px);
	filter: invert(1) brightness(0.3) sepia(1) hue-rotate(140deg) saturate(4);
}

#options .optionsection:has(div:nth-of-type(5)) h3 { margin-bottom: 2px; }

.popupbox .reviewtable { border-color: black; }

#stockholder {
	overflow: auto;
	min-width: 240px;
	/*max-width: 572px;*/
	max-height: 50dvh;
	margin-bottom: 20px;
	padding: 0 clamp(5px, 1.4vw, 15px);
}
#stockholder > div > .reviewtable { margin-top: 10px; text-wrap: nowrap; }
#stockholder > div > .popupsubmit { margin: 7px 0 10px; }
/*#stockholder > div > hr { width: 90%; margin-bottom: 15px; border: solid 1px; border-bottom: none; }*/

#sender { 
	position: absolute; 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 / 25% no-repeat;
	z-index: 2;
	color: white;
	font-size: 24px;
	border-radius: 8px;
	gap: 110px;
}
#sender > span > a { color: lightcyan; text-decoration: underline; }

.modflex {
	display: flex;
	align-items: center;
	text-align: left;
	padding: 0 10px;
	line-height: 1.25em;
}

.modflex + .modflex {
	background: var(--coolcolor);
	padding-bottom: 10px;
}

.modflex > div:first-child {
	min-width: 295px;
	z-index: 1;
}

.modflex > div > label {
	margin-bottom: 3px;
}

.popmodify > form {
	width: unset;
	max-width: 550px;
}

.popmodify label:not(:first-child) {
	display: block;
	text-align: left;
	width: fit-content;
}

.popmodify label > input, .popmodify label > select {
	border: solid 1px gray;
	border-radius: 3px;
	background: white;
	min-width: 50px;
}

.popmodify input[type="file"] {
	position: absolute;
	margin-left: 5px;
	border: none;
	background: none;
}

.popmodify p {
	text-wrap: balance;
	margin: 0 0 10px;
	width: 100%;
}

.popmodify textarea {
	width: 97.5%;
	resize: vertical;
	min-height: 140px;
	height: 140px;
	font-family: inherit;
	max-height: 50dvh;
	border-radius: 3px;
}

.popmodify .grecaptcha-badge { animation: delaycaptcha 1s forwards; }

@keyframes delaycaptcha {
	0%, 50% { opacity: 0; }
	100% { opacity: 1; }
}

.popmodify div:last-child {
	margin: 10px auto 0;
	min-width: 235px;
	width: 95%;
}

.popmodify > form[inert]:before, .popmodify > form[inert]:after {
	content: "";
	background: #0004 url(/static/img/icons/loading.svg) center / 15% no-repeat;
	position: absolute;
	top: 34px;
	left: 5px;
	width: calc(100% - 10px);
	height: calc(100% - 39px);
	border-radius: 0 0 10px 10px;
	z-index: 1;
}

#modimg {
	width: 180px;
	height: 180px;
	object-fit: contain;
}

#mobilepreview {
	display: none;
	position: fixed;
	bottom: -5px;
	left: -2px;
	z-index: 1;
	box-shadow: 0 0 5px -1px var(--colortext);
	
	border: solid 2px var(--color2);
	border-right-width: 5px;
	border-radius: 0 7px 0 0;
	
	background: url(/static/img/icons/loading.svg) center / 50% no-repeat, var(--color2);
	color: var(--colortext);
	text-align: center;
	
	min-width: 100px;
	width: 20vw;
	max-width: 200px;
}

#mobilepreview > * {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

#overview:has(#productinfo3[style="display: none;"]) ~ #mobilepreview > #mobilepreviewimg,
#overview:has(#productinfo3:not([style="display: none;"])) ~ #mobilepreview > #mobilepreviewvid,
#overview:not(:has(#productinfo3)) ~ #mobilepreview > #mobilepreviewimg,
#overview:not(:has(#productvideo)) ~ #mobilepreview > #mobilepreviewvid {
	display: none;
}

#mobilepreview.showmobilepreview { display: block; }

.footer {
	position: relative;
	z-index: 1;
}

@media (max-width: 999px) and (min-width: 840px) {
	#overview > .holder { max-width: 408px; }
	#productinfo3, #productvideo, #productinfo5 { width: 400px; }
	#productinfo5 { max-height: 65px; }
	#productinfo5 > a { height: 65px; }
	#productinfo2 { font-size: 21px; }
	#productinfo1 { font-size: 14px; }
	#previewcolorstone ~ #save2zip > .firstphrase, #previewshape button { display: none; }
	#previewcolorstone ~ #save2zip > .lastphrase { display: inline; }
	#infoblock1 { max-width: 400px; }
	#infoblock1 > .popupbox { min-width: 100px; font-size: 15px; }
	#infoblock1 > .popupbox > p { font-size: 13px; }
	#duedate > #notify530 { font-size: 11px; }
	#duedate > #notify530:before { transform: scale(1.15); margin-right: 3px; }
	#options h3 { font-size: 15px; }
	.dropbox { font-size: 14px; max-width: 191px; }
	#optionstop { width: 380px; }
	#product-display { gap: 0 12px; }
	#previewshape {
		width: fit-content !important;
		padding: 0 5px;
		bottom: 73px;
		height: 50px;
	}
	#previewshape span, #previewshape a {
		width: unset;
		margin-left: unset;
		font-size: clamp(13px, 3vw, 15px);
	}
	#previewshape a {
		color: var(--colorlink);
		text-decoration: underline;
		pointer-events: all;
	}
	#previewshape a:after { content: ' (Change?)'; }
}

@media (max-width: 630px) {
	.stocktable tr, .stocktable .choosebutton {
		font-size: clamp(11px, 3vw, 13px);
		text-wrap: balance;
	}
}
@media (max-width: 579px) {
	.popmodify > form { max-width: 450px; }
	#modimg {
		width: 130px;
		height: 130px;
		position: absolute;
		right: 5px;
	}
	.modflex { padding: 10px; }
	.modflex + .modflex { flex-direction: column; text-align: center; }
	.modflex + .modflex label {
		display: flex;
		text-align: left;
		gap: 5px;
		max-width: 300px;
		margin: 0 auto 3px;
		width: unset;
	}
	.modflex + .modflex select, .modflex + .modflex input { flex-grow: 1; }
	.modflex + .modflex > div:last-child > label { margin: 0 1px 3px; }
	.popmodify textarea { max-height: 36dvh; }
}

.popselect > .popupbox {
	width: 1000px;
	max-width: 95vw;
}

.popselect > .popupbox > iframe {
	border: none;
	height: 600px;
	max-height: 60dvh;
	margin-bottom: 10px;
}

@media (max-width: 550px) {
	#bigmediaholder { align-items: center; margin-bottom: 5px; }
	.holder { flex-direction: column; margin-bottom: 10px; align-items: center; }
	#productinfo5 > a { height: calc(14vw); max-height: 80px; }
	#productinfo2 { margin: auto; }
	#productinfo1 { margin: -10px auto; }
	#back2gallery {
		margin: auto;
		font-size: 13px;
		padding-right: 0.5em;
	}
	#back2gallery > a { margin-left: auto; }
	
	#previewshape { left: 0; bottom: calc(14vw + 8px); }
	
	#productvideo:has(~ #previewshape button:nth-of-type(3))::-webkit-media-controls-enclosure {
		width: calc(100% - 144px);
	}
}

@media (max-height: 800px) and (max-width: 550px) and (min-height: 200px) {
	/*html { overflow-y: hidden; }*/
	#product-display { padding-top: 0; }
	#overview {
		position: fixed;
		/*top: 55px;*/
		margin-top: 0;
		z-index: 2;
	}
	#overview > .holder {
		position: absolute;
		top: 0;
		left: 0;
		width: 80%;
		margin-top: 0;
		z-index: 2;
	}
	#productinfo1 {
		margin: -15px 5px;
		font-size: 11px;
		opacity: .5;
		color: black;
		text-wrap: wrap;
		max-width: 140px;
	}
	#productinfo2 {
		margin-left: 5px;
		font-size: 20px;
		color: black;
	}
	#productinfo2:before { margin-right: 2px; }
	#productinfo2:after { font-size: 11px; }
	#productinfo3, #productvideo {
		height: 300px;
		max-height: 33dvh;
		aspect-ratio: unset;
		background-color: transparent;
		backdrop-filter: blur(10px);
	}
	#bigmediaholder {
		border-radius: 12px;
		background: white;
		margin-bottom: 2px;
	}
	#productinfo5, #productinfo5 > a { border-radius: 0 !important; }
	#previewcolorstone {
		left: unset;
		bottom: 50px;
		right: 0;
		width: 70px;
		padding: 0 5px;
	}
	#options {
		padding-top: calc(33dvh + 65px);
		z-index: 1;
		overflow-x: clip;
		background: var(--BGgradient1);
		width: 100%;
	}
	#overview:has(#productinfo5 > a:only-child) + #options { padding-top: calc(33dvh + 10px); }
	#infoblock1 { margin-left: auto; margin-right: auto; }
	#infoblock1 > .popupbox:first-child { display: block; width: 100%; }
	.bigbuttons {
		margin: 0 auto;
		width: 440px;
		max-width: 100%;
	}
	.bottompanel, .asterisk { padding-bottom: 10px; }
	/*.footer { box-shadow: 0 3px 24px 4px black; }*/
	#back2gallery, #chatbotbtn, #fullscreenbtn, #save2zip, #quickbtns, #productinfo5:has(> a:only-child) { display: none; }
	#mobileoptsbtn { display: block; }
	#related { padding-top: 6px; } 
}

@media (max-height: 500px) {
	#product-display {
		width: 135vw;
		transform: scale(0.75);
		transform-origin: top left;
		margin-bottom: -283px;
	}
	#optionstop { max-width: 135vw; }
	.popupbox .reviewtable {
		display: block;
		border-width: 0;
		overflow-y: scroll;
		max-height: 70dvh;
		background: linear-gradient(180deg, transparent 95%, #9999);
	}
}

@media (max-width: 490px) {
	/* Nothing in this query activates unless the color stone selection is available: */
	#previewcolorstone > label > span,
	#previewcolorstone ~ #save2zip > .firstphrase { display: none; }
	#previewcolorstone ~ #save2zip > .lastphrase { display: inline; }
	#previewcolorstone ~ #save2zip { left: unset; }
	#bigmediaholder:has(#previewcolorstone) + #quickbtns { gap: 10px; }
}

@media (max-width: 460px) {
	#quickbtns { gap: 28px; margin: 3px 50px 25px 0; }
	#infoblock1 { gap: 3px; }
	#infoblock1 > .popupbox { width: 45%; }
	#infoblock1 > .popupbox:first-child, #infoblock1 > .popupbox:nth-child(2) { width: 100%; }
	#pegnote { font-size: 13px; }
	#postadd { margin: 10px 0 -5px; max-width: 360px; }
	#postadd > .popupcancel { margin: 20px 0 15px; }
	textarea.popupinput { max-width: 82vw; }
	#save2zip { left: 30px; }
}

@media (max-width: 399px) {
	#quickbtns { gap: 15px; margin-right: 35px; }
	#colorselect > .namebox:has(.colorlabel:nth-child(5) input:not([value^="P"], [value="Silver"])) > .colorlabel { width: 27.5px; }
}