1 files changed, 56 insertions, 4 deletions

diff --git a/public/products.css b/public/products.css
index 5dee942..ecaaaa3 100644
--- a/public/products.css
+++ b/public/products.css
@@ -1,12 +1,14 @@
+:root {
+	--width: 1000px;
+}
+
 .products {
-	--grid-columns: 3;
+	--min-width: 200px;
 	display: grid;
-	grid-template-columns: repeat(var(--grid-columns), 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(var(--min-width), 1fr));
 	gap: 8px;
 	align-items: start;
 }
-@media (max-width: 600px) { .products { --grid-columns: 2; } }
-@media (max-width: 400px) { .products { --grid-columns: 1; } }
 
 .products .product {
 	background-color: var(--bg-alt);
@@ -22,3 +24,53 @@
 
 .product span { display: block; }
 .product .price { font-size: 1.5rem; }
+
+.categories a {
+	position: relative;
+	display: block;
+	color: var(--fg-alt);
+	text-decoration: none;
+}
+.categories .category {
+	margin-left: 8px;
+	height: 1.25em;
+}
+
+.categories .category::before {
+	content: "";
+	position: absolute;
+	height: 2px;
+	width: 14px;
+	background-color: var(--fg);
+	left: -2px;
+	top: 50%;
+	transform: translate(-100%, -50%);
+}
+
+.categories .sub {
+	margin-left: 8px;
+	position: relative;
+}
+
+.categories > .sub::before {
+	top: 0;
+}
+
+.sub::before {
+	content: "";
+	position: absolute;
+	width: 2px;
+	background-color: var(--fg);
+	left: -8px;
+	top: calc(1.25em * -0.5);
+	bottom: calc(1.25em * 0.5);
+}
+
+.categories:has(.current) a {
+	color: var(--fg);
+}
+
+.categories:has(.current) a.current {
+	color: var(--fg-alt);
+	font-weight: 700;
+}