#catalog {
	background-color: white;
	color: black;
	min-height: calc(100vh - 0.6in);
	display: flex;
}

.catalog-menu {
	width: 2.5in;
	margin-right: 0.2in;
	background: #f0f0f0;
	align-self: stretch;
}

.sidebar-menu {
	height: 100%;
}

.catalog-content {
	flex: 1;
}

.cart-content {
	width: 7in;
	margin-left: 0.2in;
	background: #f0f0f0;
	align-self: stretch;
	padding-left: 0.2in;
	padding-right: 0.1in;
}

.mobile .catalog-menu {
	width: 100%;
	margin-right: 0;
}

.mobile .catalog-content {
	display: none;
}

.mobile .cart-content {
	display: none;
}

#catalog-items {
	align-items: flex-end;
}

.catalog-item {
	width: 3in;
	max-width: 95vw;
	display: flex;
	flex-direction: column;
	gap: 0.0in;
}

.mobile .catalog-item {
	max-width: calc(100vw / 2 - 0.2in);
}

.catalog-item img, .catalog-item svg {
	width: 100%;
	border-radius: 0.1in;
}

.catalog-item.traverse svg {
	background-color: #f0f0f0;
	border: 0.02in solid hsl(200, 100%, 50%);
	transition: border-color ease 250ms;
}

.catalog-item.traverse:hover svg {
	border: 0.02in solid hsl(24, 100%, 50%);
}

.catalog-item .price {
	font-size: 0.2in;
	color: hsl(24, 100%, 50%);
}

.catalog-item .name {
	font-size: 0.15in;
}

.mobile .catalog-item .name {
	display: none;
}

.inline-configurator {
	background-color: #ffffff;
	padding: 0.3in;
	border-radius: 0.1in;
	margin-top: 0.2in;
	max-width: 90vw;
}

.configurator-footer {
	position: sticky;
	bottom: 0;
	background-color: #f0f0f0;
	padding: 0.2in;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #ccc;
	opacity: 0.5;
}

.configurator-footer.active {
	opacity: 1;
}

.configurator-footer .price {
	font-size: 0.2in;
	color: hsl(24, 100%, 50%);
}

.configurator-footer .button {
	padding: 0.1in 0.3in;
	background-color: hsl(24, 100%, 50%);
	color: white;
	border: none;
	border-radius: 0.05in;
	cursor: pointer;
}

.configurator-footer .button:hover {
	background-color: hsl(24, 100%, 60%);
}

.inline-configurator select,
.inline-configurator input[type="number"] {
	width: 100%;
	padding: 0.1in;
	border: 1px solid #ccc;
	border-radius: 0.05in;
}

.fgc {
	fill: none;
	stroke: #000000;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgc1 {
	fill: none;
	stroke: #ff8533;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgc2 {
	fill: none;
	stroke: #e0e800;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgc3 {
	fill: none;
	stroke: #00cf0a;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgc4 {
	fill: none;
	stroke: #33bbff;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgr {
	fill: none;
	stroke: #ff0000;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgrf {
	fill: #ff0000;
	stroke: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgw {
	fill: none;
	stroke: #00c0ff;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fgc1:hover, .fgc2:hover, .fgc3:hover, .fgc4:hover {
	stroke: #808080;
}

.no-render {
	opacity: 0;
}

body {
	opacity: 1;
	transition: opacity 0.3s;
}