html {
	scroll-behavior: smooth;
}

label {
	font-weight: normal;
}

input[type="text"], input[type="number"] {
	width: 100%;
}

#extra-info {
	display: none;
}

#p-desc {
	margin: 16px;
	max-width: 100%;
	overflow: hidden;
}

#p-desc * {
	max-width: 100% !important;
}

#addmodbrand {
	display: none;
}

#brandname {
	width: 50%;
}

.thumb {
	background-color: var(--grey-1);
	width: 100px;
}

input[type="checkbox"] {
	appearance: unset;
	border: 1px solid var(--purple-1);
	border-radius: 3px;
	width: 1.61em;
	height: 1.5em;
	cursor: pointer;
	vertical-align: middle;
	color: white;
}

input[type="checkbox"]::before {
	content: "[✔]";
	font-size: 1.05em;
}

input[type="checkbox"]:checked {
	background-color: var(--purple-1);
}

nav {
	margin: var(--inside-space);
	padding: 0px var(--inside-space);
}

nav > a {
	display: inline-block;
	border-radius: 200px;
	background-color: var(--purple-2);
	padding: 4px 8px;
	margin: 10px 2px;
}

nav > span {
	display: inline-block;
	border-radius: 200px;
	border: 2px solid var(--purple-2);
	padding: 4px 8px;
	margin: 10px 0px;
	text-align: center;
}

#quoted {
	font-weight: bold;
	color: green;
}

#full-prod {
	margin: var(--inside-space);
	padding: var(--inside-space);
	gap: var(--inside-space);
}

#prod-pictures {
	height: 100%;
	width: 100%;
	gap: var(--inside-space);
}

#main-picture {
	width: 100%;
	height: 600px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--grey-1);
	border-radius: var(--soft);
	position: relative;
}

#main-picture > button {
	position: absolute;
	top: 48%;
	border: none;
	background-color: var(--purple-1);
	color: white;
	border-radius: 5px;
	font-size: 26px;
}

#prev-picture {
	left: 18px;
}

#next-picture {
	right: 18px;
}

#main-picture > img {
	width: min(55vh, 80%);
}

#other-pictures {
	max-width: 100%;
	gap: var(--inside-space);
}

#other-pictures > div {
	width: 100%;
	background-color: var(--grey-1);
	border-radius: var(--soft);
}

#other-pictures > div > img {
	width: inherit;
}

#main-info {
	width: 100%;
	overflow: auto;
}

#prod-details {
	margin: var(--inside-space);
}

#subsections {
	display: flex;
	gap: 5px;
}

#subsections > a {
	text-align: center;
	padding: 10px;
	width: 100%;
	border: 1px solid var(--color-1-a);
}

#prod-details > section {
	margin: var(--inside-space);
}

#inks {
	display: none;
}

#inks > a {
	white-space: nowrap;
}

.prod-list {
	display: flex;
	overflow: hidden;
	justify-content: center;
}

.pro {
	display: flex;
	width: 300px;
	flex-direction: column;
	text-align: center;
}

.pro > span {
	color: var(--black-1);
	text-align: left;
	padding: 18px 30px;
	font-weight: bold;
}

.pro > img {
	background-color: var(--grey-1);
	border-radius: var(--soft);
	margin: auto;
	width: 250px;
}

.pdesc {
	display: none;
}

.getquote {
	border: none;
	border-radius: var(--soft);
	background-color: var(--grey-1);
	color: var(--purple-1);
	width: 80%;
	padding: 5px;
	margin: auto;
}

#specifications > table {
	margin: auto;
	width: 80%;
	border-collapse: collapse;
}

#compatibles > h3, #suggested > h3 {
	font-size: 32px;
	text-align: center;
	color: var(--purple-1);
	font-weight: bold;
}

h4 {
	font-size: 22px;
	text-align: center;
	color: var(--purple-1);
	margin: 10px;
}

th {
	text-align: left;
}

th, td {
	border: 1px solid var(--purple-1);
	padding: 10px;
	width: 50%;
}

tr:nth-child(even) {
	background-color: var(--purple-2);
}

#specifications > ul > li > p {
	margin: 0;
	/*padding: 0;*/
}

#edit-prod {
	margin: var(--inside-space);
}

#p-id {
	display: none;
}

#features {
	padding: var(--inside-space);
}

#features2 {
	display: none;
}

#break-down {
	margin: 10px;
	display: flex;
	flex-direction: row;
	gap: 3px;
	align-items: center;
	text-align: center;
}

#break-down > div {
	display: flex;
	flex-direction: column;
	padding: 6px;
	border: 2px solid var(--purple-2);
	border-radius: var(--soft);
}

#break-down > div > span > strong {
	color: var(--purple-1);
}

#case-specs {
	display: none;
}

#spec-btns {
	width: 100%;
	justify-content: center;
	gap: var(--inside-space);
	margin: calc(var(--inside-space) * 2);
}

#spec-btns > button {
	border: none;
	background-color: transparent;
	color: var(--purple-2);
	border-bottom: 5px solid transparent;
}

#spec-btns > button.activated {
	color: var(--purple-1);
	border-bottom: 5px solid var(--purple-1);
}

@media screen and (max-width: 695px) {
	#break-down {
		flex-direction: column;
	}

	.prod-list {
		flex-direction: column;
		margin: auto;
		align-items: center;
	}

	#full-prod {
		flex-direction: column;
	}
}