.product-page-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.product-tree {
  * {
    transition: all 0.5s;
  }

  .product-tree-title {
    padding: 18px 20px;
    font-size: 25px;
    font-weight: 700;
    color: #1e1e8c;
  }

  .product-tree-list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fbfbfb;

    /* Initally hide the subcategories */
    .product-tree-list {
      display: none;
    }

    /* Show subcategories if parent is open */
    .product-tree-item.is-open>.product-tree-list {
      display: block;
    }
  }

  >nav>.product-tree-list {
    padding: 15px;

    /* 1st layer category */
    >.product-tree-item>.product-tree-row>.product-tree-toggle {
      background-color: #848484;
      color: white;

      &:hover {
        background-color: #1e118c;
      }
    }

    >.product-tree-item:not(:last-child) {
      margin-bottom: 15px;
    }

    /* 2nd layer category */
    .product-tree-list>.product-tree-item>.product-tree-row {

      >.product-tree-toggle,
      >.product-tree-link {
        background-color: white;

        &:hover {
          color: #1e118c;
        }
      }
    }

    .product-tree-list>.product-tree-item.is-open>.product-tree-row>.product-tree-toggle {
      color: #1e118c;
    }

    /* 3rd layer category */
    .product-tree-list .product-tree-list>.product-tree-item>.product-tree-row {

      >.product-tree-toggle,
      >.product-tree-link {
        background-color: #f4f4f4;
        font-weight: 400;

        &:hover {
          color: #1e118c;
        }
      }
    }
  }

  .product-tree-row {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .product-tree-item {

    .product-tree-toggle,
    .product-tree-placeholder,
    .product-tree-link {
      width: 42px;
      min-width: 42px;
      min-height: 44px;
      font-size: 16px;
      line-height: normal;
      font-weight: 700;

      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .product-tree-toggle {
      width: 100%;
      padding: 15px 20px;
      border: 0;
      background: transparent;
      cursor: pointer;
      position: relative;

      &:focus {
        outline: none;
      }

      &::after {
        content: "\f078";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
      }
    }


    .product-tree-link {
      flex: 1;
      padding: 15px 20px;
      color: #333333;
      text-decoration: none;
    }
  }
}