#hero { height: 300px; background-color: white; }
#hero > img {
	padding: 0;
	object-fit: cover;
	width: 100%;
	background: #a9bac3;#a9bac3
}
#hero > div {
	position: absolute;
	margin: auto;
	padding: 0 !important;
	background: unset !important;

	justify-content: center;
	font-size: 28px;
	width: 100%;
	text-shadow: 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white, 0 0 20px white;
}
#hero > div > h2 {
	color: var(--mainblue);
	font-weight: 200;
	margin-top: -100px;
}

@media (max-width: 900px) {
	#hero > div { font-size: 22px; }
}

#swappables #printCADform { padding: 0; }

#tabs {
	display: flex; justify-content: flex-end;
	overflow: hidden; border-radius: 6px 6px 0 0;
}

#tabs > a {
	background: #058e4244;
	color: black;
	font-size: clamp(12px, 3vw, 21px);
	flex-grow: 1;
	text-align: center;
	padding: 5px 0;
	animation: tabbable 8s ease infinite;
}
#tabs > a:focus, #tabs > a:hover { filter: brightness(1.75); }
#tabs > a.chosentab { background: none !important; box-shadow: 0 0 5px #0006; }

@keyframes tabbable {
	0%, 30%, 70%, 100% { background: #058e4244; }
	50% { background: #058e4266; }
}
#tabs > a:nth-of-type(2) { animation-delay: 2s; }

#options, .optionsection > div { width: 100%; }

#optionstop {
	padding: 5px;
	position: relative;
	height: 60dvh;
	flex-grow: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: space-between;
}

.optionsection {
	display: none; flex-direction: column; gap: 25px;
	width: 100%; height: 100%; overflow: clip auto;
	margin: -5px; padding: 5px;
}
#options:has(#tab1.chosentab) #infoblock1, #options:has(#tab2.chosentab) #infoblock2,
#options:has(#tab3.chosentab) #infoblock3, #options:has(#tab4.chosentab) #infoblock4 { display: flex; }

.bold { font-weight: bold; }

#swappables select.inputs:focus {
	background-color: #f8fffc;
	border: solid 2px #058e42;
	margin: -1px auto 3px;
}

a.formbtn { display: inline-flex; align-items: center; padding: 0 6px; font-size: 13.3333px; height: 48px; }

/* UNIQUE STYLES */

.popupbox { width: 450px; }
.popupbox p { font-size: unset; }
.popupcancel { background-color: #edf2fd; }

.popimgreveals > .popupbox { width: unset; }
#imgarea {
	display: flex;
	flex-wrap: wrap;
	width: 50vw;
	justify-content: space-evenly;
	min-width: 400px;
	max-width: 730px;
}
#imgarea > img, #imgarea > video { width: 200px; }

.formframe { height: 100%; }

#swappables > div { background: #7ef3; flex-direction: column; position: relative; }
#swappables > div > div { box-shadow: 0 -10px 25px black; border-top: solid clamp(5px, 1.5vw, 10px); }
#swappables > div > img {
	height: 100px;
	filter: contrast(0.75);
	object-position: unset !important;
	z-index: -1;
	opacity: .85;
	align-content: flex-start;
}
#swappables > div h2 {
	position: absolute; top: 0; width: 100%; height: 100px; margin: unset;
	display: flex; justify-content: center; align-items: center;
	text-shadow: 0 0 7px black, 0 0 15px black, 0 5px 15px black; color: white;
}
#swappables > div p:first-child { margin-top: 0; }
#swappables > #panel1 > div { border-color: var(--mainblue); }

#selecteds {
	border: solid 1px #0009; position: relative; border-radius: 5px; background: #EEE;
	display: flex; justify-content: center; flex-direction: column; overflow: hidden;
}
#selecteds > div {
	display: flex; gap: 10px;
	overflow: auto hidden;
	height: 280px;
	padding: 42px 10px 40px;
	scroll-behavior: smooth;
}
#selecteds > h3, #selecteds > p, #selecteds > a { text-align: center; pointer-events: none; position: absolute; width: 100%; margin: 13px 0; top: 0; color: black; }
#selecteds > a { display: none; pointer-events: all; width: unset; height: 26px; margin: 0; padding: 10px 10px 0; opacity: .35; }
#selecteds > a:hover, #selecteds > a:focus { opacity: .75; }
#selecteds > a > img { height: 100%; }
#selecteds > p { top: 45px; opacity: .75; }
#selecteds > div:has(div) ~ p, #selecteds > h3 > span, .productname { display: none; }
#selecteds > div:has(div) ~ h3 > span { display: inline; }
#selecteds > div:has(div) ~ a:nth-of-type(2) { display: block; }
#selecteds .listedproduct .galleryfav { display: block; }

#selecteds:before {
	content: ""; width: 100%; height: 100%;
	display: block; position: absolute;
	box-shadow: 0 1px 3px #0006 inset;
	z-index: 1; pointer-events: none;
}

.draghover > div, .draghover ~ a { pointer-events: none !important; }

.galleryfav { padding: 0 6px 10px 13px; font-size: 24px; color: black; }

