@sc-360-v2/storefront-cms-library 0.5.70 → 0.5.71

package/dist/category-groups-element.scss

@@ -1,739 +1,739 @@
-@use "sass:map";
-@use "sass:list";
-@use "./functions.scss" as *;
-$activeElementSelector: "[data-has-clicked='true']";
-$resizerId: "[data-cms-tool='cms-element-resizer']";
-$resizeActive: '[data-cms-element-resizer="true"]';
-
-// Generated CSS-var bases (prefix `catego`; path = design-key shortcodes via
-// splitCamelCaseAndJoin). Edits in the design panel write these; the second arg
-// to prepareMediaVariable keeps the Figma default when a var is unset.
-$cg-widget: "--_ctm-catego-dn-wt-se"; // design.widgetStyle
-$cg-sidebar: "--_ctm-catego-dn-sr-dn-sr-cr"; // sidebarDesign.sidebarContainer
-$cg-cat-heading: "--_ctm-catego-dn-sr-dn-cs-hg"; // sidebarDesign.categoriesHeading
-$cg-tree: "--_ctm-catego-dn-sr-dn-cy-te-im"; // sidebarDesign.categoryTreeItem
-$cg-tree-icon: "--_ctm-catego-dn-sr-dn-cy-te-in"; // sidebarDesign.categoryTreeIcon
-$cg-subtree: "--_ctm-catego-dn-sr-dn-sb-cy-te-im"; // sidebarDesign.subCategoryTreeItem
-$cg-chip: "--_ctm-catego-dn-sb-cy-sr-dn-sb-cy-cp"; // subCategoryScrollerDesign.subCategoryChip
-$cg-arrow: "--_ctm-catego-dn-sb-cy-sr-dn-sr-aw"; // subCategoryScrollerDesign.scrollerArrow
-$cg-chip-image: "--_ctm-catego-dn-sb-cy-sr-dn-sb-cy-ie"; // subCategoryScrollerDesign.subCategoryImage
-$cg-bc-item: "--_ctm-catego-dn-bb-dn-bb-im"; // breadcrumbDesign.breadcrumbItem
-$cg-bc-sep: "--_ctm-catego-dn-bb-dn-sr-in"; // breadcrumbDesign.separatorIcon
-$cg-allprod-heading: "--_ctm-catego-dn-pt-gd-dn-al-ps-hg"; // productGridDesign.allProductsHeading
-$cg-card: "--_ctm-catego-dn-pt-gd-dn-pt-cd"; // productGridDesign.productCard
-$cg-brand: "--_ctm-catego-dn-pt-gd-dn-bd-ne"; // productGridDesign.brandName
-$cg-name: "--_ctm-catego-dn-pt-gd-dn-pt-ne"; // productGridDesign.productName
-$cg-price: "--_ctm-catego-dn-pt-gd-dn-pt-pe"; // productGridDesign.productPrice
-$cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsText
-// Design-block bases for the section item-gaps.
-$cg-sidebar-design: "--_ctm-catego-dn-sr-dn"; // sidebarDesign (itemGap)
-$cg-scroller-design: "--_ctm-catego-dn-sb-cy-sr-dn"; // subCategoryScrollerDesign (itemGap)
-$cg-grid: "--_ctm-catego-dn-pt-gd-dn"; // productGridDesign (itemGap)
-$cg-main: "--_ctm-catego-dn-mn-sn"; // mainSection (right section container + itemGap)
-$cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selector)
-
-@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).
-  font-style: prepareMediaVariable(#{$base}-ft-se-ic);
-  text-align: prepareMediaVariable(#{$base}-tt-an);
-  letter-spacing: prepareMediaVariable(#{$base}-lr-sg);
-  line-height: prepareMediaVariable(#{$base}-le-ht);
-  text-decoration: prepareMediaVariable(#{$base}-ue);
-}
-
-// Container fill / border / radius / shadow for a given state base
-// (e.g. `$cg-tree-dt-se`). Shadow stays invisible until set in the panel.
-@mixin cg-design($base) {
-  background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
-  border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
-  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);
-}
-
-// 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))
-  );
-  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)
-    );
-}
-
-[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)))
-    );
-
-    &[data-view-state="full"] {
-      & > .wrapper {
-        grid-template-rows: auto !important;
-      }
-    }
-    & > 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))
-        );
-
-        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);
-      }
-    }
-    // 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
-    // (`&.`) to override those — a descendant selector wouldn't match it.
-    &.cg_category_modal_tree {
-      width: 100%;
-      margin: 0;
-      padding: 4px;
-    }
-    // -------------------------------------------------------------------
-    // Fixed two-column layout. Figma tokens are the prepareMediaVariable
-    // fallbacks so the design renders correctly before any panel edits.
-    // -------------------------------------------------------------------
-    .category__groups__element__container {
-      display: flex;
-      // Widget Style → gap between the left sidebar and the right main section.
-      gap: prepareMediaVariable(#{$cg-widget}-im-gp, 36px);
-      align-items: flex-start;
-      width: 100%;
-    }
-
-    // ---- Mobile (fixed layout): the sidebar tree is replaced by a selector
-    // that opens the CategoryTree in a modal; everything stacks vertically.
-    .category__groups__element__container.is-mobile {
-      flex-direction: column;
-      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
-
-      .cg_main {
-        width: 100%;
-      }
-    }
-    .cg_mobile_category_select {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      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
-    // mixins (default + hover), plus the button-specific layout vars.
-    .btn__with__text[data-btn-name="selectButton"] {
-      display: flex;
-      align-items: center;
-      flex-direction: var(--_sf-fd-bn, row);
-      cursor: pointer;
-      width: prepareMediaVariable(#{$cg-select-btn}-dt-se-wh, auto);
-      padding: prepareMediaVariable(#{$cg-select-btn}-dt-se-pg, 8px 12px);
-      gap: prepareMediaVariable(#{$cg-select-btn}-dt-se-gp, 8px);
-      justify-content: prepareMediaVariable(#{$cg-select-btn}-dt-se-at, space-between);
-      @include cg-design(#{$cg-select-btn}-dt-se);
-
-      &[data-icon-position="right"] {
-        --_sf-fd-bn: row-reverse;
-      }
-      &[data-icon-position="left"],
-      &[data-icon-position="center"] {
-        --_sf-fd-bn: row;
-      }
-
-      .txt {
-        // flex: 1;
-        min-width: 0;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        @include cg-font(#{$cg-select-btn}-dt-se, #002a4e, 14px, 400);
-      }
-
-      .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 -------------------------------------------------
-    .cg_sidebar {
-      display: flex;
-      flex-direction: column;
-      // Sidebar Container → gap (heading ↔ tree) + padding.
-      gap: prepareMediaVariable(#{$cg-sidebar}-im-gp, 12px);
-      padding: prepareMediaVariable(#{$cg-sidebar}-pg, 0);
-      width: 260px;
-      flex-shrink: 0;
-      background-color: prepareMediaVariable(#{$cg-sidebar}-bd-cr, transparent);
-      border-color: prepareMediaVariable(#{$cg-sidebar}-br-cr, transparent);
-      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);
-    }
-
-    .cg_sidebar_heading {
-      white-space: nowrap;
-      margin: 0;
-      text-transform: uppercase;
-      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;
-      color: #002a4e;
-      text-transform: uppercase;
-      line-height: 1.25;
-      font-size: 16px;
-    }
-
-    .cg_sidebar_divider,
-    .cg_main_divider {
-      display: block;
-      width: 100%;
-      // Widget Style → Divider (show toggle + colour + thickness).
-      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 {
-        display: none;
-      }
-    }
-
-    .cg_category_tree {
-      display: flex;
-      flex-direction: column;
-      // Gap BETWEEN category rows (Sidebar Container → Category Tree Gap).
-      gap: prepareMediaVariable(#{$cg-sidebar}-cy-te-gp, 8px);
-      width: 100%;
-    }
-
-    .cg_tree_node {
-      display: flex;
-      align-items: center;
-      // Category Tree Item → item gap (icon ↔ label).
-      gap: prepareMediaVariable(#{$cg-tree}-dt-se-im-gp, 4px);
-      // Category Tree Item → Layout padding.
-      padding: prepareMediaVariable(#{$cg-tree}-dt-se-pg, 4px 0);
-      cursor: pointer;
-      @include cg-design(#{$cg-tree}-dt-se);
-    }
-    .cg_tree_node_icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 24px;
-      height: 24px;
-      flex-shrink: 0;
-      // 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);
-    }
-
-    .cg_subtree {
-      display: flex;
-      flex-direction: column;
-      // Gap BETWEEN sub-category rows (Sidebar Container → Sub Category Gap).
-      gap: prepareMediaVariable(#{$cg-sidebar}-sb-cy-gp, 8px);
-      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);
-    }
-
-    // ---- Right main ---------------------------------------------------
-    // mainSection: container fill/border + gap between heading, breadcrumb,
-    // sub-categories and the product grid.
-    .cg_main {
-      display: flex;
-      flex-direction: column;
-      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
-      padding: prepareMediaVariable(#{$cg-main}-pg, 0);
-      flex: 1 0 0;
-      min-width: 0;
-      @include cg-design($cg-main);
-    }
-
-    // Drill-down breadcrumb (reuses the Breadcrumbs element DOM classes), styled
-    // from the breadcrumbDesign panel: breadcrumbItem (default/hover/selected) +
-    // separatorIcon. Selected state = the current (last) crumb.
-    .cg_breadcrumb {
-      width: 100%;
-      .horizontal_breadcrumb_wrapper {
-        display: inline-flex;
-        align-items: center;
-        width: 100%;
-        // flex-wrap: wrap;
-        overflow-x: auto;
-        gap: 6px;
-      }
-      .breadcrumb_item {
-        padding: 0 4px;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        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;
-        align-items: center;
-        padding: 0 4px;
-        border: none;
-        background: transparent;
-        cursor: pointer;
-        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);
-          }
-        }
-      }
-    }
-
-    // Breadcrumb (top) + chip row (bottom) stack vertically.
-    .cg_subcategory_scroller {
-      display: flex;
-      flex-direction: column;
-      align-items: stretch;
-      // Same gap as the main section so breadcrumb ↔ sub-categories spacing
-      // follows the Main Section item gap.
-      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
-      width: 100%;
-    }
-    // The horizontal chip row: left arrow + scrolling rail + right arrow.
-    .cg_subcategory_row {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      width: 100%;
-    }
-    .cg_subcategory_divider {
-      width: 100%;
-      // Widget Style → Divider (colour + thickness), same as the other dividers.
-      height: prepareMediaVariable(#{$cg-widget}-dr-wh, 1px);
-      background: prepareMediaVariable(#{$cg-widget}-dr-cr, #cbd5e1);
-      flex-shrink: 0;
-    }
-    .cg_scroller_arrow {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: prepareMediaVariable(#{$cg-arrow}-dt-se-pg, 0);
-      cursor: pointer;
-      flex-shrink: 0;
-      // Default state: fill / border / radius / shadow.
-      @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)
-        );
-      }
-    }
-    .cg_chip_rail {
-      display: flex;
-      align-items: center;
-      gap: prepareMediaVariable(#{$cg-scroller-design}-im-gp, 16px);
-      flex: 1 0 0;
-      min-width: 0;
-      overflow-x: auto;
-      scrollbar-width: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-    .cg_chip {
-      display: flex;
-      align-items: center;
-      // Spacing between the chip image and its label (Sub Category Chip item gap).
-      gap: prepareMediaVariable(#{$cg-chip}-dt-se-im-gp, 8px);
-      cursor: pointer;
-      flex-shrink: 0;
-      padding: 0;
-      @include cg-design(#{$cg-chip}-dt-se);
-    }
-    .cg_chip_icon {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: prepareMediaVariable(#{$cg-chip-image}-wh, 36px);
-      height: prepareMediaVariable(#{$cg-chip-image}-ht, 36px);
-      padding: prepareMediaVariable(#{$cg-chip-image}-pg, 0);
-      flex-shrink: 0;
-      overflow: hidden;
-      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);
-    }
-
-    // ---- Product grid -------------------------------------------------
-    // Container box only. Display modes (grid / cards / slider) + gaps live in
-    // category-groups-product-grid.scss (imported below).
-    .cg_product_grid {
-      width: 100%;
-      position: relative;
-      padding: prepareMediaVariable(#{$cg-grid}-lt-pg, 0);
-      // 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;
-      gap: prepareMediaVariable(#{$cg-card}-dt-se-im-gp, 16px);
-      padding: prepareMediaVariable(#{$cg-card}-dt-se-pg, 0);
-      position: relative;
-      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%;
-      overflow: hidden;
-
-      // Gallery / zoom / thumbnail styling for the embedded ProductImageContent,
-      // 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;
-      width: 100%;
-      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;
-      align-items: center;
-      gap: 6px;
-      @include cg-font($cg-price, #000, 16px, 800);
-    }
-    .cg_variants_text {
-      margin: 0;
-      @include cg-font($cg-variants, #737373, 14px, 400);
-    }
-
-    @import "./category-groups-product-options.scss";
-
-    // Price styling for the embedded ProductPriceContent, rebound to the Category
-    // Groups productPrice CSS-variable paths.
-    @import "./category-groups-product-price.scss";
-
-    // Quota details styling for the embedded QuotaDetailsContent, rebound to the
-    // Category Groups quotaDetails CSS-variable paths.
-    @import "./category-groups-quota-details.scss";
-
-    .loading_view {
-      width: 100%;
-      display: flex;
-      justify-content: center;
-    }
-  }
-}
+@use "sass:map";
+@use "sass:list";
+@use "./functions.scss" as *;
+$activeElementSelector: "[data-has-clicked='true']";
+$resizerId: "[data-cms-tool='cms-element-resizer']";
+$resizeActive: '[data-cms-element-resizer="true"]';
+
+// Generated CSS-var bases (prefix `catego`; path = design-key shortcodes via
+// splitCamelCaseAndJoin). Edits in the design panel write these; the second arg
+// to prepareMediaVariable keeps the Figma default when a var is unset.
+$cg-widget: "--_ctm-catego-dn-wt-se"; // design.widgetStyle
+$cg-sidebar: "--_ctm-catego-dn-sr-dn-sr-cr"; // sidebarDesign.sidebarContainer
+$cg-cat-heading: "--_ctm-catego-dn-sr-dn-cs-hg"; // sidebarDesign.categoriesHeading
+$cg-tree: "--_ctm-catego-dn-sr-dn-cy-te-im"; // sidebarDesign.categoryTreeItem
+$cg-tree-icon: "--_ctm-catego-dn-sr-dn-cy-te-in"; // sidebarDesign.categoryTreeIcon
+$cg-subtree: "--_ctm-catego-dn-sr-dn-sb-cy-te-im"; // sidebarDesign.subCategoryTreeItem
+$cg-chip: "--_ctm-catego-dn-sb-cy-sr-dn-sb-cy-cp"; // subCategoryScrollerDesign.subCategoryChip
+$cg-arrow: "--_ctm-catego-dn-sb-cy-sr-dn-sr-aw"; // subCategoryScrollerDesign.scrollerArrow
+$cg-chip-image: "--_ctm-catego-dn-sb-cy-sr-dn-sb-cy-ie"; // subCategoryScrollerDesign.subCategoryImage
+$cg-bc-item: "--_ctm-catego-dn-bb-dn-bb-im"; // breadcrumbDesign.breadcrumbItem
+$cg-bc-sep: "--_ctm-catego-dn-bb-dn-sr-in"; // breadcrumbDesign.separatorIcon
+$cg-allprod-heading: "--_ctm-catego-dn-pt-gd-dn-al-ps-hg"; // productGridDesign.allProductsHeading
+$cg-card: "--_ctm-catego-dn-pt-gd-dn-pt-cd"; // productGridDesign.productCard
+$cg-brand: "--_ctm-catego-dn-pt-gd-dn-bd-ne"; // productGridDesign.brandName
+$cg-name: "--_ctm-catego-dn-pt-gd-dn-pt-ne"; // productGridDesign.productName
+$cg-price: "--_ctm-catego-dn-pt-gd-dn-pt-pe"; // productGridDesign.productPrice
+$cg-variants: "--_ctm-catego-dn-pt-gd-dn-vs-tt"; // productGridDesign.variantsText
+// Design-block bases for the section item-gaps.
+$cg-sidebar-design: "--_ctm-catego-dn-sr-dn"; // sidebarDesign (itemGap)
+$cg-scroller-design: "--_ctm-catego-dn-sb-cy-sr-dn"; // subCategoryScrollerDesign (itemGap)
+$cg-grid: "--_ctm-catego-dn-pt-gd-dn"; // productGridDesign (itemGap)
+$cg-main: "--_ctm-catego-dn-mn-sn"; // mainSection (right section container + itemGap)
+$cg-select-btn: "--_ctm-catego-dn-st-bn"; // selectButton (mobile category selector)
+
+@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).
+  font-style: prepareMediaVariable(#{$base}-ft-se-ic);
+  text-align: prepareMediaVariable(#{$base}-tt-an);
+  letter-spacing: prepareMediaVariable(#{$base}-lr-sg);
+  line-height: prepareMediaVariable(#{$base}-le-ht);
+  text-decoration: prepareMediaVariable(#{$base}-ue);
+}
+
+// Container fill / border / radius / shadow for a given state base
+// (e.g. `$cg-tree-dt-se`). Shadow stays invisible until set in the panel.
+@mixin cg-design($base) {
+  background-color: prepareMediaVariable(#{$base}-bd-cr, transparent);
+  border-color: prepareMediaVariable(#{$base}-br-cr, transparent);
+  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);
+}
+
+// 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))
+  );
+  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)
+    );
+}
+
+[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)))
+    );
+
+    &[data-view-state="full"] {
+      & > .wrapper {
+        grid-template-rows: auto !important;
+      }
+    }
+    & > 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))
+        );
+
+        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);
+      }
+    }
+    // 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
+    // (`&.`) to override those — a descendant selector wouldn't match it.
+    &.cg_category_modal_tree {
+      width: 100%;
+      margin: 0;
+      padding: 4px;
+    }
+    // -------------------------------------------------------------------
+    // Fixed two-column layout. Figma tokens are the prepareMediaVariable
+    // fallbacks so the design renders correctly before any panel edits.
+    // -------------------------------------------------------------------
+    .category__groups__element__container {
+      display: flex;
+      // Widget Style → gap between the left sidebar and the right main section.
+      gap: prepareMediaVariable(#{$cg-widget}-im-gp, 36px);
+      align-items: flex-start;
+      width: 100%;
+    }
+
+    // ---- Mobile (fixed layout): the sidebar tree is replaced by a selector
+    // that opens the CategoryTree in a modal; everything stacks vertically.
+    .category__groups__element__container.is-mobile {
+      flex-direction: column;
+      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
+
+      .cg_main {
+        width: 100%;
+      }
+    }
+    .cg_mobile_category_select {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      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
+    // mixins (default + hover), plus the button-specific layout vars.
+    .btn__with__text[data-btn-name="selectButton"] {
+      display: flex;
+      align-items: center;
+      flex-direction: var(--_sf-fd-bn, row);
+      cursor: pointer;
+      width: prepareMediaVariable(#{$cg-select-btn}-dt-se-wh, auto);
+      padding: prepareMediaVariable(#{$cg-select-btn}-dt-se-pg, 8px 12px);
+      gap: prepareMediaVariable(#{$cg-select-btn}-dt-se-gp, 8px);
+      justify-content: prepareMediaVariable(#{$cg-select-btn}-dt-se-at, space-between);
+      @include cg-design(#{$cg-select-btn}-dt-se);
+
+      &[data-icon-position="right"] {
+        --_sf-fd-bn: row-reverse;
+      }
+      &[data-icon-position="left"],
+      &[data-icon-position="center"] {
+        --_sf-fd-bn: row;
+      }
+
+      .txt {
+        // flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        @include cg-font(#{$cg-select-btn}-dt-se, #002a4e, 14px, 400);
+      }
+
+      .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 -------------------------------------------------
+    .cg_sidebar {
+      display: flex;
+      flex-direction: column;
+      // Sidebar Container → gap (heading ↔ tree) + padding.
+      gap: prepareMediaVariable(#{$cg-sidebar}-im-gp, 12px);
+      padding: prepareMediaVariable(#{$cg-sidebar}-pg, 0);
+      width: 260px;
+      flex-shrink: 0;
+      background-color: prepareMediaVariable(#{$cg-sidebar}-bd-cr, transparent);
+      border-color: prepareMediaVariable(#{$cg-sidebar}-br-cr, transparent);
+      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);
+    }
+
+    .cg_sidebar_heading {
+      white-space: nowrap;
+      margin: 0;
+      text-transform: uppercase;
+      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;
+      color: #002a4e;
+      text-transform: uppercase;
+      line-height: 1.25;
+      font-size: 16px;
+    }
+
+    .cg_sidebar_divider,
+    .cg_main_divider {
+      display: block;
+      width: 100%;
+      // Widget Style → Divider (show toggle + colour + thickness).
+      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 {
+        display: none;
+      }
+    }
+
+    .cg_category_tree {
+      display: flex;
+      flex-direction: column;
+      // Gap BETWEEN category rows (Sidebar Container → Category Tree Gap).
+      gap: prepareMediaVariable(#{$cg-sidebar}-cy-te-gp, 8px);
+      width: 100%;
+    }
+
+    .cg_tree_node {
+      display: flex;
+      align-items: center;
+      // Category Tree Item → item gap (icon ↔ label).
+      gap: prepareMediaVariable(#{$cg-tree}-dt-se-im-gp, 4px);
+      // Category Tree Item → Layout padding.
+      padding: prepareMediaVariable(#{$cg-tree}-dt-se-pg, 4px 0);
+      cursor: pointer;
+      @include cg-design(#{$cg-tree}-dt-se);
+    }
+    .cg_tree_node_icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      flex-shrink: 0;
+      // 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);
+    }
+
+    .cg_subtree {
+      display: flex;
+      flex-direction: column;
+      // Gap BETWEEN sub-category rows (Sidebar Container → Sub Category Gap).
+      gap: prepareMediaVariable(#{$cg-sidebar}-sb-cy-gp, 8px);
+      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);
+    }
+
+    // ---- Right main ---------------------------------------------------
+    // mainSection: container fill/border + gap between heading, breadcrumb,
+    // sub-categories and the product grid.
+    .cg_main {
+      display: flex;
+      flex-direction: column;
+      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
+      padding: prepareMediaVariable(#{$cg-main}-pg, 0);
+      flex: 1 0 0;
+      min-width: 0;
+      @include cg-design($cg-main);
+    }
+
+    // Drill-down breadcrumb (reuses the Breadcrumbs element DOM classes), styled
+    // from the breadcrumbDesign panel: breadcrumbItem (default/hover/selected) +
+    // separatorIcon. Selected state = the current (last) crumb.
+    .cg_breadcrumb {
+      width: 100%;
+      .horizontal_breadcrumb_wrapper {
+        display: inline-flex;
+        align-items: center;
+        width: 100%;
+        // flex-wrap: wrap;
+        overflow-x: auto;
+        gap: 6px;
+      }
+      .breadcrumb_item {
+        padding: 0 4px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        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;
+        align-items: center;
+        padding: 0 4px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        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);
+          }
+        }
+      }
+    }
+
+    // Breadcrumb (top) + chip row (bottom) stack vertically.
+    .cg_subcategory_scroller {
+      display: flex;
+      flex-direction: column;
+      align-items: stretch;
+      // Same gap as the main section so breadcrumb ↔ sub-categories spacing
+      // follows the Main Section item gap.
+      gap: prepareMediaVariable(#{$cg-main}-im-gp, 12px);
+      width: 100%;
+    }
+    // The horizontal chip row: left arrow + scrolling rail + right arrow.
+    .cg_subcategory_row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      width: 100%;
+    }
+    .cg_subcategory_divider {
+      width: 100%;
+      // Widget Style → Divider (colour + thickness), same as the other dividers.
+      height: prepareMediaVariable(#{$cg-widget}-dr-wh, 1px);
+      background: prepareMediaVariable(#{$cg-widget}-dr-cr, #cbd5e1);
+      flex-shrink: 0;
+    }
+    .cg_scroller_arrow {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: prepareMediaVariable(#{$cg-arrow}-dt-se-pg, 0);
+      cursor: pointer;
+      flex-shrink: 0;
+      // Default state: fill / border / radius / shadow.
+      @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)
+        );
+      }
+    }
+    .cg_chip_rail {
+      display: flex;
+      align-items: center;
+      gap: prepareMediaVariable(#{$cg-scroller-design}-im-gp, 16px);
+      flex: 1 0 0;
+      min-width: 0;
+      overflow-x: auto;
+      scrollbar-width: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+    .cg_chip {
+      display: flex;
+      align-items: center;
+      // Spacing between the chip image and its label (Sub Category Chip item gap).
+      gap: prepareMediaVariable(#{$cg-chip}-dt-se-im-gp, 8px);
+      cursor: pointer;
+      flex-shrink: 0;
+      padding: 0;
+      @include cg-design(#{$cg-chip}-dt-se);
+    }
+    .cg_chip_icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: prepareMediaVariable(#{$cg-chip-image}-wh, 36px);
+      height: prepareMediaVariable(#{$cg-chip-image}-ht, 36px);
+      padding: prepareMediaVariable(#{$cg-chip-image}-pg, 0);
+      flex-shrink: 0;
+      overflow: hidden;
+      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);
+    }
+
+    // ---- Product grid -------------------------------------------------
+    // Container box only. Display modes (grid / cards / slider) + gaps live in
+    // category-groups-product-grid.scss (imported below).
+    .cg_product_grid {
+      width: 100%;
+      position: relative;
+      padding: prepareMediaVariable(#{$cg-grid}-lt-pg, 0);
+      // 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;
+      gap: prepareMediaVariable(#{$cg-card}-dt-se-im-gp, 16px);
+      padding: prepareMediaVariable(#{$cg-card}-dt-se-pg, 0);
+      position: relative;
+      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%;
+      overflow: hidden;
+
+      // Gallery / zoom / thumbnail styling for the embedded ProductImageContent,
+      // 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;
+      width: 100%;
+      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;
+      align-items: center;
+      gap: 6px;
+      @include cg-font($cg-price, #000, 16px, 800);
+    }
+    .cg_variants_text {
+      margin: 0;
+      @include cg-font($cg-variants, #737373, 14px, 400);
+    }
+
+    @import "./category-groups-product-options.scss";
+
+    // Price styling for the embedded ProductPriceContent, rebound to the Category
+    // Groups productPrice CSS-variable paths.
+    @import "./category-groups-product-price.scss";
+
+    // Quota details styling for the embedded QuotaDetailsContent, rebound to the
+    // Category Groups quotaDetails CSS-variable paths.
+    @import "./category-groups-quota-details.scss";
+
+    .loading_view {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}