@sc-360-v2/storefront-cms-library 0.5.58 → 0.5.60

package/dist/category-groups-element.scss

@@ -35,6 +35,9 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
 @mixin cg-font($base, $color, $size, $weight: 600) {
   color: prepareMediaVariable(#{$base}-cr, $color);
   font-family: prepareMediaVariable(#{$base}-ft-fy, ("Inter", sans-serif));
+  text-transform: prepareMediaVariable(#{$base}-tt-tm, ("Inter", sans-serif));
+  word-wrap: prepareMediaVariable(#{$base}-wd-wp, ("Inter", sans-serif));
+  word-break: prepareMediaVariable(#{$base}-wd-bk, ("Inter", sans-serif));
   font-size: prepareMediaVariable(#{$base}-ft-se, $size);
   font-weight: prepareMediaVariable(#{$base}-ft-wt, $weight);
   // Remaining typography states (only apply when set in the design panel).
@@ -53,124 +56,85 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
   border-style: prepareMediaVariable(#{$base}-br-se, solid);
   border-width: prepareMediaVariable(#{$base}-br-wh, 0);
   border-radius: prepareMediaVariable(#{$base}-br-rs, 4px);
-  box-shadow: prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0)
-    prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent);
+  box-shadow: prepareMediaVariable(#{$base}-sw-ae, 0 0) prepareMediaVariable(#{$base}-sw-br, 0) prepareMediaVariable(#{$base}-sw-sd, 0) prepareMediaVariable(#{$base}-sw-cr, transparent);
 }
 
 // Interactive-state typography ($state = "hr-se" | "sd-se"): the state's own
 // vars fall back to the DEFAULT state (dt-se), then the Figma value — so Figma
 // only seeds the default state and edits to the default cascade to every state.
 @mixin cg-font-state($base, $state, $color, $size, $weight: 600) {
-  color: prepareMediaVariable(
-    #{$base}-#{$state}-cr,
-    prepareMediaVariable(#{$base}-dt-se-cr, $color)
-  );
-  font-family: prepareMediaVariable(
-    #{$base}-#{$state}-ft-fy,
-    prepareMediaVariable(#{$base}-dt-se-ft-fy, ("Inter", sans-serif))
-  );
-  font-size: prepareMediaVariable(
-    #{$base}-#{$state}-ft-se,
-    prepareMediaVariable(#{$base}-dt-se-ft-se, $size)
-  );
-  font-weight: prepareMediaVariable(
-    #{$base}-#{$state}-ft-wt,
-    prepareMediaVariable(#{$base}-dt-se-ft-wt, $weight)
-  );
-  font-style: prepareMediaVariable(
-    #{$base}-#{$state}-ft-se-ic,
-    prepareMediaVariable(#{$base}-dt-se-ft-se-ic)
-  );
-  text-align: prepareMediaVariable(
-    #{$base}-#{$state}-tt-an,
-    prepareMediaVariable(#{$base}-dt-se-tt-an)
-  );
-  letter-spacing: prepareMediaVariable(
-    #{$base}-#{$state}-lr-sg,
-    prepareMediaVariable(#{$base}-dt-se-lr-sg)
-  );
-  line-height: prepareMediaVariable(
-    #{$base}-#{$state}-le-ht,
-    prepareMediaVariable(#{$base}-dt-se-le-ht)
-  );
-  text-decoration: prepareMediaVariable(
-    #{$base}-#{$state}-ue,
-    prepareMediaVariable(#{$base}-dt-se-ue)
-  );
+  color: prepareMediaVariable(#{$base}-#{$state}-cr,
+    prepareMediaVariable(#{$base}-dt-se-cr, $color));
+  font-family: prepareMediaVariable(#{$base}-#{$state}-ft-fy,
+    prepareMediaVariable(#{$base}-dt-se-ft-fy, ("Inter", sans-serif)));
+  text-transform: prepareMediaVariable(#{$base}-#{$state}-tt-tm,
+    prepareMediaVariable(#{$base}-dt-se-tt-tm, ("Inter", sans-serif)));
+  word-wrap: prepareMediaVariable(#{$base}-#{$state}-wd-wp,
+    prepareMediaVariable(#{$base}-dt-se-wd-wp, ("Inter", sans-serif)));
+  word-break: prepareMediaVariable(#{$base}-#{$state}-wd-bk,
+    prepareMediaVariable(#{$base}-dt-se-wd-bk, ("Inter", sans-serif)));
+  font-size: prepareMediaVariable(#{$base}-#{$state}-ft-se,
+    prepareMediaVariable(#{$base}-dt-se-ft-se, $size));
+  font-weight: prepareMediaVariable(#{$base}-#{$state}-ft-wt,
+    prepareMediaVariable(#{$base}-dt-se-ft-wt, $weight));
+  font-style: prepareMediaVariable(#{$base}-#{$state}-ft-se-ic,
+    prepareMediaVariable(#{$base}-dt-se-ft-se-ic));
+  text-align: prepareMediaVariable(#{$base}-#{$state}-tt-an,
+    prepareMediaVariable(#{$base}-dt-se-tt-an));
+  letter-spacing: prepareMediaVariable(#{$base}-#{$state}-lr-sg,
+    prepareMediaVariable(#{$base}-dt-se-lr-sg));
+  line-height: prepareMediaVariable(#{$base}-#{$state}-le-ht,
+    prepareMediaVariable(#{$base}-dt-se-le-ht));
+  text-decoration: prepareMediaVariable(#{$base}-#{$state}-ue,
+    prepareMediaVariable(#{$base}-dt-se-ue));
 }
 
 // Interactive-state container design, falling back to the DEFAULT state.
 @mixin cg-design-state($base, $state) {
-  background-color: prepareMediaVariable(
-    #{$base}-#{$state}-bd-cr,
-    prepareMediaVariable(#{$base}-dt-se-bd-cr, transparent)
-  );
-  border-color: prepareMediaVariable(
-    #{$base}-#{$state}-br-cr,
-    prepareMediaVariable(#{$base}-dt-se-br-cr, transparent)
-  );
-  border-style: prepareMediaVariable(
-    #{$base}-#{$state}-br-se,
-    prepareMediaVariable(#{$base}-dt-se-br-se, solid)
-  );
-  border-width: prepareMediaVariable(
-    #{$base}-#{$state}-br-wh,
-    prepareMediaVariable(#{$base}-dt-se-br-wh, 0)
-  );
-  border-radius: prepareMediaVariable(
-    #{$base}-#{$state}-br-rs,
-    prepareMediaVariable(#{$base}-dt-se-br-rs, 4px)
-  );
-  box-shadow: prepareMediaVariable(
-      #{$base}-#{$state}-sw-ae,
-      prepareMediaVariable(#{$base}-dt-se-sw-ae, 0 0)
-    )
-    prepareMediaVariable(#{$base}-#{$state}-sw-br, prepareMediaVariable(#{$base}-dt-se-sw-br, 0))
-    prepareMediaVariable(#{$base}-#{$state}-sw-sd, prepareMediaVariable(#{$base}-dt-se-sw-sd, 0))
-    prepareMediaVariable(
-      #{$base}-#{$state}-sw-cr,
-      prepareMediaVariable(#{$base}-dt-se-sw-cr, transparent)
-    );
+  background-color: prepareMediaVariable(#{$base}-#{$state}-bd-cr,
+    prepareMediaVariable(#{$base}-dt-se-bd-cr, transparent));
+  border-color: prepareMediaVariable(#{$base}-#{$state}-br-cr,
+    prepareMediaVariable(#{$base}-dt-se-br-cr, transparent));
+  border-style: prepareMediaVariable(#{$base}-#{$state}-br-se,
+    prepareMediaVariable(#{$base}-dt-se-br-se, solid));
+  border-width: prepareMediaVariable(#{$base}-#{$state}-br-wh,
+    prepareMediaVariable(#{$base}-dt-se-br-wh, 0));
+  border-radius: prepareMediaVariable(#{$base}-#{$state}-br-rs,
+    prepareMediaVariable(#{$base}-dt-se-br-rs, 4px));
+  box-shadow: prepareMediaVariable(#{$base}-#{$state}-sw-ae,
+    prepareMediaVariable(#{$base}-dt-se-sw-ae, 0 0)) prepareMediaVariable(#{$base}-#{$state}-sw-br, prepareMediaVariable(#{$base}-dt-se-sw-br, 0)) prepareMediaVariable(#{$base}-#{$state}-sw-sd, prepareMediaVariable(#{$base}-dt-se-sw-sd, 0)) prepareMediaVariable(#{$base}-#{$state}-sw-cr,
+    prepareMediaVariable(#{$base}-dt-se-sw-cr, transparent));
 }
 
 [data-div-type="element"] {
   &[data-element-type="categoryGroups"] {
-    width: calc(
-      1% *
-        var(
-          --_ctm-mob-catego-ele-nw-wh-vl,
-          var(--_ctm-tab-catego-ele-nw-wh-vl, var(--_ctm-catego-ele-nw-wh-vl, auto))
-        )
-    );
-    margin: var(
-      --_ctm-mob-catego-lt-mn,
-      var(--_ctm-tab-catego-lt-mn, var(--_ctm-catego-lt-mn, var(--_ctm-lt-mn)))
-    );
+    width: calc(1% * var(--_ctm-mob-catego-ele-nw-wh-vl,
+          var(--_ctm-tab-catego-ele-nw-wh-vl, var(--_ctm-catego-ele-nw-wh-vl, auto))));
+    margin: var(--_ctm-mob-catego-lt-mn,
+        var(--_ctm-tab-catego-lt-mn, var(--_ctm-catego-lt-mn, var(--_ctm-lt-mn))));
 
     &[data-view-state="full"] {
-      & > .wrapper {
+      &>.wrapper {
         grid-template-rows: auto !important;
       }
     }
-    & > div {
+
+    &>div {
       &.wrapper {
         width: 100%;
         min-height: prepareMediaVariable(--_ctm-catego-lt-mn-ht);
-        padding: var(
-          --_ctm-mob-catego-lt-pg,
-          var(--_ctm-tab-catego-lt-pg, var(--_ctm-catego-lt-pg))
-        );
+        padding: var(--_ctm-mob-catego-lt-pg,
+            var(--_ctm-tab-catego-lt-pg, var(--_ctm-catego-lt-pg)));
 
         background-color: prepareMediaVariable(#{$cg-widget}-bd-cr, transparent);
         border-color: prepareMediaVariable(#{$cg-widget}-br-cr, transparent);
         border-style: prepareMediaVariable(#{$cg-widget}-br-se, solid);
         border-width: prepareMediaVariable(#{$cg-widget}-br-wh, 0);
         border-radius: prepareMediaVariable(#{$cg-widget}-br-rs, 0);
-        box-shadow: prepareMediaVariable(#{$cg-widget}-sw-ae, 0 0)
-          prepareMediaVariable(#{$cg-widget}-sw-br, 0) prepareMediaVariable(#{$cg-widget}-sw-sd, 0)
-          prepareMediaVariable(#{$cg-widget}-sw-cr, transparent);
+        box-shadow: prepareMediaVariable(#{$cg-widget}-sw-ae, 0 0) prepareMediaVariable(#{$cg-widget}-sw-br, 0) prepareMediaVariable(#{$cg-widget}-sw-sd, 0) prepareMediaVariable(#{$cg-widget}-sw-cr, transparent);
       }
     }
+
     // The modal-tree wrapper re-applies the element data-attrs (so the scoped
     // tree styles reach it through the portal), which makes it also match the
     // element-level box rules (margin/width). Target it on the SAME element
@@ -180,6 +144,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       margin: 0;
       padding: 4px;
     }
+
     // -------------------------------------------------------------------
     // Fixed two-column layout. Figma tokens are the prepareMediaVariable
     // fallbacks so the design renders correctly before any panel edits.
@@ -202,6 +167,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
         width: 100%;
       }
     }
+
     .cg_mobile_category_select {
       display: flex;
       flex-direction: row;
@@ -211,6 +177,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       width: 100%;
       cursor: pointer;
     }
+
     // Mobile Select-category button (rendered by the shared ButtonComponent as
     // `.btn__with__text`). Styled from the `selectButton` design block — which
     // uses the standard button property suffixes — via the cg-design / cg-font
@@ -229,6 +196,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       &[data-icon-position="right"] {
         --_sf-fd-bn: row-reverse;
       }
+
       &[data-icon-position="left"],
       &[data-icon-position="center"] {
         --_sf-fd-bn: row;
@@ -246,32 +214,39 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       .icon {
         display: flex;
         flex-shrink: 0;
+
         svg {
           width: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-se, 16px);
           height: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-se, 16px);
+
           path {
             stroke: prepareMediaVariable(#{$cg-select-btn}-dt-se-in-c1, currentColor);
           }
         }
       }
+
       .icon--hover {
         display: none;
       }
 
       &:hover {
         @include cg-design-state($cg-select-btn, hr-se);
+
         .txt {
           @include cg-font-state($cg-select-btn, hr-se, #002a4e, 14px, 400);
         }
+
         .icon--hover {
           display: flex;
         }
       }
+
       // Swap to the hover icon only when one is configured.
       &:hover:has(.icon--hover) .icon--default {
         display: none;
       }
     }
+
     // Tree rendered inside the (portaled) category modal.
 
     // ---- Left sidebar -------------------------------------------------
@@ -288,9 +263,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       border-style: prepareMediaVariable(#{$cg-sidebar}-br-se, solid);
       border-width: prepareMediaVariable(#{$cg-sidebar}-br-wh, 0);
       border-radius: prepareMediaVariable(#{$cg-sidebar}-br-rs, 0);
-      box-shadow: prepareMediaVariable(#{$cg-sidebar}-sw-ae, 0 0)
-        prepareMediaVariable(#{$cg-sidebar}-sw-br, 0) prepareMediaVariable(#{$cg-sidebar}-sw-sd, 0)
-        prepareMediaVariable(#{$cg-sidebar}-sw-cr, transparent);
+      box-shadow: prepareMediaVariable(#{$cg-sidebar}-sw-ae, 0 0) prepareMediaVariable(#{$cg-sidebar}-sw-br, 0) prepareMediaVariable(#{$cg-sidebar}-sw-sd, 0) prepareMediaVariable(#{$cg-sidebar}-sw-cr, transparent);
     }
 
     .cg_sidebar_heading {
@@ -300,12 +273,14 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       line-height: 1.25;
       @include cg-font($cg-cat-heading, #002a4e, 16px, 400);
     }
+
     .cg_all_products_heading {
       margin: 0;
       text-transform: uppercase;
       line-height: 1.25;
       @include cg-font($cg-allprod-heading, #002a4e, 24px, 400);
     }
+
     .cg_subcategory_title {
       margin: 0;
       font-family: "Inter", sans-serif;
@@ -323,7 +298,9 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       height: prepareMediaVariable(#{$cg-widget}-dr-wh, 1px);
       background: prepareMediaVariable(#{$cg-widget}-dr-cr, #e5e7eb);
     }
+
     &[data-show-dividers="false"] {
+
       .cg_sidebar_divider,
       .cg_main_divider,
       .cg_subcategory_divider {
@@ -349,6 +326,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       cursor: pointer;
       @include cg-design(#{$cg-tree}-dt-se);
     }
+
     .cg_tree_node_icon {
       display: flex;
       align-items: center;
@@ -359,60 +337,74 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       // Configurable expand/collapse icon colour (inherited by the SVG below).
       color: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
     }
+
     .cg_chevron {
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.15s ease;
       color: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
+
       svg {
         width: prepareMediaVariable(#{$cg-tree-icon}-in-se, 20px);
         height: prepareMediaVariable(#{$cg-tree-icon}-in-se, 20px);
+
         // Apply the configured colour even when the fetched SVG hardcodes its
         // own stroke/fill (skip parts explicitly set to "none").
         &[stroke]:not([stroke="none"]),
         [stroke]:not([stroke="none"]) {
           stroke: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
         }
+
         &[fill]:not([fill="none"]),
         [fill]:not([fill="none"]) {
           fill: prepareMediaVariable(#{$cg-tree-icon}-in-c1, #002a4e);
         }
       }
     }
+
     .cg_chevron.is-open {
       transform: rotate(90deg);
     }
+
     // Expanded icon uses its own size/colour vars (iconSizeExpanded /
     // iconColorExpanded) so it is independent of the collapsed icon.
     .cg_chevron.is-expanded {
       color: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
+
       svg {
         width: prepareMediaVariable(#{$cg-tree-icon}-in-se-ed, 20px);
         height: prepareMediaVariable(#{$cg-tree-icon}-in-se-ed, 20px);
+
         &[stroke]:not([stroke="none"]),
         [stroke]:not([stroke="none"]) {
           stroke: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
         }
+
         &[fill]:not([fill="none"]),
         [fill]:not([fill="none"]) {
           fill: prepareMediaVariable(#{$cg-tree-icon}-in-cr-ed, #002a4e);
         }
       }
     }
+
     .cg_tree_node_label {
       flex: 1;
       @include cg-font(#{$cg-tree}-dt-se, #002a4e, 14px, 600);
     }
+
     .cg_tree_node:hover {
       @include cg-design-state($cg-tree, hr-se);
     }
+
     .cg_tree_node:hover .cg_tree_node_label {
       @include cg-font-state($cg-tree, hr-se, #002a4e, 14px, 600);
     }
+
     .cg_tree_node.is-active {
       @include cg-design-state($cg-tree, sd-se);
     }
+
     .cg_tree_node.is-active .cg_tree_node_label {
       @include cg-font-state($cg-tree, sd-se, #002a4e, 14px, 600);
     }
@@ -425,25 +417,31 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       padding-left: 31px;
       width: 100%;
     }
+
     .cg_subtree_node {
       // Sub Category Tree Item → Layout padding.
       padding: prepareMediaVariable(#{$cg-subtree}-dt-se-pg, 4px 0);
       cursor: pointer;
       @include cg-design(#{$cg-subtree}-dt-se);
     }
+
     .cg_subtree_node_label {
       letter-spacing: -0.28px;
       @include cg-font(#{$cg-subtree}-dt-se, #1d1b1c, 14px, 400);
     }
+
     .cg_subtree_node:hover {
       @include cg-design-state($cg-subtree, hr-se);
     }
+
     .cg_subtree_node:hover .cg_subtree_node_label {
       @include cg-font-state($cg-subtree, hr-se, #1d1b1c, 14px, 400);
     }
+
     .cg_subtree_node.is-active {
       @include cg-design-state($cg-subtree, sd-se);
     }
+
     .cg_subtree_node.is-active .cg_subtree_node_label {
       @include cg-font-state($cg-subtree, sd-se, #1d1b1c, 14px, 400);
     }
@@ -466,6 +464,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
     // separatorIcon. Selected state = the current (last) crumb.
     .cg_breadcrumb {
       width: 100%;
+
       .horizontal_breadcrumb_wrapper {
         display: inline-flex;
         align-items: center;
@@ -474,6 +473,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
         overflow-x: auto;
         gap: 6px;
       }
+
       .breadcrumb_item {
         padding: 0 4px;
         display: flex;
@@ -482,18 +482,22 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
         white-space: nowrap;
         @include cg-design(#{$cg-bc-item}-dt-se);
         @include cg-font(#{$cg-bc-item}-dt-se, #4b4546, 14px, 400);
+
         &[data-show-cursor="true"] {
           cursor: pointer;
         }
+
         &[data-show-cursor="true"]:hover {
           @include cg-design-state($cg-bc-item, hr-se);
           @include cg-font-state($cg-bc-item, hr-se, #4b4546, 14px, 400);
         }
+
         &:last-of-type {
           @include cg-design-state($cg-bc-item, sd-se);
           @include cg-font-state($cg-bc-item, sd-se, #1d1b1c, 14px, 600);
         }
       }
+
       // Collapse ("…") button shown when the trail is too deep.
       .collapse_btn {
         display: flex;
@@ -505,11 +509,14 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
         line-height: 1;
         @include cg-font(#{$cg-bc-item}-dt-se, #4b4546, 16px, 600);
       }
+
       .separator .icon {
         display: flex;
+
         svg {
           width: prepareMediaVariable(#{$cg-bc-sep}-in-se, 16px);
           height: prepareMediaVariable(#{$cg-bc-sep}-in-se, 16px);
+
           path {
             stroke: prepareMediaVariable(#{$cg-bc-sep}-in-c1, #8a8a8a);
           }
@@ -527,6 +534,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
       width: 100%;
     }
+
     // The horizontal chip row: left arrow + scrolling rail + right arrow.
     .cg_subcategory_row {
       display: flex;
@@ -534,6 +542,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       gap: 12px;
       width: 100%;
     }
+
     .cg_subcategory_divider {
       width: 100%;
       // Widget Style → Divider (colour + thickness), same as the other dividers.
@@ -541,6 +550,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       background: prepareMediaVariable(#{$cg-widget}-dr-cr, #cbd5e1);
       flex-shrink: 0;
     }
+
     .cg_scroller_arrow {
       display: flex;
       align-items: center;
@@ -552,18 +562,19 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       @include cg-design(#{$cg-arrow}-dt-se);
       // Icon colour (in-c1) drives the SVG `currentColor` stroke.
       color: prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e);
+
       svg {
         width: prepareMediaVariable(#{$cg-arrow}-dt-se-in-se, 20px);
         height: prepareMediaVariable(#{$cg-arrow}-dt-se-in-se, 20px);
       }
+
       &:hover {
         @include cg-design-state($cg-arrow, hr-se);
-        color: prepareMediaVariable(
-          #{$cg-arrow}-hr-se-in-c1,
-          prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e)
-        );
+        color: prepareMediaVariable(#{$cg-arrow}-hr-se-in-c1,
+          prepareMediaVariable(#{$cg-arrow}-dt-se-in-c1, #002a4e));
       }
     }
+
     .cg_chip_rail {
       display: flex;
       align-items: center;
@@ -572,10 +583,12 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       min-width: 0;
       overflow-x: auto;
       scrollbar-width: none;
+
       &::-webkit-scrollbar {
         display: none;
       }
     }
+
     .cg_chip {
       display: flex;
       align-items: center;
@@ -586,6 +599,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       padding: 0;
       @include cg-design(#{$cg-chip}-dt-se);
     }
+
     .cg_chip_icon {
       display: flex;
       align-items: center;
@@ -598,34 +612,42 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       color: #002a4e;
       // Sub Category Image design controls (fill / border / radius / shadow).
       @include cg-design($cg-chip-image);
+
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         transition: transform 0.3s ease-in-out;
       }
+
       // Image Settings -> On Hover (zoom).
       &[data-on-hover="Zoom In"]:hover img {
         transform: scale(1.08);
       }
+
       &[data-on-hover="Zoom Out"]:hover img {
         transform: scale(0.92);
       }
     }
+
     .cg_chip_label {
       padding: 4px 12px;
       white-space: nowrap;
       @include cg-font(#{$cg-chip}-dt-se, #002a4e, 14px, 400);
     }
+
     .cg_chip:hover {
       @include cg-design-state($cg-chip, hr-se);
     }
+
     .cg_chip:hover .cg_chip_label {
       @include cg-font-state($cg-chip, hr-se, #002a4e, 14px, 400);
     }
+
     .cg_chip.is-active {
       @include cg-design-state($cg-chip, sd-se);
     }
+
     .cg_chip.is-active .cg_chip_label {
       @include cg-font-state($cg-chip, sd-se, #002a4e, 14px, 400);
     }
@@ -640,8 +662,10 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       // Grid container fill / border / radius / shadow.
       @include cg-design(#{$cg-grid}-lt);
     }
+
     // Display styles (Grid / Cards / Slider) for the product grid.
     @import "./category-groups-product-grid.scss";
+
     .cg_product_card {
       display: flex;
       flex-direction: column;
@@ -651,9 +675,11 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       min-width: 0;
       @include cg-design(#{$cg-card}-dt-se);
     }
+
     .cg_product_card:hover {
       @include cg-design-state($cg-card, hr-se);
     }
+
     .cg_product_image_wrapper {
       position: relative;
       width: 100%;
@@ -663,6 +689,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       // rebound to the Category Groups productImage CSS-variable paths.
       @import "./category-groups-product-image.scss";
     }
+
     // Fallback image (rendered only when the Product Image setting is absent).
     .cg_product_image {
       display: block;
@@ -670,29 +697,35 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       height: 400px;
       object-fit: cover;
     }
+
     .cg_product_info {
       display: flex;
       flex-direction: column;
       // Product Card → content gap (between brand / name / price / options).
       gap: prepareMediaVariable(#{$cg-card}-dt-se-ct-gp, 12px);
     }
+
     .cg_brand_name {
       margin: 0;
       @include cg-font($cg-brand, #737373, 14px, 400);
+
       // Text overflow toggle + max lines (Brand Name design controls).
       &.flex__overflow {
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
     }
+
     .cg_product_name {
       margin: 0;
       letter-spacing: -0.32px;
       @include cg-font($cg-name, #0a3355, 16px, 600);
+
       // Text overflow toggle + max lines (Product Name design controls).
       &.flex__overflow {
         @include restrictToLinesShow(#{var(--_sf-line-clamp, 1)});
       }
     }
+
     .cg_product_price {
       margin: 0;
       display: flex;
@@ -700,6 +733,7 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       gap: 6px;
       @include cg-font($cg-price, #000, 16px, 800);
     }
+
     .cg_variants_text {
       margin: 0;
       @include cg-font($cg-variants, #737373, 14px, 400);
@@ -721,4 +755,4 @@ $cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selec
       justify-content: center;
     }
   }
-}
+}