@commonpub/layer 0.1.0

package/pages/messages/index.vue

@@ -0,0 +1,303 @@
+<script setup lang="ts">
+useSeoMeta({ title: `Messages — ${useSiteName()}` });
+definePageMeta({ middleware: 'auth' });
+
+interface ParticipantRef {
+  username: string;
+  displayName: string | null;
+  avatarUrl: string | null;
+}
+
+interface ConversationItem {
+  id: string;
+  participants: ParticipantRef[];
+  lastMessage: string | null;
+  lastMessageAt: string;
+  createdAt: string;
+  unread?: boolean;
+}
+
+const { data: conversations, refresh } = await useFetch<ConversationItem[]>('/api/messages', {
+  default: () => [] as ConversationItem[],
+});
+
+const showNewDialog = ref(false);
+const newRecipient = ref('');
+const newMessage = ref('');
+
+const msgError = ref('');
+
+async function startConversation(): Promise<void> {
+  if (!newRecipient.value.trim()) return;
+  msgError.value = '';
+  try {
+    const conv = await $fetch<{ id: string }>('/api/messages', {
+      method: 'POST',
+      body: { participants: [newRecipient.value.trim()] },
+    });
+    if (newMessage.value.trim()) {
+      await $fetch(`/api/messages/${conv.id}`, {
+        method: 'POST',
+        body: { body: newMessage.value.trim() },
+      });
+    }
+    showNewDialog.value = false;
+    newRecipient.value = '';
+    newMessage.value = '';
+    await navigateTo(`/messages/${conv.id}`);
+  } catch (err: unknown) {
+    const fetchErr = err as { data?: { statusMessage?: string }; message?: string };
+    msgError.value = fetchErr?.data?.statusMessage || fetchErr?.message || 'Failed to start conversation';
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-messages-page">
+    <div class="cpub-messages-header">
+      <h1 class="cpub-section-title-lg">Messages</h1>
+      <button class="cpub-btn cpub-btn-sm cpub-btn-primary" @click="showNewDialog = true">
+        <i class="fa-solid fa-pen"></i> New Message
+      </button>
+    </div>
+
+    <!-- New conversation dialog -->
+    <div v-if="showNewDialog" class="cpub-new-msg-overlay" @click.self="showNewDialog = false">
+      <div class="cpub-new-msg-dialog" role="dialog" aria-label="New message">
+        <div class="cpub-new-msg-header">
+          <h2 class="cpub-new-msg-title">New Conversation</h2>
+          <button class="cpub-new-msg-close" @click="showNewDialog = false" aria-label="Close">
+            <i class="fa-solid fa-times"></i>
+          </button>
+        </div>
+        <div class="cpub-new-msg-body">
+          <div class="cpub-new-msg-field">
+            <label class="cpub-new-msg-label">Recipient username</label>
+            <input v-model="newRecipient" type="text" class="cpub-new-msg-input" placeholder="username or @user@remote-instance.com" />
+          </div>
+          <div class="cpub-new-msg-field">
+            <label class="cpub-new-msg-label">Message (optional)</label>
+            <textarea v-model="newMessage" class="cpub-new-msg-textarea" rows="3" placeholder="Write a message..." />
+          </div>
+        </div>
+        <div class="cpub-new-msg-footer">
+          <button class="cpub-btn cpub-btn-sm" @click="showNewDialog = false">Cancel</button>
+          <button
+            class="cpub-btn cpub-btn-sm cpub-btn-primary"
+            :disabled="!newRecipient.trim()"
+            @click="startConversation"
+          >
+            Start Conversation
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="cpub-conversation-list">
+      <NuxtLink
+        v-for="conv in conversations"
+        :key="conv.id"
+        :to="`/messages/${conv.id}`"
+        class="cpub-conversation-item"
+        :class="{ unread: conv.unread }"
+      >
+        <div class="cpub-conv-avatar">
+          <img v-if="conv.participants?.[0]?.avatarUrl" :src="conv.participants[0].avatarUrl" :alt="conv.participants[0].displayName || conv.participants[0].username" class="cpub-conv-avatar-img" />
+          <span v-else>{{ (conv.participants?.[0]?.displayName || conv.participants?.[0]?.username || '?').charAt(0).toUpperCase() }}</span>
+        </div>
+        <div class="cpub-conv-info">
+          <div class="cpub-conv-name">{{ conv.participants?.map(p => p.displayName || p.username).join(', ') ?? 'Unknown' }}</div>
+          <div class="cpub-conv-preview">{{ conv.lastMessage ?? 'No messages yet' }}</div>
+        </div>
+        <time class="cpub-conv-time">
+          {{ new Date(conv.lastMessageAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}
+        </time>
+      </NuxtLink>
+
+      <div v-if="!conversations.length" class="cpub-empty-state">
+        <div class="cpub-empty-state-icon"><i class="fa-solid fa-envelope"></i></div>
+        <p class="cpub-empty-state-title">No messages</p>
+        <p class="cpub-empty-state-desc">Start a conversation with someone!</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-messages-page {
+  max-width: var(--content-max-width, 960px);
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6);
+}
+
+.cpub-messages-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
+.cpub-conversation-list {
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+}
+
+.cpub-conversation-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  text-decoration: none;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  transition: background 0.1s;
+}
+
+.cpub-conversation-item:hover {
+  background: var(--surface2);
+}
+
+.cpub-conversation-item.unread {
+  background: var(--accent-bg);
+}
+
+.cpub-conv-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-dim);
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.cpub-conv-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+
+.cpub-conv-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-conv-name {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin-bottom: 2px;
+}
+
+.cpub-conv-preview {
+  font-size: 12px;
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cpub-conv-time {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--font-mono);
+  flex-shrink: 0;
+}
+
+/* New message dialog */
+.cpub-new-msg-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: var(--overlay-bg, var(--color-surface-overlay-light));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cpub-new-msg-dialog {
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  box-shadow: var(--shadow-xl);
+  width: 400px;
+  max-width: 90vw;
+}
+
+.cpub-new-msg-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-new-msg-title {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.cpub-new-msg-close {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 4px;
+}
+
+.cpub-new-msg-close:hover {
+  color: var(--text);
+}
+
+.cpub-new-msg-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cpub-new-msg-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cpub-new-msg-label {
+  font-size: 10px;
+  font-family: var(--font-mono);
+  color: var(--text-faint);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cpub-new-msg-input,
+.cpub-new-msg-textarea {
+  font-family: var(--font-sans);
+  font-size: 13px;
+  padding: 8px 10px;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+  outline: none;
+}
+
+.cpub-new-msg-input:focus,
+.cpub-new-msg-textarea:focus {
+  border-color: var(--accent);
+}
+
+.cpub-new-msg-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: var(--border-width-default) solid var(--border);
+}
+
+@media (max-width: 768px) {
+  .cpub-messages-page { padding: 16px; }
+  .cpub-conversation-item { padding: 10px 12px; }
+}
+</style>

package/pages/mirror/[id].vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'default' });
+
+const route = useRoute();
+const id = route.params.id as string;
+
+const { data: fedContent, error, pending } = await useFetch<Record<string, unknown>>(`/api/federation/content/${id}`);
+
+const {
+  transformedContent,
+  viewComponent,
+  originDomain,
+  originUrl,
+  authorHandle,
+} = useMirrorContent(fedContent);
+
+// SEO
+if (originUrl.value) {
+  useHead({
+    link: [{ rel: 'canonical', href: originUrl.value }],
+    meta: [{ name: 'robots', content: 'noindex, follow' }],
+  });
+}
+
+useSeoMeta({
+  title: transformedContent.value?.title ?? 'Mirrored Content',
+  description: transformedContent.value?.description ?? '',
+});
+</script>
+
+<template>
+  <div v-if="pending" class="cpub-loading" style="padding: 64px 24px; text-align: center">Loading content...</div>
+  <div v-else-if="error" class="cpub-not-found">
+    <h1>Content not found</h1>
+    <p>This mirrored content may have been removed or is unavailable.</p>
+    <NuxtLink to="/">Back to home</NuxtLink>
+  </div>
+
+  <template v-else-if="transformedContent">
+    <!-- Federation banner -->
+    <div class="cpub-fed-banner">
+      <div class="cpub-fed-banner-inner">
+        <i class="fa-solid fa-globe"></i>
+        <span>
+          Federated from <strong>{{ originDomain }}</strong>
+          <span v-if="authorHandle" class="cpub-fed-banner-handle">{{ authorHandle }}</span>
+        </span>
+        <a v-if="originUrl" :href="originUrl" target="_blank" rel="noopener noreferrer" class="cpub-fed-banner-link">
+          View Original <i class="fa-solid fa-arrow-up-right-from-square"></i>
+        </a>
+      </div>
+    </div>
+
+    <!-- Reuse existing content view component -->
+    <component
+      v-if="viewComponent && typeof viewComponent !== 'string'"
+      :is="viewComponent"
+      :content="transformedContent"
+      :federated-id="id"
+    />
+
+    <!-- Fallback for non-CommonPub content -->
+    <article v-else class="cpub-mirror-fallback">
+      <div class="cpub-mirror-container">
+        <img v-if="transformedContent.coverImageUrl" :src="transformedContent.coverImageUrl" :alt="transformedContent.title" class="cpub-mirror-cover" />
+        <h1 class="cpub-mirror-title">{{ transformedContent.title }}</h1>
+        <p v-if="transformedContent.description" class="cpub-mirror-desc">{{ transformedContent.description }}</p>
+        <div class="cpub-mirror-author">
+          <strong>{{ transformedContent.author.displayName }}</strong>
+          <span v-if="authorHandle" class="cpub-mirror-handle">{{ authorHandle }}</span>
+        </div>
+        <div v-if="typeof transformedContent.content === 'string'" class="cpub-mirror-body prose" v-html="transformedContent.content" />
+        <div v-if="transformedContent.tags?.length" class="cpub-mirror-tags">
+          <span v-for="tag in transformedContent.tags" :key="tag.name" class="cpub-mirror-tag">{{ tag.name }}</span>
+        </div>
+      </div>
+    </article>
+  </template>
+</template>
+
+<style scoped>
+.cpub-fed-banner {
+  background: var(--accent-bg); border-bottom: 1px solid var(--accent-border);
+}
+.cpub-fed-banner-inner {
+  max-width: 1200px; margin: 0 auto; padding: 8px 24px;
+  display: flex; align-items: center; gap: 8px;
+  font-size: 12px; color: var(--text-dim);
+}
+.cpub-fed-banner-inner > i { color: var(--accent); flex-shrink: 0; }
+.cpub-fed-banner-handle { color: var(--text-faint); margin-left: 4px; }
+.cpub-fed-banner-link {
+  margin-left: auto; color: var(--accent); font-weight: 600;
+  text-decoration: none; white-space: nowrap;
+  display: flex; align-items: center; gap: 4px; font-size: 11px;
+}
+.cpub-fed-banner-link:hover { text-decoration: underline; }
+
+/* Fallback for non-CommonPub content */
+.cpub-mirror-fallback { max-width: 780px; margin: 0 auto; padding: 32px 16px 60px; }
+.cpub-mirror-cover { width: 100%; max-height: 400px; object-fit: cover; margin-bottom: 20px; }
+.cpub-mirror-title { font-size: 2rem; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
+.cpub-mirror-desc { font-size: 1.0625rem; color: var(--text-dim); line-height: 1.6; margin-bottom: 16px; }
+.cpub-mirror-author { font-size: 0.875rem; color: var(--text-dim); margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
+.cpub-mirror-handle { color: var(--text-faint); margin-left: 6px; }
+.cpub-mirror-body { font-size: 1rem; line-height: 1.75; margin-bottom: 32px; }
+.cpub-mirror-body :deep(img) { max-width: 100%; }
+.cpub-mirror-body :deep(a) { color: var(--accent); }
+.cpub-mirror-body :deep(pre) { background: var(--surface2); padding: 12px; overflow-x: auto; }
+.cpub-mirror-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.cpub-mirror-tag { font-size: 0.75rem; padding: 3px 8px; background: var(--surface2); color: var(--text-dim); }
+
+.cpub-not-found { text-align: center; padding: 60px 20px; color: var(--text-dim); }
+.cpub-not-found h1 { font-size: 1.5rem; color: var(--text); margin-bottom: 8px; }
+</style>

package/pages/notifications.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+useSeoMeta({ title: `Notifications — ${useSiteName()}` });
+definePageMeta({ middleware: 'auth' });
+
+const activeTab = ref('all');
+const tabs = ['all', 'likes', 'comments', 'follows', 'system'];
+
+const notifQuery = computed(() => ({
+  type: activeTab.value === 'all' ? undefined : activeTab.value === 'likes' ? 'like' : activeTab.value === 'comments' ? 'comment' : activeTab.value === 'follows' ? 'follow' : 'system',
+  limit: 50,
+}));
+
+const { data: notifData, refresh } = await useFetch('/api/notifications', {
+  query: notifQuery,
+  watch: [notifQuery],
+  default: () => ({ items: [], total: 0 }),
+});
+
+const filteredNotifications = computed(() => notifData.value?.items ?? []);
+
+async function markAllRead(): Promise<void> {
+  await $fetch('/api/notifications/read', { method: 'POST', body: {} });
+  refresh();
+}
+
+async function deleteNotification(id: string): Promise<void> {
+  await $fetch(`/api/notifications/${id}`, { method: 'DELETE' });
+  refresh();
+}
+</script>
+
+<template>
+  <div class="cpub-notifications-page">
+    <div class="cpub-notif-header">
+      <h1 class="cpub-section-title-lg">Notifications</h1>
+      <button class="cpub-btn cpub-btn-sm cpub-btn-ghost" @click="markAllRead">
+        <i class="fa-solid fa-check-double"></i> Mark all read
+      </button>
+    </div>
+
+    <div class="cpub-tab-bar" style="position: static">
+      <button
+        v-for="tab in tabs"
+        :key="tab"
+        class="cpub-tab"
+        :class="{ active: activeTab === tab }"
+        @click="activeTab = tab"
+      >
+        {{ tab }}
+      </button>
+    </div>
+
+    <div class="cpub-notif-list">
+      <NotificationItem
+        v-for="n in filteredNotifications"
+        :key="n.id"
+        :notification="n"
+      />
+      <div v-if="!filteredNotifications.length" class="cpub-empty-state">
+        <div class="cpub-empty-state-icon"><i class="fa-solid fa-bell-slash"></i></div>
+        <p class="cpub-empty-state-title">No notifications</p>
+        <p class="cpub-empty-state-desc">You're all caught up!</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-notifications-page {
+  max-width: var(--content-max-width, 960px);
+  margin: 0 auto;
+  padding: var(--space-8) var(--space-6);
+}
+
+.cpub-notif-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-4);
+}
+
+.cpub-notif-list {
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface);
+}
+
+@media (max-width: 768px) {
+  .cpub-notifications-page { padding: 16px 12px; }
+  .cpub-notif-header { flex-wrap: wrap; gap: 8px; }
+}
+</style>