.listedproduct {
	height: unset;
	flex-shrink: 0;
	transform: scale(.9);
	margin: -10px -10px 0;
	box-shadow: 0 0 5px #0005;
	overflow: unset;
	scroll-margin: 40px;
}
.productnumber > span[data-styletack='E'], .productnumber > span[data-styletack='W'] { display: inline; }

.colorswap { opacity: 1; }
.colorswap[value='0'] > .clrwhite:before, .colorswap[value='1'] > .clryellow:before {
	content: '✔';
	position: absolute;
	width: 100%;
	left: 2px; top: -3px;
}

.list#selecteds > div {
	flex-direction: column; flex-wrap: wrap;
	align-content: flex-start; gap: 4px 14px;
	height: 330px; padding: 50px 10px 55px;
	overflow: scroll hidden;
}
.list#selecteds > div:empty { padding-bottom: 15px; }
.list .listedproduct { width: 206px; flex-direction: unset; box-shadow: 1px 1px 5px #0006; margin: 0 -10px; height: 70px; overflow: unset; }
.list .colorswap {
	position: unset;
	order: -1;
	margin: unset;
	position: absolute;
	bottom: 6px; left: 75px;
	gap: 3px;
}
.list .colorswap > div {
	color: #444;
	font-size: 13px;
	text-align: center;
	pointer-events: none;
}
.list .colorswap[value='0'] > .clrwhite:before, .list .colorswap[value='1'] > .clryellow:before {
	font-weight: bold;
	left: 0; top: -1px;
}
@-moz-document url-prefix() {
	.list .colorswap[value='0'] > .clrwhite:before, .list .colorswap[value='1'] > .clryellow:before { top: -2px; }
}
.list .imgholder {
	width: 70px;
	flex-shrink: 0;
	height: 100%;
	border-radius: 10px 0 0 10px;
	margin: unset;
	top: 2px;
}
.list .imgholder > img:first-child { display: block; z-index: 0; }
.list .imgholder > * { display: none; }
.list .productnumber, .list .productprice { position: absolute; width: unset; text-align: left; }
.list .productnumber { line-height: 13px; left: 75px; margin: 0 0 2px; }
.list .productprice { left: unset; right: 5px; bottom: -4px; }
.list .galleryfav { right: 0; padding: 0 3px; font-size: 19px; -webkit-text-stroke: 1.25px #fdfdfd; }
.list .mediarrows {
    padding: 0 5px;
    top: unset;
    bottom: -1px;
    left: 10px;
	display: none;
}
.list .mediarrows + .mediarrows { right: unset; left: 60px; }

.imgshow { display: none; left: 60px; opacity: .1 !important; }
.imgshow:hover, .imgshow:focus { opacity: .75 !important; }
.list .imgshow { display: block; top: -5px; bottom: unset; }
.list .imgshow > img { width: 20px; height: 20px; }

#cartbtn {
	display: none;
	background-color: var(--mainblue);
	color: white;
	cursor: pointer;
	opacity: 1;
	font-size: 15px;
	padding: 10px;
	margin: -60px auto 22px;
	z-index: 1;
}
#cartbtn[inert], .resetbutton[inert] { opacity: .5; }
#selecteds > div:has(div:nth-child(20)) ~ #cartbtn { display: block; /*margin: -68px auto 28px; }
#selecteds > div:has(div:nth-child(20)) { padding-bottom: 50px; }
#selecteds.list > div:has(div:nth-child(20)) ~ #cartbtn { margin: -35px auto 15px; }
#selecteds.list > div:has(div:nth-child(21)) ~ #cartbtn { margin: -63px auto 23px;*/ }

.productnumber > span.dupenum {
	display: inline;
	opacity: .8;
	font-style: italic;
}

.resetbutton:hover, .resetbutton:focus {
	text-decoration: underline;
}
.resetbutton {
	position: absolute; right: 15px;
	margin: -35px 0;
	padding: 10px; cursor: pointer;
	text-align: right; opacity: .9;
	color: black; display: none;
}
.resetbutton:has(~ #selecteds .listedproduct ~ .listedproduct) { display: block; }

@media (max-width: 660px) {
	#swappables > #panel1 > div > p + p { margin-bottom: 25px; }
}
@media (max-width: 630px) {
	#selecteds > h3 { font-size: 15px; margin: 10px 0; }
	#selecteds > a { padding: 8px 8px 0; height: 22px; }
}
@media (max-width: 535px) {
	#selecteds > a { padding: 5px 5px 0; height: 17px; }
}
@media (max-width: 486px) {
	#selecteds > a { height: 14px; }
	.formframe {
		height: 120%;
		transform: scale(0.8);
		width: 125%;
		margin: -13%;
	}
}

.colorbtn {
	border: solid 2px gray;
	width: 30px; height: 30px;
	margin: 5px 5px 10px;
	cursor: pointer;
	border-radius: 5px;
}
.clrwhite { background: linear-gradient(135deg, #ccc7c3 15%, #f1f0ee 45%, #f1f0ee 55%, #ccc7c3 85%); }
.clryellow { background: linear-gradient(135deg, #d6c07c 15%, #fff0bc 45%, #fff0bc 55%, #d6c07c 85%); }

#chosencolor { box-shadow: 0 0 5px black; height: 25px; }