diff --git a/components/ProductList.vue b/components/ProductList.vue
index 863c312..478854d 100644
--- a/components/ProductList.vue
+++ b/components/ProductList.vue
@@ -4,10 +4,7 @@
       <div
         v-for="(productPair, productIndex) of chunkInefficient(range.products, 2)"
         :key="productIndex"
-        :class="{
-          'row justify-content-center': true,
-          'shelf': displayShelves
-        }"
+        :class="{'row justify-content-center': true}"
       >
         <div
           v-for="(product, productPairIndex) of productPair"
@@ -96,20 +93,13 @@ export default defineComponent({
   },
   data(): {
     route: RouteLocationNormalizedLoaded;
-    displayShelves: boolean;
     tooltips: Tooltips|null;
   } {
     return {
       route: useRoute(),
-      displayShelves: this.range.shelf,
       tooltips: null
     };
   },
-  watch: {
-    range() {
-      this.displayShelves = this.range.shelf;
-    }
-  },
   mounted() {
     this.$nextTick(() => {this.tooltips = Tooltips.make({type:"parent", parentSelector: "#product-list-component"});});
     this.$nextTick(this.applySameHeight);
diff --git a/pages/brands/[slug].vue b/pages/brands/[slug].vue
index 2411f1c..1df8fec 100644
--- a/pages/brands/[slug].vue
+++ b/pages/brands/[slug].vue
@@ -5,11 +5,7 @@
         <div
           v-for="(rangePair, rangePairIndex) of chunkInefficientCustom(brand.ranges, 2)"
           :key="rangePairIndex"
-          :class="{
-            'row justify-content-center mt-5 pt-5': true,
-            'mb-5 pb-5': !displayShelves,
-            'shelf': displayShelves
-          }"
+          :class="{'row justify-content-center mt-5 pt-5 mb-5 pb-5': true}"
         >
           <div
             v-for="(range, rangeIndex) of rangePair"
@@ -81,7 +77,6 @@ export default defineComponent({
     animateTimeout: NodeJS.Timeout|undefined;
     animateIndex: number|null;
     animations: Array<string>;
-    displayShelves: boolean;
     tooltips: Tooltips|null;
   } {
     return {
@@ -91,7 +86,6 @@ export default defineComponent({
       animateTimeout: undefined,
       animateIndex: null,
       animations: ["heartBeat", "tada", "shakeX", "rubberBand"],
-      displayShelves: false,
       tooltips: null
     };
   },
@@ -105,7 +99,6 @@ export default defineComponent({
       return ;
     }
     this.brand = brand;
-    this.displayShelves = this.brand.shelf;
 
     const firstRange = this.brand.ranges.at(0);
 
@@ -139,21 +132,32 @@ export default defineComponent({
     chunkInefficientCustom(ranges: Array<TypeRange>, chunkSize: number):Array<Array<TypeRange>> {
       const out: Array<Array<TypeRange>> = [];
       let row: Array<TypeRange> = [];
-      ranges.forEach((range: TypeRange, i: number) => {
-        if (range.width === 2) {
-          if(row.length) {
+      ranges
+        .sort((a, b) => a.order - b.order)
+        .forEach((range, _i) => {
+          // Handle special width=2 case immediately
+          if (range.width === 2) {
+            if (row.length > 0) {
+              out.push(row);
+              row = [];
+            }
+            out.push([range]);
+            return;
+          }
+
+          // Add to current row
+          row.push(range);
+
+          // Push row if it reaches chunk size
+          if (row.length === chunkSize) {
             out.push(row);
             row = [];
           }
-          out.push([range]);
-          return;
-        }
-        row.push(range);
-        if (i % chunkSize) {
-          out.push(row);
-          row = [];
-        }
-      });
+        });
+      // Push any remaining elements
+      if (row.length > 0) {
+        out.push(row);
+      }
       return out;
     },
     t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {