@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;
    }
  }
}