docs: explain stylesheet ownership, responsive rules and display boundaries

app/assets/styles/products.CrccEo2m.css

@@ -1,3 +1,5 @@
+/* 商品目录：分类、搜索、库存状态、价格及配置入口。 */
+/* 导入方：app/pages/products/index.vue。 */
 .catalog-page[data-v-a6c63d86] {
   flex-direction: column;
   gap: 24px;
@@ -60,6 +62,7 @@
   gap: 10px;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .category-options button[data-v-a6c63d86] {
   border: 1px solid var(--p-content-border-color);
   background: var(--p-content-background);
@@ -157,6 +160,7 @@
   font-size: 0.9375rem;
   display: flex;
 }
+/* 允许连续长文本换行，防止IP、密钥或用户输入撑破当前容器；不会修改原始数据。 */
 .search-result[data-v-a6c63d86] {
   overflow-wrap: anywhere;
   flex-wrap: wrap;
@@ -332,6 +336,7 @@ button[data-v-a6c63d86]:focus-visible {
   outline: 2px solid var(--p-primary-color);
   outline-offset: 3px;
 }
+/* 视口条件 (width<=1100px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=1100px) {
   .product-columns[data-v-a6c63d86],
   .product-row[data-v-a6c63d86] {
@@ -342,6 +347,7 @@ button[data-v-a6c63d86]:focus-visible {
     display: none;
   }
 }
+/* 视口条件 (width<=760px) 下的响应式覆盖；保留相对基础规则的层叠顺序。 */
 @media (width<=760px) {
   .catalog-categories[data-v-a6c63d86] {
     padding: 16px;