Implemented phase 1 for the POC prototype in the Website service.

Services/Website/Resources/Static/css/shop.css

@@ -0,0 +1,122 @@
+/* CCN — shop page. */
+
+.shop {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-5);
+}
+
+.shop__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--space-4);
+  padding-bottom: var(--space-6);
+  border-bottom: 1px solid var(--line);
+}
+
+.shop__intro {
+  display: flex;
+  flex: 1 1 260px;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+}
+
+.shop__name {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2) 14px;
+}
+
+.shop__name .chip {
+  gap: 5px;
+  padding: 5px 9px;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.shop__standing {
+  color: var(--muted);
+}
+
+.shop__about {
+  max-width: 720px;
+  color: var(--ink-soft);
+  text-wrap: pretty;
+}
+
+.shop__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2) var(--space-5);
+  color: var(--muted);
+  font-size: 13px;
+}
+
+.shop__stats strong {
+  color: var(--ink);
+  font-weight: 600;
+}
+
+.shop__actions {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.shop__gate {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.shop__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+}
+
+.shop__quick {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-2);
+}
+
+.shop__sort {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.shop__sort .select {
+  height: var(--control-sm);
+}
+
+@media (min-width: 600px) {
+  .shop__head {
+    gap: var(--space-7);
+  }
+
+  .shop__actions {
+    flex: 0 0 200px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .shop {
+    gap: var(--space-7);
+    padding-top: var(--space-10);
+  }
+
+  .shop__head {
+    flex-wrap: nowrap;
+    padding-bottom: var(--space-8);
+  }
+}