fix breadcrumb styling: semantic markup, chevron separators, mobile sizing

Rewrite breadcrumb as semantic ol/li with aria-current="page", CSS
chevron separators, 0.875em font size, and ellipsis truncation on
mobile for long product names.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/theme-layer2-attributes.css

@@ -435,6 +435,43 @@
   transition: transform 0.2s ease;
 }
 
+/* Breadcrumb */
+.breadcrumb {
+  margin-bottom: 1rem;
+  font-size: 0.875em;
+
+  & ol {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  & li + li::before {
+    content: "\203A";
+    padding-inline: 0.375em;
+  }
+
+  & li[aria-current="page"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 20ch;
+  }
+}
+
+@media (min-width: 640px) {
+  .breadcrumb {
+    margin-bottom: 2rem;
+
+    & li[aria-current="page"] {
+      max-width: none;
+    }
+  }
+}
+
 /* PDP Gallery — mobile: swipe + dots, desktop: carousel + thumbs */
 .pdp-gallery-carousel,
 .pdp-gallery-single {