package/pages/products/[slug].vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+const route = useRoute();
+const slug = route.params.slug as string;
+
+const { data: product } = useLazyFetch(`/api/products/${slug}`) as { data: Ref<Record<string, any> | null> };
+const { data: projectsUsing } = useLazyFetch(`/api/products/${slug}/content`) as { data: Ref<any[] | null> };
+
+useSeoMeta({
+  title: () => product.value ? `${product.value.name} — ${useSiteName()}` : `Product — ${useSiteName()}`,
+  description: () => product.value?.description ?? '',
+});
+</script>
+
+<template>
+  <div v-if="product" class="product-detail">
+    <NuxtLink to="/products" class="cpub-back-link"><i class="fa-solid fa-arrow-left"></i> Products</NuxtLink>
+
+    <div class="product-layout">
+      <!-- Main -->
+      <div class="product-main">
+        <div class="product-header">
+          <div class="product-icon"><i class="fa-solid fa-microchip"></i></div>
+          <div>
+            <h1 class="product-name">{{ product.name }}</h1>
+            <span v-if="product.category" class="product-category">{{ product.category }}</span>
+          </div>
+        </div>
+
+        <p v-if="product.description" class="product-desc">{{ product.description }}</p>
+
+        <!-- Specs -->
+        <div v-if="product.specs && Object.keys(product.specs).length" class="product-specs">
+          <h2 class="product-section-title">Specifications</h2>
+          <div class="specs-grid">
+            <div v-for="(val, key) in product.specs" :key="key" class="spec-item">
+              <span class="spec-key">{{ key }}</span>
+              <span class="spec-val">{{ val }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Links -->
+        <div class="product-links">
+          <a v-if="product.purchaseUrl" :href="product.purchaseUrl" target="_blank" rel="noopener" class="product-link-btn">
+            <i class="fa-solid fa-cart-shopping"></i> Purchase
+          </a>
+          <a v-if="product.datasheetUrl" :href="product.datasheetUrl" target="_blank" rel="noopener" class="product-link-btn">
+            <i class="fa-solid fa-file-pdf"></i> Datasheet
+          </a>
+        </div>
+
+        <!-- Projects using this product -->
+        <div v-if="projectsUsing?.length" class="product-projects">
+          <h2 class="product-section-title">Projects Using This</h2>
+          <div class="product-projects-grid">
+            <ContentCard v-for="item in projectsUsing" :key="item.id" :item="item" />
+          </div>
+        </div>
+        <div v-else class="product-projects-empty">
+          <p>No projects using this product yet.</p>
+        </div>
+      </div>
+
+      <!-- Sidebar -->
+      <aside class="product-sidebar">
+        <div class="product-sb-card">
+          <h3 class="product-sb-label">Details</h3>
+          <div class="product-sb-row" v-if="product.category">
+            <span>Category</span>
+            <span class="product-sb-val">{{ product.category }}</span>
+          </div>
+          <div class="product-sb-row" v-if="product.pricing">
+            <span>Price</span>
+            <span class="product-sb-val">{{ product.pricing }}</span>
+          </div>
+          <div class="product-sb-row" v-if="product.hub">
+            <span>Hub</span>
+            <NuxtLink :to="`/hubs/${product.hub.slug}`" class="product-sb-link">{{ product.hub.name }}</NuxtLink>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+  <div v-else class="product-not-found">
+    <h1>Product not found</h1>
+  </div>
+</template>
+
+<style scoped>
+.product-detail { max-width: 1080px; margin: 0 auto; padding: 32px; }
+.cpub-back-link { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-bottom: 20px; }
+.cpub-back-link:hover { color: var(--accent); }
+
+.product-layout { display: grid; grid-template-columns: 1fr 280px; gap: 32px; }
+
+.product-header { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
+.product-icon { width: 56px; height: 56px; border: var(--border-width-default) solid var(--border); background: var(--accent-bg); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
+.product-name { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
+.product-category { font-size: 11px; font-family: var(--font-mono); color: var(--text-faint); text-transform: capitalize; }
+.product-desc { font-size: 14px; color: var(--text-dim); line-height: 1.7; margin-bottom: 24px; }
+
+.product-section-title { font-size: 16px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
+
+.specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin-bottom: 24px; }
+.spec-item { display: flex; justify-content: space-between; padding: 8px 12px; border: var(--border-width-default) solid var(--border2); background: var(--surface); font-size: 12px; }
+.spec-key { color: var(--text-dim); font-family: var(--font-mono); font-size: 11px; }
+.spec-val { font-weight: 500; }
+
+.product-links { display: flex; gap: 8px; margin-bottom: 32px; }
+.product-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 500; box-shadow: var(--shadow-md); }
+.product-link-btn:hover { box-shadow: var(--shadow-sm); transform: translate(1px, 1px); }
+
+.product-projects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
+.product-projects-empty { color: var(--text-faint); font-size: 13px; padding: 24px 0; }
+
+.product-sidebar { display: flex; flex-direction: column; gap: 16px; }
+.product-sb-card { padding: 16px; border: var(--border-width-default) solid var(--border); background: var(--surface); box-shadow: var(--shadow-md); }
+.product-sb-label { font-family: var(--font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 12px; }
+.product-sb-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: var(--border-width-default) solid var(--border2); font-size: 13px; color: var(--text-dim); }
+.product-sb-row:last-child { border-bottom: none; }
+.product-sb-val { font-weight: 500; color: var(--text); }
+.product-sb-link { color: var(--accent); text-decoration: none; font-weight: 500; }
+.product-sb-link:hover { text-decoration: underline; }
+
+.product-not-found { text-align: center; padding: 64px 0; color: var(--text-dim); }
+
+@media (max-width: 768px) { .product-layout { grid-template-columns: 1fr; } }
+</style>